hotelHomestayWx/pages/house/stayCheck.vue

<template>
	<view class="page" :style="{'height':(h)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="添加入住人" :showIcon="true"></c-nav-bar>
		<u-form :model="form" ref="form">
			<view class="box" v-for="(item,index) in checkInPersonList">
				<u-form-item label="姓名" prop="checkInName" label-width="172rpx" border-bottom>
					<u-input border="false" v-model="item.checkInName" placeholder="请输入姓名" />
				</u-form-item>
				<!-- <u-form-item label="手机号码" prop="guestPhone" label-width="172rpx" border-bottom>
						<u-input border="false" v-model="item.guestPhone" placeholder="请输入手机号" />
					</u-form-item> -->
				<!-- <u-form-item label="证件类型" label-width="172rpx" border-bottom @click.native="show=true">
						<view class="personInfo">
							<text style="font-size: 30rpx;">{{item.idName}}</text>
							<u-picker :itemHeight="88" :immediateChange="true" :show="show" :columns="list"
								keyName="label" :defaultIndex="passengerDefault" @cancel="show=false;"
								@confirm="passengerConfirm"></u-picker>
							<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="item.idCard" placeholder="请输入证件号" />
				</u-form-item>
				<u-form-item label="民族" prop="nation" label-width="172rpx" border-bottom>
					<u-input border="false" v-model="item.nation" placeholder="请输入民族" />
				</u-form-item>
				<u-form-item label="地址" prop="address" label-width="172rpx" border-bottom>
					<u-input border="false" v-model="item.address" placeholder="请输入地址" />
				</u-form-item>

				<u-form-item class="delete" v-if="checkInPersonList.length>1">
					<view class="delete" @click="del(index)">
						<u-icon name="trash"></u-icon>
						<text style="font-size: 30rpx;">删除</text>
					</view>
				</u-form-item>
			</view>
		</u-form>

		<!-- 添加入住人 -->
		<view class="addPerson" @click="addPerson()">
			<u-icon name="plus" color="#2979ff"></u-icon>添加入住人
		</view>
		<!-- 按钮 -->
		<!-- 按钮 -->

		<view class="yes" @click.native="conform">
			确定

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataForm:{},
				checkInPersonList: [],
				passengerDefault: [0],
				form: {
					nation: '',
					idCard: '',
					address: '',
					checkInName: '',
				},
				orderInfo: [],
				orderId: null,
				show: false,
				list: [
					[{
							value: '1',
							label: '身份证'
						},
						{
							value: '2',
							label: '居住证'
						}
					]
				],
			}

		},
		onLoad(opt) {
			this.orderInfo=JSON.parse(opt.orderInfo);
			this.checkInPersonList =this.orderInfo.detailFormList[0].checkInPersonList;
			if (this.checkInPersonList.length == 0) {
				this.checkInPersonList.push({
					nation: '',
					idCard: '',
					address: '',
					checkInName: '',
				})
			}
		},
		methods: {
			// passengerConfirm(e) {
			// 	this.form.idName = e.value[0].label
			// },
			// 证件下拉菜单
			// showCardChoose() {
			// 	this.show = true
			// },
			del(index) {
				if (this.checkInPersonList.length > 1) {
					this.checkInPersonList.splice(index, 1);
				}
			},
			addPerson() {
				this.checkInPersonList.push({
					nation: '',
					idCard: '',
					address: '',
					checkInName: '',
				})
			},
			conform() {
				let list = this.checkInPersonList.filter((item) => item.idCard && item.checkInName);
				this.$api.post('/merchant/hotel/order/updOrder', this.orderInfo).then(res => {
					if (res.data.code == 0) {
						this.$showToast('操作成功');
						setTimeout(() => {
							this.getOpenerEventChannel().emit('addSuccess', {
								'data': list
							});
							uni.navigateBack();
						}, 1500)
					}
				})
			},
		}
		// 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;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #1372FF;

	}

	.yes {
		width: 690rpx;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1372FF;
		border-radius: 48rpx;
		position: fixed;
		bottom: 40rpx;
		margin-left: 30rpx;
		color: #fff;
		font-size: 34rpx;
		text-align: center;
		// 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>