Compare commits
3 Commits
94ab8c5c04
...
V1.1.0
| Author | SHA1 | Date | |
|---|---|---|---|
| 7aa8c72005 | |||
| 19b6b5b321 | |||
| f632e9c821 |
@@ -50,7 +50,13 @@
|
||||
{{ dateInfo.label }}
|
||||
</text>
|
||||
<text class="date-number">{{ dateInfo.day }}</text>
|
||||
<text class="date-price" v-if="dateInfo.price !== null && dateInfo.price !== undefined">¥{{ dateInfo.price }}</text>
|
||||
<text
|
||||
class="date-price"
|
||||
v-if="
|
||||
dateInfo.price !== null && dateInfo.price !== undefined
|
||||
"
|
||||
>¥{{ dateInfo.price }}</text
|
||||
>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
@@ -253,7 +259,7 @@ const generateCalendarGrid = (year, month) => {
|
||||
// 填充日期
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const dateStr = `${year}-${String(month).padStart(2, "0")}-${String(
|
||||
day
|
||||
day,
|
||||
).padStart(2, "0")}`;
|
||||
const priceItem = getPriceItem(dateStr);
|
||||
grid.push({
|
||||
@@ -344,7 +350,11 @@ const getDateCellClass = (dateInfo) => {
|
||||
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 === "-") {
|
||||
if (
|
||||
dateInfo.price === null ||
|
||||
dateInfo.price === undefined ||
|
||||
dateInfo.price === "-"
|
||||
) {
|
||||
classes.push("date-cell-no-price");
|
||||
}
|
||||
|
||||
@@ -404,13 +414,19 @@ const handleRangeSelection = (dateInfo) => {
|
||||
if (!rangeStart.value || (rangeStart.value && rangeEnd.value)) {
|
||||
// 开始新的范围选择:当作为价格区间选择器时,开始日必须有价格且有库存
|
||||
if (props.rangeRequirePrice) {
|
||||
const hasPrice = dateInfo.price !== null && dateInfo.price !== undefined && dateInfo.price !== "-";
|
||||
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" });
|
||||
uni.showToast({
|
||||
title: "所选日期库存不足,请选择其他日期",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -421,11 +437,16 @@ const handleRangeSelection = (dateInfo) => {
|
||||
return;
|
||||
}
|
||||
|
||||
// 否则为结束日期(完成选择)——结束日允许无价格(如为紧接有价日的下一天),但区间内的夜晚必须有价格
|
||||
// 否则为结束日期(完成选择)
|
||||
if (rangeStart.value === dateInfo.date) {
|
||||
uni.showToast({ title: "离店日期不能与入住日期相同", icon: "none" });
|
||||
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];
|
||||
}
|
||||
@@ -433,7 +454,11 @@ const handleRangeSelection = (dateInfo) => {
|
||||
// 检查日期跨度是否超过28天
|
||||
const daysBetween = calculateDaysBetween(rangeStart.value, rangeEnd.value);
|
||||
if (daysBetween > 28) {
|
||||
uni.showToast({ title: "预定时间不能超过28天", icon: "none", duration: 3000 });
|
||||
uni.showToast({
|
||||
title: "预定时间不能超过28天",
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
});
|
||||
rangeStart.value = null;
|
||||
rangeEnd.value = null;
|
||||
isRangeSelecting.value = false;
|
||||
@@ -443,9 +468,14 @@ const handleRangeSelection = (dateInfo) => {
|
||||
// 如果作为价格区间选择器,验证夜晚(不包含离店日)是否都有价格/库存
|
||||
if (props.rangeRequirePrice) {
|
||||
const nights = generateNightsRange(rangeStart.value, rangeEnd.value);
|
||||
const missing = nights.find((d) => d.price === null || d.price === undefined || d.price === "-");
|
||||
const missing = nights.find(
|
||||
(d) => d.price === null || d.price === undefined || d.price === "-",
|
||||
);
|
||||
if (missing) {
|
||||
uni.showToast({ title: "所选区间包含无价格日期,请重新选择", icon: "none" });
|
||||
uni.showToast({
|
||||
title: "所选区间包含无价格日期,请重新选择",
|
||||
icon: "none",
|
||||
});
|
||||
rangeStart.value = null;
|
||||
rangeEnd.value = null;
|
||||
return;
|
||||
@@ -456,7 +486,10 @@ const handleRangeSelection = (dateInfo) => {
|
||||
return item && item.stock !== undefined && Number(item.stock) <= 0;
|
||||
});
|
||||
if (badStock) {
|
||||
uni.showToast({ title: "所选区间包含库存不足的日期,请重新选择", icon: "none" });
|
||||
uni.showToast({
|
||||
title: "所选区间包含库存不足的日期,请重新选择",
|
||||
icon: "none",
|
||||
});
|
||||
rangeStart.value = null;
|
||||
rangeEnd.value = null;
|
||||
return;
|
||||
@@ -551,7 +584,7 @@ watch(
|
||||
popup.value?.close();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// 生命周期钩子
|
||||
|
||||
@@ -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">
|
||||
<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) => {
|
||||
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}`;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
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,9 +66,9 @@ 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">
|
||||
|
||||
@@ -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: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
v-model="quantity"
|
||||
:userFormList="userFormList"
|
||||
v-model:reservationDate="selectedReservationDate"
|
||||
:reservationEnabled="orderData.reservationEnabled"
|
||||
:orderData="orderData"
|
||||
/>
|
||||
|
||||
<!-- 酒店类型 -->
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<view class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y">
|
||||
<OrderStatusInfo :orderData="orderData" />
|
||||
|
||||
<VoucherList v-if="orderData.orderStatus === '2'" :orderData="orderData" @selected="handleSelectedVoucher" />
|
||||
<VoucherList v-if="orderData.orderType != 0 && orderData.orderStatus === '2'" :orderData="orderData" @selected="handleSelectedVoucher" />
|
||||
|
||||
<AmtSection :orderData="orderData" @click="refundVisible = true" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user