hookehuyr

fix(booking): 修复日期选择逻辑和空数据情况处理

修复日期选择时未判空导致的潜在错误
处理日期数据为空时周历显示问题
添加日期索引作为循环key提高性能
<!--
* @Date: 2024-01-15 13:35:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-22 10:56:01
* @LastEditTime: 2026-01-22 11:03:35
* @FilePath: /git/xysBooking/src/views/booking.vue
* @Description: 预约页面
-->
......@@ -17,12 +17,12 @@
<div v-for="day in daysOfWeek" :key="day" class="item">{{ day }}</div>
</div>
<div class="weeks-wrapper">
<div v-for="(week, index) in weeks" :key="week" class="weeks">
<div v-for="date in week" :key="date"
<div v-for="(week, index) in weeks" :key="index" class="weeks">
<div v-for="(date, dateIndex) in week" :key="dateIndex"
@click="chooseDay(date)"
:class="[ 'item',
checked_day === findDatesInfo(date).date ? 'checked' : '',
findDatesInfo(date).reserve_full === ReserveStatus.FULL || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE ? 'disabled' : ''
date && checked_day === findDatesInfo(date).date ? 'checked' : '',
date && (findDatesInfo(date).reserve_full === ReserveStatus.FULL || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE) ? 'disabled' : ''
]"
>
<div v-if="findDatesInfo(date).date">
......@@ -97,7 +97,7 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showSuccessToast, showFailToast, showToast } from 'vant';
import { Cookies, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
......@@ -174,6 +174,7 @@ const daysOfWeek = ["周一", "周二", "周三", "周四", "周五", "周六",
* @return {array} [array]
*/
const weeks = computed(() => {
if (dates.value.length === 0) return [];
const result = [];
let currentWeek = [];
let currentDate = new Date(dates.value[0]);
......@@ -203,6 +204,9 @@ const weeks = computed(() => {
// 添加最后一行
if (currentWeek.length > 0) {
while (currentWeek.length < 7) {
currentWeek.push('');
}
result.push(currentWeek);
}
......@@ -242,12 +246,14 @@ const QtyStatus = {
}
const chooseDay = async (date) => { // 点击日期回调
if (findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE || findDatesInfo(date).reserve_full === ReserveStatus.INFINITY) { // 状态 1可约 || -1不限制
if (!date) return;
const info = findDatesInfo(date);
if (info.reserve_full === ReserveStatus.AVAILABLE || info.reserve_full === ReserveStatus.INFINITY) { // 状态 1可约 || -1不限制
checked_day.value = date; // 当前日期
checked_day_reserve_full.value = findDatesInfo(date).reserve_full; // 当前状态
if (findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE) {
checked_day_reserve_full.value = info.reserve_full; // 当前状态
if (info.reserve_full === ReserveStatus.AVAILABLE) {
// 选择日期后,查询时间段信息
const { code, data } = await canReserveTimeListAPI({ month_date: checked_day.value});
const { code, data } = await canReserveTimeListAPI({ month_date: checked_day.value });
if (code) {
// rest_qty >0表示有余量,可约;=0表示没有余量,不可约;<0表示不限,可约;
timePeriod.value = data;
......