feat(manager): 专家证书查看改为 dialog 预览 (同步 admin)

admin/Experts.vue 之前已经把 执业证书/职称证明 的"查看"从 window.open 新 tab
改为 dialog 内嵌 el-image (可点放大 + 失败可下载), 体验更好。

manager/Experts.vue 同步改造:
- 新增 previewOpen/previewUrl + onPreviewCert (替代原 onViewCert 的 window.open)
- 新增证书预览 dialog 模板 (1:1 抄 admin 版, 含失败兜底"图片加载失败, 请下载查看")
- 表格 2 列"查看"按钮: onViewCert → onPreviewCert
- 详情 dialog 内 2 个"查看证书"链接: 同样改 onPreviewCert
- 加 .cert-preview / .cert-preview-error 样式

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
郭庆泰
2026-08-17 00:48:57 +08:00
co-authored by Claude
parent 0f1d130397
commit 3bf1581c64
+36 -6
View File
@@ -47,7 +47,7 @@
<el-table-column label="执业证书/证明" width="180">
<template #default="{ row }">
<template v-if="row.practiceCertUrl">
<el-button link type="primary" @click="onViewCert(row.practiceCertUrl)">查看</el-button>
<el-button link type="primary" @click="onPreviewCert(row.practiceCertUrl)">查看</el-button>
<el-button link type="primary" @click="onDownloadCert(row.practiceCertUrl, row.phone)">下载</el-button>
</template>
<span v-else style="color:#c0c4cc">-</span>
@@ -56,7 +56,7 @@
<el-table-column label="职称证明" width="180">
<template #default="{ row }">
<template v-if="row.titleCertUrl">
<el-button link type="primary" @click="onViewCert(row.titleCertUrl)">查看</el-button>
<el-button link type="primary" @click="onPreviewCert(row.titleCertUrl)">查看</el-button>
<el-button link type="primary" @click="onDownloadCert(row.titleCertUrl, row.phone)">下载</el-button>
</template>
<span v-else style="color:#c0c4cc">-</span>
@@ -193,17 +193,38 @@
<el-descriptions-item label="职称">{{ currentRow.title }}</el-descriptions-item>
<el-descriptions-item label="审核状态"><audit-status-tag :status="currentRow.auditStatus" /></el-descriptions-item>
<el-descriptions-item label="执业证书">
<el-link v-if="currentRow.practiceCertUrl" type="primary" @click="onViewCert(currentRow.practiceCertUrl)">查看证书</el-link>
<el-link v-if="currentRow.practiceCertUrl" type="primary" @click="onPreviewCert(currentRow.practiceCertUrl)">查看证书</el-link>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="职称证明">
<el-link v-if="currentRow.titleCertUrl" type="primary" @click="onViewCert(currentRow.titleCertUrl)">查看证书</el-link>
<el-link v-if="currentRow.titleCertUrl" type="primary" @click="onPreviewCert(currentRow.titleCertUrl)">查看证书</el-link>
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item label="审批时间">{{ fmtTime(currentRow.auditTime) }}</el-descriptions-item>
<el-descriptions-item label="审批人">{{ currentRow.auditBy }}</el-descriptions-item>
</el-descriptions>
</el-dialog>
<!-- 证书/证明 图片预览 dialog (1:1 admin/Experts.vue) -->
<el-dialog v-model="previewOpen" title="证书预览" width="640px" :show-close="true" destroy-on-close>
<div class="cert-preview">
<el-image
:src="previewUrl"
fit="contain"
:preview-src-list="[previewUrl]"
style="width:100%;max-height:70vh"
loading="lazy"
>
<template #error>
<div class="cert-preview-error">图片加载失败, <a @click="onDownloadCert(previewUrl)">下载</a>查看</div>
</template>
</el-image>
</div>
<template #footer>
<el-button @click="onDownloadCert(previewUrl)">下载</el-button>
<el-button type="primary" @click="previewOpen=false">关闭</el-button>
</template>
</el-dialog>
</template>
<script setup>
@@ -353,9 +374,14 @@ function onViewAuditOpinion(row) {
}
// ========== 证书查看/下载 ==========
function onViewCert(url) {
// 图片预览: dialog 弹窗直接显示 (用 el-image 自带 preview-src-list 支持点击放大)
// 同步自 admin/Experts.vue (2026-08-17)
const previewOpen = ref(false)
const previewUrl = ref('')
function onPreviewCert(url) {
if (!url) return
window.open(url, '_blank')
previewUrl.value = url
previewOpen.value = true
}
function onDownloadCert(url, phone) {
if (!url) return
@@ -438,5 +464,9 @@ watch(() => route.fullPath, (newPath) => {
.batch-bar { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
.pager { display: flex; justify-content: flex-end; margin-top: 12px; }
/* 证书预览 dialog (1:1 抄 admin) */
.cert-preview { display: flex; justify-content: center; align-items: center; min-height: 200px; background: #f5f7fa; border-radius: 4px; padding: 8px; }
.cert-preview-error { color: #909399; padding: 40px 0; }
/* stage-* CSS 已删除: 改用 AuditStatusTag 组件 (el-tag 自带颜色) */
</style>