workApp/components/commonTabbar.vue

<template>
	<view v-if="currentType === 'home'" class="common_tabbar" :style="{ paddingBottom: 24 + 'rpx' }">
		<view v-for="(item, idx) in homeTabs" :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>
	<view v-else-if="currentType === 'notice'" class="common_tabbar" :style="{ paddingBottom: 24 + 'rpx' }">
		<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>
	<view v-else-if="currentType === 'materialCollection'" class="common_tabbar" :style="{ paddingBottom: 24 + 'rpx' }">
		<view v-for="(item, idx) in materialCollectionTabs" :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';
import { useSafeArea } from '@/common/safeArea';

const currentPath = ref('');
const { safeAreaBottom, initSafeArea } = useSafeArea();

const homeTabs = [
	{
		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: '消息'
	},
	{
		path: '/pages/my/index',
		iconPath: '/static/image/tabbar/my.png',
		selectedIconPath: '/static/image/tabbar/my_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 materialCollectionTabs = [
	{
		path: '/pages/materialCollection/taskOverview/index',
		iconPath: '/static/image/overview/zonglan.png',
		selectedIconPath: '/static/image/overview/zonglanIcon.png',
		text: '任务总览'
	},
	{
		path: '/pages/materialCollection/submitMaterial/index',
		iconPath: '/static/image/materialCollection/tijiao.png',
		selectedIconPath: '/static/image/materialCollection/tijiaoIcon.png',
		text: '提交材料'
	},
	{
		path: '/pages/materialCollection/reviewMaterial/index',
		iconPath: '/static/image/materialCollection/shenhe.png',
		selectedIconPath: '/static/image/materialCollection/shenheIcon.png',
		text: '审核材料'
	}
];

const currentType = computed(() => {
	if (currentPath.value.startsWith('/pages/notice/')) {
		return 'notice';
	}
	if (currentPath.value.startsWith('/pages/materialCollection/taskOverview/') ||
		currentPath.value.startsWith('/pages/materialCollection/submitMaterial/') ||
		currentPath.value.startsWith('/pages/materialCollection/reviewMaterial/')) {
		return 'materialCollection';
	}
	if (currentPath.value.startsWith('/pages/workspace/') ||
		currentPath.value.startsWith('/pages/todo/') ||
		currentPath.value.startsWith('/pages/message/') ||
		currentPath.value.startsWith('/pages/my/')) {
		return 'home';
	}
	return '';
});

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;
	if (currentType.value === 'materialCollection') {
		uni.redirectTo({ url: path });
		return;
	}
	uni.reLaunch({ url: path });
};

onMounted(() => {
	initSafeArea();
	updateCurrentPath();
});
</script>

<style lang="scss" scoped>
.common_tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #FFFFFF;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	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;
		padding: 4rpx 16rpx;

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

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

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