hotelHomestayWx/pages/house/stayCheck.vue

<template>
	<view class="page" :style="{'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" :key="index">
				<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="checkInPhone" label-width="172rpx" border-bottom>
					<u-input border="false" v-model="item.checkInPhone" 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.cardType|cardName}}</text>
						<u-picker :itemHeight="88" :immediateChange="true" :show="show" :columns="list" keyName="label"
							:defaultIndex="passengerDefault" @cancel="show=false;"
							@confirm="(e)=>passengerConfirm(e,index)"></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="btn-tbn">
			<view class="yes" @click.native="conform">
				确定
			</view>
		</view>


	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				checkInPersonList: [],
				passengerDefault: [0],
				orderInfo: [],
				orderId: null,
				show: false,
				list: [
					[{
							value: 0,
							label: '身份证'
						},
						{
							value: 1,
							label: '护照'
						},
						{
							value: 5,
							label: '台湾居民居住证'
						},
						{
							value: 6,
							label: '港澳居民居住证'
						}
					]
				],
				list2: [{
						value: 0,
						label: '身份证'
					},
					{
						value: 1,
						label: '护照'
					},
					{
						value: 5,
						label: '台湾居民居住证'
					},
					{
						value: 6,
						label: '港澳居民居住证'
					}
				]
			}

		},

		filters: {
			cardName(val) {
				let item = that.list2.filter((item) => item.value == val);
				if (item[0]) {
					return item[0].label;
				} else {
					return ""
				}
			}
		},
		onUnload() {
			uni.$off('sendData');
		},
		onLoad(opt) {
			that = this;
			uni.$once('sendData', info => {
				that.orderInfo = info;
				console.log(that.orderInfo)
				that.checkInPersonList = that.orderInfo.detailFormList[0].checkInPersonList;
				if (!that.checkInPersonList || that.checkInPersonList.length == 0) {
					that.checkInPersonList.push({
						cardType: 0,
						idCard: '',
						checkInPhone: '',
						checkInName: '',
					})
				}
			})
			uni.$emit('toSendData');
		},
		methods: {
			passengerConfirm(e, index) {
				this.checkInPersonList[index].cardType = e.value[0].value;
				this.show = false;
			},
			showCardChoose() {
				this.show = true
			},
			del(index) {
				if (this.checkInPersonList.length > 1) {
					this.checkInPersonList.splice(index, 1);
				}
			},
			addPerson() {
				this.checkInPersonList.push({
					checkInPhone: '',
					idCard: '',
					cardType: 0,
					checkInName: '',
				})
			},
			conform() {
				this.checkInPersonList.forEach((item) => {
					if (!item.checkInName) {
						this.$showToast('请输入姓名');
						return false
					}
					let checkInPhone = item.checkInPhone;
					if (checkInPhone.indexOf("**") > -1) {
						checkInPhone = checkInPhone.replace(/\*/g, "5");
					}
					if (!this.$u.test.mobile(checkInPhone)) {
						this.$showToast('请输入正确手机号');
						return false
					}
					let idCard = item.idCard;
					if (idCard.indexOf("**") > -1) {
						idCard = idCard.replace(/\*/g, "1");
					}
					if (!this.$u.test.idCard(idCard)) {
						this.$showToast('请输入正确身份证号');
						return false
					}
				})

				let list = this.checkInPersonList.filter((item) => item.idCard && item.checkInName && item.checkInPhone);
				if (list.length == 0) return;
				this.getOpenerEventChannel().emit('addSuccess', {
					'data': list
				});
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	.page {

		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;
		border-bottom: 20rpx solid #F3F4F4;
		;
	}

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

	}

	.btn-tbn {
		width: 100%;
		height: 136rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		z-index: 999;
	}

	.yes {
		width: 690rpx;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1372FF;
		border-radius: 48rpx;
		// 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>