Merge pull request #106 from mao2006/qrCode

feat: 新增问卷二维码分享

package.json

@@ -26,6 +26,7 @@
     "pinia-plugin-persistedstate": "^3.2.1",
     "pnpm": "^9.12.1",
     "qiniu": "^7.13.0",
+    "qrcode": "^1.5.4",
     "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
     "vue": "^3.4.26",

src/pages/Home/questionnaireItem.vue

@@ -15,6 +15,7 @@
         <div class="btn btn-sm btn-ghost" @click="() => showModal('delConfirmModal'+idName)">删除问卷</div>
       </div>
       <div class="absolute right-5 flex flex-row gap-5">
+        <div v-if="status===2" class="btn btn-sm btn-ghost" @click="() => showModal('QRcode')">查看分享二维码</div>
         <div v-if="status===2" class="btn btn-sm btn-ghost" @click="() => copyShareCode()">复制分享链接</div>
         <div class="pt-4" :class="{ 'text-blue-500': status===2, 'text-red-500': status===1}">{{ "状态:" + (status===1 ? "草稿" : "已发布") }}</div>
       </div>
@@ -38,6 +39,13 @@
       <div class="btn btn-error dark:opacity-70 dark:text-white w-80" @click="() => delQuestionnaire(idName)">确认</div>
     </template>
   </modal>
+  <modal :modal-id="'QRcode'">
+    <template #title>分享二维码</template>
+    <template #default> <img :src="qrCodeURL" class="w-1/2 mx-auto"> </template>
+    <template #action>
+      <div class="btn btn-success dark:opacity-70 dark:text-white w-80" @click="copyQrCode">复制</div>
+    </template>
+  </modal>
 </template>
 
 <script setup lang="ts">
@@ -50,6 +58,8 @@ import {closeLoading, startLoading} from "@/utilities";
 import { useMainStore } from '@/stores';
 import CryptoJS from 'crypto-js';
 import { ElMessage } from 'element-plus';
+import {computed} from 'vue'
+import {useQrCode} from '@/utilities/useQrCode'
 
 const baseURL = import.meta.env.VITE_COPY_LINK;
 const tempStore = useMainStore().useTempStore();
@@ -97,16 +107,27 @@ const delQuestionnaire = (id: number) => {
   })
 }
 
+//获取问卷url
+const questionnaireURL = computed(
+  () => {
+    const Key = 'JingHong';
+    const url =  baseURL + "/View?id=" + CryptoJS.AES.encrypt(props.idName+'',Key).toString()
+    return url
+  }
+)
+
+//复制问卷url
 const copyShareCode = () => {
-  const Key = 'JingHong';
-  const encryptedId = CryptoJS.AES.encrypt(props.idName+'',Key).toString();
-  navigator.clipboard.writeText( baseURL + "/View?id=" + encryptedId);
+  navigator.clipboard.writeText(questionnaireURL.value);
   ElMessage({
     message: '链接复制成功',
     type: 'success',
   })
 }
 
+//二维码处理
+const { qrCodeURL,copyQrCode } = useQrCode(questionnaireURL.value)
+
 const DetailInfo = () => {
   localStorage.setItem('isNew','false')
   localStorage.setItem('id',String(props.idName))

src/utilities/useQrCode.ts

@@ -0,0 +1,51 @@
+import { ref, onMounted } from 'vue'
+import QRCode from 'qrcode';
+import { ElMessage } from 'element-plus';
+import { showModal } from '@/components';
+
+export const useQrCode = (url: string) => {
+    const qrCodeURL = ref(''); // 用于存储二维码的 base64 URL
+    //复制二维码到剪贴板
+    const generateQRCode = async () => {
+        try {
+            qrCodeURL.value = await QRCode.toDataURL(url, {
+                width: 300,
+                margin: 2,
+                color: {
+                    dark: '#000000',
+                    light: '#FFFFFF',
+                },
+            });
+        } catch (error) {
+            console.error('二维码生成失败:', error);
+        }
+    };
+
+    onMounted(() => {
+        generateQRCode();
+    });
+
+    //复制二维码到剪贴板
+    const copyQrCode = async () => {
+        try {
+            const response = await fetch(qrCodeURL.value)
+            const blob = await response.blob()
+            const tempItem = new ClipboardItem({ [blob.type]: blob });
+            await navigator.clipboard.write([tempItem])
+            showModal('QRcode', true);
+            ElMessage({
+                message: '二维码复制成功',
+                type: 'success',
+            })
+        } catch {
+            ElMessage({
+                message: '二维码复制失败',
+                type: 'error',
+            })
+        }
+    }
+    return {
+        qrCodeURL,
+        copyQrCode
+    }
+}