From 9d15e29b1c6cc37db12bfa856ba68349ff3309ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=B0=8F=E5=95=8A=E7=99=BD?=
 <2053890199@qq.com>
Date: Sat, 15 Nov 2025 16:03:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=B9=B6=E6=B7=BB=E5=8A=A0=E7=8E=AF=E5=A2=83?=
 =?UTF-8?q?=E5=8F=98=E9=87=8F=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加生产环境和开发环境配置文件
- 根据环境变量配置axios基础URL
- 优化手机号验证流程，增加清除功能
- 添加结婚证信息重置功能
- 显示二维码核销状态
- 修复验证码验证失败时的表单重置问题
---
 .env.development         |  3 ++
 .env.production          |  3 ++
 src/pages/home/index.vue | 61 ++++++++++++++++++++++++++++++++++------
 src/utils/axios.ts       |  5 +++-
 4 files changed, 63 insertions(+), 9 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..aebc220
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,3 @@
+# 开发环境配置
+NODE_ENV=development
+VITE_API_BASE_URL=/api
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..660d973
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,3 @@
+# 生产环境配置
+NODE_ENV=production
+VITE_API_BASE_URL=
\ No newline at end of file
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 8e4c90c..8be131e 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -30,12 +30,13 @@
           <div v-if="![2, 3].includes(activityInfo.status)">
             <!-- 手机号输入 -->
             <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4">
-              <input v-model="formData.phone" type="tel" placeholder="请输入手机号码" maxlength="11"
-                class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11" />
+              <input :disabled="formData.verifyCode" v-model="formData.phone" type="tel" placeholder="请输入手机号码"
+                maxlength="11" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11" />
 
-              <button @click="sendVerificationCode" :disabled="countdown > 0 || formData.phone.length !== 11"
+              <button @click="formData.verifyCode ? clearPhone() : sendVerificationCode()"
+                :disabled="countdown > 0 || formData.phone.length !== 11"
                 class="h-11 rounded-lg text-sm text-[#E8424D] transition-all disabled:text-[#8a8a8a]">
-                {{ countdown > 0 ? `${countdown}秒后重发` : formData.verifyCode ? '重新获取' : '获取验证码' }}
+                {{ countdown > 0 ? `${countdown}秒后重发` : formData.verifyCode ? '清除' : '获取验证码' }}
               </button>
             </div>
 
@@ -53,7 +54,10 @@
           <div v-if="formData.verifyCode && !formData.qrCode">
             <!-- 结婚证信息 -->
             <div class="mb-6">
-              <h3 class="text-base text-gray-800 mb-3 font-medium">结婚证信息:</h3>
+              <div class="text-base text-gray-800 mb-3 font-medium flex items-center justify-between">
+                <span>结婚证信息:</span>
+                <div v-if="formData.marriageNo" class="text-xs" @click="resetMarriageInfo">重新扫描</div>
+              </div>
               <div v-if="!formData.marriageNo"
                 class="border border-gray-200 rounded-lg p-5 flex items-center justify-center">
                 <div class="relative inline-block" @click="handleScanClick">
@@ -62,7 +66,6 @@
                     class="h-16 w-26 absolute border border-[#f0f0f0] rounded-md top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex justify-center">
                     <span class="text-[#E2E4E9] text-xs pt-1">结婚证</span>
                   </div>
-                  <input type="file" ref="ocrUploadId" class="hidden" accept="image/*" @change="handleImageChange" />
                 </div>
               </div>
               <div v-if="formData.marriageNo"
@@ -93,7 +96,11 @@
             <div>
               <h3 class="text-base text-gray-800 mb-3 font-medium">请使用微信扫描下方二维码:</h3>
             </div>
-            <div class="mt-4 flex justify-center items-center">
+            <div class="mt-4 flex justify-center items-center relative">
+              <div v-if="formData.status == 1"
+                class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute">
+                <span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
+              </div>
               <qrcode-vue :value="formData.qrCode" :size="200" level="H" render-as="canvas" />
             </div>
           </div>
@@ -120,6 +127,7 @@
 
       </div>
     </div>
+    <input type="file" ref="ocrUploadId" class="hidden" accept="image/*" @change="handleImageChange" />
   </div>
 </template>
 
@@ -143,6 +151,7 @@ const formData = ref({
   wifeName: '',          // 女方姓名
   registerDate: '',       // 登记日期
   qrCode: '',             // 二维码
+  status: 0,              // 状态 0-未核销 1-已核销
 })
 
 const activityInfo = ref<any>({});  // 活动信息
@@ -181,6 +190,24 @@ onMounted(() => {
 const countdown = ref(0)
 let countdownTimer: number | null = null
 
+const clearPhone = () => {
+  formData.value.phone = '';
+  formData.value.smsCode = '';
+  formData.value.verifyCode = false;
+  formData.value.marriageNo = '';
+  formData.value.husbandName = '';
+  formData.value.wifeName = '';
+  formData.value.registerDate = '';
+  formData.value.qrCode = '';
+  formData.value.status = 0;
+  countdown.value = 0;
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
+    countdownTimer = null;
+  }
+  localStorage.removeItem('userAs');
+}
+
 // 发送验证码
 const sendVerificationCode = () => {
   const { phone } = formData.value
@@ -251,10 +278,11 @@ const verifyCode = () => {
     countdown.value = 0;
 
     // 验证成功如果有二维码，保存到表单
-    if (res.data.code) {
+    if (res?.data?.code) {
       formData.value = {
         ...formData.value,
         qrCode: res.data.code,
+        status: res.data.status,
       }
     } else {
       formData.value = {
@@ -267,11 +295,14 @@ const verifyCode = () => {
       }
     }
   }).catch((error) => {
+    console.log(error, 66666666666666);
+
     localStorage.removeItem('userAs');
 
     message.error('验证码验证失败，请重试');
     formData.value = {
       ...formData.value,
+      smsCode: "",
       marriageNo: "",
       husbandName: "",
       wifeName: "",
@@ -282,6 +313,20 @@ const verifyCode = () => {
     hideLoading();
   })
 }
+// 重置结婚证信息
+function resetMarriageInfo() {
+  formData.value = {
+    ...formData.value,
+    marriageNo: "",
+    husbandName: "",
+    wifeName: "",
+    registerDate: "",
+    qrCode: ""
+  }
+  ocrUploadId.value && (ocrUploadId.value.value = '');
+
+  ocrUploadId.value?.click();
+}
 
 // 处理扫描点击事件
 const handleScanClick = () => {
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index d3a721c..6f17234 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -1,8 +1,11 @@
 import axios from 'axios'
 
+// 从环境变量获取API基础路径
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
+
 // 创建axios实例
 const request = axios.create({
-  baseURL: '/api', // 与Vite代理配置一致
+  baseURL: API_BASE_URL, // 根据环境变量配置
   timeout: 10000, // 请求超时时间
   headers: {
     'Content-Type': 'application/json',