From 1d611bee0bc3a285971e82eb5830e3f07984fa48 Mon Sep 17 00:00:00 2001
From: BAKEYi <16298417+bakeyi@user.noreply.gitee.com>
Date: Wed, 27 May 2026 15:45:10 +0800
Subject: [PATCH] =?UTF-8?q?tabbar=20bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/tabbar/tabbar.vue | 292 +++++++++++++++++++++--------------
 store/index.js               |  37 +++--
 2 files changed, 192 insertions(+), 137 deletions(-)

diff --git a/components/tabbar/tabbar.vue b/components/tabbar/tabbar.vue
index 2cbb408..1f9f3aa 100644
--- a/components/tabbar/tabbar.vue
+++ b/components/tabbar/tabbar.vue
@@ -1,131 +1,183 @@
 <template>
-	<uv-tabbar fixed :value="selected" @change="change1" activeColor="#FF4767 " :placeholder="false"
-		:safeAreaInsetBottom="false" :customStyle="{height:`110rpx`}">
-		<!-- <uv-tabbar-item v-for="(item,index) in $store.state.tabbarList" :key="index" :text="item.text" -->
-		<uv-tabbar-item v-for="(item,index) in tabbarList" :key="index" :text="item.text"
-			:badge="getNum(index)"
-			:customStyle="{height:`110rpx`}">
-			<template v-slot:active-icon>
-				<image class="icon" :src="item.selectedIconPath"></image>
-			</template>
-			<template v-slot:inactive-icon>
-				<image class="icon" :src="item.iconPath"></image>
-			</template>
-		</uv-tabbar-item>
-	</uv-tabbar>
+    <uv-tabbar
+        v-if="tabbarReady"
+        :key="refreshKey"
+        fixed
+        :value="currentTabIndex"
+        @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>
+            <template v-slot:inactive-icon>
+                <image class="icon" :src="item.iconPath"></image>
+            </template>
+        </uv-tabbar-item>
+    </uv-tabbar>
 </template>
 
 <script>
-	import request from "@/utils/request";
-	export default {
-		name: "tab-bar",
-		props: {
-			selected: {
-				type: [Number, String]
-			}
-		},
-		data() {
-			return {
-				tabbarList: [{
-						"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",
-                        "text": "订单",
-                        "selectedIconPath": "/static/images/tabbar/new_order.png",
-                        "pagePath": "/pages/order/all-orders"
-                    },
-					{
-						"iconPath": "/static/images/tabbar/new_message_gray.png",
-						"text": "消息",
-						"selectedIconPath": "/static/images/tabbar/new_message.png",
-						"pagePath": "/pages/message/message"
-					},
-					{
-						"iconPath": "/static/images/tabbar/new_my_gray.png",
-						"text": "我的",
-						"selectedIconPath": "/static/images/tabbar/new_my.png",
-						"pagePath": "/pages/my/my"
-					}
-				]
-			};
-		},
-		computed: {
-			messageNum() {
-				return this.$store.state.messageNum || 0
-			}
-		},
-		async created() {
-			// if (!this.$store.state.tabbarList.length) {
-			// 	let isnNetwork = uni.getStorageSync("isnNetwork");
-			// 	if (isnNetwork) {
-			// 		await this.getButtonImg()
-			// 	} else {
-			// 		uni.getNetworkType({
-			// 			success: (res) => {
-			// 				console.log(res.networkType);
-			// 				if (res.networkType == "none") {
+import { mapState, mapMutations } from 'vuex';
+import request from "@/utils/request";
 
-			// 					this.$store.commit("setTabbarList", this.tabbarList)
-			// 				} else {
-			// 					// 页面加载逻辑
-			// 					uni.setStorageSync("isnNetwork", 1);
-			// 					this.getButtonImg()
-			// 				}
-			// 			},
-			// 		});
-			// 	}
+export default {
+    name: "tab-bar",
+    // 不再需要 props.selected，完全由 Vuex 控制高亮
+    data() {
+        return {
+            refreshKey: 0,          // 强制重建标识
+            tabbarReady: false,     // 组件就绪标识
+            tabbarList: [           // tab 配置
+                {
+                    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",
+                    text: "订单",
+                    selectedIconPath: "/static/images/tabbar/new_order.png",
+                    pagePath: "/pages/order/all-orders"
+                },
+                {
+                    iconPath: "/static/images/tabbar/new_message_gray.png",
+                    text: "消息",
+                    selectedIconPath: "/static/images/tabbar/new_message.png",
+                    pagePath: "/pages/message/message"
+                },
+                {
+                    iconPath: "/static/images/tabbar/new_my_gray.png",
+                    text: "我的",
+                    selectedIconPath: "/static/images/tabbar/new_my.png",
+                    pagePath: "/pages/my/my"
+                }
+            ]
+        };
+    },
+    computed: {
+        // 从 Vuex 获取全局高亮索引
+        ...mapState(['currentTabIndex', 'messageNum'])
+    },
+    watch: {
+        // 当 tabbarList 内容变化（如异步更新图标）时，强制重建组件
+        tabbarList: {
+            deep: true,
+            handler() {
+                this.rebuildTabbar();
+            }
+        }
+    },
+    created() {
+        // 初始化时延迟显示，避免闪烁
+        this.tabbarReady = false;
+        this.$nextTick(() => {
+            this.tabbarReady = true;
+            // 如果需要异步加载图标，取消下面注释
+            // this.getButtonImg();
+        });
+    },
+    methods: {
+        ...mapMutations(['SET_CURRENT_TAB_INDEX']),
 
-			// }
+        // 设置全局选中索引（简化调用）
+        setCurrentTabIndex(index) {
+            this.SET_CURRENT_TAB_INDEX(index);
+        },
 
-		},
-		methods: {
-			getNum(index) {
-				if (index == 2) {
-					return this.messageNum
-				} else {
-					return 0
-				}
-			},
-			//获取头部背景图片
-			async getButtonImg() {
-				let res = await request.post("/sj/poster/getButtonImg", {});
-				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) {
-							item.iconPath = res.data[index].iconPath
-						}
-						if (res.data[index].selectedIconPath) {
-							item.selectedIconPath = res.data[index].selectedIconPath
-						}
-					})
-				}
-				this.$store.commit("setTabbarList", this.tabbarList)
-			},
-			change1(val) {
-				// 因为在pages中配置了需要跳转的页面为 tabbar页面 
-				// 所以不能使用navigateTo 只能使用下面这个方法跳转。
-				uni.switchTab({
-					url: this.tabbarList[val].pagePath
-				})
-				this.messageUpudateNum()
-			}
-		}
-	}
+        // 强制重建 uv-tabbar（用于异步更新图标后）
+        rebuildTabbar() {
+            this.tabbarReady = false;
+            this.$nextTick(() => {
+                this.refreshKey++;
+                this.tabbarReady = true;
+            });
+        },
+
+        // 获取角标数字（只有消息 tab 且数量 > 0 才显示）
+        getNum(index) {
+            if (index === 2 && this.messageNum > 0) {
+                return this.messageNum;
+            }
+            return null;
+        },
+
+        // 异步更新图标（保留你的业务逻辑）
+        async getButtonImg() {
+            try {
+                let res = await request.post("/sj/poster/getButtonImg", {});
+                if (res.code === 200) {
+                    this.tabbarList.forEach((item, index) => {
+                        if (res.data[index]?.iconPath) {
+                            item.iconPath = res.data[index].iconPath;
+                        }
+                        if (res.data[index]?.selectedIconPath) {
+                            item.selectedIconPath = res.data[index].selectedIconPath;
+                        }
+                    });
+                    this.$store.commit("setTabbarList", this.tabbarList);
+                    // 图标更新后，强制重建组件
+                    this.rebuildTabbar();
+                }
+            } catch (err) {
+                console.error('getButtonImg 请求失败', err);
+            }
+        },
+
+        // uv-tabbar 的 change 事件（组件内部触发）
+        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: targetPage,
+                fail: (err) => console.error('switchTab 失败', err)
+            });
+
+            // 保留你原有的消息更新方法
+            if (typeof this.messageUpudateNum === 'function') {
+                this.messageUpudateNum();
+            }
+        }
+    }
+};
 </script>
 
 <style lang="scss">
-	.icon {
-		height: 54rpx;
-		width: 54rpx;
-	}
-	::v-deep .uv-tabbar__content{
-		z-index: 999!important;
-	}
+.icon {
+    height: 54rpx;
+    width: 54rpx;
+}
+::v-deep .uv-tabbar__content {
+    z-index: 999 !important;
+}
 </style>
\ No newline at end of file
diff --git a/store/index.js b/store/index.js
index 35999ac..2daceb7 100644
--- a/store/index.js
+++ b/store/index.js
@@ -6,40 +6,43 @@ Vue.use(Vuex);
 
 const store = new Vuex.Store({
 	state: {
-			messageNum: 0,//底部消息数量
-		sjServiceList:{},//商家分配手艺人时服务数据shop/staff
-		tabbarList: [], //底部设置
-		reservationTime: {}, // 预约时刻信息
-		reservationSyr: {}, // 预约手艺人人信息
-		reservationAddress: {}, // 预约地址信息
-		selectStore: {}, //选择的门店信息
-		wxShareType: 0, // 正式版:0，测试版:1，体验版:2
-		//公共的变量，这里的变量不能随便修改，只能通过触发mutations的方法才能改变
+		messageNum: 0,                 // 底部消息数量
+		// ========== 新增：全局当前选中的 tab 索引 ==========
+		currentTabIndex: 0,            // 用于自定义 tabbar 高亮
+		// ============================================
+		sjServiceList: {},             // 商家分配手艺人时服务数据shop/staff
+		tabbarList: [],                // 底部设置
+		reservationTime: {},           // 预约时刻信息
+		reservationSyr: {},            // 预约手艺人人信息
+		reservationAddress: {},        // 预约地址信息
+		selectStore: {},               // 选择的门店信息
+		wxShareType: 0,                // 正式版:0，测试版:1，体验版:2
 		searchCity: {
 			center: "117.330043,38.372266",
 			name: "黄骅",
 		},
-		systemInfo: uni.getSystemInfoSync(), //设备信息
-		//是否有定位权限
+		systemInfo: uni.getSystemInfoSync(),
 		isLocation: false,
-		//路由
 		baseUrl: "",
-		//手机和app信息
 		version: {
 			VersionCode: "",
 			DeviceBrand: "",
 			DeviceType: "",
 		},
-		//商家信息
 		sjInfo: {},
-		workSpaceSJClassList: [], //商家工位分类列表
-		workHourSJClassList: [], //商家工时分类列表
+		workSpaceSJClassList: [],
+		workHourSJClassList: [],
 	},
 	mutations: {
-		//写入底部消息数量
+		// 写入底部消息数量
 		setMessageNum(state, newval) {
 			state.messageNum = newval;
 		},
+		// ========== 新增：设置全局当前选中 tab 索引 ==========
+		SET_CURRENT_TAB_INDEX(state, index) {
+			state.currentTabIndex = index;
+		},
+		// ==============================================
 		clearServiceState(state) {
 			state.reservationTime = {};
 			state.reservationSyr = {};