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"
        @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"
          @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()

      return

			this.list = [
        {
          id: '001',
					url: '/pages_order/static/index/recommend-pic.png', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '002',
					url: '/pages_order/static/index/recommend-pic.png', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '003',
					url: '/pages_order/static/index/recommend-pic.png', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
			]

      let children = [
        { name: '草本类' },
        { name: '蔬菜类' },
        { name: '维生素类' },
        { name: '草本类' },
        { name: '蔬菜类' },
      ]

      this.tabs = [
        { name: '全部' },
        { name: '皮肤', children, },
        { name: '身材管理', children, },
        { name: '精力', children, },
      ]
    },
    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 } = item

            // todo: check children?
            let obj = { id, name }

            arr.push(obj) 

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

        }
      },
      onLevel1TabChange(e) {
        console.log('level1', e.index)
        this.level1 = e.index
        this.level2 = this.tabs[this.level1].children?.length ? 0 : null
        this.$emit('categoryChange', { classId: this.tabs[this.level1].id })
      },
      onLevel2TabChange(e) {
        console.log('level2', e.index)
        this.level2 = e.index
        // todo
      },
    },
  }
</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>