Merge branch 'jiangcheng/feature-20260326164657-金币日常优化3.0' into milestone-20260328-金币日常优化3.0

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);

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);

src/views/moneyManage/receiveDetail/receiveService.vue

@@ -1166,10 +1166,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';
@@ -1177,16 +1185,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);
 };
 
 // ===================== 客服退款/撤回相关 =====================