feat: 客户详情内容图片支持点击放大查看

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
mzl
2026-08-20 09:27:24 +08:00
parent 6ab4fc9b9a
commit 2c6a2dafec
6 changed files with 71 additions and 5 deletions
+11 -1
View File
@@ -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