xingyy/uni-ticket-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

submit

Browse Source
This commit is contained in:
xingyy 2023-12-19 12:48:00 +08:00
parent fffbe3b63e
commit ee496f298d
2 changed files with 106 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/home/index.vue
View File

@ -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>

164
src/pages/ticket/index.vue
View File

@ -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;