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 { 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'
}));

// 解析扫码内容：支持 s=店铺id&t=桌号id、URL 的 query、scene 参数、JSON 等格式
function parseScanResult(str) {
	const trim = (v) => (v == null ? '' : String(v).trim());
	let storeId = '';
	let tableId = '';
	if (!str) return { storeId, tableId };
	let s = trim(str);
	const parseKv = (text) => {
		const out = { storeId: '', tableId: '' };
		const keys = {
			store: ['s', 'storeid', 'store_id'],
			table: ['t', 'tableid', 'table_id', 'tableno', 'table']
		};
		text.split('&').forEach((pair) => {
			const eq = pair.indexOf('=');
			if (eq > 0) {
				const k = pair.substring(0, eq).trim().toLowerCase();
				let v = pair.substring(eq + 1).trim();
				try {
					v = decodeURIComponent(v);
				} catch (_) {}
				v = trim(v);
				if (keys.store.includes(k)) out.storeId = v;
				if (keys.table.includes(k)) out.tableId = v;
			}
		});
		return out;
	};
	try {
		// 1. 若为 URL 或含 ?，提取 query 或 scene
		const qIdx = s.indexOf('?');
		const hIdx = s.indexOf('#');
		if (qIdx >= 0) {
			const queryPart = hIdx >= 0 ? s.substring(qIdx + 1, hIdx) : s.substring(qIdx + 1);
			const params = new Map();
			queryPart.split('&').forEach((pair) => {
				const eq = pair.indexOf('=');
				if (eq > 0) {
					const k = decodeURIComponent(pair.substring(0, eq).trim());
					const v = decodeURIComponent(pair.substring(eq + 1).trim());
					params.set(k, v);
				}
			});
			const scene = params.get('scene') || params.get('Scene');
			if (scene) {
				const decoded = decodeURIComponent(scene);
				if (decoded.startsWith('{') && decoded.endsWith('}')) {
					const obj = JSON.parse(decoded);
					return {
						storeId: trim(obj?.storeId ?? obj?.store_id ?? obj?.s ?? ''),
						tableId: trim(obj?.tableId ?? obj?.table_id ?? obj?.tableid ?? obj?.t ?? obj?.tableNo ?? obj?.table ?? '')
					};
				}
				const fromKv = parseKv(decoded);
				// scene 仅为数字时，视为桌号
				if (!fromKv.tableId && /^\d+$/.test(trim(decoded))) {
					fromKv.tableId = trim(decoded);
				}
				return fromKv;
			}
			const fromQuery = parseKv(queryPart);
			return fromQuery;
		}
		// 2. 尝试 JSON 格式
		if ((s.startsWith('{') && s.endsWith('}')) || (s.startsWith('[') && s.endsWith(']'))) {
			const obj = JSON.parse(s);
			storeId = trim(obj?.storeId ?? obj?.store_id ?? obj?.s ?? '');
			tableId = trim(obj?.tableId ?? obj?.table_id ?? obj?.tableid ?? obj?.t ?? obj?.tableNo ?? obj?.table ?? '');
			return { storeId, tableId };
		}
		// 3. key=value 格式
		return parseKv(s);
	} catch (err) {
		console.warn('parseScanResult', err);
	}
	return { storeId, tableId };
}

// 点击扫码点餐：未登录提示请登录；已登录扫码后跳转点餐页
function handleScanOrder() {
	const userStore = useUserStore();
	const token = userStore.getToken || uni.getStorageSync(TOKEN) || '';
	if (!token) {
		uni.showToast({ title: '请登录', icon: 'none' });
		return;
	}
	uni.scanCode({
		scanType: ['qrCode'],
		success: (res) => {
			// 普通二维码用 result；小程序码用 path（含 scene）
			const result = (res?.path || res?.result || '').trim();
			const { storeId, tableId } = parseScanResult(result);
			if (!tableId) {
				console.warn('[扫码] 未解析到桌号，原始内容:', result, '解析结果:', { storeId, tableId });
			}
			const payload = { raw: result, storeId, tableId };
			uni.setStorageSync(SCAN_QR_CACHE, JSON.stringify(payload));
			if (storeId) uni.setStorageSync('currentStoreId', storeId);
			if (tableId) uni.setStorageSync('currentTableId', tableId);
			const diners = uni.getStorageSync('currentDiners') || '1';
			uni.setStorageSync('currentDiners', diners);
			uni.reLaunch({
				url: `/pages/orderFood/index?tableid=${encodeURIComponent(tableId || '')}&diners=${encodeURIComponent(diners)}`
			});
		},
		fail: (err) => {
			if (err?.errMsg && !String(err.errMsg).includes('cancel')) {
				uni.showToast({ title: '扫码失败', 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>