fix

hookehuyr
Commit 89d4a2845831577d72256511df259196d44d8493 89d4a284 1 parent 0e0cd160
Showing 5 changed files with 79 additions and 91 deletions
src/App.vue
src/views/index.vue
src/views/next.vue
src/views/preview.vue
src/views/result.vue
--- a/src/App.vue
View file @89d4a28
+++ b/src/App.vue
View file @89d4a28
 <!--
  * @Date: 2023-06-13 13:26:46
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-25 17:33:44
+ * @LastEditTime: 2023-08-25 21:39:03
  * @FilePath: /bieyuan/src/App.vue
- * @Description: 文件描述
+ * @Description: 启动页
 -->
 <template>
   <div class="bg-wrapper">
@@ -72,11 +72,11 @@ onMounted(async () => {
 <style lang="less">
 @prefix: ~'@{namespace}-x';
-html,
+// html,
-body {
+// body {
-  // width: 100%;
+// width: 100%;
-  // height: 100%;
+// height: 100%;
-}
+// }
 body {
   position: relative;
@@ -88,6 +88,7 @@ body {
   // --van-blue: #F9D95C;
   background-color: #F7EFEB;
+
   p {
     margin: 0;
     padding: 0;
@@ -112,22 +113,25 @@ body {
   padding: 1rem;
   padding-bottom: 0;
   background-image: url('https://cdn.ipadbiz.cn/bieyuan/bg@2x~1.png');
-  background-repeat:no-repeat;
+  background-repeat: no-repeat;
 }
+
 .box-wrapper {
   background: #FFFFFF;
-  box-shadow: 0px 0px 13px 0px rgba(95,69,54,0.25);
+  box-shadow: 0px 0px 13px 0px rgba(95, 69, 54, 0.25);
   border-radius: 10px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   min-height: calc(100vh - 1rem);
+
   .box-top {
     padding: 0 1rem 1rem;
     height: 1rem;
     background-image: url('https://cdn.ipadbiz.cn/bieyuan/top@2x~1.png');
-    background-repeat:no-repeat;
+    background-repeat: no-repeat;
     background-size: calc(100% - 2rem);
-    background-position: 1rem 0; /* 向右位移 1rem */
+    background-position: 1rem 0;
+    /* 向右位移 1rem */
   }
 }
 </style>
--- a/src/views/index.vue
View file @89d4a28
+++ b/src/views/index.vue
View file @89d4a28
 <!--
  * @Date: 2023-06-21 10:23:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-25 16:31:01
+ * @LastEditTime: 2023-08-25 21:39:47
  * @FilePath: /bieyuan/src/views/index.vue
- * @Description: 文件描述
+ * @Description: 预约页首页
 -->
 <template>
   <div class="index-page">
@@ -63,44 +63,37 @@
     <div class="shortcut-bottom"></div>
     <div class="bookingBox">
-        <van-row>
+      <van-row>
-          <van-col span="6" class="text">预约人数</van-col>
+        <van-col span="6" class="text">预约人数</van-col>
-          <van-col span="18" class="control">
+        <van-col span="18" class="control">
-            <van-row style="line-height: 3rem;" gutter="10">
+          <van-row style="line-height: 3rem;" gutter="10">
-              <van-col span="4" style="text-align: center;">
+            <van-col span="4" style="text-align: center;">
-                <div @click="clickMinus" class="minus">
+              <div @click="clickMinus" class="minus">
                 <van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/-@2x.png" />
               </div>
-              </van-col>
+            </van-col>
-              <van-col span="12" style="text-align: center;">
+            <van-col span="12" style="text-align: center;">
-                <input v-model="num" type="number" class="input_num">
+              <input v-model="num" type="number" class="input_num">
-              </van-col>
+            </van-col>
-              <van-col span="4" style="text-align: center;">
+            <van-col span="4" style="text-align: center;">
-                <span>人</span>
+              <span>人</span>
-              </van-col>
+            </van-col>
-              <van-col span="4" style="text-align: center;">
+            <van-col span="4" style="text-align: center;">
-                <div @click="clickPlus" class="plus">
+              <div @click="clickPlus" class="plus">
                 <van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/+@2x.png" />
               </div>
-              </van-col>
+            </van-col>
-            </van-row>
+          </van-row>
-          </van-col>
+        </van-col>
-        </van-row>
+      </van-row>
-      </div>
+    </div>
     <div>
       <div @click="clickNext" class="next-btn">下一步</div>
     </div>
-    <van-calendar
+    <van-calendar v-model:show="show" type="multiple" :max-range="7" :formatter="formatter" :max-date="maxDate"
-      v-model:show="show"
+      color="#93663D" @confirm="onConfirm" />
-      type="multiple"
-      :max-range="7"
-      :formatter="formatter"
-      :max-date="maxDate"
-      color="#93663D"
-      @confirm="onConfirm"
-    />
   </div>
 </template>
@@ -290,17 +283,20 @@ const isMinValue = (array, value) => { // 判断输入值是否小于数组中
 <style lang="less" scoped>
 .index-page {
   padding: 1rem 1rem 0;
+
   .app-time {
     padding-bottom: 0.5rem;
     border-bottom: 1px solid #D7D7D7;
     font-weight: bold;
     font-size: 1.05rem;
   }
+
   .shortcut-wrapper {
     padding-top: 2rem;
     display: flex;
     align-items: flex-end;
   }
+
   .shortcut-bottom {
     width: 100%;
     height: 4px;
@@ -393,6 +389,7 @@ const isMinValue = (array, value) => { // 判断输入值是否小于数组中
       display: inline-block;
     }
+
     // .input-box {
     //   width: 40%;
     //   display: inline-block;
--- a/src/views/next.vue
View file @89d4a28
+++ b/src/views/next.vue
View file @89d4a28
 <!--
  * @Date: 2023-08-22 14:13:07
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-25 19:20:46
+ * @LastEditTime: 2023-08-25 21:39:23
  * @FilePath: /bieyuan/src/views/next.vue
- * @Description: 文件描述
+ * @Description: 预约用户信息录入页
 -->
 <template>
   <div class="next-page">
@@ -11,21 +11,26 @@
       <div v-for="(item, index) in userInfo" :key="index" class="input-box">
         <p class="title">{{ index + 1 }}.&nbsp;{{ index === 0 ? '我的信息' : '同行人' }}</p>
         <van-field :id="'name' + index" v-model="item.name" label="姓名:" type="text" placeholder="请输入姓名" :border="false"
-          :rules="[{ required: true, message: '请填写姓名' }]" label-width="4em" class="input-text" @focus="onFocus"  @keydown="handleKeyDown" />
+          :rules="[{ required: true, message: '请填写姓名' }]" label-width="4em" class="input-text" @focus="onFocus"
-        <van-field :id="'phone' + index" v-model="item.phone" maxlength="11" label="手机号:" type="digit" placeholder="请输入手机号" :border="false"
+          @keydown="handleKeyDown" />
-          :rules="[{ validator: validatorPhone, message: '请输入正确手机号' }]" label-width="4em" class="input-text"  @focus="onFocus"  @keydown="handleKeyDown" />
+        <van-field :id="'phone' + index" v-model="item.phone" maxlength="11" label="手机号:" type="digit"
+          placeholder="请输入手机号" :border="false" :rules="[{ validator: validatorPhone, message: '请输入正确手机号' }]"
+          label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
         <van-field label="证件类型:" :border="false" label-width="4.5em">
           <template #input>
-            <van-radio-group v-model="item.id_type" direction="horizontal" checked-color="#93663D" style="height: 2.5rem;">
+            <van-radio-group v-model="item.id_type" direction="horizontal" checked-color="#93663D"
+              style="height: 2.5rem;">
               <van-radio name="id_card">身份证</van-radio>
               <van-radio name="passport">护照</van-radio>
             </van-radio-group>
           </template>
         </van-field>
-        <van-field :id="'id_type' + index" v-if="item.id_type === 'id_card'" v-model="item.id_number" label="身份证:" type="text" placeholder="请输入身份证号" :border="false"
+        <van-field :id="'id_type' + index" v-if="item.id_type === 'id_card'" v-model="item.id_number" label="身份证:"
-          :rules="[{ validator: validatorId, message: '请填写正确身份证号' }]" label-width="4em" class="input-text"  @focus="onFocus"  @keydown="handleKeyDown" />
+          type="text" placeholder="请输入身份证号" :border="false" :rules="[{ validator: validatorId, message: '请填写正确身份证号' }]"
-        <van-field :id="'id_type' + index" v-else v-model="item.id_number" label="护照:" type="text" placeholder="请输入护照号" :border="false"
+          label-width="4em" class="input-text" @focus="onFocus" @keydown="handleKeyDown" />
-            :rules="[{ required: true, message: '请填写正确护照号' }]" label-width="4em" class="input-text"  @focus="onFocus"  @keydown="handleKeyDown" />
+        <van-field :id="'id_type' + index" v-else v-model="item.id_number" label="护照:" type="text" placeholder="请输入护照号"
+          :border="false" :rules="[{ required: true, message: '请填写正确护照号' }]" label-width="4em" class="input-text"
+          @focus="onFocus" @keydown="handleKeyDown" />
       </div>
       <div style="padding: 2rem;">
         <van-button block type="primary" color="#93663D" native-type="submit">
@@ -53,12 +58,6 @@ useTitle($route.meta.title);
 const store = mainStore();
 const { appUserInfo } = storeToRefs(store);
-// // 监听路由离开
-// onBeforeRouteLeave((to, from, next) => {
-//   console.warn('leave');
-//   next()
-// })
-
 const userInfo = ref([]); // 用户预约信息
 const num = ref(1);
 const keyDownList = ref([]);
--- a/src/views/preview.vue
View file @89d4a28
+++ b/src/views/preview.vue
View file @89d4a28
@@ -26,8 +26,8 @@
           <van-row style="line-height: 3rem;" gutter="10">
             <van-col span="4" style="text-align: center;">
               <div @click="clickMinus" class="minus">
-              <van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/-@2x.png" />
+                <van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/-@2x.png" />
-            </div>
+              </div>
             </van-col>
             <van-col span="12" style="text-align: center;">
               <input v-model="num" type="number" class="input_num">
@@ -37,8 +37,8 @@
             </van-col>
             <van-col span="4" style="text-align: center;">
               <div @click="clickPlus" class="plus">
-              <van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/+@2x.png" />
+                <van-icon size="0.85rem" name="https://cdn.ipadbiz.cn/bieyuan/+@2x.png" />
-            </div>
+              </div>
             </van-col>
           </van-row>
         </van-col>
@@ -49,16 +49,8 @@
       <div @click="clickNext" class="next-btn">下一步</div>
     </div>
-    <van-calendar
+    <van-calendar v-model:show="show" :default-date="defaultDate" type="multiple" :max-range="7" :formatter="formatter"
-      v-model:show="show"
+      :max-date="maxDate" color="#93663D" @confirm="onConfirm" />
-      :default-date="defaultDate"
-      type="multiple"
-      :max-range="7"
-      :formatter="formatter"
-      :max-date="maxDate"
-      color="#93663D"
-      @confirm="onConfirm"
-    />
   </div>
 </template>
@@ -85,7 +77,7 @@ onMounted(async () => {
   if (localStorage.getItem('save_selected_dates')) { // 如果缓存过以缓存为先
     dates = JSON.parse(localStorage.getItem('save_selected_dates'));
   }
-  const { data } = await orderRestCountAPI({ dates:  dates.join(',')});
+  const { data } = await orderRestCountAPI({ dates: dates.join(',') });
   shortcut.value = data;
   // 上一页选择的预约人数
   num.value = $route.query.count ? +$route.query.count : 1;
@@ -185,7 +177,7 @@ const onConfirm = async (dates) => {
     defaultDate.value.push(dayjs(date).toDate())
   });
   // 后台请求数据
-  const { data } = await orderRestCountAPI({ dates : selectedDates.value.join(',') });
+  const { data } = await orderRestCountAPI({ dates: selectedDates.value.join(',') });
   shortcut.value = data;
   shortcut.value.forEach(item => {
     item.checked = true;
@@ -201,7 +193,7 @@ const clickMinus = () => { // 减少预约数
 }
 const clickPlus = () => { // 新增预约数
   if (num.value.toString().length < 3) {
-    num.value =  num.value + 1
+    num.value = num.value + 1
   }
 }
@@ -337,6 +329,7 @@ const clickNext = () => { // 点击下一步按钮
       display: inline-block;
     }
+
     // .input-box {
     //   width: 40%;
     //   display: inline-block;
--- a/src/views/result.vue
View file @89d4a28
+++ b/src/views/result.vue
View file @89d4a28
@@ -26,7 +26,8 @@
         </van-col>
         <van-col span="18" style="text-align: center;">
           <div class="qr-box">
-            <van-icon size="13rem" :name="app_info_list[checkedIndex]?.qr_code" style="border: 1px dashed #93663D; width: 100%; overflow: hidden;" />
+            <van-icon size="13rem" :name="app_info_list[checkedIndex]?.qr_code"
+              style="border: 1px dashed #93663D; width: 100%; overflow: hidden;" />
           </div>
         </van-col>
         <van-col span="3">
@@ -68,36 +69,33 @@ onMounted(async () => {
   if (data) {
     // 预约日期集合
     app_time.value = data.dates;
-    //
+    // 生成二维码列表
     data.details.forEach((item, index) => {
       app_info_list.value.push({
         name: item.name,
-        checked: index ? false : true,
+        checked: index ? false : true, // 默认选中第一个
         qr_code: 'http://oa.onwall.cn/admin?m=srv&a=get_qrcode&key=' + item.qrcode_content,
       });
     });
   }
-  // TAG: 清除用户填写信息
-  store.changeUserInfo([]);
 })
 const app_time = ref([]);
-const appTimeShow = computed(() => {
+const appTimeShow = computed(() => { // 页面显示日期格式化
   return app_time.value.join('，')
 });
-const handleLeftIcon = computed(() => {
+const handleLeftIcon = computed(() => { // 左滚动图标切换
   return checkedIndex.value === 0 ? 'https://cdn.ipadbiz.cn/bieyuan/left002@2x.png' : 'https://cdn.ipadbiz.cn/bieyuan/left001@2x.png'
 });
-const handleRightIcon = computed(() => {
+const handleRightIcon = computed(() => { // 右滚动图标切换
   return app_info_list.value.length - 1 === checkedIndex.value ? 'https://cdn.ipadbiz.cn/bieyuan/right002@2x.png' : 'https://cdn.ipadbiz.cn/bieyuan/right001@2x.png'
 });
 const app_info_list = ref([]);
-
 const checkedIndex = ref(0);
-const toggleItem = (item) => {
+const toggleItem = (item) => { // 点击人名操作
   app_info_list.value.forEach((info) => {
     info.checked = false;
   });
@@ -107,13 +105,14 @@ const toggleItem = (item) => {
 }
 const show = ref(false);
-const cancelApp = () => {
+const cancelApp = () => { // 点击取消预约按钮
   show.value = true;
   nextTick(() => {
     $('.van-popup.van-popup--center.van-dialog').css('width', '320px')
   })
 }
-const onConfirm = async () => {
+
+const onConfirm = async () => { // 确认取消预约
   const { code } = await orderCancelAPI({ id: $route.query.id });
   if (code) {
     showSuccessToast('取消成功！');
@@ -240,8 +239,4 @@ const handleRight = () => { // 右侧滚动
     margin: 0 auto;
   }
 }
-
-// .van-button--default {
-//   background: #93663D;
-// }
 </style>