Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3bd9ed14 1 parent 821cc121

代码优化

Inline Side-by-side
Showing 5 changed files with 111 additions and 55 deletions
<!--
* @Date: 2024-01-15 13:35:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-23 10:34:08
* @LastEditTime: 2024-01-24 10:26:55
* @FilePath: /xysBooking/src/views/booking.vue
* @Description: 预约页面
-->
......@@ -19,19 +19,22 @@
<div v-for="(week, index) in weeks" :key="week" class="weeks">
<div v-for="date in week" :key="date"
@click="chooseDay(date)"
:class="['item', checked_day === findDatesInfo(date).date ? 'checked' : '', findDatesInfo(date).reserve_full === 0 || findDatesInfo(date).reserve_full === 'overdue' ? 'disabled' : '']"
:class="[ 'item',
checked_day === findDatesInfo(date).date ? 'checked' : '',
findDatesInfo(date).reserve_full === ReserveStatus.FULL || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE ? 'disabled' : ''
]"
>
<div v-if="findDatesInfo(date).date">
<p class="day-text">{{ findDatesInfo(date).text }}</p>
<p v-if="findDatesInfo(date).reserve_full === 1" class="day-price">¥{{ findDatesInfo(date).price }}</p>
<p v-else-if="findDatesInfo(date).reserve_full === -1 || findDatesInfo(date).reserve_full === 'overdue'" class="day-price"></p>
<p v-else-if="findDatesInfo(date).reserve_full === 0" class="day-no-booking">约满</p>
<p v-if="findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE" class="day-price">¥{{ findDatesInfo(date).price }}</p>
<p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.INFINITY || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE" class="day-price"></p>
<p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.FULL" class="day-no-booking">约满</p>
<!-- <p v-else class="day-no-booking">¥{{ findDatesInfo(date).price }}</p> -->
</div>
</div>
</div>
</div>
<div v-if="checked_day && checked_day_reserve_full === 1" class="choose-time">
<div v-if="checked_day && checked_day_reserve_full === ReserveStatus.AVAILABLE" class="choose-time">
<div class="title">
<div class="text">选择参访时间段</div>
</div>
......@@ -40,7 +43,7 @@
@click="chooseTime(item, index)"
v-for="(item, index) in timePeriod"
:key="index"
:class="['time', item.rest_qty === 0 ? 'disabled' : '']"
:class="['time', item.rest_qty === QtyStatus.FULL ? 'disabled' : '']"
>
<div class="left">
<van-icon v-if="checked_time !== index" :name="icon_select1" />&nbsp;
......@@ -48,14 +51,14 @@
{{ item.begin_time }}-{{ item.end_time }}
</div>
<div class="right">
<span v-if="item.rest_qty > 0">余量：{{ item.rest_qty }}</span>
<span v-else-if="item.rest_qty === -1">可约</span>
<span v-if="item.rest_qty">余量：{{ item.rest_qty }}</span>
<span v-else-if="item.rest_qty === QtyStatus.INFINITY">可约</span>
<span v-else>已约满</span>
</div>
</div>
</div>
</div>
<div v-if="checked_day_reserve_full === -1" class="choose-time">
<div v-if="checked_day_reserve_full === ReserveStatus.INFINITY" class="choose-time">
<div class="title">
<div class="text">选择参访时间段</div>
</div>
......@@ -65,7 +68,7 @@
</div>
</div>
<div style="height: 5rem;"></div>
<div v-if="checked_day && checked_day_reserve_full === 1" class="next">
<div v-if="checked_day && checked_day_reserve_full === ReserveStatus.AVAILABLE" class="next">
<div @click="nextBtn" class="button" style="background-color: #A67939;">下一步</div>
</div>
......@@ -81,7 +84,7 @@
/>
</van-popup>
<van-toast v-model:show="show_error" style="">
<van-toast v-model:show="show_error">
<template #message>
{{ error_message }}
</template>
......@@ -122,7 +125,7 @@ onMounted(async () => {
// 今日之前都不可约
dates_list.value.forEach((date) => {
if (dayjs(date.month_date).isBefore(dayjs())) {
date.reserve_full = 'overdue';
date.reserve_full = ReserveStatus.OVERDUE;
}
});
dates.value = dates_list.value.map(item => item.month_date);
......@@ -145,6 +148,17 @@ const findDatesInfo = (date) => {
};
};
/**
* @description: 预约状态
* @return {object} {INFINITY: -1, FULL: 0, AVAILABLE: 1, OVERDUE: 'overdue' }
*/
const ReserveStatus = {
INFINITY: -1, // 无需预约
FULL: 0, // 约满
AVAILABLE: 1, // 可约
OVERDUE: 'overdue', // 过期日期
}
const daysOfWeek = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
/**
......@@ -194,17 +208,26 @@ const checked_time = ref(-1);
const timePeriod = ref([]); // 当前时间段信息
const chooseTime = (item, index) => { // 选择时间段回调
if (item.rest_qty > 0 || item.rest_qty === -1) { // 余量等于-1为不限制数量
if (item.rest_qty || item.rest_qty === QtyStatus.INFINITY) { // 余量等于-1为不限制数量
checked_time.value = index;
}
};
/**
* @description: 数量状态
* @return {object} {FULL: 0, INFINITY: -1 }
*/
const QtyStatus = {
FULL: 0, // 无余量
INFINITY: -1, // 无限制
}
const chooseDay = async (date) => { // 点击日期回调
if (findDatesInfo(date).reserve_full === 1 || findDatesInfo(date).reserve_full === -1) { // 状态 1可约 || -1不限制
if (findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE || findDatesInfo(date).reserve_full === ReserveStatus.INFINITY) { // 状态 1可约 || -1不限制
checked_day.value = date; // 当前日期
checked_day_price.value = findDatesInfo(date).price; // 当前价格
checked_day_reserve_full.value = findDatesInfo(date).reserve_full; // 当前状态
if (findDatesInfo(date).reserve_full === 1) {
if (findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE) {
// 选择日期后，查询时间段信息
const { code, data } = await canReserveTimeListAPI({ month_date: checked_day.value});
if (code) {
......@@ -243,7 +266,7 @@ const onConfirm = async ({ selectedValues, selectedOptions }) => { //
// 今日之前都不可约
dates_list.value.forEach((date) => {
if (dayjs(date.month_date).isBefore(dayjs())) {
date.reserve_full = 'overdue';
date.reserve_full = ReserveStatus.OVERDUE;
}
});
dates.value = dates_list.value.map(item => item.month_date);
......
<!--
* @Date: 2024-01-16 13:19:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-19 21:53:06
* @LastEditTime: 2024-01-24 10:45:32
* @FilePath: /xysBooking/src/views/bookingDetail.vue
* @Description: 文件描述
* @Description: 预约记录详情
-->
<template>
<div class="booking-detail-page">
......@@ -31,7 +31,7 @@
</div>
</div>
<div style="height: 5rem;"></div>
<div v-if="billInfo.status === '3'" class="cancel-wrapper">
<div v-if="billInfo.status === CodeStatus.SUCCESS" class="cancel-wrapper">
<div @click="cancelBooking" class="cancel-btn ">取消预约</div>
</div>
</div>
......@@ -54,8 +54,8 @@ const $router = useRouter();
useTitle($route.meta.title);
const go = useGo();
const pay_id = $route.query.pay_id;
const status = ref('预约成功');
const qrCodeStatus = ref('');
const cancelBooking = (item) => {
......@@ -89,26 +89,42 @@ const billInfo = ref({});
* 9=已使用（明细里有一个码被使用），
* 11=退款中（取消预约时先把状态打成11）
*/
const CodeStatus = {
APPLY: 1,
PAYING: 2,
SUCCESS: 3,
CANCEL: 5,
CANCELED: 7,
USED: 9,
REFUNDING: 11
}
onMounted(async () => {
const { code, data } = await billInfoAPI({ pay_id });
if (code) {
const formatDatetime = (data) => { // 格式化日期
let begin_time = data.begin_time.slice(0, -3);
let end_time = data.end_time.slice(0, -3);
let str = begin_time + ' ' + end_time;
return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
}
onMounted(async () => {
const { code, data } = await billInfoAPI({ pay_id });
if (code) {
//
data.datetime = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
data.datetime = data && formatDatetime(data);
data.order_time = data.created_time.slice(0, -3);
//
billInfo.value = data;
// 显示二维码状态
if (billInfo.value.status === '3') {
switch (billInfo.value.status) {
case CodeStatus.SUCCESS:
qrCodeStatus.value = 'success';
}
if (billInfo.value.status === '7') {
break;
case CodeStatus.CANCELED:
qrCodeStatus.value = 'cancel';
}
if (billInfo.value.status === '9') {
break;
case CodeStatus.USED:
qrCodeStatus.value = 'used';
break;
}
}
})
......
<!--
* @Date: 2024-01-16 11:37:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-22 17:45:57
* @LastEditTime: 2024-01-24 10:44:23
* @FilePath: /xysBooking/src/views/bookingList.vue
* @Description: 文件描述
-->
......@@ -59,40 +59,49 @@ const go = useGo();
* 9=已使用（明细里有一个码被使用），
* 11=退款中（取消预约时先把状态打成11）
*/
const CodeStatus = {
APPLY: '1',
PAYING: '2',
SUCCESS: '3',
CANCEL: '5',
CANCELED: '7',
USED: '9',
REFUNDING: '11'
}
const formatStatus = (status) => {
switch (status) {
case '1':
case CodeStatus.APPLY:
return {
key: 'cancel',
value: '待支付'
}
case '2':
case CodeStatus.PAYING:
return {
key: 'success',
value: '支付中'
}
case '3':
case CodeStatus.SUCCESS:
return {
key: 'success',
value: '预约成功'
}
case '5':
case CodeStatus.CANCEL:
return {
key: 'cancel',
value: '已取消'
}
case '7':
case CodeStatus.CANCELED:
return {
key: 'cancel',
value: '已取消'
}
case '9':
case CodeStatus.USED:
return {
key: 'used',
value: '已使用'
}
case '11':
case CodeStatus.REFUNDING:
return {
key: 'cancel',
value: '退款中'
......@@ -100,22 +109,26 @@ const formatStatus = (status) => {
}
}
const page = ref(1);
const limit = ref(5);
const page = ref(1); // 页码默认为1
const limit = ref(5); // 每页默认显示5条
const bookingList = ref([]);
const loading = ref(false);
const finished = ref(false);
const finishedTextStatus = ref(false);
const formatDatetime = (data) => { // 格式化日期
let begin_time = data.begin_time.slice(0, -3);
let end_time = data.end_time.slice(0, -3);
let str = begin_time + ' ' + end_time;
return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
}
onMounted(async () => {
const { code, data } = await billListAPI({ page: page.value, row_num: limit.value });
if (code) {
//
data.forEach(item => {
let begin_time = item.begin_time?.slice(0, -3);
let end_time = item.end_time?.slice(0, -3);
let str = begin_time + ' ' + end_time;
item.booking_time = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
item.booking_time = item && formatDatetime(item);
item.order_time = item.created_time.slice(0, -3);
});
bookingList.value = data;
......@@ -127,10 +140,7 @@ const onLoad = async () => {
const { code, data } = await billListAPI({ page: page.value, row_num: limit.value });
if (code) {
data.forEach(item => {
let begin_time = item.begin_time?.slice(0, -3);
let end_time = item.end_time?.slice(0, -3);
let str = begin_time + ' ' + end_time;
item.booking_time = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
item.booking_time = item && formatDatetime(item);
item.order_time = item.created_time.slice(0, -3);
});
bookingList.value = bookingList.value.concat(data);
......
<!--
* @Date: 2024-01-15 16:25:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-19 18:57:26
* @LastEditTime: 2024-01-22 18:21:18
* @FilePath: /xysBooking/src/views/submit.vue
* @Description: 预约人员信息
-->
......@@ -124,7 +124,9 @@ const submitBtn = async () => {
if (prepare_code) {
const { code: callback_code, data: callback_data } = await payCallbackAPI({ pay_id: prepare_data.pay_id, pay_status: 1 });
if (callback_code) {
// TODO：看需求，把跳转页换成等待页面
go('/success', { pay_id: prepare_data.pay_id });
// go('/waiting', { pay_id: prepare_data.pay_id });
}
}
}
......
<!--
* @Date: 2024-01-15 18:28:25
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-19 17:27:20
* @LastEditTime: 2024-01-24 10:45:51
* @FilePath: /xysBooking/src/views/success.vue
* @Description: 预约成功提示页面
-->
......@@ -55,17 +55,22 @@ const goToDetail = () => {
const billInfo = ref({});
onMounted(async () => {
const { code, data } = await billInfoAPI({ pay_id: $route.query.pay_id });
if (code) {
const formatDatetime = (data) => { // 格式化日期
let begin_time = data.begin_time.slice(0, -3);
let end_time = data.end_time.slice(0, -3);
let str = begin_time + ' ' + end_time;
return `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`;
}
onMounted(async () => {
// 获取订单详情
const { code, data } = await billInfoAPI({ pay_id: $route.query.pay_id });
if (code) {
//
data.datetime = `${str.split(' ')[0]} ${str.split(' ')[1]}-${str.split(' ')[3]}`
data.datetime = data && formatDatetime(data);
billInfo.value = data;
// TAG：支付翻状态
const { code: prepare_code, data: prepare_data } = await payPrepareAPI({ pay_id: $route.query.pay_id });
// const { code: prepare_code, data: prepare_data } = await payPrepareAPI({ pay_id: $route.query.pay_id });
}
})
</script>
......