From 3bf1581c64ffd84819057bf0862799027f91d632 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E5=BA=86=E6=B3=B0?= <>
Date: Mon, 17 Aug 2026 00:48:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(manager):=20=E4=B8=93=E5=AE=B6=E8=AF=81?=
 =?UTF-8?q?=E4=B9=A6=E6=9F=A5=E7=9C=8B=E6=94=B9=E4=B8=BA=20dialog=20?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=20(=E5=90=8C=E6=AD=A5=20admin)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 ry-vue3/src/views/manager/Experts.vue | 42 +++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/ry-vue3/src/views/manager/Experts.vue b/ry-vue3/src/views/manager/Experts.vue
index 0477cbd..0c7462f 100644
--- a/ry-vue3/src/views/manager/Experts.vue
+++ b/ry-vue3/src/views/manager/Experts.vue
@@ -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>