From 167916057e71c3d137b19f801e8feb56c2da05e7 Mon Sep 17 00:00:00 2001
From: weichengwu <wuvcen@gmail.com>
Date: Wed, 26 Nov 2025 11:02:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E4=BA=8C=E7=BB=B4=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/index.vue | 198 ++++++++++++++++++++++-----------------
 1 file changed, 113 insertions(+), 85 deletions(-)

diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 12c2c8b..4bccd87 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -93,20 +93,26 @@
               </button>
             </div>
 
-            <div v-if="formData.qrCode">
-              <div>
-                <h3 class="text-base text-gray-800 mb-1 font-bold">您已成功领取喜礼</h3>
-                <span class="text-sm text-gray-600">下面是您的专属核销二维码，请在领取站点出示给工作人员扫码核销。</span>
-              </div>
-              <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>
-          </div>
+            <div v-if="formData.qrCode">
+              <div>
+                <h3 class="text-base text-gray-800 mb-1 font-bold">您已成功领取喜礼</h3>
+                <span class="text-sm text-gray-600">下面是您的专属核销二维码，请在领取站点出示给工作人员扫码核销。</span>
+              </div>
+              <div class="mt-4 flex flex-col items-center">
+                <div class="flex justify-center items-center relative h-[210px] w-[210px]" ref="qrCodeWrapper">
+                  <div v-if="formData.status == 1"
+                    class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute z-10">
+                    <span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
+                  </div>
+                  <qrcode-vue class="absolute opacity-0 pointer-events-none" :value="formData.qrCode" :size="200"
+                    level="H" render-as="canvas" />
+                  <img v-if="qrImageSrc" :src="qrImageSrc" alt="核销二维码"
+                    class="h-[210px] w-[210px] rounded-md shadow-[0_10px_24px_rgba(232,66,77,0.18)] bg-white object-contain" />
+                </div>
+                <div class="mt-3 text-xs text-gray-500">长按二维码保存至相册</div>
+              </div>
+            </div>
+          </div>
 
           <div v-if="activityInfo.status === 2">
             <!-- 活动结束状态 -->
@@ -198,14 +204,32 @@
 
 <script setup lang="ts">
 import apiService from '../../services/apiService'
-import { ref, onMounted } from 'vue'
-import dayjs from 'dayjs'
-import QrcodeVue from 'qrcode.vue'
-import { showLoading, hideLoading } from '../../components/loading'
-import { showDialog } from 'vant';
-import 'vant/es/dialog/style';
-
-const ocrUploadId = ref<HTMLInputElement>();
+import { ref, onMounted, nextTick } from 'vue'
+import dayjs from 'dayjs'
+import QrcodeVue from 'qrcode.vue'
+import { showLoading, hideLoading } from '../../components/loading'
+import { showDialog } from 'vant';
+import 'vant/es/dialog/style';
+
+const ocrUploadId = ref<HTMLInputElement>();
+const qrCodeWrapper = ref<HTMLDivElement | null>(null);
+const qrImageSrc = ref('');
+
+const syncQrImage = () => {
+  nextTick(() => {
+    const canvas = qrCodeWrapper.value?.querySelector('canvas') as HTMLCanvasElement | null;
+    if (!canvas) {
+      qrImageSrc.value = '';
+      return;
+    }
+    try {
+      qrImageSrc.value = canvas.toDataURL('image/png');
+    } catch (error) {
+      console.error('生成二维码图片失败:', error);
+      qrImageSrc.value = '';
+    }
+  });
+};
 
 // 表单数据
 const formData = ref({
@@ -272,14 +296,15 @@ const clearPhone = () => {
   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;
-  }
+  formData.value.registerDate = '';
+  formData.value.qrCode = '';
+  formData.value.status = 0;
+  qrImageSrc.value = '';
+  countdown.value = 0;
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
+    countdownTimer = null;
+  }
   localStorage.removeItem('userAs');
   if (ocrUploadId.value) ocrUploadId.value.value = '';
 }
@@ -348,33 +373,34 @@ const verifyCode = (flag: any) => {
     mobile: formData.value.phone,
     smsCode: smsCode,
     type: 3,
-  }).then((res) => {
-    localStorage.setItem('userAs', JSON.stringify({
-      phone: formData.value.phone,
-      smsCode: formData.value.smsCode,
-    }));
+  }).then((res) => {
+    localStorage.setItem('userAs', JSON.stringify({
+      phone: formData.value.phone,
+      smsCode: formData.value.smsCode,
+    }));
 
     formData.value.verifyCode = true;
 
     // 验证成功后重置倒计时
     countdown.value = 0;
 
-    // 验证成功如果有二维码，保存到表单
-    if (res?.data?.code) {
-      formData.value = {
-        ...formData.value,
-        qrCode: res.data.code,
-        status: res.data.status,
-      }
-    } else {
-      formData.value = {
-        ...formData.value,
-        marriageNo: "",
-        husbandName: "",
-        wifeName: "",
-        registerDate: "",
-        qrCode: ""
-      }
+    // 验证成功如果有二维码，保存到表单
+    if (res?.data?.code) {
+      formData.value = {
+        ...formData.value,
+        qrCode: res.data.code,
+        status: res.data.status,
+      }
+      syncQrImage();
+    } else {
+      formData.value = {
+        ...formData.value,
+        marriageNo: "",
+        husbandName: "",
+        wifeName: "",
+        registerDate: "",
+        qrCode: ""
+      }
     }
   }).catch((error) => {
     localStorage.removeItem('userAs');
@@ -382,20 +408,21 @@ const verifyCode = (flag: any) => {
     flag && showDialog({
       message: error.msg || '验证码验证失败，请重试',
     });
-    formData.value = {
-      ...formData.value,
-      smsCode: "",
-      marriageNo: "",
-      husbandName: "",
-      wifeName: "",
-      registerDate: "",
-      qrCode: ""
-    }
-  }).finally(() => {
-    hideLoading();
-  })
-}
-// 重置结婚证信息
+    formData.value = {
+      ...formData.value,
+      smsCode: "",
+      marriageNo: "",
+      husbandName: "",
+      wifeName: "",
+      registerDate: "",
+      qrCode: ""
+    }
+    qrImageSrc.value = '';
+  }).finally(() => {
+    hideLoading();
+  })
+}
+// 重置结婚证信息
 function resetMarriageInfo() {
   formData.value = {
     ...formData.value,
@@ -465,11 +492,11 @@ const handleImageChange = () => {
 
 
 // 提交表单
-const submitForm = () => {
-  if (!formData.value.phone || !formData.value.smsCode) {
-    showDialog({
-      message: '请完善所有信息',
-    });
+const submitForm = () => {
+  if (!formData.value.phone || !formData.value.smsCode) {
+    showDialog({
+      message: '请完善所有信息',
+    });
     return
   }
 
@@ -479,21 +506,22 @@ const submitForm = () => {
     receiveName: formData.value.husbandName,
     receiveMobile: formData.value.phone,
     smsCode: formData.value.smsCode,
-  }).then((res: any) => {
-    formData.value.qrCode = res.data.code;
-  }).catch((error) => {
-    showDialog({
-      message: error?.msg || '提交失败，请稍后重试',
-    });
-  }).finally(() => {
-    hideLoading();
-  })
-}
-
-// 组件卸载时清理定时器
-import { onUnmounted } from 'vue'
-onUnmounted(() => {
-  if (countdownTimer) {
+  }).then((res: any) => {
+    formData.value.qrCode = res.data.code;
+    syncQrImage();
+  }).catch((error) => {
+    showDialog({
+      message: error?.msg || '提交失败，请稍后重试',
+    });
+  }).finally(() => {
+    hideLoading();
+  })
+}
+
+// 组件卸载时清理定时器
+import { onUnmounted } from 'vue'
+onUnmounted(() => {
+  if (countdownTimer) {
     clearInterval(countdownTimer)
   }
 })