From 2c6a2dafec9eb2992ba1c8896079d93279ac595a Mon Sep 17 00:00:00 2001
From: mzl <mzl@hnxinyouhe.com>
Date: Thu, 20 Aug 2026 09:27:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=A2=E6=88=B7=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E5=9B=BE=E7=89=87=E6=94=AF=E6=8C=81=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E6=94=BE=E5=A4=A7=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

desc_collect 富文本中的图片（如WhatsApp导入截图）点击后用
el-image-viewer 全屏放大（支持滚轮缩放/旋转，点击遮罩关闭），
图片加 cursor:zoom-in 提示可点击。
覆盖：业务端客户列表/公海、管理后台客户/公海/回收站/审核，共6处。

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/views/admin/customer/customeraudit.vue | 12 +++++++++++-
 src/views/admin/customer/highseas.vue      | 12 +++++++++++-
 src/views/admin/customer/index.vue         | 12 +++++++++++-
 src/views/admin/customer/recycle.vue       | 12 +++++++++++-
 src/views/crmpc/customer/index.vue         | 16 ++++++++++++++++
 src/views/crmpc/highseas/index.vue         | 12 +++++++++++-
 6 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/src/views/admin/customer/customeraudit.vue b/src/views/admin/customer/customeraudit.vue
index deb92de..21c644e 100644
--- a/src/views/admin/customer/customeraudit.vue
+++ b/src/views/admin/customer/customeraudit.vue
@@ -85,7 +85,8 @@
     </div>
   </div>
   <el-dialog v-model="detailDialogVisible" title="详情">
-    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
+    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
+    <el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
   </el-dialog>
   <el-dialog v-model="audetDialogVisible" title="审核" width="700px">
     <!-- 客户标记无效 原因与附件回显 -->
@@ -327,9 +328,18 @@
     doc.querySelectorAll('img').forEach((img) => {
       img.style.maxWidth = '100%'
       img.style.height = 'auto'
+      img.style.cursor = 'zoom-in'
     })
     return doc.body.innerHTML
   }
+  // 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
+  const descViewerUrl = ref('')
+  function onDescImgClick(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    if (target.tagName === 'IMG') {
+      descViewerUrl.value = (target as HTMLImageElement).src
+    }
+  }
   function onDetail(row: any) {
     row.desc_collect = processImages(row.desc_collect) // 处理图片
     detailRow.value = row
diff --git a/src/views/admin/customer/highseas.vue b/src/views/admin/customer/highseas.vue
index f302631..1851b8b 100644
--- a/src/views/admin/customer/highseas.vue
+++ b/src/views/admin/customer/highseas.vue
@@ -145,7 +145,8 @@
       </div>
     </div>
     <div class="dtitle">详情内容</div>
-    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
+    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
+    <el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
   </el-dialog>
   <!-- 分配跟单对话框 -->
   <el-dialog v-model="zyDialogVisible" title="分配" width="360px">
@@ -348,9 +349,18 @@
     doc.querySelectorAll('img').forEach((img) => {
       img.style.maxWidth = '100%'
       img.style.height = 'auto'
+      img.style.cursor = 'zoom-in'
     })
     return doc.body.innerHTML
   }
+  // 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
+  const descViewerUrl = ref('')
+  function onDescImgClick(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    if (target.tagName === 'IMG') {
+      descViewerUrl.value = (target as HTMLImageElement).src
+    }
+  }
   function onDetail(row: any) {
     row.desc_collect = processImages(row.desc_collect) // 处理图片
     detailRow.value = row
diff --git a/src/views/admin/customer/index.vue b/src/views/admin/customer/index.vue
index 6e0ad96..f9dd161 100644
--- a/src/views/admin/customer/index.vue
+++ b/src/views/admin/customer/index.vue
@@ -238,7 +238,8 @@
       </div>
     </div>
     <div v-if="detailRow.desc_collect != ''" class="dtitle">详情内容</div>
-    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
+    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
+    <el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
   </el-dialog>
   <!-- 转移跟单对话框 -->
   <el-dialog v-model="zyDialogVisible" title="转移" width="360px">
@@ -528,9 +529,18 @@
     doc.querySelectorAll('img').forEach((img) => {
       img.style.maxWidth = '100%'
       img.style.height = 'auto'
+      img.style.cursor = 'zoom-in'
     })
     return doc.body.innerHTML
   }
+  // 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
+  const descViewerUrl = ref('')
+  function onDescImgClick(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    if (target.tagName === 'IMG') {
+      descViewerUrl.value = (target as HTMLImageElement).src
+    }
+  }
   function onDetail(row: any) {
     row.desc_collect = processImages(row.desc_collect) // 处理图片
     detailRow.value = row
diff --git a/src/views/admin/customer/recycle.vue b/src/views/admin/customer/recycle.vue
index 956254c..cb40d98 100644
--- a/src/views/admin/customer/recycle.vue
+++ b/src/views/admin/customer/recycle.vue
@@ -144,7 +144,8 @@
       </div>
     </div>
     <div v-if="detailRow.desc_collect != ''" class="dtitle">详情内容</div>
-    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
+    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
+    <el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
   </el-dialog>
   <!-- 图片预览对话框 -->
   <el-image-viewer
@@ -237,9 +238,18 @@
     doc.querySelectorAll('img').forEach((img) => {
       img.style.maxWidth = '100%'
       img.style.height = 'auto'
+      img.style.cursor = 'zoom-in'
     })
     return doc.body.innerHTML
   }
+  // 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
+  const descViewerUrl = ref('')
+  function onDescImgClick(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    if (target.tagName === 'IMG') {
+      descViewerUrl.value = (target as HTMLImageElement).src
+    }
+  }
   function onDetail(row: any) {
     row.desc_collect = processImages(row.desc_collect) // 处理图片
     detailRow.value = row
diff --git a/src/views/crmpc/customer/index.vue b/src/views/crmpc/customer/index.vue
index 2e29608..aed3bd4 100644
--- a/src/views/crmpc/customer/index.vue
+++ b/src/views/crmpc/customer/index.vue
@@ -341,7 +341,14 @@
       v-if="detailRow.desc_collect != '' && detailRow.desc_collect != 'null'"
       v-html="detailRow.desc_collect"
       class="detils-content"
+      @click="onDescImgClick"
     ></div>
+    <el-image-viewer
+      v-if="descViewerUrl"
+      :url-list="[descViewerUrl]"
+      hide-on-click-modal
+      @close="descViewerUrl = ''"
+    />
   </el-dialog>
   <el-dialog v-model="reportDialogVisible" title="标记无效" width="600px">
     <el-form :model="reportForm" label-width="80px">
@@ -701,9 +708,18 @@
     doc.querySelectorAll('img').forEach((img) => {
       img.style.maxWidth = '100%'
       img.style.height = 'auto'
+      img.style.cursor = 'zoom-in'
     })
     return doc.body.innerHTML
   }
+  // 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
+  const descViewerUrl = ref('')
+  function onDescImgClick(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    if (target.tagName === 'IMG') {
+      descViewerUrl.value = (target as HTMLImageElement).src
+    }
+  }
   function onDetail(row: any) {
     row.desc_collect = processImages(row.desc_collect) // 处理图片
     detailRow.value = row
diff --git a/src/views/crmpc/highseas/index.vue b/src/views/crmpc/highseas/index.vue
index 9166341..e1491c4 100644
--- a/src/views/crmpc/highseas/index.vue
+++ b/src/views/crmpc/highseas/index.vue
@@ -78,7 +78,8 @@
     </div>
   </div>
   <el-dialog v-model="detailDialogVisible" title="详情">
-    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content"></div>
+    <div v-if="detailRow" v-html="detailRow.desc_collect" class="detils-content" @click="onDescImgClick"></div>
+    <el-image-viewer v-if="descViewerUrl" :url-list="[descViewerUrl]" hide-on-click-modal @close="descViewerUrl = ''" />
   </el-dialog>
 </template>
 
@@ -204,9 +205,18 @@
     doc.querySelectorAll('img').forEach((img) => {
       img.style.maxWidth = '100%'
       img.style.height = 'auto'
+      img.style.cursor = 'zoom-in'
     })
     return doc.body.innerHTML
   }
+  // 点击 desc_collect 中的图片 -> el-image-viewer 放大查看
+  const descViewerUrl = ref('')
+  function onDescImgClick(e: MouseEvent) {
+    const target = e.target as HTMLElement
+    if (target.tagName === 'IMG') {
+      descViewerUrl.value = (target as HTMLImageElement).src
+    }
+  }
   function onDetail(row: any) {
     row.desc_collect = processImages(row.desc_collect) // 处理图片
     detailRow.value = row