保存二维码

src/pages/home/index.vue

@@ -93,20 +93,26 @@
               </button>
             </div>
 
-            <div v-if="formData.qrCode">
+            <div v-if="formData.qrCode">
-              <div>
+              <div>
-                <h3 class="text-base text-gray-800 mb-1 font-bold">您已成功领取喜礼</h3>
+                <h3 class="text-base text-gray-800 mb-1 font-bold">您已成功领取喜礼</h3>
-                <span class="text-sm text-gray-600">下面是您的专属核销二维码，请在领取站点出示给工作人员扫码核销。</span>
+                <span class="text-sm text-gray-600">下面是您的专属核销二维码，请在领取站点出示给工作人员扫码核销。</span>
-              </div>
+              </div>
-              <div class="mt-4 flex justify-center items-center relative">
+              <div class="mt-4 flex flex-col items-center">
-                <div v-if="formData.status == 1"
+                <div class="flex justify-center items-center relative h-[210px] w-[210px]" ref="qrCodeWrapper">
-                  class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute">
+                  <div v-if="formData.status == 1"
-                  <span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
+                    class="h-[210px] w-[210px] bg-white/90 rounded-md flex justify-center items-center absolute z-10">
-                </div>
+                    <span class="text-[#E8424D] text-lg font-bold">二维码已核销</span>
-                <qrcode-vue :value="formData.qrCode" :size="200" level="H" render-as="canvas" />
+                  </div>
-              </div>
+                  <qrcode-vue class="absolute opacity-0 pointer-events-none" :value="formData.qrCode" :size="200"
-            </div>
+                    level="H" render-as="canvas" />
-          </div>
+                  <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 { ref, onMounted, nextTick } from 'vue'
-import dayjs from 'dayjs'
+import dayjs from 'dayjs'
-import QrcodeVue from 'qrcode.vue'
+import QrcodeVue from 'qrcode.vue'
-import { showLoading, hideLoading } from '../../components/loading'
+import { showLoading, hideLoading } from '../../components/loading'
-import { showDialog } from 'vant';
+import { showDialog } from 'vant';
-import 'vant/es/dialog/style';
+import 'vant/es/dialog/style';
-
+
-const ocrUploadId = ref<HTMLInputElement>();
+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.registerDate = '';
-  formData.value.qrCode = '';
+  formData.value.qrCode = '';
-  formData.value.status = 0;
+  formData.value.status = 0;
-  countdown.value = 0;
+  qrImageSrc.value = '';
-  if (countdownTimer) {
+  countdown.value = 0;
-    clearInterval(countdownTimer);
+  if (countdownTimer) {
-    countdownTimer = null;
+    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) => {
+  }).then((res) => {
-    localStorage.setItem('userAs', JSON.stringify({
+    localStorage.setItem('userAs', JSON.stringify({
-      phone: formData.value.phone,
+      phone: formData.value.phone,
-      smsCode: formData.value.smsCode,
+      smsCode: formData.value.smsCode,
-    }));
+    }));
 
     formData.value.verifyCode = true;
 
     // 验证成功后重置倒计时
     countdown.value = 0;
 
-    // 验证成功如果有二维码，保存到表单
+    // 验证成功如果有二维码，保存到表单
-    if (res?.data?.code) {
+    if (res?.data?.code) {
-      formData.value = {
+      formData.value = {
-        ...formData.value,
+        ...formData.value,
-        qrCode: res.data.code,
+        qrCode: res.data.code,
-        status: res.data.status,
+        status: res.data.status,
-      }
+      }
-    } else {
+      syncQrImage();
-      formData.value = {
+    } else {
-        ...formData.value,
+      formData.value = {
-        marriageNo: "",
+        ...formData.value,
-        husbandName: "",
+        marriageNo: "",
-        wifeName: "",
+        husbandName: "",
-        registerDate: "",
+        wifeName: "",
-        qrCode: ""
+        registerDate: "",
-      }
+        qrCode: ""
+      }
     }
   }).catch((error) => {
     localStorage.removeItem('userAs');
@@ -382,20 +408,21 @@ const verifyCode = (flag: any) => {
     flag && showDialog({
       message: error.msg || '验证码验证失败，请重试',
     });
-    formData.value = {
+    formData.value = {
-      ...formData.value,
+      ...formData.value,
-      smsCode: "",
+      smsCode: "",
-      marriageNo: "",
+      marriageNo: "",
-      husbandName: "",
+      husbandName: "",
-      wifeName: "",
+      wifeName: "",
-      registerDate: "",
+      registerDate: "",
-      qrCode: ""
+      qrCode: ""
-    }
+    }
-  }).finally(() => {
+    qrImageSrc.value = '';
-    hideLoading();
+  }).finally(() => {
-  })
+    hideLoading();
-}
+  })
-// 重置结婚证信息
+}
+// 重置结婚证信息
 function resetMarriageInfo() {
   formData.value = {
     ...formData.value,
@@ -465,11 +492,11 @@ const handleImageChange = () => {
 
 
 // 提交表单
-const submitForm = () => {
+const submitForm = () => {
-  if (!formData.value.phone || !formData.value.smsCode) {
+  if (!formData.value.phone || !formData.value.smsCode) {
-    showDialog({
+    showDialog({
-      message: '请完善所有信息',
+      message: '请完善所有信息',
-    });
+    });
     return
   }
 
@@ -479,21 +506,22 @@ const submitForm = () => {
     receiveName: formData.value.husbandName,
     receiveMobile: formData.value.phone,
     smsCode: formData.value.smsCode,
-  }).then((res: any) => {
+  }).then((res: any) => {
-    formData.value.qrCode = res.data.code;
+    formData.value.qrCode = res.data.code;
-  }).catch((error) => {
+    syncQrImage();
-    showDialog({
+  }).catch((error) => {
-      message: error?.msg || '提交失败，请稍后重试',
+    showDialog({
-    });
+      message: error?.msg || '提交失败，请稍后重试',
-  }).finally(() => {
+    });
-    hideLoading();
+  }).finally(() => {
-  })
+    hideLoading();
-}
+  })
-
+}
-// 组件卸载时清理定时器
+
-import { onUnmounted } from 'vue'
+// 组件卸载时清理定时器
-onUnmounted(() => {
+import { onUnmounted } from 'vue'
-  if (countdownTimer) {
+onUnmounted(() => {
+  if (countdownTimer) {
     clearInterval(countdownTimer)
   }
 })