health-front/pages/index/product.vue

<template>
	<view class="page__view">

		<navbar bgColor="#FFFFFF" >
      <view>
        <uv-tabs 
          :current="current"
          :list="tabs"
          :activeStyle="{
            'font-family': 'PingFang SC',
            'font-weight': 600,
            'font-size': '40rpx',
            'line-height': 1.2,
            'color': '#252545',
          }" 
          :inactiveStyle="{
            'font-family': 'PingFang SC',
            'font-weight': 400,
            'font-size': '32rpx',
            'line-height': 1.5,
            'color': '#A8A8A8',
          }" 
          lineWidth="22rpx"
          lineHeight="4rpx"
          lineColor="#252545"
          @change="onTabChange"
        ></uv-tabs>
      </view>
		</navbar>

    <!-- 营养素 -->
    <tab-nutrient v-if="current == 0">
      <template #custom>
        <product-custom-view :type="0" :list="list" @categoryChange="onCategoryChange"></product-custom-view>
      </template>
    </tab-nutrient>
    <!-- 检测 -->
    <tab-detect v-else-if="current == 1">
      <template #custom>
        <product-custom-view :type="1" :list="list" @categoryChange="onCategoryChange"></product-custom-view>
      </template>
    </tab-detect>
    <!-- 课程 -->
    <tab-course v-else-if="current == 2">
      <!-- <template #custom>
        <product-custom-view :type="2" :list="list" @categoryChange="onCategoryChange"></product-custom-view>
      </template> -->
    </tab-course>

		<tabber select="product" />

  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

	import tabber from '@/components/base/tabbar.vue'
  import tabNutrient from '@/pages_order/product/tabNutrient/index.vue'
  import tabDetect from '@/pages_order/product/tabDetect/index.vue'
  import tabCourse from '@/pages_order/product/tabCourse/index.vue'
  import productCustomView from '@/pages_order/product/productCustomView.vue'

  export default {
		mixins: [mixinsList],
		components: {
      tabNutrient,
      tabDetect,
      tabCourse,
      productCustomView,
      tabber,
    },
    data() {
      return {
        tabs: [
          { name: '营养素' },
          { name: '检测' },
          { name: '课程' },
        ],
        current: 0,
				mixinsListApi: 'getProductList',
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          type: 0, // 产品类型（0营养剂，1预约，2课程）
        },
      }
    },
		onLoad() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
			}
		},
    methods: {
      onTabChange(e) {
        console.log('current', e.index)
        this.current = e.index

        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
        this.queryParams.type = this.current
        this.getData()
      },
      onCategoryChange(e) {
        const { classId } = e || {}

        if (classId) {
          this.queryParams.classId = classId
        } else {
          delete this.queryParams.classId
        }
        
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
        this.getData()

      },
    },
  }
</script>

<style scoped lang="scss">
	.page__view {
		width: 100vw;
		min-height: 100vh;
    background-image: linear-gradient(#EAE5FF, #F3F2F7, #F3F2F7);
		position: relative;

    /deep/ .uv-tabs__wrapper__nav__line {
      border-radius: 2rpx;
    }
    
	}

</style>