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">桌号{{tableCode}}</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">
						<up--input class="num_item" v-model="otherNum" :class="{'active':numIndex==-1 }"
							@input="isOtherNum" @focus="tabCut(-1)" @blur="blur()" border="none" type="nubmer"
							maxlength="3"></up--input>
					</view>
					<!-- <view class="num_item" v-else :class="{'active':numIndex==-1 }">其</view> -->
				</view>
				<view class="startBtn" @click="start">
					开始点餐
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	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) => {
		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) {
			uni.showToast({
				title: `最多${shopTable.useNum}人`,
				icon: 'none'
			});
			return false;
		}
		uni.pro.redirectTo('product/index', dinersNum.value)

	}

	uni.cache.get('tableCode')
	uni.cache.get('shopId')
</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 !important;
			}

			.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>