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

src/views/moneyManage/executor/executor.vue

@@ -476,32 +476,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) => {

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>

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>

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>

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>
@@ -639,6 +640,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]) // 看不到进度没到这里的

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)// 进度图
@@ -558,7 +560,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({

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>
@@ -485,6 +486,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)) {

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 = {