Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
39f5f91d 1 parent f7c42956

预约日期页面API接口联调

Inline Side-by-side
Showing 9 changed files with 70 additions and 107 deletions
......@@ -2,13 +2,13 @@
VITE_PORT = 8208
# 反向代理服务器地址
VITE_PROXY_TARGET = https://oa.onwall.cn
VITE_PROXY_TARGET = https://oa-dev.onwall.cn
# API请求前缀
VITE_PROXY_PREFIX = /srv/
# 打包输出文件夹名称
VITE_OUTDIR = xysBooking
VITE_OUTDIR = reserve
# 是否开启调试
VITE_CONSOLE = 0
......
......@@ -6,7 +6,7 @@
# @Description: 文件描述
###
# 资源公共路径
VITE_BASE = /f/xysBooking/
VITE_BASE = /f/reserve/
# 测试open-id
VITE_APP_OPENID =
......
......@@ -13,4 +13,4 @@ src/test/mocha/test.js
cypress.json
src/test
.idea
xysBooking
reserve
......
{
"name": "xysBooking",
"name": "reserve",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "xysBooking",
"name": "reserve",
"version": "1.0.0",
"dependencies": {
"@vant/area-data": "^1.3.1",
......
{
"name": "xysBooking",
"name": "reserve",
"description": "项目, 编译上传直接执行publish, 不需要其他额外操作。",
"version": "1.0.0",
"scripts": {
......
......@@ -14,7 +14,7 @@ set -e
path=/Users/huyirui/program/itomix/git/isp/f
# 编译输出文件夹
output=xysBooking
output=reserve
# 打包
npm run build
......
/*
* @Date: 2023-08-24 09:42:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-24 12:52:26
* @FilePath: /front/src/api/index.js
* @LastEditTime: 2024-01-17 17:37:48
* @FilePath: /xysBooking/src/api/index.js
* @Description: 文件描述
*/
import { fn, fetch } from '@/api/fn';
const Api = {
ORDER_REST_COUNT: '/srv/?a=order_rest_count',
ORDER_INFO: '/srv/?a=order_info',
ORDER_DETAIL_MY_LAST: '/srv/?a=order_detail_my_last',
ORDER_ADD: '/srv/?a=order_add',
ORDER_CANCEL: '/srv/?a=order_cancel',
CAN_RESERVE_DATE_LIST: '/srv/?a=api&t=can_reserve_date_list',
CAN_RESERVE_TIME_LIST: '/srv/?a=api&t=can_reserve_time_list',
};
/**
* @description: 剩余预约数量列表
* @param {Array} dates 查询日期
* @description: 可预约日期列表
* @param {Array} month 月份，格式yyyy-mm
* @returns
*/
export const orderRestCountAPI = (params) => fn(fetch.get(Api.ORDER_REST_COUNT, params));
export const canReserveDateListAPI = (params) => fn(fetch.get(Api.CAN_RESERVE_DATE_LIST, params));
/**
* @description: 查询预约信息
* @param {String} id 预约订单ID
* @description: 可预约时段列表
* @param {Array} month_date 日期，格式yyyy-mm-dd
* @returns
*/
export const orderInfoAPI = (params) => fn(fetch.get(Api.ORDER_INFO, params));
/**
* @description: 我的预约信息
* @returns
*/
export const orderDetailMyLastAPI = (params) => fn(fetch.get(Api.ORDER_DETAIL_MY_LAST, params));
/**
* @description: 保存预约信息
* @param {Array} dates 日期列表
* @param {Array} details
* @returns
*/
export const orderAddAPI = (params) => fn(fetch.post(Api.ORDER_ADD, params));
export const canReserveTimeListAPI = (params) => fn(fetch.get(Api.CAN_RESERVE_TIME_LIST, params));
/**
* @description: 取消预约
* @param {String} id 预约订单的ID
* @returns
*/
export const orderCancelAPI = (params) => fn(fetch.post(Api.ORDER_CANCEL, params));
// export const orderCancelAPI = (params) => fn(fetch.post(Api.ORDER_CANCEL, params));
......
......@@ -2,8 +2,8 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-28 10:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-24 10:56:20
* @FilePath: /front/src/utils/axios.js
* @LastEditTime: 2024-01-17 15:14:04
* @FilePath: /xysBooking/src/utils/axios.js
* @Description:
*/
import axios from 'axios';
......@@ -13,7 +13,8 @@ import { strExist } from '@/utils/tools'
// import { parseQueryString } from '@/utils/tools'
axios.defaults.params = {
f: 'xysBooking',
f: 'reserve',
client_name: '西园寺',
};
/**
......
<!--
* @Date: 2024-01-15 13:35:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 17:44:34
* @LastEditTime: 2024-01-17 18:07:39
* @FilePath: /xysBooking/src/views/booking.vue
* @Description: 预约页面
* @Version: 1.0.0
......@@ -17,17 +17,19 @@
<div class="days-of-week">
<div v-for="day in daysOfWeek" :key="day" class="item">{{ day }}</div>
</div>
<div v-for="(week, index) in weeks" :key="index" class="weeks">
<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).num ? 'disabled' : '']"
:class="['item', checked_day === findDatesInfo(date).date ? 'checked' : '', findDatesInfo(date).reserve_full ? 'disabled' : '']"
>
<div v-if="findDatesInfo(date).date">
<p class="day-text">{{ findDatesInfo(date).text }}</p>
<p v-if="findDatesInfo(date).num" class="day-price">¥{{ findDatesInfo(date).price }}</p>
<p v-if="!findDatesInfo(date).reserve_full" class="day-price">¥{{ findDatesInfo(date).price }}</p>
<p v-else class="day-no-booking">已约满</p>
</div>
</div>
</div>
</div>
<div v-if="checked_day" class="choose-time">
<div class="title">
<div class="text">选择参访时间段</div>
......@@ -37,15 +39,16 @@
@click="chooseTime(item, index)"
v-for="(item, index) in timePeriod"
:key="index"
:class="['time', !item.num ? 'disabled' : '']"
:class="['time', item.rest_qty === 0 ? 'disabled' : '']"
>
<div class="left">
<van-icon v-if="checked_time !== index" :name="icon_select1" />&nbsp;
<van-icon v-else :name="icon_select2" />&nbsp;
{{ item.left }}
{{ item.begin_time }}-{{ item.end_time }}
</div>
<div class="right">
<span v-if="item.num">余量：{{ item.right }}</span>
<span v-if="item.rest_qty > 0">余量：{{ item.price }}</span>
<span v-else-if="item.rest_qty === -1">可约</span>
<span v-else>已约满</span>
</div>
</div>
......@@ -88,6 +91,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
import { useGo } from '@/hooks/useGo'
import icon_select1 from '@/assets/images/单选01@2x.png'
import icon_select2 from '@/assets/images/单选02@2x.png'
import { canReserveDateListAPI, canReserveTimeListAPI } from '@/api/index'
const $route = useRoute();
const $router = useRouter();
......@@ -95,53 +99,27 @@ useTitle($route.meta.title);
const go = useGo();
const dates_list = ref([{
date: "2024-01-01",
price: 5,
num: 0,
}, {
date: "2024-01-02",
price: 5,
num: 0,
}, {
date: "2024-01-03",
price: 5,
num: 1,
}, {
date: "2024-01-04",
price: 5,
num: 1,
}, {
date: "2024-01-05",
price: 5,
num: 1,
}, {
date: "2024-01-06",
price: 5,
num: 1,
}, {
date: "2024-01-07",
price: 5,
num: 1,
}, {
date: "2024-01-08",
price: 5,
num: 1,
}, {
date: "2024-01-09",
price: 5,
num: 1,
}]);
const dates = ref(dates_list.value.map(item => item.date));
const dates_list = ref([]);
const dates = ref([]);
onMounted(async () => {
const raw_date = new Date();
const { code, data } = await canReserveDateListAPI({ month: `${raw_date.getFullYear()}-${raw_date.getMonth() + 1}` });
if (code) {
// 日期列表
dates_list.value = data;
dates.value = dates_list.value.map(item => item.month_date);
}
})
const findDatesInfo = (date) => {
const result = dates_list.value.find((item) => item.date === date);
const result = dates_list.value.find((item) => item.month_date === date);
const currentDate = new Date(date);
return {
text: currentDate.getDate().toString().padStart(2, '0'),
date: result.date,
price: result.price,
num: result.num,
date: result?.month_date,
price: result?.price,
reserve_full: result?.reserve_full,
};
};
......@@ -186,31 +164,27 @@ const weeks = computed(() => {
const checked_day = ref('');
const checked_time = ref(-1);
const timePeriod = ref([{
left: '05:00-08:00',
right: 1098,
num: 1,
}, {
left: '08:00-10:00',
right: 98,
num: 0,
}]);
const timePeriod = ref([]);
const chooseTime = (item, index) => { // 选择时间段回调
if (item.num) {
if (item.rest_qty > 0 || item.rest_qty === -1) {
checked_time.value = index;
}
console.log(item, index);
};
const checked_day_price = ref(0);
const chooseDay = (date) => { // 点击日期回调
if (findDatesInfo(date).num) { // 有余数可约
const chooseDay = async (date) => { // 点击日期回调
if (!findDatesInfo(date).reserve_full) { // 有余数可约
checked_day.value = date;
checked_day_price.value = findDatesInfo(date).price;
// TODO: 选择日期后，查询时间段信息
console.warn(checked_day.value);
// 选择日期后，查询时间段信息
const { code, data } = await canReserveTimeListAPI({ month_date: checked_day.value});
if (code) {
// rest_qty >0表示有余量，可约；=0表示没有余量，不可约；<0表示不限，可约；
timePeriod.value = data;
checked_time.value = -1;
}
}
};
......@@ -226,14 +200,19 @@ const minDate = new Date(2024, 0, 1);
const maxDate = new Date(2030, 11, 1);
const currentDateText = ref((raw_date.getMonth() + 1).toString().padStart(2, '0'));
const onConfirm = ({ selectedValues, selectedOptions }) => { // 选择日期回调
const onConfirm = async ({ selectedValues, selectedOptions }) => { // 选择日期回调
showPicker.value = false;
currentDateText.value = selectedValues[1].toString();
// 清空选择
checked_day.value = '';
checked_time.value = -1;
// TODO: 选择日期后，查询月份信息
console.warn(selectedValues);
// 选择日期后，查询月份信息
const { code, data } = await canReserveDateListAPI({ month: `${selectedValues[0]}-${selectedValues[1]}` });
if (code) {
// 日期列表
dates_list.value = data;
dates.value = dates_list.value.map(item => item.month_date);
}
}
const onCancel = () => {
showPicker.value = false;
......@@ -246,7 +225,7 @@ const nextBtn = () => {
show_error.value = true;
error_message.value = '请选择日期和时间段';
} else {
go('/submit', { date: checked_day.value, time: timePeriod.value[checked_time.value]['left'], price: checked_day_price.value });
go('/submit', { date: checked_day.value, time: `${timePeriod.value[checked_time.value]['begin_time']}-${timePeriod.value[checked_time.value]['end_time']}`, price: checked_day_price.value });
}
}
</script>
......