保存二维码

src/pages/home/index.vue

@@ -98,12 +98,18 @@
                 <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 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">
+                    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 :value="formData.qrCode" :size="200" level="H" render-as="canvas" />
+                  <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>
@@ -198,7 +204,7 @@
 
 <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 QrcodeVue from 'qrcode.vue'
 import { showLoading, hideLoading } from '../../components/loading'
@@ -206,6 +212,24 @@ 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({
@@ -275,6 +299,7 @@ const clearPhone = () => {
   formData.value.registerDate = '';
   formData.value.qrCode = '';
   formData.value.status = 0;
+  qrImageSrc.value = '';
   countdown.value = 0;
   if (countdownTimer) {
     clearInterval(countdownTimer);
@@ -366,6 +391,7 @@ const verifyCode = (flag: any) => {
         qrCode: res.data.code,
         status: res.data.status,
       }
+      syncQrImage();
     } else {
       formData.value = {
         ...formData.value,
@@ -391,6 +417,7 @@ const verifyCode = (flag: any) => {
       registerDate: "",
       qrCode: ""
     }
+    qrImageSrc.value = '';
   }).finally(() => {
     hideLoading();
   })
@@ -481,6 +508,7 @@ const submitForm = () => {
     smsCode: formData.value.smsCode,
   }).then((res: any) => {
     formData.value.qrCode = res.data.code;
+    syncQrImage();
   }).catch((error) => {
     showDialog({
       message: error?.msg || '提交失败，请稍后重试',