zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 日期选择的调整

Browse Source
This commit is contained in:
zoujing
2026-01-07 12:12:01 +08:00
parent 9c658e9f9f
commit 5d98b76fd1
4 changed files with 231 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/Calender/example.vue
View File

@@ -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>

200
src/components/Calender/index.vue
View File

@@ -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);

18
src/components/Calender/styles/index.scss
View File

@@ -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;

6
src/pages/goods/index.vue
View File

@@ -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);