gypsy-crm-frontend-vu/components/cwg-tab-bar.vue

<template>
	<nav v-if="showBar" class="custom-tabbar">
		<div v-for="item in tabs" :key="item.path" class="tabbar-item" :class="[{ active: route.path === item.path }]"
			@click="onTabClick(item.path)">
			<span class="tabbar-icon">
				<cwg-icon :name="item.icon" :color="route.path === item.path ? '#ea002a' : '#000'" />
			</span>
			<span class="tabbar-label">{{ t(item.label) }}</span>
		</div>
	</nav>
</template>

<script setup lang="ts">
import { computed, watch, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import useRouter from "@/hooks/useRouter";
import useRoute from '@/hooks/useRoute'

const { t } = useI18n()
const router = useRouter()
const route = useRoute()

// 定义 emits
const emit = defineEmits<{
	(e: 'update:isTabBarPage', value: boolean): void
}>()

const tabBarPages = [
	'/pages/card/index',
	'/pages/wallet/index',
	'/pages/mine/index',
]

const showBar = computed(() => {
	// 不显示返回按钮的页面
	const noBarPages = [
		'/pages/card/index',
		'/pages/wallet/index',
		'/pages/mine/index',
	]
	return noBarPages.includes(route.path)
})

// 计算当前页面是否是 tab 页面
const isTabBarPage = computed(() => {
	return tabBarPages.includes(route.path)
})

// 监听路由变化，向父组件传递是否是 tab 页面的状态
watch(route, () => {
	emit('update:isTabBarPage', isTabBarPage.value)
}, { immediate: true })

const tabs = ref([
	{
		label: 'tabs.cards',
		path: '/pages/card/index',
		icon: 'icon_card',
	},
	{
		label: 'tabs.wallet',
		path: '/pages/wallet/index',
		icon: 'icon_wallet',
	},
	{
		label: 'tabs.mine',
		path: '/pages/mine/index',
		icon: 'icon_my',
	},
])

function onTabClick(path: string) {
	if (route.path !== path) {
		router.replace(path)
	}
}

// 组件挂载时也触发一次
onMounted(() => {
	emit('update:isTabBarPage', isTabBarPage.value)
})
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.custom-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: px2rpx(60);
	background: var(--main-bg);
	border-radius: 18px 18px 0 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
	z-index: 100;
	margin: 0 px2rpx(8) px2rpx(0) px2rpx(8);
}

.tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: var(--font-size-12);
	font-weight: 600;
	border-radius: 12px;
	line-height: px2rpx(16);
	padding: px2rpx(8) 0;
	cursor: pointer;
}

.tabbar-item.active {
	color: var(--main-yellow);
}

.tabbar-icon {
	margin-bottom: px2rpx(4);
	font-size: var(--font-size-24);
}

.tabbar-icon-active {
	color: var(--main-yellow);
}

.tabbar-label {
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: px2rpx(1);
}
</style>