cashier_wx/pages/product/choosetable.vue

<template>
	<view class="container">
		<image class="top_bg" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/order/orderAMeal.png" mode="aspectFill"></image>
		<view class="content_box">
			<view class="content">
				<view class="title">
					<view class="title_text">请选择就餐人数</view>
					<view class="title_tabNum">桌号{{ shopTable.name }}</view>
				</view>
				<view class="num" :class="{ active: numIndex == -1 }">
					<view class="item" @click="tabCut(index)" v-for="(item, index) in 9" :key="index">
						<view class="num_item" :class="{ active: numIndex == index }">{{ index + 1 }}</view>
					</view>
					<view class="item" @click="tabCut(-1)">
						<view class="num_item" :style="numIndex == -1 ? 'background-color: #E8AD7B;' : ''">
							<up--input v-model="otherNum" @input="isOtherNum" @blur="blur()" border="none" type="nubmer" maxlength="3" placeholder="请输入.."></up--input>
						</view>
					</view>
					<!-- <view class="num_item" v-else :class="{'active':numIndex==-1 }">其</view> -->
				</view>
				<view class="startBtn" @click="start">开始点餐</view>
			</view>
		</view>
		<Loading :isLoading="isLoading" />
	</view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';

import { onLoad } from '@dcloudio/uni-app';

import { Storelogin } from '@/stores/user.js';

import Loading from '@/components/Loading.vue';

// 获取全局属性
const { proxy } = getCurrentInstance();

import { productStore } from '@/stores/user.js';

// 初始加载中
const isLoading = ref(true);

const otherNum = ref('');

const numIndex = ref(0);

const dinersNum = ref(1);

const isOtherNum = (e) => {
	otherNum.value = otherNum.value.replace(/\D/g, '');
};

const tableCode = uni.cache.get('tableCode');

// 切换桌型
const tabCut = (index) => {
	console.log(index);
	numIndex.value = index;
	if (index != -1) {
		dinersNum.value = index + 1;
	} else {
		otherNum.value = otherNum.value == '其他' ? '' : otherNum.value;
	}
};

const blur = (index) => {
	otherNum.value = otherNum.value == '' ? '其他' : otherNum.value;
};

const shopTable = uni.cache.get('shopTable');

const start = async () => {
	if (numIndex.value == -1 && (otherNum.value == '其他' || otherNum.value <= 0)) {
		uni.showToast({
			title: '请选择就餐人数',
			icon: 'none'
		});
		return;
	}
	if (numIndex.value == -1 && otherNum.value != '其他') {
		dinersNum.value = otherNum.value;
	}
	if (shopTable.useNum < dinersNum.value && shopTable.useNum > 0) {
		uni.showToast({
			title: `最多${shopTable.useNum}人`,
			icon: 'none'
		});
		return false;
	}
	uni.cache.set('dinersNum', dinersNum.value);
	uni.pro.redirectTo('product/index');
};

onMounted(async () => {
	await proxy.$onLaunched;
	// 获取当前页面栈
	const pages = getCurrentPages();
	// 获取当前页面实例
	const currentPage = pages[pages.length - 1];
	// 获取页面参数
	const options = currentPage.options;
	// #ifdef MP-WEIXIN
	if (options.q) {
		const store = productStore();
		await store.scanCodeactions(options.q);
	}
	// #endif
	// #ifdef MP-ALIPAY
	if (getApp().globalData.tableCode) {
		await store.scanCodeactions(getApp().globalData.tableCode);
	}
	// #endif
	await nextTick();
	isLoading.value = uni.cache.get('shopInfo').isTableFee == 0 ? false : true;
});
</script>

<style scoped lang="scss">
page {
	// background: #f6f6f6;
}

.top_bg {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
}

.content_box {
	width: 100%;
	padding: 0 28rpx;
	position: absolute;
	bottom: 148rpx;
}

.content {
	width: 100%;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 48rpx 0 32rpx 32rpx;
	background: #ffffff;
	border-radius: 44rpx 44rpx 44rpx 44rpx;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 48rpx;
		padding-right: 32rpx;

		.title_text {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.title_tabNum {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.num {
		display: flex;
		flex-wrap: wrap;

		.item {
			width: 20%;
			padding-right: 32rpx;
		}

		.num_item {
			width: 100%;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			margin-right: 28rpx;
			margin-bottom: 32rpx;
			background-color: #fef4eb;
			border-radius: 12rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}

		.num_item:nth-child(5n) {
			margin-right: 0;
		}

		::v-deep .u-input {
			width: 100%;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			margin-bottom: 32rpx;
			background-color: #fef4eb;
			border-radius: 12rpx;
		}

		::v-deep input {
			font-weight: 400;
			border-radius: 12rpx;
			font-size: 28rpx !important;
			color: #333333 !important;
			text-align: center !important;
			background-color: #fef4eb;
		}

		.active {
			color: #fff;
			background-color: #e8ad7b;
		}
	}

	::v-deep .num.active .u-input {
		width: 100%;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		margin-bottom: 32rpx;
		background-color: #e8ad7b !important;
		border-radius: 12rpx;
	}

	::v-deep .num.active input {
		color: #fff !important;
		border-radius: 12rpx;
		background-color: #e8ad7b !important;
	}
}

.startBtn {
	width: 100%;
	height: 96rpx;
	line-height: 96rpx;
	text-align: center;
	background-color: #e8ad7b;
	border-radius: 48rpx;
	font-weight: bold;
	font-size: 32rpx;
	color: #ffffff;
}
</style>