Feat：订单预约日期

pkg_product/views/groupBuyDetails.vue

@@ -47,12 +47,12 @@
               <view>预</view>
               <view>约</view>
             </view>
-            <view v-for="(d) in currentWeek" :key="d.date"  class="date-item">
+            <view v-for="(d) in currentWeek" :key="d.date" class="date-item">
               <view>{{ d.week }}</view>
               <view class="v12-my-1 v12-primary-text">{{ d.monthDay }}</view>
-              <view>不可预约</view>
+              <view>{{ d.status }}</view>
             </view>
-            <view class="v12-primary-text v12-font-24 date-item v12-white v12-px-1">
+            <view @click="handleDate" class="v12-primary-text v12-font-24 date-item v12-white v12-px-1">
               <view>可</view>
               <view>约</view>
               <view>日</view>
@@ -133,14 +133,22 @@
         <view class="buy-btn" @click="bookNow">立即购买</view>
       </view>
     </view>
+    <Calendar ref="calendar"
+      :minDay="detail.minBookingDays"
+      @dateSelected="handleDateSelected"
+    ></Calendar>
   </view>
 </template>
 
 <script>
 import { getJiaLouProductDetail, getJiaLouCalendar,getJiaLouBookingRules } from '@/api/qianxian'
 import {getGiftCardSendBackground} from "@/api/gift"
+import Calendar from '../components/Calendar.vue'
 export default {
   name: 'GroupBuyDetails',
+  components: {
+    Calendar
+  },
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
@@ -193,7 +201,8 @@ export default {
       },
       calendar: [],
       currentWeek: [],
-      rules: ""
+      rules: "",
+      rangeDate: {}
     }
   },
   onShow() {
@@ -214,6 +223,14 @@ export default {
     })
   },
   methods: {
+    handleDateSelected(dateRange) {
+      console.log(dateRange, 'dateRange');
+      
+      this.rangeDate = dateRange
+    },
+    handleDate() {
+      this.$refs.calendar.showCalendar(this.calendar)
+    },
     /**
      * 获取产品可预约日期
      */
@@ -245,6 +262,7 @@ export default {
         result.push({
           date: dateStr,
           week: this.getWeekLabel(dateStr),
+          status: this.findDateStatus(dateStr),
           monthDay: i === 0 ? '今日' : this.getMonthDay(dateStr)
         })
       }
@@ -285,8 +303,100 @@ export default {
       uni.showToast({ title: '已为您接入管家', icon: 'none' })
     },
     bookNow() {
-      uni.navigateTo({ url: '/pkg_product/views/submitOrder?id=' + this.id + '&orderStartDate=' + this.currentWeek[0].date + '&orderEndDate=' + this.currentWeek[4].date })
-    }
+      uni.navigateTo({ url: '/pkg_product/views/submitOrder?id=' + this.id + '&orderStartDate=' + this.rangeDate.startDate + '&orderEndDate=' + this.rangeDate.endDate })
+    },
+    /**
+     * 查找指定日期的预约状态
+     * @param {string} dateStr YYYY-MM-DD格式的日期字符串
+     * @returns {string} 预约状态文本：可约、已约、不可约
+     */
+    findDateStatus(dateStr) {
+      // 在calendar数组中查找匹配的日期
+      const matchedDate = this.calendar.find(item => item.date === dateStr)
+      console.log('未找到匹配日期:', matchedDate)
+      // 如果找到匹配的日期，根据inventoryStatus返回对应文本
+      if (matchedDate) {
+        switch (matchedDate.inventoryStatus) {
+          case 0:
+            return '可订'
+          case 1:
+            return '不可订'
+          case 2:
+            return '不可订'
+          default:
+            return '不可订'
+        }
+      }
+      
+      // 如果没有找到匹配的日期，返回不可约
+      return '不可订'
+    },
+    
+    /**
+     * 处理日期点击事件
+     * @param {Object} date 日期对象
+     */
+    handleDateClick(date) {
+      // 如果是不可订的日期，直接返回
+      if (date.status === '不可订') {
+        uni.showToast({
+          title: '该日期不可预订',
+          icon: 'none'
+        })
+        return
+      }
+      
+      // 检查是否已选中
+      const index = this.rangeDate.indexOf(date.date)
+      if (index > -1) {
+        // 如果已选中，则取消选中
+        this.rangeDate.splice(index, 1)
+      } else {
+        // 如果未选中，则添加到选中列表
+        this.rangeDate.push(date.date)
+        // 对日期进行排序
+        this.rangeDate.sort()
+        
+        // 检查日期连续性
+        if (this.rangeDate.length > 1) {
+          const isConsecutive = this.checkConsecutiveDates(this.rangeDate)
+          if (!isConsecutive) {
+            uni.showToast({
+              title: '请选择连续的日期',
+              icon: 'none'
+            })
+            // 移除最后添加的日期
+            this.rangeDate.pop()
+          }
+        }
+      }
+    },
+    
+    /**
+     * 检查日期是否被选中
+     * @param {string} date 日期字符串
+     * @returns {boolean} 是否被选中
+     */
+    isDateSelected(date) {
+      return this.rangeDate.includes(date)
+    },
+    
+    /**
+     * 检查日期是否连续
+     * @param {Array} dates 日期数组
+     * @returns {boolean} 是否连续
+     */
+    checkConsecutiveDates(dates) {
+      for (let i = 1; i < dates.length; i++) {
+        const curr = new Date(dates[i])
+        const prev = new Date(dates[i-1])
+        const diffDays = (curr - prev) / (1000 * 60 * 60 * 24)
+        if (diffDays !== 1) {
+          return false
+        }
+      }
+      return true
+    },
   }
 }
 </script>
@@ -383,8 +493,13 @@ export default {
   color: #333;
   height: 160rpx;
   padding: 0 4rpx;
+  
+  .selected-date {
+    background-color: #E9BABA;
+    font-weight: bold;
+    border-radius: 100rpx;
+  }
 }
-
 .simple-table {
   margin-top: 12rpx;
   border: 1rpx solid #FADE9F;

pkg_product/views/submitOrder.vue

@@ -108,7 +108,6 @@
     </view>
 
     <!-- 日期选择器（简单占位） -->
-    <u-calendar v-model="showCalendar" mode="range" :min-date="minDate" @confirm="onDateConfirm" />
     <passkeyborad
       v-if="isShowPayPwdPop"
       ref='payPwdPop'
@@ -118,6 +117,7 @@
       @close="pwdPopClose"
       @finish="pwdPopFinish"
     ></passkeyborad>
+    <Calendar ref="calendar"></Calendar>
   </view>
 </template>