From dc7df1593a61f5f5fd0768eaeb18a3435b30b652 Mon Sep 17 00:00:00 2001
From: jiangcheng <jiangcheng@123>
Date: Sat, 28 Mar 2026 16:55:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/moneyManage/executor/executor.vue        | 104 ++++++++++++++++-----
 .../moneyManage/receiveDetail/receiveFinance.vue   |   5 +-
 .../moneyManage/receiveDetail/receiveManage.vue    |   5 +-
 .../moneyManage/receiveDetail/receiveService.vue   |   5 +-
 .../moneyManage/refundDetail/refundCharge.vue      |  58 +++++++++++-
 .../moneyManage/refundDetail/refundFinance.vue     |  56 ++++++++++-
 .../moneyManage/refundDetail/refundHeader.vue      |  58 +++++++++++-
 .../moneyManage/refundDetail/refundService.vue     |  72 ++++++++++++--
 8 files changed, 320 insertions(+), 43 deletions(-)

diff --git a/src/views/moneyManage/executor/executor.vue b/src/views/moneyManage/executor/executor.vue
index 5e5ab51..308cd41 100644
--- a/src/views/moneyManage/executor/executor.vue
+++ b/src/views/moneyManage/executor/executor.vue
@@ -474,32 +474,86 @@ const channelOptions = ref([
 
 
 // 预览图片函数
+// const previewImage = (imageUrl) => {
+//   // 使用 element-plus 的 el-image 组件实现图片预览功能
+//   const imageElement = document.createElement('img');
+//   imageElement.src = imageUrl;
+//   imageElement.style.maxWidth = '80vw';
+//   imageElement.style.maxHeight = '80vh';
+
+//   const viewer = document.createElement('div');
+//   viewer.style.position = 'fixed';
+//   viewer.style.top = '0';
+//   viewer.style.left = '0';
+//   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.appendChild(imageElement);
+//   document.body.appendChild(viewer);
+
+//   viewer.addEventListener('click', () => {
+//     document.body.removeChild(viewer);
+//   });
+// };
 const previewImage = (imageUrl) => {
-  // 使用 element-plus 的 el-image 组件实现图片预览功能
-  const imageElement = document.createElement('img');
-  imageElement.src = imageUrl;
-  imageElement.style.maxWidth = '80vw';
-  imageElement.style.maxHeight = '80vh';
-
-  const viewer = document.createElement('div');
-  viewer.style.position = 'fixed';
-  viewer.style.top = '0';
-  viewer.style.left = '0';
-  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.appendChild(imageElement);
-  document.body.appendChild(viewer);
-
-  viewer.addEventListener('click', () => {
-    document.body.removeChild(viewer);
-  });
+    if (!imageUrl) return;
+
+    const imageElement = document.createElement('img');
+    imageElement.src = imageUrl;
+    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';
+    viewer.style.left = '0';
+    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.overflow = 'hidden'; 
+    
+    viewer.style.zIndex = '999999'; 
+    viewer.appendChild(imageElement);
+
+    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);
 };
 
 const handleImageChange = (file) => {
diff --git a/src/views/moneyManage/receiveDetail/receiveFinance.vue b/src/views/moneyManage/receiveDetail/receiveFinance.vue
index ac65b1c..e728ad2 100644
--- a/src/views/moneyManage/receiveDetail/receiveFinance.vue
+++ b/src/views/moneyManage/receiveDetail/receiveFinance.vue
@@ -467,12 +467,13 @@
                         </el-form-item>
                         <el-form-item :label="t('common_add.transferVoucher')">
                             <div class="pic">
-                                <el-upload disabled="true" ref="uploadRef" class="uploader" :show-file-list="false"
+                                <el-upload :disabled="!editFormData.voucher" ref="uploadRef" class="uploader" :show-file-list="false"
                                     list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload"
                                     :on-error="handelImgErr" :on-change="handleImageChange"
                                     :http-request="customUpload">
                                     <img v-if="editFormData.voucher" :src="editFormData.voucher" class="avatar"
-                                        style="height: 100%; width: 100%;  object-fit: cover;" />
+                                        style="height: 100%; width: 100%;  object-fit: cover;" 
+                                        @click.stop="previewImage(editFormData.voucher)"/>
                                     <el-icon v-else class="avatar-uploader-icon">
                                         <Plus />
                                     </el-icon>
diff --git a/src/views/moneyManage/receiveDetail/receiveManage.vue b/src/views/moneyManage/receiveDetail/receiveManage.vue
index 619d80a..044d1ef 100644
--- a/src/views/moneyManage/receiveDetail/receiveManage.vue
+++ b/src/views/moneyManage/receiveDetail/receiveManage.vue
@@ -467,12 +467,13 @@
                         </el-form-item>
                         <el-form-item :label="t('common_add.transferVoucher')">
                             <div class="pic">
-                                <el-upload disabled="true" ref="uploadRef" class="uploader" :show-file-list="false"
+                                <el-upload disabled="editFormData.voucher" ref="uploadRef" class="uploader" :show-file-list="false"
                                     list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload"
                                     :on-error="handelImgErr" :on-change="handleImageChange"
                                     :http-request="customUpload">
                                     <img v-if="editFormData.voucher" :src="editFormData.voucher" class="avatar"
-                                        style="height: 100%; width: 100%;  object-fit: cover;" />
+                                        style="height: 100%; width: 100%;  object-fit: cover;" 
+                                        @click.stop="previewImage(editFormData.voucher)"/>
                                     <el-icon v-else class="avatar-uploader-icon">
                                         <Plus />
                                     </el-icon>
diff --git a/src/views/moneyManage/receiveDetail/receiveService.vue b/src/views/moneyManage/receiveDetail/receiveService.vue
index e3a4941..aae7730 100644
--- a/src/views/moneyManage/receiveDetail/receiveService.vue
+++ b/src/views/moneyManage/receiveDetail/receiveService.vue
@@ -381,11 +381,12 @@
                         <el-text style="width:4vw;" size="small">{{ t('common_add.transferVoucher') }}</el-text>
                         <el-form-item
                             :rules="{ required: true, message: t('common_add.uploadPhoto'), trigger: 'change' }">
-                            <el-upload ref="uploadRef" :auto-upload="false" list-type="picture-card"
+                            <el-upload :disabled="!refundFormData.voucher" ref="uploadRef" :auto-upload="false" list-type="picture-card"
                                 :show-file-list="false">
                                 <template #default>
                                     <img v-if="refundFormData.voucher" :src="refundFormData.voucher"
-                                        style="width: 100%; height: 100%; object-fit: cover;">
+                                        style="width: 100%; height: 100%; object-fit: cover;"
+                                        @click.stop="previewImage(refundFormData.voucher)">
                                     <el-icon v-else>
                                         <Plus />
                                     </el-icon>
diff --git a/src/views/moneyManage/refundDetail/refundCharge.vue b/src/views/moneyManage/refundDetail/refundCharge.vue
index 59f2966..fda9674 100644
--- a/src/views/moneyManage/refundDetail/refundCharge.vue
+++ b/src/views/moneyManage/refundDetail/refundCharge.vue
@@ -158,7 +158,8 @@
                 <div class="center-item">
                     <el-text style="width:4vw;">{{ t('common_add.transferVoucher') }}</el-text>
                     <img v-if="auditRow.payVoucher" :src="auditRow.payVoucher"
-                        style="width: 80px; height: 80px; object-fit: cover;">
+                        style="width: 80px; height: 80px; object-fit: cover;"
+                        @click.stop="previewImage(auditRow.payVoucher)"/>
                     <div v-else>
                         {{ t('common_add.noTransferVoucher') }}
                     </div>
@@ -637,6 +638,61 @@ const getMarket = async function () {
         console.log('请求失败', error)
     }
 }
+//图片预览
+const previewImage = (imageUrl) => {
+    if (!imageUrl) return;
+
+    const imageElement = document.createElement('img');
+    imageElement.src = imageUrl;
+    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';
+    viewer.style.left = '0';
+    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.overflow = 'hidden'; 
+    
+    viewer.style.zIndex = '999999'; 
+    viewer.appendChild(imageElement);
+
+    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);
+};
 const exportExcel = async function () {
      const payCurrencySelect = ref('')
         const statuses = ref([20, 22, 30, 32, 40, 41]) // 看不到进度没到这里的
diff --git a/src/views/moneyManage/refundDetail/refundFinance.vue b/src/views/moneyManage/refundDetail/refundFinance.vue
index 9e01232..e46b09d 100644
--- a/src/views/moneyManage/refundDetail/refundFinance.vue
+++ b/src/views/moneyManage/refundDetail/refundFinance.vue
@@ -150,7 +150,8 @@
                 <div class="center-item">
                     <el-text style="width:4vw;">{{ t('common_add.transferVoucher') }}</el-text>
                     <img v-if="auditRow.payVoucher" :src="auditRow.payVoucher"
-                        style="width: 80px; height: 80px; object-fit: cover;">
+                        style="width: 80px; height: 80px; object-fit: cover;"
+                        @click.stop="previewImage(auditRow.payVoucher)">
                     <div v-else>
                         {{ t('common_add.noTransferVoucher') }}
                     </div>
@@ -345,6 +346,7 @@ import { productList, CurrencyForId } from '@/views/moneyManage/receiveDetail/ut
 import RefundFinanceBackground from '@/assets/images/refund-progress.png'
 import { isNumber } from 'lodash'
 import { useI18n } from 'vue-i18n'
+import PreviewImage from '@/components/previews/PreviewImage.vue'
 const { t } = useI18n()
 
 const currentStep = ref(0)// 进度图
@@ -556,7 +558,59 @@ const handleReject = async function () {
         ElMessage.error(error.message || t('elmessage.approveFailed'))
     }
 }
+const previewImage = (imageUrl) => {
+    if (!imageUrl) return;
+    const imageElement = document.createElement('img');
+    imageElement.src = imageUrl;
+    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';
+    viewer.style.left = '0';
+    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.overflow = 'hidden'; 
+    
+    viewer.style.zIndex = '999999'; 
+    viewer.appendChild(imageElement);
+
+    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);
+};
 const getMarket = async function () {
     try {
         const result = await API({
diff --git a/src/views/moneyManage/refundDetail/refundHeader.vue b/src/views/moneyManage/refundDetail/refundHeader.vue
index 9dce2f4..2c4cdd9 100644
--- a/src/views/moneyManage/refundDetail/refundHeader.vue
+++ b/src/views/moneyManage/refundDetail/refundHeader.vue
@@ -151,7 +151,8 @@
                 <div class="center-item">
                     <el-text style="width:4vw;">{{ t('common_add.transferVoucher') }}</el-text>
                     <img v-if="auditRow.payVoucher" :src="auditRow.payVoucher"
-                        style="width: 80px; height: 80px; object-fit: cover;">
+                        style="width: 80px; height: 80px; object-fit: cover;"
+                        @click.stop="previewImage(auditRow.payVoucher)"/>
                     <div v-else>
                         {{ t('common_add.noTransferVoucher') }}
                     </div>
@@ -483,6 +484,61 @@ const executorList = ref([
         label: '总部：测试'
     }
 ])
+//图片预览
+const previewImage = (imageUrl) => {
+    if (!imageUrl) return;
+
+    const imageElement = document.createElement('img');
+    imageElement.src = imageUrl;
+    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';
+    viewer.style.left = '0';
+    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.overflow = 'hidden'; 
+    
+    viewer.style.zIndex = '999999'; 
+    viewer.appendChild(imageElement);
+
+    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);
+};
 // 查全部
 const getRefund = async function () {
     if (!hasMenuPermission(menuTree.value, permissionMapping.view_headquarters_refund)) {
diff --git a/src/views/moneyManage/refundDetail/refundService.vue b/src/views/moneyManage/refundDetail/refundService.vue
index b21c6cb..3be9a23 100644
--- a/src/views/moneyManage/refundDetail/refundService.vue
+++ b/src/views/moneyManage/refundDetail/refundService.vue
@@ -525,12 +525,45 @@ const getMarket = async function () {
 }
 
 // 预览图片函数
+// const previewImage = (imageUrl) => {
+//     // 使用 element-plus 的 el-image 组件实现图片预览功能
+//     const imageElement = document.createElement('img');
+//     imageElement.src = imageUrl;
+//     imageElement.style.maxWidth = '80vw';
+//     imageElement.style.maxHeight = '80vh';
+
+//     const viewer = document.createElement('div');
+//     viewer.style.position = 'fixed';
+//     viewer.style.top = '0';
+//     viewer.style.left = '0';
+//     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.appendChild(imageElement);
+//     document.body.appendChild(viewer);
+
+//     viewer.addEventListener('click', () => {
+//         document.body.removeChild(viewer);
+//     });
+// };
 const previewImage = (imageUrl) => {
-    // 使用 element-plus 的 el-image 组件实现图片预览功能
+    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';
@@ -539,18 +572,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);
 };
 const cancelEdit = function () {
     editForm.value = {