fix: 添加二维码功能，可以直接扫码下载。

spring

2026-04-25 4fd0a0ccf35a239fe8c8f9385db2e8c4a0ad2f04

fix: 添加二维码功能，可以直接扫码下载。

 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>