diff --git a/src/views/moneyManage/receiveDetail/receiveFinance.vue b/src/views/moneyManage/receiveDetail/receiveFinance.vue index 58226d8..4450219 100644 --- a/src/views/moneyManage/receiveDetail/receiveFinance.vue +++ b/src/views/moneyManage/receiveDetail/receiveFinance.vue @@ -1289,14 +1289,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'; @@ -1305,15 +1310,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 d9acf87..5a27ca2 100644 --- a/src/views/moneyManage/receiveDetail/receiveManage.vue +++ b/src/views/moneyManage/receiveDetail/receiveManage.vue @@ -1294,9 +1294,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'; @@ -1305,15 +1309,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 d1d42b4..bb94766 100644 --- a/src/views/moneyManage/receiveDetail/receiveService.vue +++ b/src/views/moneyManage/receiveDetail/receiveService.vue @@ -1138,6 +1138,7 @@ const productRestrictType = computed(() => { const handleProductChange = (productName) => { console.log('LastGoodsName:', LastGoodsName.value); LastGoodsName.value = productName + addFormData.value.numUnit = '' console.log('选中的产品名称:', productName); if (productName && productName == t('cash.coinRecharge')) { showWallet(addFormData.value.receivedMarket) @@ -1195,10 +1196,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'; @@ -1206,16 +1215,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); }; // ===================== 客服退款/撤回相关 =====================