refactor: 更新u-tabs组件使用方式及样式调整

pages/product/goods.vue

@@ -461,34 +461,7 @@ export default {
     },
   },
   mounted () {
-    const { windowHeight } = uni.getSystemInfoSync();
-    let bottomHeight = 0;
-    let topHeight = 0;
-    uni.getSystemInfo({
-      success: function (res) {
-        // res - 各种参数
-        let bottom = uni.createSelectorQuery().select(".page-bottom");
-        bottom
-          .boundingClientRect(function (data) {
-            if (data && data.height) {
-              //data - 各种参数
-              bottomHeight = data.height; // 获取元素宽度
-            }
-          })
-          .exec();
-        let top = uni.createSelectorQuery().select(".header");
-        top
-          .boundingClientRect(function (data) {
-            if (data && data.height) {
-              //data - 各种参数
-              topHeight = data.height; // 获取元素宽度
-            }
-          })
-          .exec();
-      },
-    });
-
-    this.productRefHeight = windowHeight - bottomHeight + "px";
+    this.calcProductHeight();
   },
   async onLoad (options) {
     this.routerVal = options;
@@ -516,6 +489,19 @@ export default {
   },
 
   methods: {
+    calcProductHeight () {
+      this.$nextTick(() => {
+        const { windowHeight } = uni.getWindowInfo();
+        uni.createSelectorQuery()
+          .in(this)
+          .select('#pageBottom')
+          .boundingClientRect((data) => {
+            const bottomHeight = data && data.height ? data.height : 0;
+            this.productRefHeight = `${windowHeight - bottomHeight}px`;
+          })
+          .exec();
+      });
+    },
     // 重新打开下架
     reStartTakeDownSale(){
       this.$refs.takeDownSale.show = true

pages/product/shopPage.vue

@@ -82,7 +82,13 @@
 
       <!-- 基础店铺模式 -->
       <div v-if="basePageData">
-        <u-tabs :list="tabs" :active-color="mainColor" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
+        <u-tabs
+          :list="tabs"
+          :lineColor="mainColor"
+          :activeStyle="{ color: mainColor }"
+          :scrollable="false"
+          v-model:current="current"
+        ></u-tabs>
         <div class="content" v-if="current == 0">
           <u-empty style='margin-top:100rpx' v-if="goodsList.length == 0" class="empty" text='暂无商品信息'></u-empty>
           <goodsTemplate style="width:100%;" v-else :res="goodsList" :storeName="false" />
@@ -396,11 +402,6 @@ export default {
       });
     },
 
-    /** 点击tab */
-    changeTab(index) {
-      this.current = index;
-    },
-
     /**
      * 店铺信息
      */