submit

src/pages/home/index.vue

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

src/pages/ticket/index.vue

@@ -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_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_1_1">
-                  12月02日·周六
-                </div>
-                <div class="wrap5_1_2">
-                  *不可预约
-                </div>
-              </div>
-              <div class="wrap5_2">
                 <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">
-                  今日
+                  {{judgeDate(item.day)}}
-                </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">
-                  明日
                 </div>
               </div>
               <div class="wrap5_4" @click="goMore">
@@ -205,21 +188,10 @@
               请选择参观时间
             </div>
             <div class="wrap7">
-              <div class="wrap7_1">
+              <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_1_1">08:00入场</div>
+                <div class="wrap7_2_1">{{item}}入场</div>
-                <div class="wrap7_1_2">*不可选</div>
+                <div class="wrap7_2_2">
-              </div>
+                  {{isBeforeCurrentTime(`${showDay?.[currentSelectedData]?.day} ${item}`)?'*不可选':'*可选'}}</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>
             </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;
+      background-color: #F7963B!important;
-      .wrap7_3_2{
+      .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{
+      .wrap5_2_2{
-        color: #fff;
+        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;