预约日历显示逻辑调整

 <!--
  * @Date: 2024-01-15 13:35:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-22 10:24:44
+ * @LastEditTime: 2024-01-22 15:35:03
  * @FilePath: /xysBooking/src/views/booking.vue
  * @Description: 预约页面
 -->
@@ -19,18 +19,19 @@
         <div v-for="(week, index) in weeks" :key="week" class="weeks">
           <div v-for="date in week" :key="date"
             @click="chooseDay(date)"
-            :class="['item', checked_day === findDatesInfo(date).date ? 'checked' : '',  findDatesInfo(date).reserve_full ? 'disabled' : '']"
+            :class="['item', checked_day === findDatesInfo(date).date ? 'checked' : '',  findDatesInfo(date).reserve_full === 0 ? 'disabled' : '']"
           >
             <div v-if="findDatesInfo(date).date">
               <p class="day-text">{{ findDatesInfo(date).text }}</p>
-              <p v-if="!findDatesInfo(date).reserve_full" class="day-price">¥{{ findDatesInfo(date).price }}</p>
-              <!-- <p v-else class="day-no-booking">已约满</p> -->
-              <p v-else class="day-no-booking">¥{{ findDatesInfo(date).price }}</p>
+              <p v-if="findDatesInfo(date).reserve_full === 1" class="day-price">¥{{ findDatesInfo(date).price }}</p>
+              <p v-else-if="findDatesInfo(date).reserve_full === -1" class="day-price"></p>
+              <p v-else-if="findDatesInfo(date).reserve_full === 0" class="day-no-booking">约满</p>
+              <!-- <p v-else class="day-no-booking">¥{{ findDatesInfo(date).price }}</p> -->
             </div>
           </div>
         </div>
       </div>
-      <div v-if="checked_day" class="choose-time">
+      <div v-if="checked_day && checked_day_reserve_full === 1" class="choose-time">
         <div class="title">
           <div class="text">选择参访时间段</div>
         </div>
@@ -54,9 +55,14 @@
           </div>
         </div>
       </div>
+      <div v-if="checked_day_reserve_full === -1" class="choose-time">
+        <div class="title">
+          <div class="text">无需预约</div>
+        </div>
+      </div>
     </div>
     <div style="height: 5rem;"></div>
-    <div class="next">
+    <div v-if="checked_day && checked_day_reserve_full === 1" class="next">
       <div @click="nextBtn" class="button" style="background-color: #A67939;">下一步</div>
     </div>
 
@@ -113,7 +119,7 @@ onMounted(async () => {
     // 今日之前都不可约
     dates_list.value.forEach((date) => {
       if (dayjs(date.month_date).isBefore(dayjs())) {
-        date.reserve_full = 1;
+        date.reserve_full = 0;
       }
     });
     dates.value = dates_list.value.map(item => item.month_date);
@@ -123,7 +129,7 @@ onMounted(async () => {
 /**
  * @description: 根据日期获取信息
  * @param {string} date
- * @return {object} {text: 日期, date: 日期, price: 价格, reserve_full: 是否可约}
+ * @return {object} {text: 日期, date: 日期, price: 价格, reserve_full: 是否可约 1=可约，0=约满，-1=无需预约 }
  */
 const findDatesInfo = (date) => {
   const result = dates_list.value.find((item) => item.month_date === date);
@@ -180,6 +186,7 @@ const weeks = computed(() => {
 
 const checked_day = ref('');
 const checked_day_price = ref(0);
+const checked_day_reserve_full = ref(null);
 const checked_time = ref(-1);
 const timePeriod = ref([]); // 当前时间段信息
 
@@ -190,9 +197,11 @@ const chooseTime = (item, index) => { // 畾萄
 };
 
 const chooseDay = async (date) => { // 点击日期回调
-  if (!findDatesInfo(date).reserve_full) { // 日期可约状态
+  if (findDatesInfo(date).reserve_full !== 0) { // 状态 1可约 || -1不限制
     checked_day.value = date; // 当前日期
     checked_day_price.value = findDatesInfo(date).price; // 当前价格
+    checked_day_reserve_full.value = findDatesInfo(date).reserve_full; // 当前状态
+    if (findDatesInfo(date).reserve_full === 1) {
       // 选择日期后，查询时间段信息
       const { code, data } = await canReserveTimeListAPI({ month_date: checked_day.value});
       if (code) {
@@ -201,6 +210,7 @@ const chooseDay = async (date) => { //
         checked_time.value = -1; // 重置已选择的时间段
       }
     }
+  }
 };
 
 const showPicker = ref(false);
@@ -221,6 +231,7 @@ const onConfirm = async ({ selectedValues, selectedOptions }) => { //
   // 清空选择
   checked_day.value = '';
   checked_time.value = -1;
+  checked_day_reserve_full.value = null;
   // 选择日期后，查询月份信息
   const { code, data } = await canReserveDateListAPI({ month: `${selectedValues[0]}-${selectedValues[1]}` });
   if (code) {
@@ -229,7 +240,7 @@ const onConfirm = async ({ selectedValues, selectedOptions }) => { //
     // 今日之前都不可约
     dates_list.value.forEach((date) => {
       if (dayjs(date.month_date).isBefore(dayjs())) {
-        date.reserve_full = 1;
+        date.reserve_full = 0;
       }
     });
     dates.value = dates_list.value.map(item => item.month_date);