feat: 日期选择的调整

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>