GamePortrait/src/components/Tabbar.vue

<template>
	<div class="tabbar">
		<van-tabbar v-model="active">
			<van-tabbar-item @click="changeEvnt(item)" :name="tabbar.name" v-for="(item, index) in tabbar" :key="index"
				:to="item.to">
				<template #icon="props">
					<img :src="
              props.active
                ? tabbar[index].icon.active
                : tabbar[index].icon.inactive
            " />
				</template>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	import {
		ref,
		onMounted,
		computed,
		watch
	} from "vue"
	import {
		useRouter
	} from "vue-router"
	import {
		useStore
	} from "vuex"
	import {
		Tabbar,
		TabbarItem,
		showDialog
	} from "vant"
	export default {
		name: "TabBar",
		components: {
			"van-tabbar": Tabbar,
			"van-tabbar-item": TabbarItem
		},
		setup() {
			const router = useRouter()
			const store = useStore()
			const Type = computed(() => store.state.config.$Type)
			const Lang = computed(() => store.state.config.$lang)
			const active = ref(0)
			const tabbar = ref([])
			watch(
				() => [Type.value],
				([language]) => {
					const prefix =
						language == "kr" ||
						language == "yn" ||
						language == "tl" ||
						language == "in" ?
						"en" :
						language
					tabbar.value = [{
							// text: "百家乐",
							name: "hall",
							icon: {
								active: require(`../assets/images/tabbar/${prefix}_classics_active.png`),
								inactive: require(`../assets/images/tabbar/${prefix}_classics.png`)
							},
							to: "/baccarat"
						},
						{
							// text: "龙虎",
							name: "lh",
							icon: {
								active: require(`../assets/images/tabbar/${prefix}_lh_active.png`),
								inactive: require(`../assets/images/tabbar/${prefix}_lh.png`)
							},
							to: "/longhu"
						},
						{
							// text: "牛牛",
							name: "nn",
							icon: {
								active: require(`../assets/images/tabbar/${prefix}_nn_active.png`),
								inactive: require(`../assets/images/tabbar/${prefix}_nn.png`)
							},
							to: "/nn"
						},
						{
							// text: "色碟",
							name: "toning",
							icon: {
								active: require(`../assets/images/tabbar/${prefix}_sd_active.png`),
								inactive: require(`../assets/images/tabbar/${prefix}_sd.png`)
							},
							to: "/toning"
						},
						{
							// text: "骰宝",
							name: "dice",
							icon: {
								active: require(`../assets/images/tabbar/${prefix}_sb_active.png`),
								inactive: require(`../assets/images/tabbar/${prefix}_sb.png`)
							},
							to: "/dice"
						},
						{
							// text: "炸金花",
							name: "threecard",
							icon: {
								active: require(`../assets/images/tabbar/${prefix}_sbnn_active.png`),
								inactive: require(`../assets/images/tabbar/${prefix}_sbnn.png`)
							},
							to: "/threecard"
						},
						{
							// text: "轮盘",
							name: "lp",
							icon: {
								active: require(`../assets/images/tabbar/${prefix}_lp_active.png`),
								inactive: require(`../assets/images/tabbar/${prefix}_lp.png`)
							},
							//to: "/lp"
						},


						{
							// text: "多台",
							name: "multiple",
							icon: {
								active: require(`../assets/images/tabbar/${prefix}_multiple_active.png`),
								inactive: require(`../assets/images/tabbar/${prefix}_multiple.png`)
							}
							// to: "/multiple"
						}
					]
				}, {
					immediate: true,
					deep: true
				}
			)

			const changeEvnt = (data) => {
				//if (!["hall", "lh", "nn", "toning", "dice", "lp"].includes(data.name)) {
				//if (!["hall", "lh", "nn", "toning", "dice"].includes(data.name)) {
				if (!["hall", "lh", "nn", "toning", "dice", "threecard"].includes(data.name)) {
					showDialog({
						title: Lang.value[Type.value].tips,
						message: Lang.value[Type.value].msg_waiting_development,
						confirmButtonText: Lang.value[Type.value].Confirm
					}).then(() => {
						active.value = 0
					})
				}
			}

			onMounted(() => {
				const routerName = router.currentRoute.value.name
				active.value =
					routerName == "nn" ?
					2 :
					routerName == "longhu" ?
					1 :
					routerName == "toning" ?
					3 :
					routerName == "dice" ?
					4 :
					routerName == "threecard" ?
					5 :
					routerName == "lp" ?
					6 :
					0
			})
			return {
				tabbar,
				active,
				changeEvnt
			}
		}
	}
</script>
<style lang="scss" scoped>
	/* 深色豪华主题 - 游戏分类 Tabbar */
	$dark-bg: #1a1a1a;
	$gold: #c5a059;
	$border-color: #333;
	
	.tabbar {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 25;
		background: $dark-bg;
		border-top: 1px solid $border-color;
	}

	.van-tabbar--fixed {
		position: static;
		width: 100%;
		height: 56px;
	}

	.van-tabbar {
		background: $dark-bg !important;
		height: 56px;
		overflow-x: auto;
		overflow-y: hidden;
		flex-wrap: nowrap;
		justify-content: flex-start;
		-webkit-overflow-scrolling: touch;
		
		&::-webkit-scrollbar {
			display: none;
		}
	}

	.van-tabbar-item {
		flex: 0 0 auto;
		min-width: 70px;
		width: 12.5%; /* 8个图标 */
		
		&--active {
			background: transparent !important;
		}
	}

	.van-tabbar-item__icon img {
		height: 28px;
	}
</style>