预约日期页面API接口联调

hookehuyr
Commit 39f5f91d7663aa71a7bd0229aaa5389c1f3876b8 39f5f91d 1 parent f7c42956
Showing 9 changed files with 70 additions and 107 deletions
.env
.env.production
.gitignore
package-lock.json
package.json
publish.sh
src/api/index.js
src/utils/axios.js
src/views/booking.vue
--- a/.env
View file @39f5f91
+++ b/.env
View file @39f5f91
@@ -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
--- a/.env.production
View file @39f5f91
+++ b/.env.production
View file @39f5f91
@@ -6,7 +6,7 @@
  # @Description: 文件描述
 ###
 # 资源公共路径
-VITE_BASE = /f/xysBooking/
+VITE_BASE = /f/reserve/
 # 测试open-id
 VITE_APP_OPENID =
--- a/.gitignore
View file @39f5f91
+++ b/.gitignore
View file @39f5f91
@@ -13,4 +13,4 @@ src/test/mocha/test.js
 cypress.json
 src/test
 .idea
-xysBooking
+reserve
--- a/package-lock.json
View file @39f5f91
+++ b/package-lock.json
View file @39f5f91
 {
-  "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",
--- a/package.json
View file @39f5f91
+++ b/package.json
View file @39f5f91
 {
-  "name": "xysBooking",
+  "name": "reserve",
   "description": "项目, 编译上传直接执行publish, 不需要其他额外操作。",
   "version": "1.0.0",
   "scripts": {
--- a/publish.sh
View file @39f5f91
+++ b/publish.sh
View file @39f5f91
@@ -14,7 +14,7 @@ set -e
 path=/Users/huyirui/program/itomix/git/isp/f
 # 编译输出文件夹
-output=xysBooking
+output=reserve
 # 打包
 npm run build
--- a/src/api/index.js
View file @39f5f91
+++ b/src/api/index.js
View file @39f5f91
 /*
  * @Date: 2023-08-24 09:42:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-24 12:52:26
+ * @LastEditTime: 2024-01-17 17:37:48
- * @FilePath: /front/src/api/index.js
+ * @FilePath: /xysBooking/src/api/index.js
  * @Description: 文件描述
  */
 import { fn, fetch } from '@/api/fn';
 const Api = {
-  ORDER_REST_COUNT: '/srv/?a=order_rest_count',
+  CAN_RESERVE_DATE_LIST: '/srv/?a=api&t=can_reserve_date_list',
-  ORDER_INFO: '/srv/?a=order_info',
+  CAN_RESERVE_TIME_LIST: '/srv/?a=api&t=can_reserve_time_list',
-  ORDER_DETAIL_MY_LAST: '/srv/?a=order_detail_my_last',
-  ORDER_ADD: '/srv/?a=order_add',
-  ORDER_CANCEL: '/srv/?a=order_cancel',
 };
 /**
- * @description: 剩余预约数量列表
+ * @description: 可预约日期列表
- * @param {Array} dates 查询日期
+ * @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: 查询预约信息
+ * @description: 可预约时段列表
- * @param {String} id 预约订单ID
+ * @param {Array} month_date 日期，格式yyyy-mm-dd
  * @returns
  */
-export const orderInfoAPI = (params) => fn(fetch.get(Api.ORDER_INFO, params));
+export const canReserveTimeListAPI = (params) => fn(fetch.get(Api.CAN_RESERVE_TIME_LIST, 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));
 /**
  * @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));
--- a/src/utils/axios.js
View file @39f5f91
+++ b/src/utils/axios.js
View file @39f5f91
@@ -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
+ * @LastEditTime: 2024-01-17 15:14:04
- * @FilePath: /front/src/utils/axios.js
+ * @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: '西园寺',
 };
 /**
--- a/src/views/booking.vue
View file @39f5f91
+++ b/src/views/booking.vue
View file @39f5f91
 <!--
  * @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([{
+const dates_list = ref([]);
-  date: "2024-01-01",
+const dates = ref([]);
-  price: 5,
+
-  num: 0,
+onMounted(async () => {
-}, {
+  const raw_date = new Date();
-  date: "2024-01-02",
+  const { code, data } = await canReserveDateListAPI({ month: `${raw_date.getFullYear()}-${raw_date.getMonth() + 1}` });
-  price: 5,
+  if (code) {
-  num: 0,
+    // 日期列表
-}, {
+    dates_list.value = data;
-  date: "2024-01-03",
+    dates.value = dates_list.value.map(item => item.month_date);
-  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 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,
+    date: result?.month_date,
-    price: result.price,
+    price: result?.price,
-    num: result.num,
+    reserve_full: result?.reserve_full,
   };
 };
@@ -186,31 +164,27 @@ const weeks = computed(() => {
 const checked_day = ref('');
 const checked_time = ref(-1);
-const timePeriod = ref([{
+const timePeriod = ref([]);
-  left: '05:00-08:00',
-  right: 1098,
-  num: 1,
-}, {
-  left: '08:00-10:00',
-  right: 98,
-  num: 0,
-}]);
 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) => { // 点击日期回调
+const chooseDay = async (date) => { // 点击日期回调
-  if (findDatesInfo(date).num) { // 有余数可约
+  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>