feat: 下单预约的日期动态选择

src/components/UseDateRange/index.vue

@@ -1,22 +1,25 @@
 <template>
   <view class="bg-white rounded-12 overflow-hidden mb-12">
-    <view
-      class="border-box font-size-16 font-500 color-000 line-height-24 p-12"
+    <view class="border-box font-size-16 font-500 color-000 line-height-24 p-12"
       >使用日期</view
     >
-    <view class="flex flex-items-center border-box ">
+    <view class="flex flex-items-center border-box">
       <scroll-view class="date-scroll" scroll-x>
         <view class="date-list">
-          <block v-for="(item) in dates" :key="item.date">
+          <block v-for="item in openDateRangeList" :key="item.date">
             <view
               class="date-item"
               :class="{ selected: isSameDate(selectedDate, item.date) }"
               @click="onDateClick(item)"
             >
-              <view class="label font-size-12">{{ item.label }}</view>
-              <view class="md font-size-16 font-600">{{ formatMD(item.date) }}</view>
-              <view class="status font-size-12">可订</view>
-              <view v-if="isSameDate(selectedDate, item.date)" class="check">✔</view>
+              <view class="label font-size-12">{{ item.weekDesc }}</view>
+              <view class="md font-size-16 font-600">{{
+                formatMD(item.date)
+              }}</view>
+              <view class="status font-size-12">{{ item.canOrder }}</view>
+              <view v-if="isSameDate(selectedDate, item.date)" class="check"
+                >✔</view
+              >
             </view>
           </block>
         </view>
@@ -26,50 +29,35 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { ref, watch } from "vue";
 const props = defineProps({
   selectedDate: { type: String, default: null },
-  days: { type: Number, default: 14 }
+  openDateRangeList: { type: Array, default: () => [] },
 });
-const emit = defineEmits(['update:selectedDate']);
-
-const dates = ref([]);
+const emit = defineEmits(["update:selectedDate"]);
 const selectedDate = ref(props.selectedDate);
 
-watch(() => props.selectedDate, (v) => {
-  selectedDate.value = v;
-});
-
-const initDates = (days = props.days) => {
-  const arr = [];
-  const today = new Date();
-  for (let i = 0; i < days; i++) {
-    const d = new Date(today);
-    d.setDate(today.getDate() + i);
-    const iso = d.toISOString().slice(0, 10);
-    arr.push({ date: iso, day: i, disabled: false, label: getLabel(i, d) });
-  }
-  dates.value = arr;
-}
-
-const getLabel = (i, d) => {
-  if (i === 0) return '今天';
-  if (i === 1) return '明天';
-  const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-  return week[d.getDay()];
-}
-
-const formatMD = (dateStr) => {
-  const d = new Date(dateStr);
-  const mm = String(d.getMonth() + 1).padStart(2, '0');
-  const dd = String(d.getDate()).padStart(2, '0');
-  return `${mm}-${dd}`;
-}
+watch(
+  () => props.selectedDate,
+  (v) => {
+    selectedDate.value = v;
+  },
+);
 
 const isSameDate = (a, b) => {
   if (!a || !b) return false;
   return a === b;
-}
+};
+
+// 格式化展示日期，将 2026-04-13 转换为 04-13
+const formatMD = (dateStr) => {
+  if (!dateStr || typeof dateStr !== "string") return "";
+  const parts = dateStr.split("-");
+  if (parts.length >= 3) {
+    return `${parts[1]}-${parts[2]}`;
+  }
+  return dateStr;
+};
 
 const onDateClick = (item) => {
   const date = item.date;
@@ -78,11 +66,11 @@ const onDateClick = (item) => {
   } else {
     selectedDate.value = date;
   }
-  emit('update:selectedDate', selectedDate.value);
-}
-onMounted(() => initDates());
+  console.log("selectedDate:", selectedDate.value);
+  emit("update:selectedDate", selectedDate.value);
+};
 </script>
 
 <style scoped lang="scss">
 @import "./styles/index.scss";
-</style>
+</style>

src/pages-booking/components/ConactSection/index.vue

@@ -16,7 +16,12 @@
     </view>
   </view>
 
-  <UseDateRange v-if="reservationEnabled" v-model:selectedDate="reservationDate"/>
+   <!-- 使用日期 -->
+  <UseDateRange 
+    v-if="orderData.reservationEnabled" 
+    :openDateRangeList="orderData.openDateRangeList"  
+    v-model:selectedDate="reservationDate"
+    />
 
   <!-- 联系方式 -->
   <view class="bg-white rounded-12 overflow-hidden">
@@ -57,9 +62,9 @@ const props = defineProps({
     type: String,
     default: null,
   },
-  reservationEnabled: {
-    type: Boolean,
-    default: false,
+  orderData: {
+    type: Object,
+    default: () => ({}),
   },
 });
 

src/pages-booking/index.vue

@@ -70,7 +70,7 @@
         v-model="quantity"
         :userFormList="userFormList"
         v-model:reservationDate="selectedReservationDate"
-        :reservationEnabled="orderData.reservationEnabled"
+        :orderData="orderData"
       />
 
       <!-- 酒店类型 -->
@@ -220,7 +220,7 @@ const handlePayClick = ThrottleUtils.createThrottle(async (goodsData) => {
       return;
     }
   }
-  
+
   // 校验用户姓名
   if (!validateUserForms()) {
     return;