group_lawyer_app/components/barNavigasiHandap.vue

<template>
	<!-- 底部导航栏 -->
	<view class="bottom-tabbar">
		<view class="tabbar-container">
			<view 
			    v-for="(item,index) in list" :key="index"
				class="tab-item" 
				:class="{ 'active':currentTab === item.pathText }"
				@click="switchTab(item.pathText)"
			>
				<image 
					class="tab-icon" 
					:src="item.pathText === currentTab ?item.oneIcon : item.twoIcon"
					mode="aspectFit"
				></image>
				<text class="tab-text" :class="{ 'active-text': currentTab === item.pathText }">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'BarNavigasiHandap',
	data() {
		return {
			currentTab: 'index' ,// 当前选中的tab
			list:[
				{
					name:'首页',
					pathText:'index',
					oneIcon:'/static/images/tabbar/home_.png',
					twoIcon:'/static/images/tabbar/home.png',
					
				},
				{
					name:'我的',
					pathText:'mine',
					oneIcon:'/static/images/tabbar/mine_.png',
					twoIcon:'/static/images/tabbar/mine.png',
					
				}
			]
		}
	},
	mounted() {
		// 组件挂载时设置当前tab
		this.setCurrentTab()
		// 监听页面显示事件
		uni.$on('pageShow', () => {
			this.setCurrentTab()
		})
	},
	beforeDestroy() {
		// 组件销毁前移除监听
		uni.$off('pageShow')
	},
	methods: {
		// 设置当前tab
		setCurrentTab() {
			try {
				const pages = getCurrentPages()
				if (pages && pages.length > 0) {
					const currentPage = pages[pages.length - 1]
					const route = currentPage.route || ''
					console.log('当前路由:', route) // 调试用
					// 更精确的路由匹配
					if (route === 'pages/indexOrder/index') {
						this.currentTab = 'index'
					} else if (route === 'pages/mine/index') {
						this.currentTab = 'mine'
					} else if (route.includes('mine')) {
						// 如果路由包含 mine，也设置为 mine（处理子页面）
						this.currentTab = 'mine'
					} else if (route.includes('index') && !route.includes('mine')) {
						// 如果路由包含 index 但不包含 mine，设置为 index
						this.currentTab = 'index'
					}
				}
			} catch (e) {
				console.error('获取当前页面失败:', e)
			}
		},
		// 切换tab
		switchTab(tab) {
			// 如果点击的是当前tab，不执行操作
			if (this.currentTab === tab) {
				return
			}
			
			// 先更新状态，立即高亮（关键：在跳转前更新状态）
			this.currentTab = tab
			
			// 跳转到对应页面（使用 reLaunch 关闭所有页面并跳转）
			const urlMap = {
				'index': '/pages/indexOrder/index',
				'mine': '/pages/mine/index'
			}
			
			const targetUrl = urlMap[tab]
			if (targetUrl) {
				uni.reLaunch({
					url: targetUrl,
					success: () => {
						// 跳转成功后再次确认状态
						setTimeout(() => {
							this.setCurrentTab()
						}, 100)
					},
					fail: (err) => {
						console.error('页面跳转失败:', err)
						// 跳转失败时恢复状态
						this.setCurrentTab()
					}
				})
			}
		}
	}
}
</script>

<style scoped>
.bottom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: #F5F5F5;
	padding: 16rpx 24rpx;
	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
	z-index: 98;
	box-sizing: border-box;
}

.tabbar-container {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 344rpx;
	margin: auto;
	height: 115rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 8rpx 38rpx 0rpx rgba(40,86,199,0.2);
	border-radius: 57rpx 57rpx 57rpx 57rpx;
	
}

.tab-item {
	font-weight: 500;
	font-size: 23rpx;
	color: #AAAAAA;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100rpx;
}

.tab-item.active {
	font-size: 23rpx;
	color: #323232;
}

.tab-icon {
	width: 49.62rpx;
	height: 49.62rpx;
	margin-bottom: 6rpx;
}

.tab-text {
	font-size: 26rpx;
	color: #999999;
	line-height: 1;
}

.tab-text.active-text {
	color: #323232;
	font-weight: 500;
}
</style>