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="handleScanOrder">
				<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';
import { SCAN_QR_CACHE } from '@/settings/enums.js';
import { parseQrScanResult, isScanEntryAllowed } from '@/utils/qrScene.js';
import { syncM2GenericPricingStorage } from '@/utils/m2GenericApiPath.js';
import { useUserStore } from '@/store/user.js';
import { TOKEN } from '@/settings/enums.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'
}));

// 点击扫码点餐：未登录提示请登录；已登录扫码后跳转点餐页（m=1 或无 m 为美食，走 dining）
function handleScanOrder() {
	const userStore = useUserStore();
	const token = userStore.getToken || uni.getStorageSync(TOKEN) || '';
	if (!token) {
		uni.showToast({ title: '请登录', icon: 'none' });
		return;
	}
	uni.scanCode({
		scanType: ['wxCode', 'qrCode', 'barCode'],
		success: (res) => {
			const result = (res?.path || res?.result || '').trim();
			const { storeId, tableId, m } = parseQrScanResult(result);
			const payload = { raw: result, storeId, tableId, m };
			uni.setStorageSync(SCAN_QR_CACHE, JSON.stringify(payload));
			syncM2GenericPricingStorage(m);
			if (!isScanEntryAllowed(m)) {
				uni.showToast({ title: '请扫描正确的点餐二维码', icon: 'none' });
				return;
			}
			if (storeId) uni.setStorageSync('currentStoreId', storeId);
			if (tableId) uni.setStorageSync('currentTableId', tableId);
			const diners = uni.getStorageSync('currentDiners') || '1';
			uni.setStorageSync('currentDiners', diners);
			if (!tableId) {
				uni.showToast({ title: '未识别到桌号，请扫描正确的桌号二维码', icon: 'none' });
				return;
			}
			uni.reLaunch({
				url: `/pages/orderFood/index?tableid=${encodeURIComponent(tableId)}&diners=${encodeURIComponent(diners)}`
			});
		},
		fail: (err) => {
			const msg = err?.errMsg || '';
			if (msg && !msg.includes('cancel')) {
				if (msg.includes('auth') || msg.includes('camera') || msg.includes('scope')) {
					uni.showModal({
						title: '提示',
						content: '需要相机权限才能扫码，请在设置中开启',
						confirmText: '去设置',
						success: (res) => {
							if (res.confirm) uni.openSetting();
						}
					});
				} else {
					uni.showToast({ title: msg || '扫码失败', icon: 'none' });
				}
			}
		}
	});
}

// 底部 tabBar 跳转（需在 pages.json 中配置 tabBar.list）
function go(url) {
	if (url === unref(getPath)) return;
	uni.switchTab({ 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>