fix

hookehuyr
Commit fe5a303b0b196dac0b62a6447a8e739437ad75d2 fe5a303b 1 parent 21f045ba
Showing 4 changed files with 53 additions and 19 deletions
src/views/index.vue
src/views/preview.vue
src/views/result.vue
vite.config.js
--- a/src/views/index.vue
View file @fe5a303
+++ b/src/views/index.vue
View file @fe5a303
 <!--
  * @Date: 2023-06-21 10:23:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-25 10:36:50
+ * @LastEditTime: 2023-08-25 15:07:53
  * @FilePath: /bieyuan/src/views/index.vue
  * @Description: 文件描述
 -->
@@ -14,7 +14,7 @@
       <div @click="selectIndex(0)" :class="['today', 'item', index === 0 ? 'selected' : '']">
         <div class="datetime" style="padding: 1rem 0;">
           <div style="font-size: 2rem;">今天</div>
-          <div>{{ shortcut[0]?.date }}</div>
+          <div>{{ formatDateShow(shortcut[0]?.date) }}</div>
         </div>
         <div class="remain">
           <div>剩余名额</div>
@@ -27,7 +27,7 @@
       <div @click="selectIndex(1)" :class="['tomorrow', 'item', index === 1 ? 'selected' : '']">
         <div class="datetime" style="padding: 1rem 0;">
           <div style="font-size: 1.5rem;">明天</div>
-          <div>{{ shortcut[1]?.date }}</div>
+          <div>{{ formatDateShow(shortcut[1]?.date) }}</div>
         </div>
         <div class="remain">
           <div>剩余名额</div>
@@ -40,7 +40,7 @@
       <div @click="selectIndex(2)" :class="['after', 'item', index === 2 ? 'selected' : '']">
         <div class="datetime" style="padding: 0.5rem 0;">
           <div style="font-size: 1.25rem;">后天</div>
-          <div style="font-size: 0.85rem;">{{ shortcut[2]?.date }}</div>
+          <div style="font-size: 0.85rem;">{{ formatDateShow(shortcut[2]?.date) }}</div>
         </div>
         <div class="remain" style="font-size: 0.85rem; padding: 0.4rem 0;">
           <div>剩余名额</div>
@@ -72,10 +72,10 @@
                 <van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/-@2x.png" />
               </div>
               </van-col>
-              <van-col span="14" style="text-align: center;">
+              <van-col span="12" style="text-align: center;">
                 <input v-model="num" type="number" class="input_num">
               </van-col>
-              <van-col span="2" style="text-align: center;">
+              <van-col span="4" style="text-align: center;">
                 <span>人</span>
               </van-col>
               <van-col span="4" style="text-align: center;">
@@ -150,13 +150,24 @@ const selectedDates = ref([]);
 const index = ref(0);
 const shortcut = ref([]);
+watch(
+  () => num.value,
+  (val) => {
+    // 控制输入值为 3 位
+    const maxLength = 3;
+    if (val.toString().length > maxLength) {
+      num.value = num.value.toString().slice(0, maxLength);
+    }
+  }
+);
+
 const asyncData = ref();
 const showMore = async () => {
   show.value = true;
   const { data } = await orderRestCountAPI({ start_date: dayjs().format('YYYY-MM-DD'), end_date: dayjs(maxDate.value).format('YYYY-MM-DD') });
   asyncData.value = data;
   asyncData.value.forEach(item => {
-    item.format = item.date.split('-')
+    item.format = item.date.split('-');
   });
 }
@@ -174,6 +185,7 @@ const formatter = computed(() => {
       if (year === +arr[0] && month === +arr[1] && date === +arr[2]) {
         // day.topInfo = '剩余';
         day.bottomInfo = item.rest_count;
+        day.className = 'abc'
       }
     });
     return day;
@@ -188,6 +200,7 @@ const onConfirm = (dates) => { // 选择日历确定回调
   dates.forEach((date) => {
     selectedDates.value.push(dayjs(date).format('YYYY-MM-DD'));
   });
+  clickNext();
 };
 const selectIndex = (idx) => { // 保存手动点击的索引值
@@ -236,6 +249,15 @@ const clickNext = () => { // 点击下一步按钮
   }
 }
+const formatDateShow = (date) => {
+  if (date) {
+    const arr = date.split('-');
+    let month = arr[1];
+    let day = arr[2];
+    return `${month}月${day}日`;
+  }
+}
+
 // 最大日期默认为6个月
 const getFutureDate = () => {
   const currentDate = new Date();
@@ -302,7 +324,7 @@ const isMinValue = (array, value) => { // 判断输入值是否小于数组中
     .remain {
       color: #93663D;
-      font-size: 1.15rem;
+      font-size: 0.85rem;
       padding: 1rem 0;
       div:first-child {
@@ -374,8 +396,8 @@ const isMinValue = (array, value) => { // 判断输入值是否小于数组中
     .input_num {
       border: 0;
       background-color: #F7F7F7;
-      height: 2.5rem;
+      height: 2rem;
-      width: 6.5rem;
+      width: 4em;
       color: #976C46;
       text-align: center;
       font-weight: bold;
--- a/src/views/preview.vue
View file @fe5a303
+++ b/src/views/preview.vue
View file @fe5a303
@@ -19,8 +19,6 @@
       </div>
     </div>
-    <div style="height: 4rem;"></div>
-
     <div class="bookingBox">
       <van-row>
         <van-col span="6" class="text">预约人数</van-col>
@@ -31,10 +29,10 @@
               <van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/-@2x.png" />
             </div>
             </van-col>
-            <van-col span="14" style="text-align: center;">
+            <van-col span="12" style="text-align: center;">
               <input v-model="num" type="number" class="input_num">
             </van-col>
-            <van-col span="2" style="text-align: center;">
+            <van-col span="4" style="text-align: center;">
               <span>人</span>
             </van-col>
             <van-col span="4" style="text-align: center;">
@@ -84,7 +82,7 @@ function getDaysInMonth(year, month) {
 onMounted(async () => {
   const dates = $route.query.dates && JSON.parse($route.query.dates);
-  const { data } = await orderRestCountAPI({ dates });
+  const { data } = await orderRestCountAPI({ dates:  dates.join(',')});
   shortcut.value = data;
   // 上一页选择的预约人数
   num.value = $route.query.count ? +$route.query.count : 1;
@@ -113,6 +111,17 @@ const num = ref(1);
 const show = ref(false);
 const selectedDates = ref([]);
+watch(
+  () => num.value,
+  (val) => {
+    // 控制输入值为 3 位
+    const maxLength = 3;
+    if (val.toString().length > maxLength) {
+      num.value = num.value.toString().slice(0, maxLength);
+    }
+  }
+);
+
 const asyncData = ref();
 const showMore = async () => {
   show.value = true;
@@ -151,7 +160,7 @@ const onConfirm = async (dates) => {
     defaultDate.value.push(dayjs(date).toDate())
   });
   // 后台请求数据
-  const { data } = await orderRestCountAPI({ dates : selectedDates.value });
+  const { data } = await orderRestCountAPI({ dates : selectedDates.value.join(',') });
   shortcut.value = data;
   shortcut.value.forEach(item => {
     item.checked = true;
@@ -305,7 +314,7 @@ const clickNext = () => { // 点击下一步按钮
       border: 0;
       background-color: #F7F7F7;
       height: 2.5rem;
-      // width: 6.5rem;
+      // width: 4em;
       width: 70%;
       color: #976C46;
       text-align: center;
--- a/src/views/result.vue
View file @fe5a303
+++ b/src/views/result.vue
View file @fe5a303
@@ -105,6 +105,9 @@ const toggleItem = (item) => {
 const show = ref(false);
 const cancelApp = () => {
   show.value = true;
+  nextTick(() => {
+    $('.van-popup.van-popup--center.van-dialog').css('width', '320px')
+  })
 }
 const onConfirm = async () => {
   const { code } = await orderCancelAPI({ id: $route.query.id });
--- a/vite.config.js
View file @fe5a303
+++ b/vite.config.js
View file @fe5a303
 /*
  * @Date: 2023-06-13 13:26:46
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-23 14:47:02
+ * @LastEditTime: 2023-08-25 14:14:26
- * @FilePath: /front/vite.config.js
+ * @FilePath: /bieyuan/vite.config.js
  * @Description: 文件描述
  */
 import vue from '@vitejs/plugin-vue';