|
|
@ -48,7 +48,7 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #r1 >
|
|
|
|
<template #r1 >
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<input type="text" placeholder="填写手机号" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
|
|
|
|
<input type="text" v-model="phone" placeholder="填写手机号" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #l2 >
|
|
|
|
<template #l2 >
|
|
|
@ -59,10 +59,9 @@
|
|
|
|
<template #r2 >
|
|
|
|
<template #r2 >
|
|
|
|
<div style="position: relative;width: 100%">
|
|
|
|
<div style="position: relative;width: 100%">
|
|
|
|
<div >
|
|
|
|
<div >
|
|
|
|
<input type="text" placeholder="填写验证码" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
|
|
|
|
<input v-model="code" type="text" placeholder="填写验证码" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div @click="getCode" style="z-index:11;position: absolute;top: 50%;transform: translateY(-50%);right: 12rpx;color: #B1292E;font-size: 24rpx">{{buttonText}}</div>
|
|
|
|
<div style="position: absolute;top: 50%;transform: translateY(-50%);right: 12rpx;color: #B1292E;font-size: 24rpx">获取验证码</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</display-box>
|
|
|
|
</display-box>
|
|
|
@ -76,7 +75,7 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #r1 >
|
|
|
|
<template #r1 >
|
|
|
|
<div class="r1">
|
|
|
|
<div class="r1">
|
|
|
|
<div class="r1_1">2023年12月16日</div>
|
|
|
|
<div class="r1_1">{{dateStr?dayjs(dateStr).format('YYYY年MM月DD日'):'暂无'}}</div>
|
|
|
|
<div class="r1_2" @click="showWin=true">
|
|
|
|
<div class="r1_2" @click="showWin=true">
|
|
|
|
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2c4872f9-aee5-4b04-9494-94b08c282ed9.png"></image>
|
|
|
|
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2c4872f9-aee5-4b04-9494-94b08c282ed9.png"></image>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -93,13 +92,13 @@
|
|
|
|
*单次最多可预约10人
|
|
|
|
*单次最多可预约10人
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="r2_2">
|
|
|
|
<div class="r2_2">
|
|
|
|
<div class="r2_2_1">
|
|
|
|
<div class="r2_2_1" @click="peoNumChange(-1)">
|
|
|
|
<image src="../../static/zu1149@3x.png"></image>
|
|
|
|
<image src="../../static/zu1149@3x.png"></image>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="r2_2_2">
|
|
|
|
<div class="r2_2_2">
|
|
|
|
<input type="text">
|
|
|
|
<input disabled v-model="peoNum" :max="10" type="text">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="r2_2_3">
|
|
|
|
<div class="r2_2_3" @click="peoNumChange(1)">
|
|
|
|
<image src="../../static/zu1150@3x.png"></image>
|
|
|
|
<image src="../../static/zu1150@3x.png"></image>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -111,7 +110,7 @@
|
|
|
|
*请填写所有参观人的身份证信息
|
|
|
|
*请填写所有参观人的身份证信息
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content8">
|
|
|
|
<div class="content8">
|
|
|
|
<div class="wrap1"> <display-box>
|
|
|
|
<div class="wrap1" v-for="(item,index) in userInfos" :key="index"> <display-box>
|
|
|
|
<template #l1>
|
|
|
|
<template #l1>
|
|
|
|
<div class="box-left">
|
|
|
|
<div class="box-left">
|
|
|
|
真实姓名
|
|
|
|
真实姓名
|
|
|
@ -119,7 +118,7 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #r1>
|
|
|
|
<template #r1>
|
|
|
|
<div class="box-right">
|
|
|
|
<div class="box-right">
|
|
|
|
<input type="text" placeholder="请填写您的真实姓名" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
|
|
|
|
<input type="text" v-model="item.userName" placeholder="请填写您的真实姓名" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #l2>
|
|
|
|
<template #l2>
|
|
|
@ -129,14 +128,14 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template #r2>
|
|
|
|
<template #r2>
|
|
|
|
<div class="box-right">
|
|
|
|
<div class="box-right">
|
|
|
|
<input type="text" placeholder="填写您的身份证号码" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
|
|
|
|
<input type="text" v-model="item.idCard" placeholder="填写您的身份证号码" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</display-box></div>
|
|
|
|
</display-box></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content9">
|
|
|
|
<div class="content9">
|
|
|
|
<div class="wrap1">*预约后信息不可更改,请仔细核对预约信息</div>
|
|
|
|
<div class="wrap1">*预约后信息不可更改,请仔细核对预约信息</div>
|
|
|
|
<div class="wrap2">预约</div>
|
|
|
|
<div class="wrap2" @click="goReservation">预约</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<tm-drawer :height="1054" :round="8" hideHeader inContent ref="calendarView" :placement="'bottom'" v-model:show="showWin">
|
|
|
|
<tm-drawer :height="1054" :round="8" hideHeader inContent ref="calendarView" :placement="'bottom'" v-model:show="showWin">
|
|
|
@ -153,7 +152,7 @@
|
|
|
|
:model="modeltype"
|
|
|
|
:model="modeltype"
|
|
|
|
></tm-calendar>
|
|
|
|
></tm-calendar>
|
|
|
|
<div class="content10" >
|
|
|
|
<div class="content10" >
|
|
|
|
<div class="wrap1">
|
|
|
|
<div class="wrap1" @click="showWin=false">
|
|
|
|
<image src="../../static/Close@3x.png"></image>
|
|
|
|
<image src="../../static/Close@3x.png"></image>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="wrap2">
|
|
|
|
<div class="wrap2">
|
|
|
@ -201,7 +200,7 @@
|
|
|
|
工作日08:30-18:00、节假日/双休09:00-20:00(具体时间以景区为准)<br/>
|
|
|
|
工作日08:30-18:00、节假日/双休09:00-20:00(具体时间以景区为准)<br/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="wrap3" style="margin-bottom: 30rpx"></div>
|
|
|
|
<div class="wrap3" style="margin-bottom: 30rpx"></div>
|
|
|
|
<div class="wrap9">确定</div>
|
|
|
|
<div class="wrap9" @click="showWin=false">确定</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</tm-drawer>
|
|
|
|
</tm-drawer>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -215,26 +214,112 @@ import displayBox from '@/components/display-box/index.vue'
|
|
|
|
dayjs.extend(localizedFormat);
|
|
|
|
dayjs.extend(localizedFormat);
|
|
|
|
dayjs.locale('zh-cn');
|
|
|
|
dayjs.locale('zh-cn');
|
|
|
|
import {useMainStore} from "@/store"
|
|
|
|
import {useMainStore} from "@/store"
|
|
|
|
import {ref} from 'vue'
|
|
|
|
import {ref,onUnmounted} from 'vue'
|
|
|
|
const showWin=ref(true)
|
|
|
|
import {reTicket, sendCode} from "@/http/apis";
|
|
|
|
|
|
|
|
const showWin=ref(false)
|
|
|
|
|
|
|
|
const peoNum=ref(1)
|
|
|
|
const store=useMainStore()
|
|
|
|
const store=useMainStore()
|
|
|
|
const modeltype = ref('day')
|
|
|
|
const modeltype = ref('day')
|
|
|
|
const multiple = ref(false)
|
|
|
|
const multiple = ref(false)
|
|
|
|
const dateStr = ref('')
|
|
|
|
const dateStr = ref('')
|
|
|
|
|
|
|
|
const code=ref('')
|
|
|
|
const showdate = ref(false)
|
|
|
|
const showdate = ref(false)
|
|
|
|
const currentData=ref(dayjs().format('YYYY-MM-DD'))
|
|
|
|
const currentData=ref(dayjs().format('YYYY-MM-DD'))
|
|
|
|
const info=ref(uni.getStorageSync('currentBooking'))
|
|
|
|
const info=ref(uni.getStorageSync('currentBooking'))
|
|
|
|
|
|
|
|
const countdown = ref(5);
|
|
|
|
|
|
|
|
const isCounting = ref(false);
|
|
|
|
|
|
|
|
const buttonText = ref(`获取验证码`);
|
|
|
|
|
|
|
|
const userInfo=ref(uni.getStorageSync('userInfo'))
|
|
|
|
const viewImg=()=>{
|
|
|
|
const viewImg=()=>{
|
|
|
|
uni.previewImage({
|
|
|
|
uni.previewImage({
|
|
|
|
urls:[info.value.ticketImage],
|
|
|
|
urls:[info.value.ticketImage],
|
|
|
|
indicator:'none'
|
|
|
|
indicator:'none'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const goReservation=async ()=>{
|
|
|
|
|
|
|
|
if (!phone.value){
|
|
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
|
|
title: '手机号码不能为空',
|
|
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!code.value){
|
|
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
|
|
title: '验证码不能为空',
|
|
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!dateStr.value){
|
|
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
|
|
title: '日期不能为空',
|
|
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/* if (!info.value?.admissionTime?.split(',')[currentSelectedTime.value]){
|
|
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
|
|
title: '时间不能为空',
|
|
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
return
|
|
|
|
|
|
|
|
}*/
|
|
|
|
|
|
|
|
const data={
|
|
|
|
|
|
|
|
ticketUid:info.value.uuid,
|
|
|
|
|
|
|
|
userName:userInfo.value.realName,
|
|
|
|
|
|
|
|
idCard:userInfo.value.idNum,
|
|
|
|
|
|
|
|
phone:phone.value,
|
|
|
|
|
|
|
|
code:code.value,
|
|
|
|
|
|
|
|
date:dateStr.value?.replaceAll('-','/'),
|
|
|
|
|
|
|
|
time:info.value?.admissionTime?.split(',')[currentSelectedTime.value],
|
|
|
|
|
|
|
|
userInfo:userInfos.value
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const res=await reTicket(data)
|
|
|
|
|
|
|
|
console.log(res,'goReservation')
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const getCode=async ()=>{
|
|
|
|
|
|
|
|
console.log(buttonText.value,'buttonText.value')
|
|
|
|
|
|
|
|
if (isCounting.value) return;
|
|
|
|
|
|
|
|
isCounting.value = true;
|
|
|
|
|
|
|
|
countdown.value = 5;
|
|
|
|
|
|
|
|
buttonText.value = `剩余 ${countdown.value} 秒`;
|
|
|
|
|
|
|
|
const res= await sendCode({telNum:phone.value})
|
|
|
|
|
|
|
|
if (res.code===200){
|
|
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
|
|
title: '发送成功',
|
|
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const intervalId = setInterval(() => {
|
|
|
|
|
|
|
|
if (countdown.value > 0) {
|
|
|
|
|
|
|
|
countdown.value--;
|
|
|
|
|
|
|
|
buttonText.value = `剩余 ${countdown.value} 秒`;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
clearInterval(intervalId);
|
|
|
|
|
|
|
|
isCounting.value = false;
|
|
|
|
|
|
|
|
buttonText.value = `重新获取验证码`;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
|
|
|
clearInterval(intervalId);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
const userInfos=ref([{userName:'',idCard:''}])
|
|
|
|
|
|
|
|
const phone=ref('')
|
|
|
|
const currentSelectedData=ref(undefined)
|
|
|
|
const currentSelectedData=ref(undefined)
|
|
|
|
const selectData=(index)=>{
|
|
|
|
const selectData=(index)=>{
|
|
|
|
if (dayjs(showDay.value[index].day).isBefore(dayjs(), 'day')){
|
|
|
|
if (dayjs(showDay.value[index].day).isBefore(dayjs(), 'day')){
|
|
|
|
return
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
dateStr.value=showDay.value[index].day
|
|
|
|
currentSelectedTime.value=undefined
|
|
|
|
currentSelectedTime.value=undefined
|
|
|
|
currentSelectedData.value=index
|
|
|
|
currentSelectedData.value=index
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -250,6 +335,15 @@ const selectTime=(index)=>{
|
|
|
|
}
|
|
|
|
}
|
|
|
|
currentSelectedTime.value=index
|
|
|
|
currentSelectedTime.value=index
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const peoNumChange=(num)=>{
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
peoNum.value=peoNum.value+num
|
|
|
|
|
|
|
|
if (num>0){
|
|
|
|
|
|
|
|
userInfos.value.push({userName:'',idCard:''})
|
|
|
|
|
|
|
|
}else if (num<0){
|
|
|
|
|
|
|
|
userInfos.value.pop()
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
const confirmData=(data)=>{
|
|
|
|
const confirmData=(data)=>{
|
|
|
|
currentSelectedData.value=1
|
|
|
|
currentSelectedData.value=1
|
|
|
|
showDay.value=weekDays(data?.[0]?.replaceAll('/', '-'))
|
|
|
|
showDay.value=weekDays(data?.[0]?.replaceAll('/', '-'))
|
|
|
@ -595,6 +689,7 @@ const goMore=()=>{
|
|
|
|
.content8{
|
|
|
|
.content8{
|
|
|
|
margin-top: 12rpx;
|
|
|
|
margin-top: 12rpx;
|
|
|
|
.wrap1{
|
|
|
|
.wrap1{
|
|
|
|
|
|
|
|
margin-bottom: 24rpx;
|
|
|
|
.box-left{
|
|
|
|
.box-left{
|
|
|
|
color: #000;
|
|
|
|
color: #000;
|
|
|
|
font-size: 24rpx;
|
|
|
|
font-size: 24rpx;
|
|
|
|