submit
This commit is contained in:
parent
fffbe3b63e
commit
ee496f298d
@ -18,7 +18,7 @@
|
||||
<div @click="viewImg(item)" class="wrap1_1">
|
||||
<image :src="item.ticketImage"></image>
|
||||
</div>
|
||||
<div class="wrap1_2">首都博物馆门票</div>
|
||||
<div class="wrap1_2">{{item.ticketName}}</div>
|
||||
<div class="wrap1_3" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===-1?'不限':item.remainingQuantity}}/{{item.issueQuantity===-1?'不限':item.issueQuantity}}</div>
|
||||
<div class="wrap1_4" @click="goBooking(item)" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===0?'无票':'预约'}}</div>
|
||||
</div>
|
||||
|
||||
@ -140,11 +140,13 @@
|
||||
</div>
|
||||
|
||||
<tm-drawer :height="1054" :round="8" hideHeader inContent ref="calendarView" :placement="'bottom'" v-model:show="showWin">
|
||||
|
||||
<tm-calendar
|
||||
format="YYYY年MM月DD日"
|
||||
format="YYYY-MM-DD"
|
||||
:dateStyle="dateStyle"
|
||||
@click="test"
|
||||
:start="[new Date()]"
|
||||
:multiple="multiple"
|
||||
@confirm="confirmData"
|
||||
color="#F7963B"
|
||||
v-model:show="showdate"
|
||||
v-model:model-str="dateStr"
|
||||
@ -159,38 +161,19 @@
|
||||
</div>
|
||||
<div class="wrap3"></div>
|
||||
<div class="wrap4">
|
||||
当前年月：2023年12月
|
||||
当前年月：{{dayjs(currentData).year()}}年{{dayjs(currentData).month()+1}}月
|
||||
</div>
|
||||
<div class="wrap3"></div>
|
||||
<div class="wrap5">
|
||||
<div class="wrap5_1">
|
||||
<div class="wrap5_1_1">
|
||||
12月02日·周六
|
||||
</div>
|
||||
<div class="wrap5_1_2">
|
||||
*不可预约
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap5_2">
|
||||
<div class="wrap5_2" @click="selectData(index)" :class="[dayjs(item.day).isBefore(dayjs(), 'day')?'wrap5_1':'',index===currentSelectedData?'wrap5_3':'']" v-for="(item,index) in showDay" :key="item.day">
|
||||
<div class="wrap5_2_1">
|
||||
12月03日·周日
|
||||
{{dayjs(item.day).format('MM月DD日')}}·周{{item.week}}
|
||||
</div>
|
||||
<div class="wrap5_2_2">
|
||||
*可预约
|
||||
{{ dayjs(item.day).isBefore(dayjs(), 'day')?'*不可预约':'*可预约'}}
|
||||
</div>
|
||||
<div class="wrap5_2_3">
|
||||
今日
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap5_3">
|
||||
<div class="wrap5_3_1">
|
||||
12月04日·周一
|
||||
</div>
|
||||
<div class="wrap5_3_2">
|
||||
*可预约
|
||||
</div>
|
||||
<div class="wrap5_3_3">
|
||||
明日
|
||||
{{judgeDate(item.day)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap5_4" @click="goMore">
|
||||
@ -205,21 +188,10 @@
|
||||
请选择参观时间
|
||||
</div>
|
||||
<div class="wrap7">
|
||||
<div class="wrap7_1">
|
||||
<div class="wrap7_1_1">08:00入场</div>
|
||||
<div class="wrap7_1_2">*不可选</div>
|
||||
</div>
|
||||
<div class="wrap7_2">
|
||||
<div class="wrap7_2_1">10:00入场</div>
|
||||
<div class="wrap7_2_2">*可选</div>
|
||||
</div>
|
||||
<div class="wrap7_3">
|
||||
<div class="wrap7_3_1">12:00入场</div>
|
||||
<div class="wrap7_3_2">*可选</div>
|
||||
</div>
|
||||
<div class="wrap7_2">
|
||||
<div class="wrap7_2_1">10:00入场</div>
|
||||
<div class="wrap7_2_2">*可选</div>
|
||||
<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_2">
|
||||
{{isBeforeCurrentTime(`${showDay?.[currentSelectedData]?.day} ${item}`)?'*不可选':'*可选'}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap3"></div>
|
||||
@ -235,9 +207,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
import localizedFormat from 'dayjs/plugin/localizedFormat';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import displayBox from '@/components/display-box/index.vue'
|
||||
dayjs.extend(localizedFormat);
|
||||
dayjs.locale('zh-cn');
|
||||
import {useMainStore} from "@/store"
|
||||
import {ref} from 'vue'
|
||||
const showWin=ref(true)
|
||||
@ -246,7 +222,7 @@ const modeltype = ref('day')
|
||||
const multiple = ref(false)
|
||||
const dateStr = ref('')
|
||||
const showdate = ref(false)
|
||||
|
||||
const currentData=ref(dayjs().format('YYYY-MM-DD'))
|
||||
const info=ref(uni.getStorageSync('currentBooking'))
|
||||
const viewImg=()=>{
|
||||
uni.previewImage({
|
||||
@ -254,6 +230,69 @@ const viewImg=()=>{
|
||||
indicator:'none'
|
||||
})
|
||||
}
|
||||
const currentSelectedData=ref(undefined)
|
||||
const selectData=(index)=>{
|
||||
if (dayjs(showDay.value[index].day).isBefore(dayjs(), 'day')){
|
||||
return
|
||||
}
|
||||
currentSelectedTime.value=undefined
|
||||
currentSelectedData.value=index
|
||||
}
|
||||
const isBeforeCurrentTime=(dateTimeStr)=> {
|
||||
const givenDateTime = dayjs(dateTimeStr);
|
||||
const now = dayjs();
|
||||
return givenDateTime.isBefore(now);
|
||||
}
|
||||
const currentSelectedTime=ref(undefined)
|
||||
const selectTime=(index)=>{
|
||||
if (isBeforeCurrentTime(`${showDay.value?.[currentSelectedData.value]?.day} ${info.value?.admissionTime.split(',')[index]}`)){
|
||||
return
|
||||
}
|
||||
currentSelectedTime.value=index
|
||||
}
|
||||
const confirmData=(data)=>{
|
||||
currentSelectedData.value=1
|
||||
showDay.value=weekDays(data?.[0]?.replaceAll('/', '-'))
|
||||
}
|
||||
const judgeDate=(relativeDate)=> {
|
||||
const givenDate = dayjs(relativeDate);
|
||||
|
||||
const today = dayjs();
|
||||
const tomorrow = dayjs().add(1, 'day');
|
||||
|
||||
if (givenDate.isSame(today, 'day')) {
|
||||
return '今日';
|
||||
} else if (givenDate.isSame(tomorrow, 'day')) {
|
||||
return '明日';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
const weekDays = (baseDate) => {
|
||||
const base = baseDate ? dayjs(baseDate) : dayjs();
|
||||
const formatDay = base.format('YYYY-MM-DD');
|
||||
const formatWeek = base.format('dd');
|
||||
const today = {
|
||||
day: formatDay,
|
||||
week: formatWeek
|
||||
};
|
||||
|
||||
const yesterday = base.subtract(1, 'day');
|
||||
const yesterdayFormatted = {
|
||||
day: yesterday.format('YYYY-MM-DD'),
|
||||
week: yesterday.format('dd')
|
||||
};
|
||||
|
||||
const tomorrow = base.add(1, 'day');
|
||||
const tomorrowFormatted = {
|
||||
day: tomorrow.format('YYYY-MM-DD'),
|
||||
week: tomorrow.format('dd')
|
||||
};
|
||||
|
||||
return [yesterdayFormatted, today, tomorrowFormatted];
|
||||
};
|
||||
const showDay=ref(weekDays())
|
||||
console.log(showDay.value,'showDay')
|
||||
const dateStyle = ref([
|
||||
{
|
||||
date: '2022-12-8', //日期
|
||||
@ -306,6 +345,7 @@ const goMore=()=>{
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow-x: auto;
|
||||
.wrap7_3{
|
||||
box-sizing: border-box;
|
||||
border-radius: 32rpx;
|
||||
@ -315,21 +355,24 @@ const goMore=()=>{
|
||||
justify-content: center;
|
||||
width: 152rpx;
|
||||
height: 98rpx;
|
||||
background-color: #F7963B;
|
||||
.wrap7_3_2{
|
||||
background-color: #F7963B!important;
|
||||
.wrap7_2_2{
|
||||
font-size: 16rpx;
|
||||
color: #fff;
|
||||
color: #fff!important;
|
||||
}
|
||||
.wrap7_3_1{
|
||||
.wrap7_2_1{
|
||||
margin-bottom: 2rpx;
|
||||
color: #fff;
|
||||
color: #fff!important;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.wrap7_2{
|
||||
|
||||
margin-right: 30rpx;
|
||||
border: 2rpx solid #F7963B;
|
||||
box-sizing: border-box;
|
||||
border-radius: 32rpx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -356,11 +399,12 @@ const goMore=()=>{
|
||||
width: 152rpx;
|
||||
height: 98rpx;
|
||||
background-color: #D8D8D8;
|
||||
.wrap7_1_2{
|
||||
border: none;
|
||||
.wrap7_2_2{
|
||||
font-size: 16rpx;
|
||||
color: #868686;
|
||||
}
|
||||
.wrap7_1_1{
|
||||
.wrap7_2_1{
|
||||
margin-bottom: 2rpx;
|
||||
color: #000;
|
||||
font-size: 24rpx;
|
||||
@ -406,27 +450,27 @@ const goMore=()=>{
|
||||
position: relative;
|
||||
width: 196rpx;
|
||||
height: 98rpx;
|
||||
background-color: #F7963B;
|
||||
background-color: #F7963B!important;
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.wrap5_3_3{
|
||||
.wrap5_2_3{
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
bottom: -40rpx;
|
||||
font-size: 24rpx;
|
||||
color: #F7963B;
|
||||
color: #F7963B!important;
|
||||
}
|
||||
.wrap5_3_2{
|
||||
color: #fff;
|
||||
.wrap5_2_2{
|
||||
color: #fff!important;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
.wrap5_3_1{
|
||||
.wrap5_2_1{
|
||||
margin-bottom: 10rpx;
|
||||
color: #fff;
|
||||
color: #fff!important;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
@ -469,11 +513,13 @@ const goMore=()=>{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.wrap5_1_2{
|
||||
border: none;
|
||||
.wrap5_2_2{
|
||||
|
||||
color: #868686;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
.wrap5_1_1{
|
||||
.wrap5_2_1{
|
||||
margin-bottom: 10rpx;
|
||||
color: #000;
|
||||
font-size: 24rpx;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user