feat(预约页面): 添加无限预约状态下的提示文本显示
在无限预约状态下显示自定义提示文本,当没有设置提示时显示默认文本
Showing
1 changed file
with
17 additions
and
4 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2024-01-15 13:35:51 | 2 | * @Date: 2024-01-15 13:35:51 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2024-02-05 16:57:15 | 4 | + * @LastEditTime: 2026-01-22 10:56:01 |
| 5 | - * @FilePath: /xysBooking/src/views/booking.vue | 5 | + * @FilePath: /git/xysBooking/src/views/booking.vue |
| 6 | * @Description: 预约页面 | 6 | * @Description: 预约页面 |
| 7 | --> | 7 | --> |
| 8 | <template> | 8 | <template> |
| ... | @@ -67,7 +67,7 @@ | ... | @@ -67,7 +67,7 @@ |
| 67 | <div class="text">选择参访时间段</div> | 67 | <div class="text">选择参访时间段</div> |
| 68 | </div> | 68 | </div> |
| 69 | <div style="padding: 1.5rem 0.75rem; color: #A67939; text-align: center;"> | 69 | <div style="padding: 1.5rem 0.75rem; color: #A67939; text-align: center;"> |
| 70 | - 暂未开启预约 | 70 | + {{ infinity_tips_text }} |
| 71 | </div> | 71 | </div> |
| 72 | </div> | 72 | </div> |
| 73 | </div> | 73 | </div> |
| ... | @@ -142,13 +142,16 @@ onMounted(async () => { | ... | @@ -142,13 +142,16 @@ onMounted(async () => { |
| 142 | * @return {object} {text: 日期, date: 日期, reserve_full: 是否可约 1=可约,0=约满,-1=无需预约 overdue=过期日期 } | 142 | * @return {object} {text: 日期, date: 日期, reserve_full: 是否可约 1=可约,0=约满,-1=无需预约 overdue=过期日期 } |
| 143 | */ | 143 | */ |
| 144 | const findDatesInfo = (date) => { | 144 | const findDatesInfo = (date) => { |
| 145 | + if (!date) return { text: '', date: '', reserve_full: '', tips: '', lunar_date: {} }; | ||
| 145 | const result = dates_list.value.find((item) => item.month_date === date); | 146 | const result = dates_list.value.find((item) => item.month_date === date); |
| 146 | const currentDate = new Date(date); | 147 | const currentDate = new Date(date); |
| 147 | - const lunarDate = calendar.solar2lunar(dayjs(date).format('YYYY-MM-DD')); | 148 | + const d = dayjs(date); |
| 149 | + const lunarDate = calendar.solar2lunar(d.year(), d.month() + 1, d.date()); | ||
| 148 | return { | 150 | return { |
| 149 | text: currentDate.getDate().toString().padStart(2, '0'), | 151 | text: currentDate.getDate().toString().padStart(2, '0'), |
| 150 | date: result?.month_date, | 152 | date: result?.month_date, |
| 151 | reserve_full: result?.reserve_full, | 153 | reserve_full: result?.reserve_full, |
| 154 | + tips: result?.tips || '', | ||
| 152 | lunar_date: lunarDate | 155 | lunar_date: lunarDate |
| 153 | }; | 156 | }; |
| 154 | }; | 157 | }; |
| ... | @@ -212,6 +215,16 @@ const checked_day_reserve_full = ref(null); | ... | @@ -212,6 +215,16 @@ const checked_day_reserve_full = ref(null); |
| 212 | const checked_time = ref(-1); | 215 | const checked_time = ref(-1); |
| 213 | const timePeriod = ref([]); // 当前时间段信息 | 216 | const timePeriod = ref([]); // 当前时间段信息 |
| 214 | 217 | ||
| 218 | +const infinity_tips_text = computed(() => { | ||
| 219 | + if (!checked_day.value || checked_day_reserve_full.value !== ReserveStatus.INFINITY) return ''; | ||
| 220 | + const info = findDatesInfo(checked_day.value); | ||
| 221 | + if (dayjs(checked_day.value).isAfter(dayjs(), 'day')) { | ||
| 222 | + const tips = (info.tips || '').trim(); | ||
| 223 | + if (tips) return tips; | ||
| 224 | + } | ||
| 225 | + return '暂未开启预约'; | ||
| 226 | +}); | ||
| 227 | + | ||
| 215 | const chooseTime = (item, index) => { // 选择时间段回调 | 228 | const chooseTime = (item, index) => { // 选择时间段回调 |
| 216 | if (item.rest_qty || item.rest_qty === QtyStatus.INFINITY) { // 余量等于-1为不限制数量 | 229 | if (item.rest_qty || item.rest_qty === QtyStatus.INFINITY) { // 余量等于-1为不限制数量 |
| 217 | checked_time.value = index; | 230 | checked_time.value = index; | ... | ... |
-
Please register or login to post a comment