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

收款审核图片放大优化

jiangcheng/feature-20260326164657-金币日常优化3.0
jiangcheng 3 weeks ago
parent
a92962be6f
commit
48b4d86a3a
3 changed files with 104 additions and 22 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. 38
      src/views/moneyManage/receiveDetail/receiveFinance.vue
  2. 37
      src/views/moneyManage/receiveDetail/receiveManage.vue
  3. 43
      src/views/moneyManage/receiveDetail/receiveService.vue

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

@ -1287,14 +1287,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';
@ -1303,15 +1308,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', () => {
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);

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

@ -1292,9 +1292,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';
@ -1303,15 +1307,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', () => {
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);

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

@ -1164,10 +1164,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';
@ -1175,16 +1183,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', () => {
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);
};
// ===================== 客服退款/撤回相关 =====================

Write Preview
Loading…
Cancel
Save