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

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

 /*
  * @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));
 

 /*
  * @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',

 <!--
  * @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) {
-  if (!inputString || inputString.length < 15) {
-    return inputString;
+const replaceMiddleCharacters = (input_string) => {
+  if (!input_string || input_string.length < 15) {
+    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 () => {
-    if (props.id) {
-        const { code, data } = await queryQrCodeAPI({ id_number: props.id });
-        if (code) {
-            // data 可能是一个对象
-            const item = data;
-            item.qr_code_url = BASE_URL + '/admin?m=srv&a=get_qrcode&key=' + item.qr_code;
-            item.datetime = formatDatetime({ begin_time: item.begin_time, end_time: item.end_time });
-            item.id = formatId(item.id_number);
-            userinfo.value = item;
-
-            const { code: status_code, data: status_data } = await qrcodeStatusAPI({ qr_code: item.qr_code });
-            if (status_code) {
-                useStatus.value = status_data.status;
-            }
-        }
-    }
+const build_qr_code_url = (qr_code) => {
+  if (!qr_code) return ''
+  return `${BASE_URL}/admin?m=srv&a=get_qrcode&key=${encodeURIComponent(String(qr_code))}`
+}
+
+/**
+ * @description: 格式化预约码卡数据
+ * @param {*} raw 原始数据
+ * @return {*} 格式化后的数据
+ */
+
+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)
+}
+
+/**
+ * @description: 加载预约码卡信息
+ * @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">