WechatApp/components/TabBar.vue

<template>
	<view class="placeholder safe-area" v-if="placeholder && fixed"></view>
	<view class="tab-bar-wrap safe-area" :style="[getTabBarWrapStyle]">
		<view class="tab-bar">
			<!-- 左侧：首页 -->
			<view class="menu" @click="go(menus[0].link)">
				<image v-if="getPath === menus[0].link" :src="getFileUrl(menus[0].img)" mode="aspectFill"></image>
				<image v-else :src="getFileUrl(menus[0].imgon)" mode="aspectFill"></image>
				<view class="text" :class="{ sele: getPath === menus[0].link }">{{ menus[0].title }}</view>
			</view>

			<!-- 中间：扫码点餐 - 特殊圆形按钮 -->
			<view class="menu-center" @click="go(menus[1].link)">
				<view class="scan-btn">
					<image :src="getFileUrl(menus[1].img)" mode="aspectFill"></image>
				</view>
				<image :src="getFileUrl(menus[1].imgon)" mode="heightFix" class="qrT-img"></image>
			</view>

			<!-- 右侧：我的 -->
			<view class="menu" @click="go(menus[2].link)">
				<image v-if="getPath === menus[2].link" :src="getFileUrl(menus[2].img)" mode="aspectFill"></image>
				<image v-else :src="getFileUrl(menus[2].imgon)" mode="aspectFill"></image>
				<view class="text" :class="{ sele: getPath === menus[2].link }">{{ menus[2].title }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, unref } from 'vue';
import { getFileUrl } from '@/utils/file.js';

const menus = [
	{ title: '首页', link: '/pages/index/index', img: 'img/tabbar/index1.png', imgon: 'img/tabbar/index2.png' },
	{ title: '扫码点餐', link: '/pages/numberOfDiners/index', img: 'img/tabbar/qr2.png', imgon: 'img/tabbar/qr.png' },
	{ title: '我的', link: '/pages/personal/index', img: 'img/tabbar/personal1.png', imgon: 'img/tabbar/personal2.png' }
];

const props = defineProps({
	placeholder: { type: Boolean, default: false }, // 是否显示占位
	fixed: { type: Boolean, default: true } // 是否定位
});
const getTabBarWrapStyle = computed(() => ({
	position: props.fixed ? 'fixed' : 'relative'
}));

function go(url) {
	if (url === unref(getPath)) return;
	uni.reLaunch({ url });
}

const getPath = computed(() => {
	const pages = getCurrentPages(); // 获取路由栈
	console.log('/' + pages[pages.length - 1].route);
	return '/' + pages[pages.length - 1].route;
});
</script>

<style lang="scss" scoped>
.placeholder {
	height: 140rpx;
	box-sizing: content-box;
}

.tab-bar-wrap {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	background-color: #ffffff;
	box-shadow: 0 -2rpx 16rpx 0 rgba(0, 0, 0, 0.08);

	.tab-bar {
		// padding: 16rpx 0;
		// padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		position: relative;
		padding-top: 20rpx;

		.menu {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			padding: 0 40rpx;
			padding-bottom: 0;
			transition: all 0.3s ease;

			image {
				width: 48rpx;
				height: 48rpx;
				transition: transform 0.3s ease;
			}

			.text {
				font-size: 22rpx;
				color: #999999;
				margin-top: 8rpx;
				transition: all 0.3s ease;
				font-weight: 400;
			}

			.text.sele {
				color: #333333;
				font-weight: 500;
			}

			&:active {
				opacity: 0.7;
				transform: scale(0.95);
			}
		}

		.menu-center {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: -20rpx;
			margin: 0 40rpx;
			// transform: translateY(-35rpx);
			transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
			background-color: #fff;
			border-radius: 50%;
			padding: 20rpx;

			.scan-btn {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 6rpx;
				position: relative;
				transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
				background: linear-gradient(35deg, #FCB73F 0%, #FC733D 100%);
				box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0, 0, 0, 0.16);

				image {
					width: 42rpx;
					height: 42rpx;
					filter: brightness(0) invert(1);
					transition: transform 0.3s ease;
					margin-bottom: 20rpx;
				}
			}

			.qrT-img {
				width: 85rpx;
				height: 22rpx;
				position: absolute;
				bottom: 36rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			.text-center {
				font-size: 22rpx;
				color: #ff8844;
				margin-top: 4rpx;
				font-weight: 500;
				transition: all 0.3s ease;
			}

			&:active {
				transform: translateY(-35rpx) scale(0.92);

				.scan-btn {
					box-shadow: 0 4rpx 16rpx 0 rgba(255, 136, 68, 0.3),
						0 1rpx 4rpx 0 rgba(255, 136, 68, 0.15);

					image {
						transform: scale(0.9);
					}
				}
			}
		}
	}
}
</style>