From 5d98b76fd15b230ca7db0129104ddd027ef74a97 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Wed, 7 Jan 2026 12:12:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=9A=84=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Calender/example.vue       |  62 +++++++
 src/components/Calender/index.vue         | 200 ++++++++++++++++------
 src/components/Calender/styles/index.scss |  18 ++
 src/pages/goods/index.vue                 |   6 +-
 4 files changed, 231 insertions(+), 55 deletions(-)

diff --git a/src/components/Calender/example.vue b/src/components/Calender/example.vue
index d120867..55eeb9d 100644
--- a/src/components/Calender/example.vue
+++ b/src/components/Calender/example.vue
@@ -27,6 +27,18 @@
         </view>
         <uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
       </view>
+
+      <!-- 价格区间选择示例 -->
+      <view class="date-input" @tap="openPriceRangeCalendar">
+        <view class="input-content">
+          <text class="input-label">选择有价格的日期范围</text>
+          <text class="input-value" v-if="selectedRange.start && selectedRange.end">
+            {{ selectedRange.start }} 至 {{ selectedRange.end }}
+          </text>
+          <text class="input-placeholder" v-else>请选择价格区间（仅含有价夜晚）</text>
+        </view>
+        <uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
+      </view>
     </view>
 
     <!-- 结果显示区域 -->
@@ -35,11 +47,13 @@
       <view class="result-item" v-if="selectedDate">
         <text class="result-label">单选日期：</text>
         <text class="result-value">{{ selectedDate }}</text>
+        <text class="result-value" v-if="selectedDatePrice"> ¥{{ selectedDatePrice }} </text>
       </view>
       <view class="result-item" v-if="selectedRange.start && selectedRange.end">
         <text class="result-label">日期范围：</text>
         <text class="result-value">{{ selectedRange.start }} 至 {{ selectedRange.end }}</text>
         <text class="result-days">（共{{ rangeDays }}天）</text>
+        <text class="result-value" v-if="selectedRangeTotal"> 总价：¥{{ selectedRangeTotal }} </text>
       </view>
     </view>
 
@@ -62,6 +76,17 @@
       @close="handleRangeCalendarClose"
       @range-select="handleRangeSelect"
     />
+
+    <!-- 日历组件 - 价格区间选择模式（必须有价格的夜晚） -->
+    <Calendar
+      :visible="priceRangeCalendarVisible"
+      :price-data="priceData"
+      mode="range"
+      :range-require-price="true"
+      :default-value="[selectedRange.start, selectedRange.end]"
+      @close="handleRangeCalendarClose"
+      @range-select="handlePriceRangeSelect"
+    />
   </view>
 </template>
 
@@ -72,11 +97,14 @@ import Calendar from './index.vue'
 // 响应式数据
 const calendarVisible = ref(false)
 const rangeCalendarVisible = ref(false)
+const priceRangeCalendarVisible = ref(false)
 const selectedDate = ref('')
+const selectedDatePrice = ref(null)
 const selectedRange = ref({
   start: '',
   end: ''
 })
+const selectedRangeTotal = ref(null)
 
 // 模拟价格数据
 const priceData = ref({
@@ -116,6 +144,11 @@ const openRangeCalendar = () => {
   rangeCalendarVisible.value = true
 }
 
+// 打开价格区间选择器（必须以价格为准）
+const openPriceRangeCalendar = () => {
+  priceRangeCalendarVisible.value = true
+}
+
 // 处理单选日历关闭
 const handleCalendarClose = () => {
   calendarVisible.value = false
@@ -129,6 +162,7 @@ const handleRangeCalendarClose = () => {
 // 处理日期选择
 const handleDateSelect = (data) => {
   selectedDate.value = data.date
+  selectedDatePrice.value = (data.price !== undefined && data.price !== null && data.price !== '-') ? data.price : null
   calendarVisible.value = false
   console.log('选择的日期:', data)
 }
@@ -139,9 +173,37 @@ const handleRangeSelect = (data) => {
     start: data.startDate,
     end: data.endDate
   }
+  if (data.dateRange && Array.isArray(data.dateRange)) {
+    const total = data.dateRange.reduce((sum, d) => {
+      const p = d.price
+      return sum + (typeof p === 'number' ? p : 0)
+    }, 0)
+    selectedRangeTotal.value = total || null
+  } else {
+    selectedRangeTotal.value = null
+  }
   rangeCalendarVisible.value = false
   console.log('选择的日期范围:', data)
 }
+
+// 处理价格区间选择
+const handlePriceRangeSelect = (data) => {
+  selectedRange.value = {
+    start: data.startDate,
+    end: data.endDate
+  }
+  if (data.dateRange && Array.isArray(data.dateRange)) {
+    const total = data.dateRange.reduce((sum, d) => {
+      const p = d.price
+      return sum + (typeof p === 'number' ? p : 0)
+    }, 0)
+    selectedRangeTotal.value = total || null
+  } else {
+    selectedRangeTotal.value = null
+  }
+  priceRangeCalendarVisible.value = false
+  console.log('价格区间选择:', data)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Calender/index.vue b/src/components/Calender/index.vue
index d3b5b46..ce14aa8 100644
--- a/src/components/Calender/index.vue
+++ b/src/components/Calender/index.vue
@@ -11,7 +11,7 @@
       <view class="calendar-header">
         <view class="header-content">
           <text class="header-title">日历选择</text>
-          <text class="header-subtitle"
+          <text v-if="props.rangeRequirePrice" class="header-subtitle"
             >选择住宿日期，以下价格为单晚参考价</text
           >
         </view>
@@ -50,9 +50,7 @@
                     {{ dateInfo.label }}
                   </text>
                   <text class="date-number">{{ dateInfo.day }}</text>
-                  <text class="date-price" v-if="dateInfo.price"
-                    >¥{{ dateInfo.price }}</text
-                  >
+                  <text class="date-price" v-if="dateInfo.price !== null && dateInfo.price !== undefined">¥{{ dateInfo.price }}</text>
                 </template>
               </view>
             </view>
@@ -91,9 +89,10 @@ const props = defineProps({
   },
 
   // 价格数据数组
+  // 格式: [{ date: '2024-05-17', price: 449, stock: 3 }, ...]
   priceData: {
-    type: Array,
-    default: () => [{ date: "", price: "-", stock: "0" }],
+    type: [Object, Array],
+    default: () => ({}),
   },
 
   // 默认选中日期
@@ -109,6 +108,12 @@ const props = defineProps({
     validator: (value) => ["single", "range"].includes(value),
   },
 
+  // 范围选择时是否必须有价格（作为价格区间选择器）
+  rangeRequirePrice: {
+    type: Boolean,
+    default: false,
+  },
+
   // 最小可选日期
   minDate: {
     type: String,
@@ -202,14 +207,36 @@ const getFirstDayOfMonth = (year, month) => {
   return day === 0 ? 6 : day - 1; // 转换为周一开始 (0=周一, 6=周日)
 };
 
-// 获取指定日期的价格
-const getPriceForDate = (dateStr) => {
-  if (!props.priceData || !Array.isArray(props.priceData)) {
+// 获取指定日期的价格项（兼容对象或者数组）
+const getPriceItem = (dateStr) => {
+  if (!props.priceData) return null;
+
+  // 对象映射格式：{ '2024-05-17': 449 }
+  if (!Array.isArray(props.priceData) && typeof props.priceData === "object") {
+    if (Object.prototype.hasOwnProperty.call(props.priceData, dateStr)) {
+      const val = props.priceData[dateStr];
+      // 可能只是数字价格，也可能是对象
+      if (val !== null && typeof val === "object") {
+        return { date: dateStr, price: val.price, stock: val.stock };
+      }
+      return { date: dateStr, price: val };
+    }
     return null;
   }
 
-  const priceItem = props.priceData.find((item) => item.date === dateStr);
-  return priceItem ? priceItem.price : null;
+  // 数组格式：[{date, price, stock}, ...]
+  if (Array.isArray(props.priceData)) {
+    const item = props.priceData.find((it) => it.date === dateStr);
+    return item || null;
+  }
+
+  return null;
+};
+
+// 获取价格值便捷函数
+const getPriceForDate = (dateStr) => {
+  const item = getPriceItem(dateStr);
+  return item ? item.price : null;
 };
 
 // 生成日历网格数据
@@ -228,10 +255,12 @@ const generateCalendarGrid = (year, month) => {
     const dateStr = `${year}-${String(month).padStart(2, "0")}-${String(
       day
     ).padStart(2, "0")}`;
+    const priceItem = getPriceItem(dateStr);
     grid.push({
       date: dateStr,
       day: day,
-      price: getPriceForDate(dateStr),
+      price: priceItem ? priceItem.price : null,
+      stock: priceItem ? priceItem.stock : undefined,
       disabled: isDateDisabled(dateStr),
       selected: isDateSelected(dateStr),
       inRange: isDateInRange(dateStr),
@@ -248,10 +277,14 @@ const isDateDisabled = (dateStr) => {
   const minDate = new Date(props.minDate);
   const maxDate = props.maxDate ? new Date(props.maxDate) : null;
 
+  // 过去或超出范围
   if (date < minDate) return true;
   if (maxDate && date > maxDate) return true;
   if (props.disabledDates.includes(dateStr)) return true;
 
+  // 注意：不在此处基于价格全局禁用日期，
+  // 允许未定价的日期被点击作为离店日（结束日），
+  // 价格校验在范围完成时对夜晚（不含离店日）进行。
   return false;
 };
 
@@ -310,13 +343,28 @@ const getDateCellClass = (dateInfo) => {
   if (dateInfo.disabled) classes.push("date-cell-disabled");
   if (dateInfo.selected) classes.push("date-cell-selected");
   if (dateInfo.inRange) classes.push("date-cell-in-range");
+  // 标注无价格但可选的日期（用于视觉区分）
+  if (dateInfo.price === null || dateInfo.price === undefined || dateInfo.price === "-") {
+    classes.push("date-cell-no-price");
+  }
 
   return classes.join(" ");
 };
 
 // 处理日期点击
 const handleDateClick = (dateInfo) => {
-  if (!dateInfo || dateInfo.disabled) return;
+  if (!dateInfo) return;
+  if (dateInfo.disabled) {
+    uni.showToast({ title: "该日期不可选", icon: "none" });
+    // 仍然触发点击事件，供上层参考
+    emit("date-click", {
+      date: dateInfo.date,
+      price: dateInfo.price,
+      disabled: dateInfo.disabled,
+      selected: dateInfo.selected,
+    });
+    return;
+  }
 
   // 防抖处理
   if (clickTimer.value) {
@@ -352,59 +400,79 @@ const handleSingleSelect = (dateInfo) => {
 
 // 处理范围选择
 const handleRangeSelection = (dateInfo) => {
-  if (dateInfo.price === undefined || dateInfo.price === null || dateInfo.stock === '' || dateInfo.price === '-') {
-      uni.showToast({
-        title: "所选日期不可预订，请重新选择",
-        icon: "none",
-      });
-      return;
-  }
-
+  // 如果当前没有开始日期或已经完成一次选择，则此次点击作为开始日期
   if (!rangeStart.value || (rangeStart.value && rangeEnd.value)) {
-    // 开始新的范围选择
+    // 开始新的范围选择：当作为价格区间选择器时，开始日必须有价格且有库存
+    if (props.rangeRequirePrice) {
+      const hasPrice = dateInfo.price !== null && dateInfo.price !== undefined && dateInfo.price !== "-";
+      if (!hasPrice) {
+        uni.showToast({ title: "所选日期不可预订，请重新选择", icon: "none" });
+        return;
+      }
+      if (dateInfo.stock !== undefined && Number(dateInfo.stock) <= 0) {
+        uni.showToast({ title: "所选日期库存不足，请选择其他日期", icon: "none" });
+        return;
+      }
+    }
+
     rangeStart.value = dateInfo.date;
     rangeEnd.value = null;
     isRangeSelecting.value = true;
-  } else {
-    // 完成范围选择
-    rangeEnd.value = dateInfo.date;
+    return;
+  }
+
+  // 否则为结束日期（完成选择）——结束日允许无价格（如为紧接有价日的下一天），但区间内的夜晚必须有价格
+  rangeEnd.value = dateInfo.date;
+  isRangeSelecting.value = false;
+
+  // 允许选择相同日期，但确保开始日期不大于结束日期
+  if (new Date(rangeStart.value) > new Date(rangeEnd.value)) {
+    [rangeStart.value, rangeEnd.value] = [rangeEnd.value, rangeStart.value];
+  }
+
+  // 检查日期跨度是否超过28天
+  const daysBetween = calculateDaysBetween(rangeStart.value, rangeEnd.value);
+  if (daysBetween > 28) {
+    uni.showToast({ title: "预定时间不能超过28天", icon: "none", duration: 3000 });
+    rangeStart.value = null;
+    rangeEnd.value = null;
     isRangeSelecting.value = false;
+    return;
+  }
 
-    // 允许选择相同日期，但确保开始日期不大于结束日期
-    if (new Date(rangeStart.value) > new Date(rangeEnd.value)) {
-      [rangeStart.value, rangeEnd.value] = [rangeEnd.value, rangeStart.value];
-    }
-
-    // 检查日期跨度是否超过28天（相同日期跨度为0天，允许通过）
-    const daysBetween = calculateDaysBetween(rangeStart.value, rangeEnd.value);
-    if (daysBetween > 28) {
-      // 使用uni.showToast显示错误提示
-      uni.showToast({
-        title: "预定时间不能超过28天",
-        icon: "none",
-        duration: 3000,
-      });
-
-      // 重置选择状态
+  // 如果作为价格区间选择器，验证夜晚（不包含离店日）是否都有价格/库存
+  if (props.rangeRequirePrice) {
+    const nights = generateNightsRange(rangeStart.value, rangeEnd.value);
+    const missing = nights.find((d) => d.price === null || d.price === undefined || d.price === "-");
+    if (missing) {
+      uni.showToast({ title: "所选区间包含无价格日期，请重新选择", icon: "none" });
       rangeStart.value = null;
       rangeEnd.value = null;
-      isRangeSelecting.value = false;
-
       return;
     }
 
-    // 生成范围内所有日期的数组
-    const dateRange = generateDateRange(rangeStart.value, rangeEnd.value);
-
-    emit("range-select", {
-      startDate: rangeStart.value,
-      endDate: rangeEnd.value,
-      startPrice: getPriceForDate(rangeStart.value),
-      endPrice: getPriceForDate(rangeEnd.value),
-      totalDays: daysBetween,
-      dateRange: dateRange, // 新增：范围内所有日期的数组
+    const badStock = nights.find((d) => {
+      const item = getPriceItem(d.date);
+      return item && item.stock !== undefined && Number(item.stock) <= 0;
     });
+    if (badStock) {
+      uni.showToast({ title: "所选区间包含库存不足的日期，请重新选择", icon: "none" });
+      rangeStart.value = null;
+      rangeEnd.value = null;
+      return;
+    }
   }
+
+  const dateRange = generateDateRange(rangeStart.value, rangeEnd.value);
+
+  emit("range-select", {
+    startDate: rangeStart.value,
+    startPrice: getPriceForDate(rangeStart.value),
+    endDate: rangeEnd.value,
+    endPrice: getPriceForDate(rangeEnd.value),
+    totalDays: daysBetween,
+    dateRange: dateRange,
+  });
 };
 
 // 生成日期范围内所有日期的数组
@@ -437,6 +505,32 @@ const generateDateRange = (startDate, endDate) => {
   return dateRange;
 };
 
+// 生成以入住日期为开始、离店日期为结束（离店日不计入夜）的夜晚数组
+const generateNightsRange = (startDate, endDate) => {
+  const nights = [];
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  // 若相同日期，视为单晚（保留原有兼容行为）
+  if (startDate === endDate) {
+    return [
+      {
+        date: startDate,
+        price: getPriceForDate(startDate),
+      },
+    ];
+  }
+
+  const current = new Date(start);
+  while (current < end) {
+    const dateStr = current.toISOString().split("T")[0];
+    nights.push({ date: dateStr, price: getPriceForDate(dateStr) });
+    current.setDate(current.getDate() + 1);
+  }
+
+  return nights;
+};
+
 // 计算两个日期之间的天数
 const calculateDaysBetween = (startDate, endDate) => {
   const start = new Date(startDate);
diff --git a/src/components/Calender/styles/index.scss b/src/components/Calender/styles/index.scss
index 27f5839..76b6695 100644
--- a/src/components/Calender/styles/index.scss
+++ b/src/components/Calender/styles/index.scss
@@ -251,6 +251,24 @@ $font-size-label: 10px;
   min-height: 14px;
 }
 
+// 无价格占位样式
+.date-cell-no-price {
+  .date-number {
+    color: $text-primary;
+    opacity: 0.9;
+  }
+
+  .date-price {
+    color: $text-disabled;
+    font-style: italic;
+  }
+
+  .date-price--empty {
+    color: $text-disabled;
+    font-style: normal;
+  }
+}
+
 // 自定义标签
 .date-label {
   font-size: $font-size-label;
diff --git a/src/pages/goods/index.vue b/src/pages/goods/index.vue
index 256e710..4452271 100644
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -65,8 +65,9 @@
     <!-- 日历组件 -->
     <Calender
       :visible="calendarVisible"
-      :price-data="priceData"
       mode="range"
+      :range-require-price="true"
+      :price-data="priceData"
       @close="handleCalendarClose"
       @range-select="handleDateSelect"
     />
@@ -107,7 +108,8 @@ const selectedDate = ref({
   endDate: DateUtils.formatDate(new Date(Date.now() + 24 * 60 * 60 * 1000)), // 第二天日期
   totalDays: 1,
 });
-const priceData = ref([]);
+
+const priceData = ref([])
 
 // 计算的总价格
 const calculatedTotalPrice = ref(0);