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"
        @change="onTabChange"
      ></uv-tabs>
    </view>
    <view v-if="list.length" class="content">
      <view v-for="item in list" :key="item.id">
        <productCard 
          :data="item"
        ></productCard>
      </view>
    </view>
    <template v-else>
      <uv-empty mode="list"></uv-empty>
    </template>
  </view>
</template>

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

  export default {
		components: {
      productCard,
    },
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
    },
    data() {
      return {
        tabs: [],
        current: null,
      }
    },
    created() {
      this.fetchCategory()
    },
    methods: {
      fetchCategory() {
        // todo: fetch

        this.tabs = [
          { name: '全部' },
          // todo: jump to detail
          { id: '001', name: '草原运动会' },
          { id: '002', name: '我的韶山行' },
          { id: '003', name: '出境游' },
        ]
      },
      onTabChange(e) {
        console.log('onTabChange', e.index)
        this.current = e.index
        // todo: jump to detail
        // this.$emit('categoryChange', { classId: this.tabs[this.current].id })
      },
    },
  }
</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>