hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-06 09:26:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

【bug：SZX-1213】二维码的url进行转义处理。

Browse Source
This commit is contained in:
xu
2025-11-07 10:51:34 +08:00
parent 37863aee7f
commit aae7916999
3 changed files with 89 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/TwoDimensionalCode.vue
View File

@@ -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,
};
},
};

42
src/components/TwoDimensionalCodeNew.vue
View File

@@ -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,
};
},
};

20
src/components/common/QrCode.vue
View File

@@ -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"); // 执行复制