fix(cl-tabbar): 修复导航栏高亮问题

components/cl-tabbar.vue

@@ -2,7 +2,6 @@
   <view>
     <u-tabbar
       :value="current ? current : 0"
-      @change="tabbarChange"
       :fixed="true"
       :placeholder="false"
       :border="false"
@@ -10,7 +9,7 @@
       inactiveColor="#666666"
       activeColor="#333333"
     >
-      <u-tabbar-item :text="'首页'">
+      <u-tabbar-item name="index" @click="handleClick" :text="'首页'">
         <image
           class="u-page__item__slot-icon"
           slot="active-icon"
@@ -23,7 +22,12 @@
         ></image>
       </u-tabbar-item>
 
-      <u-tabbar-item v-if="!newShareMember" :text="'个人推广'">
+      <u-tabbar-item
+        @click="handleClick"
+        v-if="!newShareMember"
+        :text="'个人推广'"
+        name="share"
+      >
         <image
           class="u-page__item__slot-icon"
           slot="active-icon"
@@ -36,7 +40,12 @@
         ></image>
       </u-tabbar-item>
 
-      <u-tabbar-item :text="'购物车'" :badge="shopCarLength">
+      <u-tabbar-item
+        @click="handleClick"
+        :text="'购物车'"
+        :badge="shopCarLength"
+        name="shoppingCar"
+      >
         <image
           class="u-page__item__slot-icon"
           slot="active-icon"
@@ -49,7 +58,7 @@
         ></image>
       </u-tabbar-item>
 
-      <u-tabbar-item :text="'我的'">
+      <u-tabbar-item @click="handleClick" :text="'我的'" name="mine">
         <image
           class="u-page__item__slot-icon"
           slot="active-icon"
@@ -69,29 +78,34 @@
 import { mapGetters } from 'vuex'
 export default {
   props: {
-    current: Number,
+    current: String,
   },
   data() {
     return {
       newShareMember: false,
+      currentTab: 0,
       list: [
         {
           text: '首页',
           path: 'pages/index/index',
+          name: 'index',
         },
         {
           text: '个人推广',
           path: 'pages/mine/share/index',
+          name: 'share',
         },
 
         {
           text: '购物车',
           path: 'pages/shoppingCar/index',
+          name: 'shoppingCar',
         },
 
         {
           text: '我的',
           path: 'pages/mine/index',
+          name: 'mine',
         },
       ],
     }
@@ -104,6 +118,9 @@ export default {
   },
   mounted() {
     this.newShareMember = uni.getStorageSync('User')?.loginType !== 0
+    if (this.newShareMember) {
+      this.list.splice(1, 1)
+    }
   },
   methods: {
     tabbarChange(e) {
@@ -111,6 +128,15 @@ export default {
         url: '/' + this.list[e].path,
       })
     },
+    handleClick(tab) {
+      const index = this.list.findIndex(item => item.name === tab)
+      if (index === -1) {
+        return
+      }
+      uni.switchTab({
+        url: '/' + this.list[index].path,
+      })
+    },
   },
 }
 </script>

components/share/DefaultSharePage.vue

@@ -93,7 +93,7 @@ export default {
         return
       }
 
-      uni.showLoading({ title: '加载中...' })
+      uni.showLoading({ title: '加载中...', mask: true })
 
       try {
         this.shareButtonShow = false

pages/index/index.vue

@@ -51,7 +51,7 @@
         </view>
         <GoodsList v-else />
       </view>
-      <cl-tabbar :current="0"></cl-tabbar>
+      <cl-tabbar current="index"></cl-tabbar>
       <div>
         <!-- 公告弹窗 -->
         <notice-popup

pages/mine/index.vue

@@ -314,7 +314,7 @@
         :text="'退出登录'"
       ></u-button>
     </view>
-    <cl-tabbar :current="3"></cl-tabbar>
+    <cl-tabbar current="mine"></cl-tabbar>
     <u-popup
       :show="pswShow"
       class="pspopup"

pages/mine/share/index.vue

@@ -39,7 +39,7 @@
         />
       </view>
     </view>
-    <cl-tabbar class="tabbar" :current="1" />
+    <cl-tabbar class="tabbar" current="share" />
   </view>
 </template>
 

pages/shoppingCar/index.vue

@@ -133,7 +133,7 @@
         </view>
       </view>
     </view>
-    <cl-tabbar :current="2"></cl-tabbar>
+    <cl-tabbar current="shoppingCar"></cl-tabbar>
     <view class="pp">
       <u-popup
         :show="dialogVisible2"