hotelHomestayWx/pages/house/stayCheck.vue

<template>
	<view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="新增订单" :showIcon="false"></c-nav-bar>
		<view class="box">
		
			 <u-form :model="form" ref="form">
				 <u-form-item label="姓名" label-width="172rpx" border-bottom>
					 <u-input border="false" v-model="form.guestName" placeholder="请输入姓名"/>
				 </u-form-item>
				 <u-form-item label="手机号码" 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">
								<text style="font-size: 30rpx;">身份证</text>
								<!-- <text style="margin-left: 90%;">></text> -->
								<u-icon name="arrow-right"></u-icon>
							</view>
				 </u-form-item> 
				 <u-form-item label="证件号" label-width="172rpx" border-bottom>
				 	<u-input border="false" v-model="form.idNumber" placeholder="请输入证件号"/>
				 </u-form-item>
				 <u-form-item class="delete" >
						<view class="delete">
							<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">
				确定
			</view>
			
		 
		
	</view>
</template>

<script>
	export default{
		data(){
			return {
				form:{
					guestPhone:'',
					idNumber:'',
					guestName:'',
					
				},
			 show: false,
			        selected: 0,
			        columns: ['Option 1', 'Option 2', 'Option 3'] // 用来展示在选择器中的数据
			}
			
		},
		methods:{
			del(){
				this.dataForm.guestName=''
				this.dataForm.idNumber=''
				this.dataForm.guestPhone=''
			}
		},
		togglePicker(){
		        this.show = !this.show;
		      }
	}
</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>