workApp/components/commonTabbar.vue

<template>
	<view class="common_tabbar">
		<view 
			v-for="(item, idx) in currentTabs" 
			:key="idx" 
			class="tabbar_item" 
			:class="{ active: currentPath === item.path }" 
			@click="switchTab(item.path)"
		>
			<image 
				:src="currentPath === item.path ? item.selectedIconPath : item.iconPath" 
				class="tabbar_icon" 
				mode="aspectFit"
			></image>
			<text class="tabbar_text">{{ item.text }}</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const currentPath = ref('');

const workspaceTabs = [
	{
		path: '/pages/workspace/index',
		iconPath: '/static/image/tabbar/workspace.png',
		selectedIconPath: '/static/image/tabbar/workspace_cur.png',
		text: '工作台'
	},
	{
		path: '/pages/todo/index',
		iconPath: '/static/image/tabbar/todo.png',
		selectedIconPath: '/static/image/tabbar/todo_cur.png',
		text: '待办'
	},
	{
		path: '/pages/message/index',
		iconPath: '/static/image/tabbar/message.png',
		selectedIconPath: '/static/image/tabbar/message_cur.png',
		text: '消息'
	}
];

const noticeTabs = [
	{
		path: '/pages/notice/overview/index',
		iconPath: '/static/image/overview/zonglan.png',
		selectedIconPath: '/static/image/overview/zonglanIcon.png',
		text: '通知总览'
	},
	{
		path: '/pages/notice/publish/index',
		iconPath: '/static/image/overview/tongzhi.png',
		selectedIconPath: '/static/image/overview/tongzhiIcon.png',
		text: '发布通知'
	},
	{
		path: '/pages/notice/mine/index',
		iconPath: '/static/image/overview/my.png',
		selectedIconPath: '/static/image/overview/myIcon.png',
		text: '我的通知'
	}
];

const currentTabs = computed(() => {
	if (currentPath.value.startsWith('/pages/notice/')) {
		return noticeTabs;
	}
	return workspaceTabs;
});

const updateCurrentPath = () => {
	const pages = getCurrentPages();
	if (pages.length > 0) {
		const currentPage = pages[pages.length - 1];
		currentPath.value = '/' + currentPage.route;
	}
};

const switchTab = (path) => {
	if (currentPath.value === path) return;
	uni.reLaunch({ url: path });
};

onMounted(() => {
	updateCurrentPath();
	uni.hideTabBar({
		fail: () => {}
	});
});
</script>

<style lang="scss" scoped>
.common_tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	background-color: #FFFFFF;
	padding: 16rpx 0;
	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
	border-top: 1rpx solid #F0F0F0;
	box-sizing: border-box;
	z-index: 999;

	.tabbar_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.tabbar_icon {
			width: 48rpx;
			height: 48rpx;
		}

		.tabbar_text {
			font-size: 22rpx;
			color: #7A7E83;
			margin-top: 4rpx;
		}

		&.active {
			.tabbar_text {
				color: #2E64FA;
			}
		}
	}
}
</style>