From 4fd0a0ccf35a239fe8c8f9385db2e8c4a0ad2f04 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期六, 25 四月 2026 15:24:40 +0800
Subject: [PATCH] fix: 添加二维码功能，可以直接扫码下载。
---
src/views/system/appVersion/index.vue | 122 ++++++++++++++++++++++++++++++++++++++++
1 files changed, 121 insertions(+), 1 deletions(-)
diff --git a/src/views/system/appVersion/index.vue b/src/views/system/appVersion/index.vue
index 92157a4..6ff9ae6 100644
--- a/src/views/system/appVersion/index.vue
+++ b/src/views/system/appVersion/index.vue
@@ -21,9 +21,10 @@
</template>
</el-table-column>
<el-table-column label="鍒涘缓浜�" prop="createUser" align="center" width="100"/>
- <el-table-column label="鎿嶄綔" align="center" width="100" class-name="small-padding fixed-width">
+ <el-table-column label="鎿嶄綔" align="center" width="180" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" @click="downloadAttachment(scope.row)">涓嬭浇</el-button>
+ <el-button link type="success" @click="openQrDialog(scope.row)">鎵爜涓嬭浇</el-button>
</template>
</el-table-column>
</el-table>
@@ -56,12 +57,43 @@
</div>
</template>
</el-dialog>
+
+ <el-dialog
+ v-model="qrOpen"
+ title="鎵爜涓嬭浇"
+ width="460px"
+ append-to-body
+ class="download-qr-dialog"
+ >
+ <div class="download-qr-content">
+ <div class="app-meta-card">
+ <div class="meta-row">
+ <span class="meta-label">搴旂敤鍚嶇О</span>
+ <span class="meta-value">{{ qrCurrentRow?.name || "-" }}</span>
+ </div>
+ <div class="meta-row">
+ <span class="meta-label">鐗堟湰缂栧彿</span>
+ <span class="meta-value">{{ qrCurrentRow?.version || "-" }}</span>
+ </div>
+ </div>
+ <div class="qr-box">
+ <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="download qr code" class="qr-image" />
+ <div class="qr-tip">璇蜂娇鐢ㄦ墜鏈烘壂鐮佷笅杞藉簲鐢�</div>
+ </div>
+ </div>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="qrOpen = false">鍏� 闂�</el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup name="SystemAppVersion">
import {listAppVersion, add} from "@/api/system/appVersion";
import FileUpload from "@/components/AttachmentUpload/file/index.vue";
+import QRCode from "qrcode";
const {proxy} = getCurrentInstance();
@@ -76,6 +108,9 @@
const uploadOpen = ref(false);
const uploading = ref(false);
+const qrOpen = ref(false);
+const qrCodeUrl = ref("");
+const qrCurrentRow = ref(null);
const uploadForm = reactive({
name: "",
version: "",
@@ -128,6 +163,28 @@
window.open(row.downloadURL, "_blank");
}
+async function openQrDialog(row) {
+ if (!row?.downloadURL) {
+ proxy.$modal.msgError("褰撳墠璁板綍缂哄皯涓嬭浇鍦板潃锛屾棤娉曠敓鎴愪簩缁寸爜");
+ return;
+ }
+ try {
+ qrCodeUrl.value = await QRCode.toDataURL(row.downloadURL, {
+ width: 220,
+ margin: 2,
+ errorCorrectionLevel: "M",
+ color: {
+ dark: "#1f2937",
+ light: "#ffffff",
+ },
+ });
+ qrCurrentRow.value = row;
+ qrOpen.value = true;
+ } catch (error) {
+ proxy.$modal.msgError("浜岀淮鐮佺敓鎴愬け璐ワ紝璇风◢鍚庨噸璇�");
+ }
+}
+
function submitUpload() {
proxy.$refs.uploadRef.validate(valid => {
if (!valid) return;
@@ -148,3 +205,66 @@
getList();
});
</script>
+
+<style scoped>
+.download-qr-content {
+ padding: 4px 4px 8px;
+}
+
+.app-meta-card {
+ border-radius: 10px;
+ padding: 12px 14px;
+ margin-bottom: 16px;
+ background: linear-gradient(135deg, #f0f7ff 0%, #ecfdf5 100%);
+ border: 1px solid #dbeafe;
+}
+
+.meta-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ line-height: 26px;
+}
+
+.meta-row + .meta-row {
+ margin-top: 6px;
+}
+
+.meta-label {
+ font-size: 13px;
+ color: #64748b;
+}
+
+.meta-value {
+ max-width: 260px;
+ font-size: 14px;
+ color: #0f172a;
+ font-weight: 600;
+ word-break: break-all;
+ text-align: right;
+}
+
+.qr-box {
+ border: 1px solid #e2e8f0;
+ border-radius: 12px;
+ padding: 18px 12px 14px;
+ text-align: center;
+ background: #ffffff;
+ box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
+}
+
+.qr-image {
+ width: 220px;
+ height: 220px;
+ border-radius: 8px;
+ border: 1px solid #e5e7eb;
+ padding: 8px;
+ background: #fff;
+}
+
+.qr-tip {
+ margin-top: 10px;
+ font-size: 13px;
+ color: #64748b;
+}
+</style>
--
Gitblit v1.9.3