uniProject/components/custom-tabbar/custom-tabbar.vue

<template>
	<view class="ezy-custom-tabbar">
		<view class="tabbar-item-box">

			<view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(item.path,index)"
				:style="{ backgroundImage: 'url(' + (currentTab == index ? item.activePath : item.iconPath) + ')' }">
			</view>
		</view>
	</view>
	<tip-middle-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm"
		:content="MESSAGE_VISITER_TO_LOGIN"></tip-middle-dialog>
</template>

<script>
	import {
		MESSAGE_VISITER_TO_LOGIN
	} from "@/utils/constant.js"
	import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
	import {
		useTabBarHistory
	} from '@/utils/emitEvents.js';
	import cacheManager from "@/utils/cacheManager.js";
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import {
		nextTick,
	} from "vue";
	export default {
		components: {
			tipMiddleDialog
		},
		data() {
			return {
				tabList: [{
						iconPath: 'static/images/tabbar/unselect/plan-sj.png',
						activePath: 'static/images/tabbar/select/plan-sj.png',
						path: `/pages/study/index`
					},
					{
						iconPath: 'static/images/tabbar/unselect/partner-sj.png',
						activePath: 'static/images/tabbar/select/partner-sj.png',
						path: '/pages/game/index'
					},
					{
						iconPath: 'static/images/tabbar/unselect/my-sj.png',
						activePath: 'static/images/tabbar/select/my-sj.png',
						path: `/pages/my/index`
					},
				],
				currentTab: 0,
				MESSAGE_VISITER_TO_LOGIN
			};
		},
		props: {
			nianji: {
				type: String,
			},
			cardId: {
				type: String,
			},
			zhangId: {
				type: String,
			},
			currentTabNumber: {
				type: Number,
			},

		},
		methods: {
			// 游客弹窗---确定
			ykConfirm() {
				uni.redirectTo({
					url: '/pages/login/index'
				});
			},

			switchTab(path, index) {
				if (path !== '/pages/game/index') {
					this.currentTab = index;
				}
				if (getUserIdentity() == 'Visitor') {
					if (path === '/pages/game/index') {
						this.$refs.youkeDialogRef.handleShow();
						return;
					}
					uni.redirectTo({
						url: path + '?nianji=' + this.nianji + '&cardId=' + this.cardId + '&zhangId=' +
							this
							.zhangId
					});
				} else {
					if (path === '/pages/game/index') {
						// 游戏需要返回功能
						uni.navigateTo({
							url: path,
							"animationType": "fade-in",
							"animationDuration":0
						});
						return;
					}
					uni.navigateTo({
						url: path,
						"animationType": "fade-in",
						"animationDuration":0
					});
				}

			},

		},
		created() {

			this.currentTab  =this.currentTabNumber
		}
	}
</script>


<style scoped>
	.custom-tabbar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* 其他样式 */
	}

	.tab-item {
		flex: 1;
		/* 样式 */
	}

	.tab-icon {
		/* 图标样式 */
	}
</style>