|
@@ -1,272 +1,272 @@
|
|
|
-<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">
|
|
|
- <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 ""
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(opt) {
|
|
|
- that = this;
|
|
|
- this.orderInfo = JSON.parse(opt.orderInfo);
|
|
|
- console.log(this.orderInfo)
|
|
|
- this.checkInPersonList = this.orderInfo.detailFormList[0].checkInPersonList;
|
|
|
- if (!this.checkInPersonList || this.checkInPersonList.length == 0) {
|
|
|
- this.checkInPersonList.push({
|
|
|
- cardType: 0,
|
|
|
- idCard: '',
|
|
|
- checkInPhone: '',
|
|
|
- checkInName: '',
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- 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: '',
|
|
|
- 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
|
|
|
- }
|
|
|
+<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">
|
|
|
+ <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 ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ that = this;
|
|
|
+ this.orderInfo = JSON.parse(opt.orderInfo);
|
|
|
+ console.log(this.orderInfo)
|
|
|
+ this.checkInPersonList = this.orderInfo.detailFormList[0].checkInPersonList;
|
|
|
+ if (!this.checkInPersonList || this.checkInPersonList.length == 0) {
|
|
|
+ this.checkInPersonList.push({
|
|
|
+ cardType: 0,
|
|
|
+ idCard: '',
|
|
|
+ checkInPhone: '',
|
|
|
+ checkInName: '',
|
|
|
})
|
|
|
-
|
|
|
- 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 {
|
|
|
- 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;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: '',
|
|
|
+ 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 {
|
|
|
+ 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;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|