hotelHomestayWx/pages/house/stayCheck.vue

<template>
	<view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="新增订单" :showIcon="true"></c-nav-bar>
		<view class="box">
		
			 <u-form :model="form" ref="form">
				 <u-form-item label="姓名" prop="guestName" label-width="172rpx" border-bottom>
					 <u-input border="false" v-model="form.guestName" placeholder="请输入姓名"/>
				 </u-form-item>
				 <u-form-item label="手机号码" prop="guestPhone" label-width="172rpx" border-bottom>
				 	<u-input border="false" v-model="form.guestPhone" placeholder="请输入手机号"/>
				 </u-form-item>
				 <u-form-item label="证件类型" label-width="172rpx" border-bottom>
					    <view class="personInfo" @click.native="show=true">
								<text style="font-size: 30rpx;">{{form.idName}}</text>
								<!-- 证件下拉框 -->
								<u-picker :itemHeight="88" :immediateChange="true" :show="show" :columns="list" keyName="label"
									:defaultIndex="passengerDefault" @cancel="show=false;"
									@confirm="passengerConfirm"></u-picker>
								<!-- <u-select v-model="show"  mode="single-column" :list="list" @confirm="confirm"></u-select> -->
								<u-icon name="arrow-right" ></u-icon>
							</view>
				 </u-form-item> 
				 <u-form-item label="证件号" prop="idCard" label-width="172rpx" border-bottom>
				 	<u-input border="false" v-model="form.idCard" placeholder="请输入证件号"/>
				 </u-form-item>
				 <u-form-item class="delete" >
						<view class="delete" @click="del">
							<u-icon name="trash"></u-icon>
							<text style="font-size: 30rpx;">删除</text>
						</view>
				 </u-form-item>
			 </u-form>
		</view>
		<!-- 添加入住人 -->
		<view class="addPerson">
			 <u-icon name="plus" color="#2979ff"></u-icon>添加入住人
		</view>
		<!-- 按钮 -->
		<!-- 按钮 -->
		
			<view class="yes" @click.native="submit">
				确定
			</view>
			
	</view>
</template>

<script>
	export default{
		data(){
			return {
				passengerDefault:[0],
				form:{
					guestPhone:'',
					idCard:'',
					idName:'',
					guestName:'',					
				},
				orderInfo:[],
				orderId:null,
				show: false,
								list: [[
									{
										value: '1',
										label: '身份证'
									},
									{
										value: '2',
										label: '居住证'
									}]
								],
			}
			
		},
		onLoad({id}){
			console.log(id)
			this.orderId=id
			console.log(this.orderId)	
			this.getOrderInfo()
		},
		methods:{
			passengerConfirm(e){
				this.form.idName=e.value[0].label
			},
			// 证件下拉菜单
			showCardChoose(){
				console.log(11)
				this.show=true
			},
					
			// 订单数据回显
			getOrderInfo(){
				this.$api.get(`/merchant/hotel/order/getMerchantOrderInfo/${this.orderId}`,{
					orderId:this.orderId
				}).then((res)=>{
					console.log(res)
					if(res.data.code==0){
						this.orderInfo = res.data.data
						// console.log(this.orderInfo)
						this.form.guestName=res.data.data.guestName
						this.form.guestPhone=res.data.data.guestPhone
					}
				})
			},
			
			
			del(){
				this.form.guestName=''
				this.form.idCard=''
				this.form.guestPhone=''
			},			
			submit(){
				uni.navigateTo({
					url:'/pages/house/orderInfo'
				})
			},			
			
		}
		// onReady(){
		// 	this.$refs.form.setRules(this.rules)
		// }
		
	}
</script>

<style lang="scss">
	.page {
		background: #F3F4F4;
		padding-bottom: 260rpx;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: auto;
		
	}
	.box{
		background-color: #fff;
		margin: 0 auto 20rpx;
		border-radius: 10rpx;
		width: 92%;
		padding: 0 30rpx;
		margin-top: 20rpx;
	}
	.tit {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	.del{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 102rpx;
		background-color: #fff;
		font-size: 30rpx
	}
	.addPerson{
		// margin: 0 auto ;
		width: 92%;
		height: 100rpx;
		margin-left: 30rpx;
		// margin-top: 20rpx; 
		background-color: #fff;
		border-radius: 10rpx; 
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #1372FF;
		
	}
	.yes{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 96rpx;
		background-color: #1372FF;
		border-radius: 48rpx;
		position: fixed;
		bottom: 10%;
		margin-left: 30rpx;
		color: #fff;
		font-size: 34rpx;
		// line-height: 96rpx;
		// margin-top: 200rpx;
	}
	.delete{
		display: flex;
		 justify-content: center; 
		 align-items: center;
	}
	.personInfo{
		padding-left: 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>