tabbar bug修复

components/tabbar/tabbar.vue

@@ -1,10 +1,24 @@
 <template>
-	<uv-tabbar fixed :value="selected" @change="change1" activeColor="#FF4767 " :placeholder="false"
+    <uv-tabbar
-		:safeAreaInsetBottom="false" :customStyle="{height:`110rpx`}">
+        v-if="tabbarReady"
-		<!-- <uv-tabbar-item v-for="(item,index) in $store.state.tabbarList" :key="index" :text="item.text" -->
+        :key="refreshKey"
-		<uv-tabbar-item v-for="(item,index) in tabbarList" :key="index" :text="item.text"
+        fixed
-			:badge="getNum(index)"
+        :value="currentTabIndex"
-			:customStyle="{height:`110rpx`}">
+        @change="onTabChange"
+        activeColor="#FF4767"
+        :placeholder="false"
+        :safeAreaInsetBottom="false"
+        :customStyle="{height:'110rpx'}"
+    >
+        <uv-tabbar-item
+            v-for="(item, idx) in tabbarList"
+            :key="idx"
+            :name="idx"
+            :text="item.text"
+            :badge="getNum(idx)"
+            :customStyle="{height:'110rpx'}"
+            @click="onItemClick(idx)"
+        >
             <template v-slot:active-icon>
                 <image class="icon" :src="item.selectedIconPath"></image>
             </template>
@@ -16,108 +30,146 @@
 </template>
 
 <script>
+import { mapState, mapMutations } from 'vuex';
 import request from "@/utils/request";
+
 export default {
     name: "tab-bar",
-		props: {
+    // 不再需要 props.selected，完全由 Vuex 控制高亮
-			selected: {
-				type: [Number, String]
-			}
-		},
     data() {
         return {
-				tabbarList: [{
+            refreshKey: 0,          // 强制重建标识
-						"iconPath": "/static/images/tabbar/new_home_gray.png",
+            tabbarReady: false,     // 组件就绪标识
-						"text": "首页",
+            tabbarList: [           // tab 配置
-						"selectedIconPath": "/static/images/tabbar/new_home.png",
+                {
-						"pagePath": "/pages/home/home"
+                    iconPath: "/static/images/tabbar/new_home_gray.png",
+                    text: "首页",
+                    selectedIconPath: "/static/images/tabbar/new_home.png",
+                    pagePath: "/pages/home/home"
                 },
                 {
-                        "iconPath": "/static/images/tabbar/new_order_gray.png",
+                    iconPath: "/static/images/tabbar/new_order_gray.png",
-                        "text": "订单",
+                    text: "订单",
-                        "selectedIconPath": "/static/images/tabbar/new_order.png",
+                    selectedIconPath: "/static/images/tabbar/new_order.png",
-                        "pagePath": "/pages/order/all-orders"
+                    pagePath: "/pages/order/all-orders"
                 },
                 {
-						"iconPath": "/static/images/tabbar/new_message_gray.png",
+                    iconPath: "/static/images/tabbar/new_message_gray.png",
-						"text": "消息",
+                    text: "消息",
-						"selectedIconPath": "/static/images/tabbar/new_message.png",
+                    selectedIconPath: "/static/images/tabbar/new_message.png",
-						"pagePath": "/pages/message/message"
+                    pagePath: "/pages/message/message"
                 },
                 {
-						"iconPath": "/static/images/tabbar/new_my_gray.png",
+                    iconPath: "/static/images/tabbar/new_my_gray.png",
-						"text": "我的",
+                    text: "我的",
-						"selectedIconPath": "/static/images/tabbar/new_my.png",
+                    selectedIconPath: "/static/images/tabbar/new_my.png",
-						"pagePath": "/pages/my/my"
+                    pagePath: "/pages/my/my"
                 }
             ]
         };
     },
     computed: {
-			messageNum() {
+        // 从 Vuex 获取全局高亮索引
-				return this.$store.state.messageNum || 0
+        ...mapState(['currentTabIndex', 'messageNum'])
+    },
+    watch: {
+        // 当 tabbarList 内容变化（如异步更新图标）时，强制重建组件
+        tabbarList: {
+            deep: true,
+            handler() {
+                this.rebuildTabbar();
+            }
         }
     },
-		async created() {
+    created() {
-			// if (!this.$store.state.tabbarList.length) {
+        // 初始化时延迟显示，避免闪烁
-			// 	let isnNetwork = uni.getStorageSync("isnNetwork");
+        this.tabbarReady = false;
-			// 	if (isnNetwork) {
+        this.$nextTick(() => {
-			// 		await this.getButtonImg()
+            this.tabbarReady = true;
-			// 	} else {
+            // 如果需要异步加载图标，取消下面注释
-			// 		uni.getNetworkType({
+            // this.getButtonImg();
-			// 			success: (res) => {
+        });
-			// 				console.log(res.networkType);
-			// 				if (res.networkType == "none") {
-
-			// 					this.$store.commit("setTabbarList", this.tabbarList)
-			// 				} else {
-			// 					// 页面加载逻辑
-			// 					uni.setStorageSync("isnNetwork", 1);
-			// 					this.getButtonImg()
-			// 				}
-			// 			},
-			// 		});
-			// 	}
-
-			// }
-
     },
     methods: {
+        ...mapMutations(['SET_CURRENT_TAB_INDEX']),
+
+        // 设置全局选中索引（简化调用）
+        setCurrentTabIndex(index) {
+            this.SET_CURRENT_TAB_INDEX(index);
+        },
+
+        // 强制重建 uv-tabbar（用于异步更新图标后）
+        rebuildTabbar() {
+            this.tabbarReady = false;
+            this.$nextTick(() => {
+                this.refreshKey++;
+                this.tabbarReady = true;
+            });
+        },
+
+        // 获取角标数字（只有消息 tab 且数量 > 0 才显示）
         getNum(index) {
-				if (index == 2) {
+            if (index === 2 && this.messageNum > 0) {
-					return this.messageNum
+                return this.messageNum;
-				} else {
-					return 0
             }
+            return null;
         },
-			//获取头部背景图片
+
+        // 异步更新图标（保留你的业务逻辑）
         async getButtonImg() {
+            try {
                 let res = await request.post("/sj/poster/getButtonImg", {});
-				if (res.code == 200) {
+                if (res.code === 200) {
-					// if (res.data?.photo) {
-					// 	this.topBgImage = res.data?.photo + '?time=666'
-					// }
                     this.tabbarList.forEach((item, index) => {
-						if (res.data[index].iconPath) {
+                        if (res.data[index]?.iconPath) {
-							item.iconPath = res.data[index].iconPath
+                            item.iconPath = res.data[index].iconPath;
                         }
-						if (res.data[index].selectedIconPath) {
+                        if (res.data[index]?.selectedIconPath) {
-							item.selectedIconPath = res.data[index].selectedIconPath
+                            item.selectedIconPath = res.data[index].selectedIconPath;
                         }
-					})
+                    });
+                    this.$store.commit("setTabbarList", this.tabbarList);
+                    // 图标更新后，强制重建组件
+                    this.rebuildTabbar();
+                }
+            } catch (err) {
+                console.error('getButtonImg 请求失败', err);
             }
-				this.$store.commit("setTabbarList", this.tabbarList)
         },
-			change1(val) {
+
-				// 因为在pages中配置了需要跳转的页面为 tabbar页面 
+        // uv-tabbar 的 change 事件（组件内部触发）
-				// 所以不能使用navigateTo 只能使用下面这个方法跳转。
+        onTabChange(val) {
+            const idx = parseInt(val, 10);
+            this.doJump(idx);
+        },
+
+        // 手动点击 item 时触发
+        onItemClick(idx) {
+            this.doJump(idx);
+        },
+
+        // 实际跳转逻辑 + 更新全局高亮
+        doJump(index) {
+            const idx = parseInt(index, 10);
+            if (isNaN(idx) || !this.tabbarList[idx]) return;
+
+            // 先更新全局高亮（立即生效）
+            this.setCurrentTabIndex(idx);
+
+            // 跳转页面
+            const targetPage = this.tabbarList[idx].pagePath;
             uni.switchTab({
-					url: this.tabbarList[val].pagePath
+                url: targetPage,
-				})
+                fail: (err) => console.error('switchTab 失败', err)
-				this.messageUpudateNum()
+            });
+
+            // 保留你原有的消息更新方法
+            if (typeof this.messageUpudateNum === 'function') {
+                this.messageUpudateNum();
             }
         }
     }
+};
 </script>
 
 <style lang="scss">

store/index.js

@@ -7,6 +7,9 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
 	state: {
 		messageNum: 0,                 // 底部消息数量
+		// ========== 新增：全局当前选中的 tab 索引 ==========
+		currentTabIndex: 0,            // 用于自定义 tabbar 高亮
+		// ============================================
 		sjServiceList: {},             // 商家分配手艺人时服务数据shop/staff
 		tabbarList: [],                // 底部设置
 		reservationTime: {},           // 预约时刻信息
@@ -14,32 +17,32 @@ const store = new Vuex.Store({
 		reservationAddress: {},        // 预约地址信息
 		selectStore: {},               // 选择的门店信息
 		wxShareType: 0,                // 正式版:0，测试版:1，体验版:2
-		//公共的变量，这里的变量不能随便修改，只能通过触发mutations的方法才能改变
 		searchCity: {
 			center: "117.330043,38.372266",
 			name: "黄骅",
 		},
-		systemInfo: uni.getSystemInfoSync(), //设备信息
+		systemInfo: uni.getSystemInfoSync(),
-		//是否有定位权限
 		isLocation: false,
-		//路由
 		baseUrl: "",
-		//手机和app信息
 		version: {
 			VersionCode: "",
 			DeviceBrand: "",
 			DeviceType: "",
 		},
-		//商家信息
 		sjInfo: {},
-		workSpaceSJClassList: [], //商家工位分类列表
+		workSpaceSJClassList: [],
-		workHourSJClassList: [], //商家工时分类列表
+		workHourSJClassList: [],
 	},
 	mutations: {
 		// 写入底部消息数量
 		setMessageNum(state, newval) {
 			state.messageNum = newval;
 		},
+		// ========== 新增：设置全局当前选中 tab 索引 ==========
+		SET_CURRENT_TAB_INDEX(state, index) {
+			state.currentTabIndex = index;
+		},
+		// ==============================================
 		clearServiceState(state) {
 			state.reservationTime = {};
 			state.reservationSyr = {};