From 48b4d86a3a6772b811c7e6cb92c3f431b480d587 Mon Sep 17 00:00:00 2001 From: jiangcheng Date: Sat, 28 Mar 2026 09:51:53 +0800 Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E6=AC=BE=E5=AE=A1=E6=A0=B8=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=94=BE=E5=A4=A7=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../moneyManage/receiveDetail/receiveFinance.vue | 42 ++++++++++++++++---- .../moneyManage/receiveDetail/receiveManage.vue | 39 +++++++++++++++---- .../moneyManage/receiveDetail/receiveService.vue | 45 ++++++++++++++++++---- 3 files changed, 104 insertions(+), 22 deletions(-) diff --git a/src/views/moneyManage/receiveDetail/receiveFinance.vue b/src/views/moneyManage/receiveDetail/receiveFinance.vue index 305b009..f8bfd60 100644 --- a/src/views/moneyManage/receiveDetail/receiveFinance.vue +++ b/src/views/moneyManage/receiveDetail/receiveFinance.vue @@ -1287,14 +1287,19 @@ const submitEditForm = async () => { // 2.6 辅助功能 // 图片预览 +// 图片预览（已修复滚轮缩放） const previewImage = (imageUrl) => { if (!imageUrl) return; - + const imageElement = document.createElement('img'); imageElement.src = imageUrl; - imageElement.style.maxWidth = '80vw'; - imageElement.style.maxHeight = '80vh'; - imageElement.style.objectFit = 'contain'; + imageElement.style.maxWidth = '90vw'; + imageElement.style.maxHeight = '90vh'; + imageElement.style.display = 'block'; + + imageElement.style.transition = 'transform 0.2s ease-out'; + imageElement.style.cursor = 'zoom-in'; + imageElement.style.transformOrigin = 'center center'; // 缩放中心点 const viewer = document.createElement('div'); viewer.style.position = 'fixed'; @@ -1303,15 +1308,36 @@ const previewImage = (imageUrl) => { viewer.style.width = '100vw'; viewer.style.height = '100vh'; viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; + viewer.style.display = 'flex'; viewer.style.justifyContent = 'center'; viewer.style.alignItems = 'center'; - viewer.style.zIndex = '9999'; + + viewer.style.overflow = 'hidden'; + + viewer.style.zIndex = '999999'; viewer.appendChild(imageElement); - // 点击关闭预览 - viewer.addEventListener('click', () => { - document.body.removeChild(viewer); + let currentScale = 1; + const scaleStep = 0.2; + const handleWheel = (e) => { + e.preventDefault(); + if (e.deltaY > 0) { + currentScale += scaleStep; + } else { + currentScale -= scaleStep; + } + if (currentScale < 0.5) currentScale = 0.5; + imageElement.style.transform = `scale(${currentScale})`; + imageElement.style.cursor = currentScale > 1 ? 'zoom-out' : 'zoom-in'; + }; + + viewer.addEventListener('wheel', handleWheel, { passive: false }); + viewer.addEventListener('click', (e) => { + if (e.target === viewer) { + document.body.removeChild(viewer); + viewer.removeEventListener('wheel', handleWheel); + } }); document.body.appendChild(viewer); diff --git a/src/views/moneyManage/receiveDetail/receiveManage.vue b/src/views/moneyManage/receiveDetail/receiveManage.vue index d2bc395..b513224 100644 --- a/src/views/moneyManage/receiveDetail/receiveManage.vue +++ b/src/views/moneyManage/receiveDetail/receiveManage.vue @@ -1292,9 +1292,13 @@ const previewImage = (imageUrl) => { const imageElement = document.createElement('img'); imageElement.src = imageUrl; - imageElement.style.maxWidth = '80vw'; - imageElement.style.maxHeight = '80vh'; - imageElement.style.objectFit = 'contain'; + imageElement.style.maxWidth = '90vw'; + imageElement.style.maxHeight = '90vh'; + imageElement.style.display = 'block'; + + imageElement.style.transition = 'transform 0.2s ease-out'; + imageElement.style.cursor = 'zoom-in'; + imageElement.style.transformOrigin = 'center center'; // 缩放中心点 const viewer = document.createElement('div'); viewer.style.position = 'fixed'; @@ -1303,15 +1307,36 @@ const previewImage = (imageUrl) => { viewer.style.width = '100vw'; viewer.style.height = '100vh'; viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; + viewer.style.display = 'flex'; viewer.style.justifyContent = 'center'; viewer.style.alignItems = 'center'; - viewer.style.zIndex = '9999'; + + viewer.style.overflow = 'hidden'; + + viewer.style.zIndex = '999999'; viewer.appendChild(imageElement); - // 点击关闭预览 - viewer.addEventListener('click', () => { - document.body.removeChild(viewer); + let currentScale = 1; + const scaleStep = 0.2; + const handleWheel = (e) => { + e.preventDefault(); + if (e.deltaY > 0) { + currentScale += scaleStep; + } else { + currentScale -= scaleStep; + } + if (currentScale < 0.5) currentScale = 0.5; + imageElement.style.transform = `scale(${currentScale})`; + imageElement.style.cursor = currentScale > 1 ? 'zoom-out' : 'zoom-in'; + }; + + viewer.addEventListener('wheel', handleWheel, { passive: false }); + viewer.addEventListener('click', (e) => { + if (e.target === viewer) { + document.body.removeChild(viewer); + viewer.removeEventListener('wheel', handleWheel); + } }); document.body.appendChild(viewer); diff --git a/src/views/moneyManage/receiveDetail/receiveService.vue b/src/views/moneyManage/receiveDetail/receiveService.vue index b2dd84e..45aff84 100644 --- a/src/views/moneyManage/receiveDetail/receiveService.vue +++ b/src/views/moneyManage/receiveDetail/receiveService.vue @@ -1164,10 +1164,18 @@ const customUpload = async (options) => { // 图片预览 const previewImage = (imageUrl) => { + if (!imageUrl) return; + const imageElement = document.createElement('img'); imageElement.src = imageUrl; - imageElement.style.maxWidth = '80vw'; - imageElement.style.maxHeight = '80vh'; + imageElement.style.maxWidth = '90vw'; + imageElement.style.maxHeight = '90vh'; + imageElement.style.display = 'block'; + + imageElement.style.transition = 'transform 0.2s ease-out'; + imageElement.style.cursor = 'zoom-in'; + imageElement.style.transformOrigin = 'center center'; // 缩放中心点 + const viewer = document.createElement('div'); viewer.style.position = 'fixed'; viewer.style.top = '0'; @@ -1175,16 +1183,39 @@ const previewImage = (imageUrl) => { viewer.style.width = '100vw'; viewer.style.height = '100vh'; viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; + viewer.style.display = 'flex'; viewer.style.justifyContent = 'center'; viewer.style.alignItems = 'center'; - viewer.style.zIndex = '9999'; - viewer.style.overflow = 'auto'; + + viewer.style.overflow = 'hidden'; + + viewer.style.zIndex = '999999'; viewer.appendChild(imageElement); - document.body.appendChild(viewer); - viewer.addEventListener('click', () => { - document.body.removeChild(viewer); + + let currentScale = 1; + const scaleStep = 0.2; + const handleWheel = (e) => { + e.preventDefault(); + if (e.deltaY > 0) { + currentScale += scaleStep; + } else { + currentScale -= scaleStep; + } + if (currentScale < 0.5) currentScale = 0.5; + imageElement.style.transform = `scale(${currentScale})`; + imageElement.style.cursor = currentScale > 1 ? 'zoom-out' : 'zoom-in'; + }; + + viewer.addEventListener('wheel', handleWheel, { passive: false }); + viewer.addEventListener('click', (e) => { + if (e.target === viewer) { + document.body.removeChild(viewer); + viewer.removeEventListener('wheel', handleWheel); + } }); + + document.body.appendChild(viewer); }; // ===================== 客服退款/撤回相关 =====================