refactor(qrCodeSearch): 重构预约码卡组件代码结构

将组件逻辑拆分为多个函数，提高可读性和可维护性添加加载状态和销毁处理优化数据处理和错误处理逻辑

refactor(qrCodeSearch): 重构预约码卡组件代码结构
将组件逻辑拆分为多个函数，提高可读性和可维护性添加加载状态和销毁处理优化数据处理和错误处理逻辑
hookehuyr
Commit d8053e60a3d9c3d5ef598faeb57e123493a6dc49 d8053e60 1 parent c69aa0d6
Showing 3 changed files with 105 additions and 23 deletions
src/api/index.js
src/app.config.js
src/components/qrCodeSearch.vue
--- a/src/api/index.js
View file @d8053e6
+++ b/src/api/index.js
View file @d8053e6
 /*
  * @Date: 2023-08-24 09:42:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-14 20:43:23
+ * @LastEditTime: 2026-01-14 20:50:41
  * @FilePath: /xyxBooking-weapp/src/api/index.js
  * @Description: 文件描述
  */
@@ -40,6 +40,7 @@ export const volunteerLoginAPI = (params) => fn(fetch.post(Api.REDEEM_LOGIN, par
 /**
  * @description: 检查核销权限
+ * @returns {Object} { data.can_redeem: Boolean, msg: String}
  */
 export const checkRedeemPermissionAPI = (params) => fn(fetch.get(Api.REDEEM_CHECK_AUTH, params));
--- a/src/app.config.js
View file @d8053e6
+++ b/src/app.config.js
View file @d8053e6
 /*
  * @Date: 2025-06-28 10:33:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-13 23:19:52
+ * @LastEditTime: 2026-01-14 21:35:58
  * @FilePath: /xyxBooking-weapp/src/app.config.js
  * @Description: 小程序配置文件
  */
@@ -17,7 +17,6 @@ const pages = [
   'pages/bookingList/index',
   'pages/bookingDetail/index',
   'pages/me/index',
-  'pages/callback/index',
   'pages/search/index',
   'pages/visitorList/index',
   'pages/volunteerLogin/index',
--- a/src/components/qrCodeSearch.vue
View file @d8053e6
+++ b/src/components/qrCodeSearch.vue
View file @d8053e6
 <!--
  * @Date: 2024-01-16 10:06:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-06 23:06:49
+ * @LastEditTime: 2026-01-14 21:57:40
  * @FilePath: /xyxBooking-weapp/src/components/qrCodeSearch.vue
  * @Description: 预约码卡组件
 -->
@@ -36,7 +36,7 @@
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch, onUnmounted } from 'vue'
 import { formatDatetime } from '@/utils/tools';
 import { qrcodeStatusAPI, queryQrCodeAPI } from '@/api/index'
 import BASE_URL from '@/utils/config';
@@ -50,19 +50,21 @@ const props = defineProps({
 const userinfo = ref({});
-function replaceMiddleCharacters(inputString) {
+const replaceMiddleCharacters = (input_string) => {
-  if (!inputString || inputString.length < 15) {
+  if (!input_string || input_string.length < 15) {
-    return inputString;
+    return input_string;
   }
-  const start = Math.floor((inputString.length - 8) / 2);
+  const start = Math.floor((input_string.length - 8) / 2);
   const end = start + 8;
   const replacement = '*'.repeat(8);
-  return inputString.substring(0, start) + replacement + inputString.substring(end);
+  return input_string.substring(0, start) + replacement + input_string.substring(end);
 }
 const formatId = (id) => replaceMiddleCharacters(id);
 const useStatus = ref('0');
+const is_loading = ref(false)
+let is_destroyed = false
 const qr_code_status = {
   '1': '未激活',
@@ -78,24 +80,104 @@ const STATUS_CODE = {
   USED: '7',
 };
-onMounted(async () => {
+const build_qr_code_url = (qr_code) => {
-    if (props.id) {
+  if (!qr_code) return ''
-        const { code, data } = await queryQrCodeAPI({ id_number: props.id });
+  return `${BASE_URL}/admin?m=srv&a=get_qrcode&key=${encodeURIComponent(String(qr_code))}`
-        if (code) {
+}
-            // data 可能是一个对象
+
-            const item = data;
+/**
-            item.qr_code_url = BASE_URL + '/admin?m=srv&a=get_qrcode&key=' + item.qr_code;
+ * @description: 格式化预约码卡数据
-            item.datetime = formatDatetime({ begin_time: item.begin_time, end_time: item.end_time });
+ * @param {*} raw 原始数据
-            item.id = formatId(item.id_number);
+ * @return {*} 格式化后的数据
-            userinfo.value = item;
+ */
+
+const normalize_item = (raw) => {
+  if (!raw || typeof raw !== 'object') return null
+  const qr_code = raw.qr_code ? String(raw.qr_code) : ''
+  const id_number = raw.id_number ? String(raw.id_number) : ''
+  return {
+    ...raw,
+    qr_code,
+    qr_code_url: build_qr_code_url(qr_code),
+    datetime: formatDatetime({ begin_time: raw.begin_time, end_time: raw.end_time }),
+    id: formatId(id_number),
+  }
+}
+
+/**
+ * @description: 重置状态
+ */
+
+const reset_state = () => {
+  userinfo.value = {}
+  useStatus.value = '0'
+}
+
+/**
+ * @description: 加载预约码卡状态
+ * @param {*} qr_code 预约码
+ * @return {*} 状态码
+ */
+
+const load_qr_code_status = async (qr_code) => {
+  if (!qr_code) return
+  const res = await qrcodeStatusAPI({ qr_code })
+  if (is_destroyed) return
+  if (!res || res.code !== 1) return
+  const status = res?.data?.status
+  if (status === undefined || status === null) return
+  useStatus.value = String(status)
+}
-            const { code: status_code, data: status_data } = await qrcodeStatusAPI({ qr_code: item.qr_code });
+/**
-            if (status_code) {
+ * @description: 加载预约码卡信息
-                useStatus.value = status_data.status;
+ * @param {*} id_number 身份证号
+ * @return {*} 预约码卡信息
+ */
+
+const load_qr_code_info = async (id_number) => {
+  const id = String(id_number || '').trim()
+  if (!id) {
+    reset_state()
+    return
   }
+
+  is_loading.value = true
+  const res = await queryQrCodeAPI({ id_number: id })
+  if (is_destroyed) return
+  is_loading.value = false
+
+  if (!res || res.code !== 1 || !res.data) {
+    reset_state()
+    return
   }
+
+  const raw = Array.isArray(res.data) ? res.data[0] : res.data
+  const item = normalize_item(raw)
+  if (!item || !item.qr_code) {
+    reset_state()
+    return
   }
+
+  userinfo.value = item
+  await load_qr_code_status(item.qr_code)
+}
+
+onUnmounted(() => {
+  is_destroyed = true
+})
+
+onMounted(() => {
+  load_qr_code_info(props.id)
 })
+
+watch(
+  () => props.id,
+  (val) => {
+    if (is_loading.value) return
+    load_qr_code_info(val)
+  }
+)
 </script>
 <style lang="less">