health-front/pages_order/product/productCustomView.vue

<template>
  <view>
    <view class="tabs">
      <uv-tabs 
        :list="tabs"
        :activeStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 600,
          'font-size': '28rpx',
          'line-height': 1.5,
          'color': '#FFFFFF',
          'background-color': '#252545',
          'border-radius': '32rpx',
          'padding': '9rpx 40rpx',
        }" 
        :inactiveStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 400,
          'font-size': '28rpx',
          'line-height': 1.5,
          'color': '#252545',
          'background-color': '#E5E4EB',
          'border-radius': '32rpx',
          'padding': '9rpx 40rpx',
        }" 
        lineWidth="0"
        lineHeight="0"
        :current="level1"
        @change="onLevel1TabChange"
      ></uv-tabs>
      <view v-if="tabs[level1] && tabs[level1].children && tabs[level1].children.length"
        class="tabs-second"
      >
        <uv-tabs 
          :list="tabs[level1].children"
          :activeStyle="{
            'font-family': 'PingFang SC',
            'font-weight': 600,
            'font-size': '28rpx',
            'line-height': 1.5,
            'color': '#7451DE',
          }" 
          :inactiveStyle="{
            'font-family': 'PingFang SC',
            'font-weight': 400,
            'font-size': '28rpx',
            'line-height': 1.5,
            'color': '#252545',
          }" 
          lineWidth="0"
          lineHeight="0"
          :current="level2"
          @change="onLevel2TabChange"
        ></uv-tabs>
      </view>
    </view>
    <view v-if="list.length" class="content">
      <view v-for="item in list" :key="item.id" style="min-width: 0;">
        <productCard 
          :data="item"
          cardStyle="width: 100%; height: 210px;"
          imgStyle="width: 100%; height: 110px;"
        ></productCard>
      </view>
    </view>
    <template v-else>
      <uv-empty mode="list"></uv-empty>
    </template>
  </view>
</template>

<script>
  import productCard from '@/pages_order/product/productCard.vue'

  export default {
		components: {
      productCard,
    },
    props: {
      type: {
        type: Number,
        default: 0,
      },
      list: {
        type: Array,
        default() {
          return []
        }
      },
    },
    data() {
      return {
        tabs: [],
        level1: 0,
        level2: null,
      }
    },
    mounted() {

      this.fetchCategory()
    },
    methods: {
      async fetchCategory() {
        try {
          let result = await this.$fetch('getProductCategory', { type: this.type }) // type: 产品类型（0营养剂，1预约，2课程）

          this.tabs = result.reduce((arr, item) => {
            const { id, name, child } = item

            let obj = { id, name, children: child }

            arr.push(obj) 

            return arr
          }, [{ name: '全部' }])
        } catch (err) {

        }
      },
      onLevel1TabChange(e) {
        console.log('level1', e.index)
        this.level1 = e.index
        if (this.tabs[this.level1].children?.length) {
          this.level2 = 0
          this.$emit('categoryChange', { classId: this.tabs[this.level1].children[this.level2].id })
        } else {
          this.level2 = null
          this.$emit('categoryChange', { classId: this.tabs[this.level1].id })
        }
      },
      onLevel2TabChange(e) {
        console.log('level2', e.index)
        this.level2 = e.index
        this.$emit('categoryChange', { classId: this.tabs[this.level1].children[this.level2].id })
      },
    },
  }
</script>

<style scoped lang="scss">
.tabs {
  margin: 0 5px;

  &-second {
    margin: 0 11px;
    padding-left: 9px;
    background: #E5E4EB;
    border-radius: 16rpx;
  }
}

.content {
  padding: 24rpx 32rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;
}
</style>