@ -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 >
< / d i s p l a y - b o x >
< / d i s p l a y - b o x >
@ -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 >
< / d i s p l a y - b o x > < / d i v >
< / d i s p l a y - b o x > < / d i v >
< / 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"
> < / t m - c a l e n d a r >
> < / t m - c a l e n d a r >
< 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" >
@ -184,10 +183,10 @@
< / div >
< / div >
< / div >
< / div >
< div class = "wrap3" > < / div >
< div class = "wrap3" > < / div >
< div class = "wrap6" >
< div class = "wrap6" >
请选择参观时间
请选择参观时间
< / div >
< / div >
< div class = "wrap7" >
< div class = "wrap7" >
< div class = "wrap7_2" @click ="selectTime(index)" : class = "[isBeforeCurrentTime(`${showDay?.[currentSelectedData]?.day} ${item}`)?'wrap7_1':'',index===currentSelectedTime?'wrap7_3':'']" v-for ="(item,index) in info?.admissionTime.split(',')" :key ="item" >
< div class = "wrap7_2" @click ="selectTime(index)" : class = "[isBeforeCurrentTime(`${showDay?.[currentSelectedData]?.day} ${item}`)?'wrap7_1':'',index===currentSelectedTime?'wrap7_3':'']" v-for ="(item,index) in info?.admissionTime.split(',')" :key ="item" >
< div class = "wrap7_2_1" > { { item } } 入场 < / div >
< div class = "wrap7_2_1" > { { item } } 入场 < / div >
< div class = "wrap7_2_2" >
< div class = "wrap7_2_2" >
@ -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 >
< / t m - d r a w e r >
< / t m - d r a w e r >
< / 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
}
/ * i f ( ! i n f o . v a l u e ? . a d m i s s i o n T i m e ? . s p l i t ( ' , ' ) [ c u r r e n t S e l e c t e d T i m e . v a l u e ] ) {
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 : 12 rpx ;
margin - top : 12 rpx ;
. wrap1 {
. wrap1 {
margin - bottom : 24 rpx ;
. box - left {
. box - left {
color : # 000 ;
color : # 000 ;
font - size : 24 rpx ;
font - size : 24 rpx ;