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>