|
|
@ -1,12 +1,12 @@ |
|
|
// subpages/space/reserve/reserve.js
|
|
|
// subpages/space/reserve/reserve.js
|
|
|
import { appointment, spaceInfo } from "../../../api/index"; |
|
|
import { appointment, spaceInfo, queryAppointTime } from "../../../api/index"; |
|
|
Page({ |
|
|
Page({ |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* 页面的初始数据 |
|
|
* 页面的初始数据 |
|
|
*/ |
|
|
*/ |
|
|
data: { |
|
|
data: { |
|
|
bannerUrl: 'https://img.yzcdn.cn/vant/cat.jpeg', |
|
|
bannerUrl: '', |
|
|
roomName: '第一会议室', |
|
|
roomName: '第一会议室', |
|
|
openDate: '周一至周五', |
|
|
openDate: '周一至周五', |
|
|
openTimeText: '上午09:00-下午18:00', |
|
|
openTimeText: '上午09:00-下午18:00', |
|
|
@ -18,7 +18,8 @@ Page({ |
|
|
chosenText: '', |
|
|
chosenText: '', |
|
|
spaceDetail: null, |
|
|
spaceDetail: null, |
|
|
appointDates: [], |
|
|
appointDates: [], |
|
|
appointmentTimes: [] |
|
|
appointmentTimes: [], |
|
|
|
|
|
address: '', |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
@ -32,6 +33,7 @@ Page({ |
|
|
openDate: options.openDate, |
|
|
openDate: options.openDate, |
|
|
openTimeText: options.openTimeText, |
|
|
openTimeText: options.openTimeText, |
|
|
bannerUrl: options.imgUrls, |
|
|
bannerUrl: options.imgUrls, |
|
|
|
|
|
address: options.address, |
|
|
}); |
|
|
}); |
|
|
this.getDetail(); // 获取详情后会自动初始化日期和时间段
|
|
|
this.getDetail(); // 获取详情后会自动初始化日期和时间段
|
|
|
}, |
|
|
}, |
|
|
@ -78,7 +80,7 @@ Page({ |
|
|
this.setData({ |
|
|
this.setData({ |
|
|
spaceDetail: res.data, |
|
|
spaceDetail: res.data, |
|
|
appointDates: res.data.appointDates || [], |
|
|
appointDates: res.data.appointDates || [], |
|
|
appointmentTimes: res.data.appointmentTimes || [] |
|
|
appointmentTimes: [] |
|
|
}); |
|
|
}); |
|
|
// 根据接口数据初始化日期和时间段
|
|
|
// 根据接口数据初始化日期和时间段
|
|
|
this.initDatesFromAPI(); |
|
|
this.initDatesFromAPI(); |
|
|
@ -86,7 +88,7 @@ Page({ |
|
|
} |
|
|
} |
|
|
}).catch(err => { |
|
|
}).catch(err => { |
|
|
wx.showToast({ |
|
|
wx.showToast({ |
|
|
title: err.msg || '获取详情失败', |
|
|
title: err.msg , |
|
|
icon: 'none' |
|
|
icon: 'none' |
|
|
}); |
|
|
}); |
|
|
}) |
|
|
}) |
|
|
@ -115,12 +117,20 @@ Page({ |
|
|
initDatesFromAPI() { |
|
|
initDatesFromAPI() { |
|
|
const { appointDates } = this.data; |
|
|
const { appointDates } = this.data; |
|
|
if (!appointDates || appointDates.length === 0) { |
|
|
if (!appointDates || appointDates.length === 0) { |
|
|
this.initDates(); // 如果没有接口数据，使用默认逻辑
|
|
|
// 删除默认逻辑：当无可预约日期时，直接清空并返回
|
|
|
|
|
|
this.setData({ |
|
|
|
|
|
dateList: [], |
|
|
|
|
|
selectedDateIndex: 0, |
|
|
|
|
|
timeSlots: [], |
|
|
|
|
|
rangeStartIndex: -1, |
|
|
|
|
|
rangeEndIndex: -1, |
|
|
|
|
|
chosenText: '' |
|
|
|
|
|
}); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const today = new Date().toISOString().split('T')[0]; // 今天的日期 YYYY-MM-DD
|
|
|
const today = new Date().toISOString().split('T')[0]; // 今天的日期 YYYY-MM-DD
|
|
|
const dates = appointDates.map((item, index) => { |
|
|
const dates = appointDates.map((item) => { |
|
|
const date = new Date(item.appointDate); |
|
|
const date = new Date(item.appointDate); |
|
|
const isToday = item.appointDate === today; |
|
|
const isToday = item.appointDate === today; |
|
|
return { |
|
|
return { |
|
|
@ -145,60 +155,46 @@ Page({ |
|
|
dateList: dates, |
|
|
dateList: dates, |
|
|
selectedDateIndex: defaultIndex, |
|
|
selectedDateIndex: defaultIndex, |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
initTimeSlots() { |
|
|
// 初始化默认日期的时间段（调用后端 queryAppointTime）
|
|
|
const ranges = [ |
|
|
const defaultDate = dates[defaultIndex] && dates[defaultIndex].date; |
|
|
['09:00', '09:30'], ['09:30', '10:00'], ['10:00', '10:30'], ['10:30', '11:00'], |
|
|
if (defaultDate) { |
|
|
['11:00', '11:30'], ['11:30', '12:00'], ['12:00', '12:30'], ['12:30', '13:00'], |
|
|
this.fetchTimeSlotsForDate(defaultDate); |
|
|
['13:00', '13:30'], ['13:30', '14:00'], ['14:00', '14:30'], ['14:30', '15:00'], |
|
|
} |
|
|
['15:00', '15:30'], ['15:30', '16:00'], ['16:00', '16:30'], ['16:30', '17:00'], |
|
|
|
|
|
['17:00', '17:30'], ['17:30', '18:00'], ['18:00', '18:30'], ['18:30', '19:00'], |
|
|
|
|
|
]; |
|
|
|
|
|
const slots = ranges.map((r, idx) => ({ |
|
|
|
|
|
id: `${r[0]}-${r[1]}`, |
|
|
|
|
|
start: r[0], |
|
|
|
|
|
end: r[1], |
|
|
|
|
|
status: idx < 3 ? 'disabled' : 'available' |
|
|
|
|
|
})); |
|
|
|
|
|
this.setData({ timeSlots: slots, rangeStartIndex: -1, rangeEndIndex: -1, chosenText: '' }); |
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
// 根据接口数据初始化时间段
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 根据接口数据初始化时间段（新的数据结构：时间段挂在 appointDates 每个日期项内）
|
|
|
initTimeSlotsFromAPI() { |
|
|
initTimeSlotsFromAPI() { |
|
|
const { appointmentTimes } = this.data; |
|
|
const { appointDates, selectedDateIndex } = this.data; |
|
|
|
|
|
if (!appointDates || appointDates.length === 0) return; |
|
|
|
|
|
const dateItem = appointDates[selectedDateIndex] || {}; |
|
|
|
|
|
const appointmentTimes = dateItem.appointmentTimes || dateItem.times || []; |
|
|
if (!appointmentTimes || appointmentTimes.length === 0) { |
|
|
if (!appointmentTimes || appointmentTimes.length === 0) { |
|
|
this.initTimeSlots(); // 如果没有接口数据，使用默认逻辑
|
|
|
this.setData({ timeSlots: [], rangeStartIndex: -1, rangeEndIndex: -1, chosenText: '' }); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const slots = appointmentTimes.map((item, index) => { |
|
|
const slots = appointmentTimes.map((item) => { |
|
|
// 解析时间段，例如 "09:00至09:29" -> start: "09:00", end: "09:29"
|
|
|
const timeMatch = (item.appointmentTime || '').match(/(\d{2}:\d{2})至(\d{2}:\d{2})/); |
|
|
const timeMatch = item.appointmentTime.match(/(\d{2}:\d{2})至(\d{2}:\d{2})/); |
|
|
|
|
|
let start = '00:00'; |
|
|
let start = '00:00'; |
|
|
let end = '00:30'; |
|
|
let end = '00:30'; |
|
|
|
|
|
|
|
|
if (timeMatch) { |
|
|
if (timeMatch) { |
|
|
start = timeMatch[1]; |
|
|
start = timeMatch[1]; |
|
|
end = timeMatch[2]; |
|
|
end = timeMatch[2]; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
id: item.id, |
|
|
id: item.id, |
|
|
apiId: item.id, // 保存接口返回的ID
|
|
|
apiId: item.id, |
|
|
start: start, |
|
|
start, |
|
|
end: end, |
|
|
end, |
|
|
timeText: item.appointmentTime, |
|
|
timeText: item.appointmentTime, |
|
|
status: item.canAppoint ? 'available' : 'disabled' |
|
|
status: item.canAppoint ? 'available' : 'disabled' |
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
this.setData({ |
|
|
this.setData({ timeSlots: slots, rangeStartIndex: -1, rangeEndIndex: -1, chosenText: '' }); |
|
|
timeSlots: slots, |
|
|
|
|
|
rangeStartIndex: -1, |
|
|
|
|
|
rangeEndIndex: -1, |
|
|
|
|
|
chosenText: '' |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
selectDate(e) { |
|
|
selectDate(e) { |
|
|
@ -215,7 +211,8 @@ Page({ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
this.setData({ selectedDateIndex: index }); |
|
|
this.setData({ selectedDateIndex: index }); |
|
|
this.initTimeSlotsFromAPI(); // 使用接口数据初始化时间段
|
|
|
// 每次选择都请求后端查询当日可预约时间段
|
|
|
|
|
|
this.fetchTimeSlotsForDate(selectedDate.date); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
toggleSlot(e) { |
|
|
toggleSlot(e) { |
|
|
@ -334,5 +331,36 @@ Page({ |
|
|
icon: 'none' |
|
|
icon: 'none' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 根据日期查询可预约时间段
|
|
|
|
|
|
fetchTimeSlotsForDate(date) { |
|
|
|
|
|
const { id } = this.data; |
|
|
|
|
|
if (!id || !date) return; |
|
|
|
|
|
queryAppointTime({ id, currentDate: date }) |
|
|
|
|
|
.then((res) => { |
|
|
|
|
|
if (res.code === 200 && Array.isArray(res.data)) { |
|
|
|
|
|
const { appointDates, selectedDateIndex } = this.data; |
|
|
|
|
|
const dateItem = appointDates[selectedDateIndex] || {}; |
|
|
|
|
|
dateItem.appointmentTimes = res.data; // 将查询到的时间段更新到 appointDates 的对应日期项中
|
|
|
|
|
|
appointDates[selectedDateIndex] = dateItem; |
|
|
|
|
|
this.setData({ |
|
|
|
|
|
appointDates, // 更新 appointDates 数组
|
|
|
|
|
|
appointmentTimes: [], // 清空独立的 appointmentTimes
|
|
|
|
|
|
}); |
|
|
|
|
|
this.initTimeSlotsFromAPI(); // 重新初始化时间段
|
|
|
|
|
|
} else { |
|
|
|
|
|
wx.showToast({ |
|
|
|
|
|
title: res.msg || "获取时间段失败", |
|
|
|
|
|
icon: "none", |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.catch((err) => { |
|
|
|
|
|
wx.showToast({ |
|
|
|
|
|
title: err.msg || "获取时间段失败", |
|
|
|
|
|
icon: "none", |
|
|
|
|
|
}); |
|
|
|
|
|
}); |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
