You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
343 lines
8.4 KiB
343 lines
8.4 KiB
<template>
|
|
<view class="v-page">
|
|
<template v-for="(item,index) in dynamicLists">
|
|
<uni-forms ref="form" :modelValue="dynamicLists[index]" label-position="top" :label-width='150'>
|
|
<view class="an_box_2 rcd_box box_1">
|
|
<view class="title_t_1">
|
|
<text v-if="index==0" class="fill-full">预约人</text><text class="fill-full"
|
|
v-else>同行人{{index}}</text><button class="title-btn" v-if="index!=0"
|
|
@tap="delReserve(index)">删除</button>
|
|
</view>
|
|
|
|
<uni-forms-item label="姓名" required name="name">
|
|
<uni-easyinput type="text" placeholder="请输入姓名" v-model="item.name" />
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item v-if="index==0" label="手机号" required name="phone">
|
|
<uni-easyinput type="text" v-model="item.phone" placeholder="请输入手机号" />
|
|
</uni-forms-item>
|
|
<uni-forms-item v-else label="手机号" name="phone">
|
|
<uni-easyinput type="text" v-model="item.phone" placeholder="请输入手机号" />
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="个人证件类型" name="documentsType">
|
|
<uni-data-checkbox mode="button" v-model="item.documentsType"
|
|
:localdata="idcardList"></uni-data-checkbox>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item v-if="item.documentsType=='5501'" label="证件号码" required name="idCardNumber">
|
|
<uni-easyinput type="text" v-model="item.idCardNumber" placeholder="请输入身份证号码号码" />
|
|
<view class="v-form-tip" v-if="item.idCardState">请填写正确的身份证件号码</view>
|
|
</uni-forms-item>
|
|
<uni-forms-item v-if="item.documentsType=='5502'" label="证件号码" required name="passportNumber">
|
|
<uni-easyinput type="text" v-model="item.passportNumber" placeholder="请输入护照码号码" />
|
|
</uni-forms-item>
|
|
</view>
|
|
</uni-forms>
|
|
</template>
|
|
|
|
<view class="an_box_2">
|
|
<button form-type="submit" class="add_btn" :class="isAdd?'active':''" @tap="addReserve">
|
|
添加
|
|
</button>
|
|
<view class="add_tip">每个预约单最多可预约5人!</view>
|
|
</view>
|
|
|
|
<view class="yuyue-btn">
|
|
|
|
<view class="an_box_2">
|
|
<view class="amt_30">
|
|
<view class="yue_xuzhi">
|
|
<radio-group>
|
|
<label class="radio">
|
|
<radio :checked="agreementChecked" @click="radioChange" />
|
|
</label>我已阅读并同意<text @click="gotoNotice">《游客须知》</text>
|
|
</radio-group>
|
|
</view>
|
|
<button form-type="submit" class="yue_fm_btn yue_e_bun" :class="agreementChecked?'active':''"
|
|
@click="saveReserve('dynamicForm')">
|
|
预约
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import aes from "@/common/aes.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
agreementChecked: false,
|
|
|
|
formData: {
|
|
name: {},
|
|
phone: {},
|
|
documentsType: {},
|
|
idCardNumber: {},
|
|
passportNumber: {},
|
|
|
|
},
|
|
dynamicLists: [],
|
|
rules: {
|
|
name: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '姓名不能为空'
|
|
}]
|
|
},
|
|
phone: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '电话号码不能为空'
|
|
},
|
|
{
|
|
validateFunction: function(rule, value, data, callback) {
|
|
let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
|
|
if (!reg.test(value)) {
|
|
callback('请填写正确的手机号码')
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
]
|
|
},
|
|
idCardNumber: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '身份证号码不能为空'
|
|
},
|
|
{
|
|
validateFunction: function(rule, value, data, callback) {
|
|
if (data.documentsType == '5502') {
|
|
return true
|
|
} else {
|
|
let idreg =
|
|
/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
|
|
if (!idreg.test(value)) {
|
|
callback('请填写正确的身份证件号码')
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
}
|
|
},
|
|
]
|
|
},
|
|
passportNumber: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '护照号码不能为空'
|
|
}, ]
|
|
}
|
|
},
|
|
idcardList: [{
|
|
"value": '5501',
|
|
"text": "身份证"
|
|
}, {
|
|
"value": '5502',
|
|
"text": "护照"
|
|
}],
|
|
isAdd: true,
|
|
errList: []
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.propData = JSON.parse(options.data)
|
|
},
|
|
created() {
|
|
this.addReserve()
|
|
},
|
|
methods: {
|
|
radioChange: function(e) {
|
|
this.agreementChecked = !this.agreementChecked;
|
|
},
|
|
gotoNotice: function() {
|
|
uni.navigateTo({
|
|
url: '/sunPackIndex/scenic/subscribe/yuyue/yue-notice'
|
|
});
|
|
},
|
|
//创建预约人
|
|
addReserve: function() {
|
|
if (this.isAdd) {
|
|
let newData = {
|
|
name: "",
|
|
phone: "",
|
|
documentsType: '5501',
|
|
idCardNumber: "",
|
|
state: false,
|
|
passportNumber: "",
|
|
}
|
|
//判断最多预约人数
|
|
this.dynamicLists.push(newData);
|
|
this.$nextTick(() => {
|
|
this.$refs.form[this.dynamicLists.length - 1].setRules(this.rules);
|
|
});
|
|
if (this.dynamicLists.length > 4) {
|
|
this.isAdd = false
|
|
}
|
|
}
|
|
},
|
|
//删除预约人
|
|
delReserve: function(index) {
|
|
this.dynamicLists.splice(index, 1);
|
|
|
|
if (this.dynamicLists.length <= 4) {
|
|
this.isAdd = true
|
|
}
|
|
},
|
|
//预约按钮
|
|
saveReserve: function() {
|
|
|
|
let that = this
|
|
|
|
if(this.agreementChecked==true){
|
|
uni.showLoading({
|
|
mask:true,
|
|
title:'加载中...'
|
|
})
|
|
let promise = new Promise(function(resolve, reject) {
|
|
that.dynamicLists.map((item, index) => {
|
|
that.$refs.form[index].validate().then(res => {
|
|
that.dynamicLists[index].state = '1'
|
|
}).catch(err => {
|
|
that.dynamicLists[index].state = '0'
|
|
})
|
|
})
|
|
setTimeout(function() {
|
|
resolve('success');
|
|
}, 1000);
|
|
})
|
|
|
|
promise.then(value => {
|
|
let reState = that.dynamicLists.every((item, index) => {
|
|
return item.state == '1'
|
|
})
|
|
console.log("asd",reState)
|
|
if (reState == true) {
|
|
console.log("asd",reState)
|
|
|
|
this.postReserve()
|
|
|
|
}else{
|
|
uni.hideLoading()
|
|
}
|
|
})}
|
|
},
|
|
//传输数据
|
|
postReserve: function() {
|
|
const that = this
|
|
let newList = that.dynamicLists.map((item, index) => {
|
|
let numberDate
|
|
if (item.idCardNumber) {
|
|
numberDate = item.idCardNumber
|
|
} else {
|
|
numberDate = item.passportNumber
|
|
}
|
|
let reservationPerson
|
|
if (index == 0) {
|
|
reservationPerson = 0
|
|
} else {
|
|
reservationPerson = 1
|
|
}
|
|
let newItem = {
|
|
name: item.name,
|
|
phone: item.phone,
|
|
documentsType: item.documentsType,
|
|
documentsNumber: numberDate,
|
|
reservationPerson: reservationPerson
|
|
}
|
|
return newItem
|
|
})
|
|
var data = {
|
|
appointmentTimeInfoId: that.propData.id,
|
|
appointmentDate: that.propData.date,
|
|
startTime: that.propData.startTime,
|
|
endTime: that.propData.endTime,
|
|
scenicId: that.propData.scenicId,
|
|
externalId: that.propData.externalId,
|
|
unionId: uni.getStorageSync('unionid'),
|
|
appointmentPersonList: newList
|
|
}
|
|
|
|
uni.request({
|
|
url: that.$config.reservationNow,
|
|
data: data,
|
|
method: "POST",
|
|
header: {
|
|
"content-type": 'application/json',
|
|
},
|
|
xhrFields: {
|
|
withCredentials: true
|
|
},
|
|
success: function(result) {
|
|
if (result.data.status == 200) {
|
|
uni.hideLoading()
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: '预约成功',
|
|
showCancel: false,
|
|
success() {
|
|
uni.navigateTo({
|
|
url: "/sunPackIndex/scenic/subscribe/yuyue/yue_detail_2?id=" +
|
|
result.data.data.documentsId
|
|
})
|
|
}
|
|
})
|
|
} else if (result.data.status == 500) {
|
|
uni.showToast({
|
|
title: result.data.data,
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
//succ.call(self, result.data)
|
|
},
|
|
fail: function(e) {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'预约失败'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.v-page {
|
|
padding-bottom: 180rpx;
|
|
}
|
|
|
|
.uni-data-checklist .checklist-group .checklist-box.is--button {
|
|
width: 50% !important;
|
|
}
|
|
|
|
.uni-forms-item__label {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.yue_xuzhi {
|
|
font-size: 28rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.yue_xuzhi text {
|
|
color: rgb(22, 119, 255);
|
|
}
|
|
|
|
.v-form-tip {
|
|
color: #f56c6c;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
padding-top: 4px;
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 0;
|
|
}
|
|
</style> |