szx-1213 二维码转义处理

src/components/TwoDimensionalCode.vue

@@ -33,7 +33,7 @@
                 </div>
               </div>
               <qrcode-vue
-                :value="codeInfo.url.startsWith('/')?(`${domain+codeInfo.url}&t=10`):`${codeInfo.url}&t=10`"
+                :value="displayUrl"
                 :size="qrcodeSize"
                 style="width: 200px; height: 200px"
               ></qrcode-vue>
@@ -42,12 +42,12 @@
           <div class="codeUrl" :style="{ display: showUrl ? 'flex' : 'none' }">
             <div class="codeUrlLink">链接</div>
             <a-input
-              :value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
+              :value="displayUrl"
               disabled
               class="codeUrlInp"
             />
             <a-input
-              :value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
+              :value="displayUrl"
               id="courseUrl"
               class="codeUrlInp"
               style="position: absolute; opacity: 0; z-index: -1"
@@ -77,7 +77,7 @@
   </div>
 </template>
 <script>
-import { reactive, toRefs, watch } from "vue";
+import { computed, reactive, toRefs, watch } from "vue";
 import QrcodeVue from "qrcode.vue";
 import html2canvas from "html2canvas";
 import { message } from "ant-design-vue";
@@ -115,6 +115,33 @@ export default {
       domain: location.protocol+'//'+location.host
     });
 
+    const baseUrl = computed(() => {
+      const rawUrl = state.codeInfo?.url || "";
+      if (!rawUrl) return "";
+      return rawUrl.startsWith('/') ? `${state.domain}${rawUrl}` : rawUrl;
+    });
+
+    const displayUrl = computed(() => {
+      if (!baseUrl.value) return "";
+      const appendedUrl = `${baseUrl.value}&t=10`;
+      try {
+        return encodeURI(appendedUrl);
+      } catch (error) {
+        console.error("Failed to encode QR url", error);
+        return appendedUrl;
+      }
+    });
+
+    const copyValue = computed(() => {
+      if (!baseUrl.value) return "";
+      try {
+        return encodeURI(baseUrl.value);
+      } catch (error) {
+        console.error("Failed to encode QR url", error);
+        return baseUrl.value;
+      }
+    });
+
     //下载二维码图片
     const downloadQr = (num) => {
       state.qrcodeSize = num;
@@ -156,7 +183,11 @@ export default {
       // 	selection.removeRange(range); // 移除选中的元素
 
       var input = document.createElement("input"); // 创建input对象
-      input.value = state.codeInfo.url.startsWith('/')?(state.domain+state.codeInfo.url):state.codeInfo.url; // 设置复制内容
+      input.value = copyValue.value; // 设置复制内容
+      if (!input.value) {
+        message.error("复制失败，链接为空");
+        return;
+      }
       document.body.appendChild(input); // 添加临时实例
       input.select(); // 选择实例内容
       document.execCommand("Copy"); // 执行复制
@@ -188,6 +219,7 @@ export default {
       downloadQr,
       closeCodeModal,
       copyUrl,
+      displayUrl,
     };
   },
 };

src/components/TwoDimensionalCodeNew.vue

@@ -33,7 +33,7 @@
                 </div>
               </div>
               <qrcode-vue
-                :value="codeInfo.url.startsWith('/')?(`${domain+codeInfo.url}&t=10`):`${codeInfo.url}&t=10`"
+                :value="displayUrl"
                 :size="qrcodeSize"
                 style="width: 200px; height: 200px"
               ></qrcode-vue>
@@ -42,12 +42,12 @@
           <div class="codeUrl" :style="{ display: showUrl ? 'flex' : 'none' }">
             <div class="codeUrlLink">链接</div>
             <a-input
-              :value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
+              :value="displayUrl"
               disabled
               class="codeUrlInp"
             />
             <a-input
-              :value="codeInfo.url.startsWith('/')?`${domain+codeInfo.url}&t=10`:`${codeInfo.url}&t=10`"
+              :value="displayUrl"
               id="courseUrl"
               class="codeUrlInp"
               style="position: absolute; opacity: 0; z-index: -1"
@@ -77,7 +77,7 @@
   </div>
 </template>
 <script>
-import { reactive, toRefs, watch } from "vue";
+import { computed, reactive, toRefs, watch } from "vue";
 import QrcodeVue from "qrcode.vue";
 import html2canvas from "html2canvas";
 import { message } from "ant-design-vue";
@@ -115,6 +115,33 @@ export default {
       domain: location.protocol+'//'+location.host
     });
 
+    const baseUrl = computed(() => {
+      const rawUrl = state.codeInfo?.url || "";
+      if (!rawUrl) return "";
+      return rawUrl.startsWith('/') ? `${state.domain}${rawUrl}` : rawUrl;
+    });
+
+    const displayUrl = computed(() => {
+      if (!baseUrl.value) return "";
+      const appendedUrl = `${baseUrl.value}&t=10`;
+      try {
+        return encodeURI(appendedUrl);
+      } catch (error) {
+        console.error("Failed to encode QR url", error);
+        return appendedUrl;
+      }
+    });
+
+    const copyValue = computed(() => {
+      if (!baseUrl.value) return "";
+      try {
+        return encodeURI(baseUrl.value);
+      } catch (error) {
+        console.error("Failed to encode QR url", error);
+        return baseUrl.value;
+      }
+    });
+
     //下载二维码图片
     const downloadQr = (num) => {
       state.qrcodeSize = num;
@@ -156,7 +183,11 @@ export default {
       // 	selection.removeRange(range); // 移除选中的元素
 
       var input = document.createElement("input"); // 创建input对象
-      input.value = state.codeInfo.url.startsWith('/')?(state.domain+state.codeInfo.url):state.codeInfo.url; // 设置复制内容
+      input.value = copyValue.value; // 设置复制内容
+      if (!input.value) {
+        message.error("复制失败，链接为空");
+        return;
+      }
       document.body.appendChild(input); // 添加临时实例
       input.select(); // 选择实例内容
       document.execCommand("Copy"); // 执行复制
@@ -188,6 +219,7 @@ export default {
       downloadQr,
       closeCodeModal,
       copyUrl,
+      displayUrl,
     };
   },
 };

src/components/common/QrCode.vue

@@ -23,14 +23,14 @@
               <div class="codename">开课：{{ name }}</div>
               <div class="codename" v-if="createName">讲师：{{ createName }}</div>
             </div>
-            <QrcodeVue :value="url" :size="size" style="width: 200px; height: 200px"></QrcodeVue>
+            <QrcodeVue :value="encodedUrl" :size="size" style="width: 200px; height: 200px"></QrcodeVue>
           </div>
         </div>
         <div v-if="copyAble" class="codeUrl" :style="{ display: 'flex'}">
           <div class="codeUrlLink">链接</div>
-          <a-input :value="url" disabled class="codeUrlInp"/>
+          <a-input :value="encodedUrl" disabled class="codeUrlInp"/>
           <a-input
-            :value="url"
+            :value="encodedUrl"
             id="courseUrl"
             class="codeUrlInp"
             style="position: absolute; opacity: 0; z-index: -1"
@@ -45,7 +45,7 @@
   </a-modal>
 </template>
 <script setup>
-import {defineProps, onMounted} from "vue";
+import {computed, defineProps, onMounted} from "vue";
 import html2canvas from "html2canvas";
 import QrcodeVue from "qrcode.vue";
 import {message} from "ant-design-vue";
@@ -85,6 +85,16 @@ const props = defineProps({
   },
 });
 
+const encodedUrl = computed(() => {
+  if (!props.url) return "";
+  try {
+    return encodeURI(props.url);
+  } catch (error) {
+    console.error("Failed to encode QR code url", error);
+    return props.url;
+  }
+});
+
 onMounted(() => props.duration && setTimeout(() => props.close(), props.duration));
 
 function download() {
@@ -106,7 +116,7 @@ function download() {
 
 function copyUrl() {
   const input = document.createElement("input"); // 创建input对象
-  input.value = props.url;
+  input.value = encodedUrl.value;
   document.body.appendChild(input); // 添加临时实例
   input.select(); // 选择实例内容
   document.execCommand("Copy"); // 执行复制