新增预约页面逻辑

hookehuyr
Commit 6b8fa40d76bec4ad87bbbcf28c0958387fafa5d0 6b8fa40d 1 parent 7678f851
Showing 2 changed files with 99 additions and 42 deletions
components.d.ts
src/views/booking.vue
--- a/components.d.ts
View file @6b8fa40
+++ b/components.d.ts
View file @6b8fa40
@@ -16,6 +16,7 @@ declare module '@vue/runtime-core' {
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
     VanCol: typeof import('vant/es')['Col']
+    VanDatePicker: typeof import('vant/es')['DatePicker']
     VanDialog: typeof import('vant/es')['Dialog']
     VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
@@ -28,5 +29,6 @@ declare module '@vue/runtime-core' {
     VanRow: typeof import('vant/es')['Row']
     VanSwipe: typeof import('vant/es')['Swipe']
     VanSwipeItem: typeof import('vant/es')['SwipeItem']
+    VanToast: typeof import('vant/es')['Toast']
   }
 }
--- a/src/views/booking.vue
View file @6b8fa40
+++ b/src/views/booking.vue
View file @6b8fa40
 <!--
  * @Date: 2024-01-15 13:35:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-15 16:22:20
+ * @LastEditTime: 2024-01-16 15:15:07
  * @FilePath: /xysBooking/src/views/booking.vue
  * @Description: 预约页面
  * @Version: 1.0.0
@@ -12,7 +12,7 @@
       <div class="choose-date">
         <div class="title">
           <div class="text">选择参访日期</div>
-          <div class="day">01月</div>
+          <div @click="chooseDate" class="day">{{ currentDateText }} 月</div>
         </div>
         <div class="days-of-week">
           <div v-for="day in daysOfWeek" :key="day" class="item">{{ day }}</div>
@@ -28,52 +28,70 @@
           </div>
         </div>
       </div>
-      <div class="choose-time">
+      <div v-if="checked_day" class="choose-time">
         <div class="title">
           <div class="text">选择参访时间段</div>
         </div>
         <div class="time-list">
-          <div @click="chooseTime(item, index)" v-for="(item, index) in timePeriod" :key="index" class="time">
+          <div
+            @click="chooseTime(item, index)"
+            v-for="(item, index) in timePeriod"
+            :key="index"
+            :class="['time', !item.num ? 'disabled' : '']"
+          >
             <div class="left">
               <van-icon v-if="checked_time !== index" name="https://cdn.ipadbiz.cn/xys/booking/%E5%8D%95%E9%80%8901@2x.png" />&nbsp;
               <van-icon v-else name="https://cdn.ipadbiz.cn/xys/booking/%E5%8D%95%E9%80%8902@2x.png" />&nbsp;
               {{ item.left }}
             </div>
-            <div class="right">余量：{{ item.right }}</div>
+            <div class="right">
+              <span v-if="item.num">余量：{{ item.right }}</span>
+              <span v-else>已约满</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
     <div style="height: 5rem;"></div>
     <div class="next">
-      <div class="button" style="background-color: #A67939;">下一步</div>
+      <div @click="nextBtn" class="button" style="background-color: #A67939;">下一步</div>
     </div>
+
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-date-picker
+        v-model="currentDate"
+        title="选择年月"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :columns-type="columnsType"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-popup>
+
+    <van-toast v-model:show="show_error" style="">
+      <template #message>
+        {{ error_message }}
+      </template>
+    </van-toast>
   </div>
 </template>
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-
+import { showSuccessToast, showFailToast, showToast } from 'vant';
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
+import { useGo } from '@/hooks/useGo'
+
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
-const dates = ref([
+const go = useGo();
-  "2024-01-01",
-  "2024-01-02",
-  "2024-01-03",
-  "2024-01-04",
-  "2024-01-05",
-  "2024-01-06",
-  "2024-01-07",
-  "2024-01-08",
-  "2024-01-09",
-]);
 const dates_list = ref([{
   date: "2024-01-01",
@@ -112,6 +130,7 @@ const dates_list = ref([{
   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);
@@ -168,35 +187,62 @@ const checked_time = ref(-1);
 const timePeriod = ref([{
   left: '05:00-08:00',
   right: 1098,
+  num: 1,
 }, {
-  left: '05:00-08:00',
+  left: '08:00-10:00',
-  right: 1098,
+  right: 98,
-}, {
+  num: 0,
-  left: '05:00-08:00',
+}]);
-  right: 1098,
-},{
-  left: '05:00-08:00',
-  right: 1098,
-}, {
-  left: '05:00-08:00',
-  right: 1098,
-}, {
-  left: '05:00-08:00',
-  right: 1098,
-}, {
-  left: '05:00-08:00',
-  right: 1098,
-},]);
-const chooseTime = (item, index) => {
+const chooseTime = (item, index) => { // 选择时间段回调
-  checked_time.value = index;
+  if (item.num) {
+    checked_time.value = index;
+  }
   console.log(item, index);
 };
-const chooseDay = (date) => {
+const checked_day_price = ref(0);
-  checked_day.value = date;
+
-  console.log(date);
+const chooseDay = (date) => { // 点击日期回调
+  if (findDatesInfo(date).num) { // 有余数可约
+    checked_day.value = date;
+    checked_day_price.value = findDatesInfo(date).price;
+  }
 };
+
+const showPicker = ref(false);
+const chooseDate = () => {
+  showPicker.value = true;
+}
+
+const raw_date = new Date();
+const currentDate = ref([raw_date.getFullYear(), raw_date.getMonth()]);
+const columnsType = ['year', 'month'];
+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 }) => { // 选择日期回调
+  showPicker.value = false;
+  currentDateText.value = selectedValues[1].toString();
+  // 清空选择
+  checked_day.value = '';
+  checked_time.value = -1;
+}
+const onCancel = () => {
+  showPicker.value = false;
+}
+
+const show_error = ref(false);
+const error_message = ref('');
+const nextBtn = () => {
+  if (!checked_day.value || checked_time.value === -1) {
+    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 });
+  }
+}
 </script>
 <style lang="less" scoped>
@@ -241,7 +287,7 @@ const chooseDay = (date) => {
         display: flex;
         padding: 0.5em 1%;
         .item {
-          width: 11%;
+          width: 11.5%;
           text-align: center;
           margin: 0 0.3rem;
           padding: 0.5rem 0;
@@ -306,6 +352,15 @@ const chooseDay = (date) => {
           .right {
             color: #A67939;
           }
+          &.disabled {
+            background-color: #E0E0E0;
+            .left {
+              color: #C7C7C7;
+            }
+            .right {
+              color: #C7C7C7;
+            }
+          }
         }
       }
     }