cashier_weapp/pagesOrder/orderAMeal/index.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">桌号A2</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">
						<u--input  class="num_item" v-model="otherNum" :class="{'active':numIndex==-1 }" @input="isOtherNum" @focus="tabCut(-1)" @blur="blur()" border="none" type="nubmer" maxlength="3"></u--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>
	
	
	export default {
		data() {
			return {
				tableCode: null,
				shopId: null,
				numIndex: 0,
				otherNum: '其他',
				dinersNum: 1,
			};
		},
		onLoad(options) {
			this.tableCode = options.tableCode;
			this.shopId = options.shopId;
		},
		onShow() {
		},
	
		methods: { 
			
			
			isOtherNum (e) {
				this.$nextTick(() => {
					this.otherNum = this.otherNum.replace(/\D/g, '')
				})
			},
			/**
			 * 切换桌型
			 */
			tabCut(index) {
				this.numIndex = index;
				if ( index != -1) {
					this.dinersNum = index+1;
				} else {
					this.otherNum = this.otherNum == "其他" ? "" : this.otherNum;
				}
			},
			
			blur ( index ) {
				this.otherNum = this.otherNum == "" ? "其他" : this.otherNum;
			},
			
			/**
			 * 开始点餐
			 */
			async start () {
				if ( this.numIndex == -1 && (this.otherNum == "其他"||this.otherNum <= 0)) {
					uni.showToast({
						title: '请选择就餐人数',
						icon: 'none',
					})
					return;
				}
				if ( this.numIndex == -1 && this.otherNum != "其他") {
					this.dinersNum = this.otherNum
				}
				
				let res = await this.api.productChoseCount({
					tableId: this.tableCode,
					num: this.dinersNum,
					shopId: this.shopId,
				}) //判断是否支付成功
				if ( res.code == 0) {
					uni.pro.redirectTo('order_food/order_food', {
					// uni.pro.navigateTo('order_food/order_food', {
						tableCode: this.tableCode,
					})
				}
				
			}
		
		}
	};
</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>