workApp/components/commonTabbar.vue

<template>
	<view v-if="currentType === 'notice'" class="common_tabbar">
		<view v-for="(item, idx) in noticeTabs" :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 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 currentType = computed(() => {
	if (currentPath.value.startsWith('/pages/notice/')) {
		return 'notice';
	}
	return 'home';
});

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.redirectTo({ url: path });
};

onMounted(() => {
	updateCurrentPath();
	if (currentType.value === 'notice') {
		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;
	height: 84px;
	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>