fix 细节逻辑优化

hookehuyr
Commit a7bdcfd33ff270b6d6697f1b7159444f194a412a a7bdcfd3 1 parent d8ba4623
Showing 8 changed files with 124 additions and 34 deletions
src/components/qrCode.vue
src/views/addVisitor.vue
src/views/booking.vue
src/views/bookingDetail.vue
src/views/index.vue
src/views/me.vue
src/views/notice.vue
src/views/submit.vue
--- a/src/components/qrCode.vue
View file @a7bdcfd
+++ b/src/components/qrCode.vue
View file @a7bdcfd
 <!--
  * @Date: 2024-01-16 10:06:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 16:12:21
+ * @LastEditTime: 2024-01-16 17:06:21
  * @FilePath: /xysBooking/src/components/qrCode.vue
  * @Description: 文件描述
 -->
@@ -67,10 +67,6 @@ const props = defineProps({
 const id_number = ref('511522190103214279');
-const formatId = computed(() => {
-  return xctcCheck.formatInfoHide(id_number.value)
-});
-
 const has_qrcode = ref(true);
 const select_index = ref(0);
@@ -119,10 +115,36 @@ const nextCode = () => {
   }
 };
+/**
+ * 生成15位身份证号中间8位替换为*号
+ * @param {*} inputString
+ */
+ function replaceMiddleCharacters(inputString) {
+  if (inputString.length < 15) {
+    return inputString; // 字符串长度不足，不进行替换
+  }
+
+  const start = Math.floor((inputString.length - 8) / 2); // 开始替换的索引位置
+  const end = start + 8; // 结束替换的索引位置
+
+  const replacement = '*'.repeat(8); // 生成包含8个*号的字符串
+
+  const replacedString = inputString.substring(0, start) + replacement + inputString.substring(end);
+  return replacedString;
+}
+
+const formatId = (id) => {
+  if (id.length === 15) {
+    return replaceMiddleCharacters(id);
+  } else {
+    return xctcCheck.formatInfoHide(id)
+  }
+};
+
 const userinfo = computed(() => {
   return {
     name: userList.value[select_index.value]['username'],
-    id: xctcCheck.formatInfoHide(userList.value[select_index.value]['id_code'])
+    id: formatId(userList.value[select_index.value]['id_code'])
   };
 });
@@ -158,9 +180,26 @@ const selectUser = (index) => {
   select_index.value = index;
 }
-onMounted(() => {
+// TODO: 轮询查二维码的使用
+
+// const count = ref(0);
+
+// // 定义轮询函数
+// const poll = () => {
+//   // 每秒增加计数值
+//   count.value++;
+//   console.log(count.value);
+// };
+// // 在组件挂载时启动轮询
+// onMounted(() => {
+//   // 每秒执行一次轮询函数
+//   const intervalId = setInterval(poll, 1000);
-})
+//   // 在组件卸载时清除定时器
+//   onUnmounted(() => {
+//     clearInterval(intervalId);
+//   });
+// });
 </script>
 <style lang="less" scoped>
--- a/src/views/addVisitor.vue
View file @a7bdcfd
+++ b/src/views/addVisitor.vue
View file @a7bdcfd
 <!--
  * @Date: 2024-01-15 17:39:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 15:48:05
+ * @LastEditTime: 2024-01-16 17:08:33
  * @FilePath: /xysBooking/src/views/addVisitor.vue
  * @Description: 文件描述
 -->
@@ -83,12 +83,16 @@ const checkUsername = () => {
 const checkIdCode = () => {
   const res = xctcCheck.checkIdCard(idCode.value);
   let flag = true;
-  if (res.status) {
+  if (idCode.value.length === 15) { // 15位身份证号码不校验
-
+    flag = true;
   } else {
-    show_error.value = true;
+    if (res.status) {
-    error_message.value = res.msg;
+
-    flag = false;
+    } else {
+      show_error.value = true;
+      error_message.value = res.msg;
+      flag = false;
+    }
   }
   return flag;
 }
@@ -154,4 +158,8 @@ const onConfirm = ({ selectedOptions }) => {
     }
   }
 }
+
+:deep(.van-picker__confirm) {
+  color: #A67939;
+}
 </style>
--- a/src/views/booking.vue
View file @a7bdcfd
+++ b/src/views/booking.vue
View file @a7bdcfd
 <!--
  * @Date: 2024-01-15 13:35:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 15:15:07
+ * @LastEditTime: 2024-01-16 16:29:11
  * @FilePath: /xysBooking/src/views/booking.vue
  * @Description: 预约页面
  * @Version: 1.0.0
@@ -207,6 +207,8 @@ const chooseDay = (date) => { // 点击日期回调
   if (findDatesInfo(date).num) { // 有余数可约
     checked_day.value = date;
     checked_day_price.value = findDatesInfo(date).price;
+    // TODO: 选择日期后，查询时间段信息
+    console.warn(checked_day.value);
   }
 };
@@ -228,6 +230,8 @@ const onConfirm = ({ selectedValues, selectedOptions }) => { // 选择日期回
   // 清空选择
   checked_day.value = '';
   checked_time.value = -1;
+  // TODO: 选择日期后，查询月份信息
+  console.warn(selectedValues);
 }
 const onCancel = () => {
   showPicker.value = false;
@@ -383,4 +387,8 @@ const nextBtn = () => {
     }
   }
 }
+
+:deep(.van-picker__confirm) {
+  color: #A67939;
+}
 </style>
--- a/src/views/bookingDetail.vue
View file @a7bdcfd
+++ b/src/views/bookingDetail.vue
View file @a7bdcfd
 <!--
  * @Date: 2024-01-16 13:19:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 16:01:04
+ * @LastEditTime: 2024-01-16 17:14:34
  * @FilePath: /xysBooking/src/views/bookingDetail.vue
  * @Description: 文件描述
 -->
@@ -61,10 +61,12 @@ const cancelBooking = (item) => {
     title: '温馨提示',
     message: '是否取消预约？',
     confirmButtonColor: '#A67939',
+    width: '80vw'
   })
   .then(() => {
     // on confirm
     showSuccessToast('取消成功');
+    $router.go(-1);
     })
     .catch(() => {
       // on cancel
--- a/src/views/index.vue
View file @a7bdcfd
+++ b/src/views/index.vue
View file @a7bdcfd
 <!--
  * @Date: 2023-06-21 10:23:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 14:09:56
+ * @LastEditTime: 2024-01-16 16:15:12
  * @FilePath: /xysBooking/src/views/index.vue
  * @Description: 预约页首页
 -->
@@ -61,16 +61,16 @@ useTitle($route.meta.title);
 const go = useGo();
-const toBooking = () => {
+const toBooking = () => { // 跳转到预约须知
   go('/notice');
 }
-const toRecord = () => {
+const toRecord = () => { // 跳转到预约记录
   go('/bookingList');
 }
-const toCode = () => {
+const toCode = () => { // 跳转到预约码
   go('/bookingCode');
 }
-const toMy = () => {
+const toMy = () => { // 跳转到我的
   go('/me');
 }
--- a/src/views/me.vue
View file @a7bdcfd
+++ b/src/views/me.vue
View file @a7bdcfd
 <!--
  * @Date: 2024-01-16 13:33:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 13:47:01
+ * @LastEditTime: 2024-01-16 17:13:07
  * @FilePath: /xysBooking/src/views/me.vue
  * @Description: 文件描述
 -->
@@ -50,6 +50,7 @@ const removeItem = (item) => {
     title: '温馨提示',
     message: '是否确认删除参观者信息？',
     confirmButtonColor: '#A67939',
+    width: '80vw'
   })
   .then(() => {
     // on confirm
--- a/src/views/notice.vue
View file @a7bdcfd
+++ b/src/views/notice.vue
View file @a7bdcfd
 <!--
  * @Date: 2024-01-15 11:43:01
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 14:15:52
+ * @LastEditTime: 2024-01-16 16:18:14
  * @FilePath: /xysBooking/src/views/notice.vue
  * @Description: 文件描述
 -->
@@ -35,7 +35,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
 import { useGo } from '@/hooks/useGo'
-import { showSuccessToast, showFailToast } from 'vant';
+import { showSuccessToast, showFailToast, showToast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
@@ -43,15 +43,12 @@ useTitle($route.meta.title);
 const go = useGo();
 const checked = ref(['0']);
-const checkedChange = () => {
-  // checked.value[0] = !checked.value[0];
-};
 const confirmBtn = () => {
   if (checked.value[1] === '1') {
     go('/booking');
   } else {
-    showFailToast('请勾选同意须知');
+    showToast('请勾选同意须知');
   }
 }
 </script>
--- a/src/views/submit.vue
View file @a7bdcfd
+++ b/src/views/submit.vue
View file @a7bdcfd
 <!--
  * @Date: 2024-01-15 16:25:51
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 15:39:18
+ * @LastEditTime: 2024-01-16 16:53:24
  * @FilePath: /xysBooking/src/views/submit.vue
  * @Description: 文件描述
 -->
@@ -21,9 +21,9 @@
           <van-icon v-else name="https://cdn.ipadbiz.cn/xys/booking/%E5%A4%9A%E9%80%8902@2x.png" />&nbsp;
         </div>
         <div>
-          <p style="color: #A67939;">张雨燕</p>
+          <p style="color: #A67939;">{{ item.name }}</p>
-          <p>证件号：3101******234</p>
+          <p>证件号：{{ formatId(item.idCard) }}</p>
-          <p style="color: #9C9A9A; font-size: 0.8rem;">*已预约过2024-01-10参观，请不要重复预约</p>
+          <p v-if="item.today" style="color: #9C9A9A; font-size: 0.8rem;">*已预约过2024-01-10参观，请不要重复预约</p>
         </div>
       </div>
     </div>
@@ -42,7 +42,7 @@
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-
+import xctcCheck from "xctc-check"
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
@@ -55,10 +55,45 @@ useTitle($route.meta.title);
 const go = useGo();
-const visitorList = ref([{ id: '1', name: '张雨燕1', idCard: '3101******234' }, {  id: '2', name: '张雨燕2', idCard: '3101******234' }, {  id: '3',name: '张雨燕3', idCard: '3101******234' }, {  id: '4',name: '张雨燕4', idCard: '3101******234' }]);
+const visitorList = ref([
+  { id: '1', name: '张雨燕1', idCard: '311522190103214', today: false },
+  { id: '2', name: '张雨燕2', idCard: '311522190103214279', today: true },
+  { id: '3',name: '张雨燕3', idCard: '311522190103214279', today: false },
+  { id: '4',name: '张雨燕4', idCard: '311522190103214279', today: false }
+]);
+
+/**
+ * 生成15位身份证号中间8位替换为*号
+ * @param {*} inputString
+ */
+function replaceMiddleCharacters(inputString) {
+  if (inputString.length < 15) {
+    return inputString; // 字符串长度不足，不进行替换
+  }
+
+  const start = Math.floor((inputString.length - 8) / 2); // 开始替换的索引位置
+  const end = start + 8; // 结束替换的索引位置
+
+  const replacement = '*'.repeat(8); // 生成包含8个*号的字符串
+
+  const replacedString = inputString.substring(0, start) + replacement + inputString.substring(end);
+  return replacedString;
+}
+
+const formatId = (id) => {
+  if (id.length === 15) {
+    return replaceMiddleCharacters(id);
+  } else {
+    return xctcCheck.formatInfoHide(id)
+  }
+};
 const checked_visitors = ref([]);
 const addVisitor = (item) => {
+  if (item.today) { // 今天已经预约
+    showToast('已预约过参观，请不要重复预约!')
+    return;
+  }
   if (checked_visitors.value.includes(item.id)) {
     checked_visitors.value = checked_visitors.value.filter((v) => v !== item.id);
   } else {