细节完善

hookehuyr
Commit 21f045ba1d8a06dc61e13b756a1712bf2af9942d 21f045ba 1 parent 1f120524
Showing 3 changed files with 111 additions and 21 deletions
src/views/index.vue
src/views/next.vue
src/views/preview.vue
--- a/src/views/index.vue
View file @21f045b
+++ b/src/views/index.vue
View file @21f045b
 <!--
  * @Date: 2023-06-21 10:23:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-24 15:11:10
+ * @LastEditTime: 2023-08-25 10:36:50
- * @FilePath: /front/src/views/index.vue
+ * @FilePath: /bieyuan/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
@@ -50,11 +50,11 @@
           <van-icon size="1.5rem" name="https://cdn.ipadbiz.cn/bieyuan/hua01@2x.png" />
         </div>
       </div>
-      <div :class="['more', 'item', index === -1 ? 'selected' : '']">
+      <div @click="showMore" :class="['more', 'item', index === -1 ? 'selected' : '']">
         <div style="margin-top: 1rem;">
           <van-icon size="1.25rem" name="https://cdn.ipadbiz.cn/bieyuan/rili@2x.png" />
         </div>
-        <div style="color: #93663D;" @click="showMore">更多</div>
+        <div style="color: #93663D;">更多</div>
         <div style="position: absolute; bottom: -0.7rem; left: calc(50% - 0.6rem)">
           <van-icon size="1.2rem" name="https://cdn.ipadbiz.cn/bieyuan/hua01@2x.png" />
         </div>
@@ -92,7 +92,15 @@
       <div @click="clickNext" class="next-btn">下一步</div>
     </div>
-    <van-calendar v-model:show="show" type="multiple" :max-range="7" @confirm="onConfirm" color="#93663D" />
+    <van-calendar
+      v-model:show="show"
+      type="multiple"
+      :max-range="7"
+      :formatter="formatter"
+      :max-date="maxDate"
+      color="#93663D"
+      @confirm="onConfirm"
+    />
   </div>
 </template>
@@ -110,6 +118,10 @@ const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+function getDaysInMonth(year, month) {
+  return new Date(year, month, 0).getDate();
+}
+
 onMounted(async () => {
   const { data } = await orderRestCountAPI();
   // 获取三天数据
@@ -138,10 +150,36 @@ const selectedDates = ref([]);
 const index = ref(0);
 const shortcut = ref([]);
-const showMore = () => {
+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('-')
+  });
 }
+const formatter = computed(() => {
+  if (!asyncData.value) {
+    return (day) => day;
+  }
+  return (day) => {
+    const year = day.date.getFullYear();
+    const month = day.date.getMonth() + 1;
+    const date = day.date.getDate();
+
+    asyncData.value.forEach(item => {
+      const arr = item.format;
+      if (year === +arr[0] && month === +arr[1] && date === +arr[2]) {
+        // day.topInfo = '剩余';
+        day.bottomInfo = item.rest_count;
+      }
+    });
+    return day;
+  };
+});
+
 const onConfirm = (dates) => { // 选择日历确定回调
   show.value = false;
   index.value = -1;
@@ -198,6 +236,14 @@ const clickNext = () => { // 点击下一步按钮
   }
 }
+// 最大日期默认为6个月
+const getFutureDate = () => {
+  const currentDate = new Date();
+  const futureDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 6, currentDate.getDate());
+  return futureDate;
+}
+const maxDate = ref(getFutureDate());
+
 const isPositiveInteger = (value) => {
   // 判断是否为数字
   if (typeof value !== 'number') {
--- a/src/views/next.vue
View file @21f045b
+++ b/src/views/next.vue
View file @21f045b
 <!--
  * @Date: 2023-08-22 14:13:07
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-24 15:19:19
+ * @LastEditTime: 2023-08-24 17:02:52
- * @FilePath: /front/src/views/next.vue
+ * @FilePath: /bieyuan/src/views/next.vue
  * @Description: 文件描述
 -->
 <template>
@@ -124,10 +124,6 @@ const validatorId = (val) => {
 };
 const onSubmit = async () => {
-  // const { data, msg } = await orderAddAPI({ dates: $route.query.dates, details: userInfo.value });
-  // if (data) {
-
-  // }
   // 提交预约信息
   axios.post('/srv/?a=order_add', {
     dates: JSON.parse($route.query.dates),
--- a/src/views/preview.vue
View file @21f045b
+++ b/src/views/preview.vue
View file @21f045b
@@ -51,8 +51,16 @@
       <div @click="clickNext" class="next-btn">下一步</div>
     </div>
-    <van-calendar :default-date="defaultDate" v-model:show="show" type="multiple" :max-range="7" @confirm="onConfirm"
+    <van-calendar
-      color="#93663D" />
+      v-model:show="show"
+      :default-date="defaultDate"
+      type="multiple"
+      :max-range="7"
+      :formatter="formatter"
+      :max-date="maxDate"
+      color="#93663D"
+      @confirm="onConfirm"
+    />
   </div>
 </template>
@@ -70,6 +78,10 @@ const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+function getDaysInMonth(year, month) {
+  return new Date(year, month, 0).getDate();
+}
+
 onMounted(async () => {
   const dates = $route.query.dates && JSON.parse($route.query.dates);
   const { data } = await orderRestCountAPI({ dates });
@@ -82,6 +94,12 @@ onMounted(async () => {
   });
   // 获取默认日期集合
   selectedDates.value = shortcut.value.map(item => item.date);
+  // 默认勾选日历信息
+  let default_date = JSON.parse($route.query.dates);
+  defaultDate.value = [];
+  default_date.forEach((date) => {
+    defaultDate.value.push(dayjs(date).toDate())
+  });
 });
 const defaultDate = ref(null);
@@ -95,27 +113,49 @@ const num = ref(1);
 const show = ref(false);
 const selectedDates = ref([]);
-const showMore = () => {
+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') });
-  let default_date = JSON.parse($route.query.dates);
+  asyncData.value = data;
-  defaultDate.value = [];
+  asyncData.value.forEach(item => {
-  default_date.forEach((date) => {
+    item.format = item.date.split('-')
-    defaultDate.value.push(dayjs(date).toDate())
   });
 }
+
+const formatter = computed(() => {
+  if (!asyncData.value) {
+    return (day) => day;
+  }
+  return (day) => {
+    const year = day.date.getFullYear();
+    const month = day.date.getMonth() + 1;
+    const date = day.date.getDate();
+
+    asyncData.value.forEach(item => {
+      const arr = item.format;
+      if (year === +arr[0] && month === +arr[1] && date === +arr[2]) {
+        // day.topInfo = '剩余';
+        day.bottomInfo = item.rest_count;
+      }
+    });
+    return day;
+  };
+});
+
 const onConfirm = async (dates) => {
   show.value = false;
   selectedDates.value = [];
   dates.forEach((date) => {
     selectedDates.value.push(dayjs(date).format('YYYY-MM-DD'))
+    defaultDate.value.push(dayjs(date).toDate())
   });
   // 后台请求数据
   const { data } = await orderRestCountAPI({ dates : selectedDates.value });
   shortcut.value = data;
   shortcut.value.forEach(item => {
     item.checked = true;
-  })
+  });
 };
 const selectIndex = (idx) => {
@@ -129,6 +169,14 @@ const clickPlus = () => {
   num.value = num.value + 1;
 }
+// 最大日期默认为6个月
+const getFutureDate = () => {
+  const currentDate = new Date();
+  const futureDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 6, currentDate.getDate());
+  return futureDate;
+}
+const maxDate = ref(getFutureDate());
+
 const isPositiveInteger = (value) => {
   // 判断是否为数字
   if (typeof value !== 'number') {