huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

图片预览放大

jiangcheng/feature-20260326164657-金币日常优化3.0
jiangcheng 2 weeks ago
parent
8bd9c69d92
commit
dc7df1593a
8 changed files with 320 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 104
      src/views/moneyManage/executor/executor.vue
  2. 5
      src/views/moneyManage/receiveDetail/receiveFinance.vue
  3. 5
      src/views/moneyManage/receiveDetail/receiveManage.vue
  4. 5
      src/views/moneyManage/receiveDetail/receiveService.vue
  5. 58
      src/views/moneyManage/refundDetail/refundCharge.vue
  6. 56
      src/views/moneyManage/refundDetail/refundFinance.vue
  7. 58
      src/views/moneyManage/refundDetail/refundHeader.vue
  8. 70
      src/views/moneyManage/refundDetail/refundService.vue

104
src/views/moneyManage/executor/executor.vue
View File

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

5
src/views/moneyManage/receiveDetail/receiveFinance.vue
View File

@ -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>

5
src/views/moneyManage/receiveDetail/receiveManage.vue
View File

@ -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>

5
src/views/moneyManage/receiveDetail/receiveService.vue
View File

@ -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>

58
src/views/moneyManage/refundDetail/refundCharge.vue
View File

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

56
src/views/moneyManage/refundDetail/refundFinance.vue
View File

@ -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({

58
src/views/moneyManage/refundDetail/refundHeader.vue
View File

@ -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)) {

70
src/views/moneyManage/refundDetail/refundService.vue
View File

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

Write Preview
Loading…
Cancel
Save