studytour-front/components/home/productView.vue

<template>
  
  <view>
    <view class="tabs">
      <uv-tabs 
        :list="tabs"
        :activeStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 500,
          'font-size': '28rpx',
          'line-height': 1.5,
          'color': '#FFFFFF',
          'background-color': '#191919',
          'border-radius': '34rpx',
          'padding': '12rpx 32rpx',
        }" 
        :inactiveStyle="{
          'font-family': 'PingFang SC',
          'font-weight': 400,
          'font-size': '28rpx',
          'line-height': 1.5,
          'color': '#191919',
          'background-color': '#E4E7EB',
          'border-radius': '34rpx',
          'padding': '12rpx 32rpx',
        }" 
        lineWidth="0"
        lineHeight="0"
        :current="current"
        @click="onClickTab"
      ></uv-tabs>
    </view>
    <view v-if="list.length" class="content">
      <view v-for="item in list" :key="item.id">
        <productCard 
          :data="item"
          size="small"
        ></productCard>
      </view>
    </view>
    <template v-else>
      <uv-empty mode="list"></uv-empty>
    </template>
  </view>
</template>

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

  export default {
		components: {
      productCard,
    },
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
    },
    data() {
      return {
        tabs: [],
        current: 0,
      }
    },
    created() {
      this.fetchRecommend()
    },
    methods: {
      fetchRecommend() {
        // todo: fetch
        this.tabs = [
          { name: '全部' },
          { id: '1962342791093227522', name: '研学活动一', disabled: true, },
        ]
      },
      onClickTab(e) {
        this.current = 0
        const index = e.index

        if (index > 0) {
          this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.tabs[e.index].id}`)
        }

        this.$nextTick(() => {
          this.current = 0
        })

        setTimeout(() => {
          this.current = 0
        }, 800)
      },
    },
  }
</script>

<style scoped lang="scss">
  .tabs {
    width: calc(100% + 22px);
    transform: translateX(-11px);
  }

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