education-front/pages_order/serve/category.vue

<template>
  <view class="page__view">

		<!-- 导航栏 -->
		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" />

    <view class="list">
      <view class="list-item"
        v-for="item in secondCategoryList" 
        :key="item.id"
        @click="jumpToList(item.id, item.title)"
      >
        <image class="list-item-bg" :src="item.image" mode="scaleToFill"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pid: null,
        title: null,
        bannerList: [],
        secondCategoryList: [],
      }
    },
    onLoad(arg) {

      const { pid, title } = arg

      this.pid = pid
      this.title = title

      this.getData()
    },
    methods: {
      async getData() {
        try {
          this.secondCategoryList = (await this.$fetch('queryCategoryServiceModuleList', { pid: this.pid, pageNo: 1, pageSize: 1000 }))?.records
        } catch (err) {

        }
      },
      jumpToList(categoryId, title) {
        uni.navigateTo({
					url: `/pages_order/serve/search?categoryId=${categoryId}&title=${title}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">

  .list {
    margin: 0 18rpx;

    &-item {
      position: relative;
      font-size: 0;
      border-radius: 25rpx;
      overflow: hidden;
      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);

      & + & {
        margin-top: 32rpx;
      }

      &-bg {
        $w: calc(100vw - 18rpx*2);
        width: $w;
        height: calc(#{$w} * 179 / 714);
      }

    }
  }

</style>