diff --git a/src/views/moneyManage/executor/executor.vue b/src/views/moneyManage/executor/executor.vue index c0ec10f..c757388 100644 --- a/src/views/moneyManage/executor/executor.vue +++ b/src/views/moneyManage/executor/executor.vue @@ -192,7 +192,7 @@
{{ t('common_add.transferVoucher') }} + style="width: 80px; height: 80px; object-fit: cover; cursor: zoom-in;" @click="openVoucherViewer(editRow.payVoucher)">
{{ t('common_add.noTransferVoucher') }}
@@ -302,6 +302,50 @@ const showEdit = ref(false) const editForm = ref({ jwcode: '' }) + +// 图片预览(支持滚轮缩放) +const openVoucherViewer = (url) => { + if (!url) return + const container = document.createElement('div') + container.style.position = 'fixed' + container.style.left = '0' + container.style.top = '0' + container.style.width = '100vw' + container.style.height = '100vh' + container.style.backgroundColor = 'rgba(0,0,0,0.7)' + container.style.display = 'flex' + container.style.alignItems = 'center' + container.style.justifyContent = 'center' + container.style.zIndex = '9999' + container.style.cursor = 'zoom-in' + + const img = document.createElement('img') + img.src = url + img.style.maxWidth = '90%' + img.style.maxHeight = '90%' + img.style.transformOrigin = 'center center' + img.style.transition = 'transform 0.05s linear' + + let scale = 1 + const onWheel = (e) => { + e.preventDefault() + const factor = e.deltaY > 0 ? 0.9 : 1.1 + scale = Math.min(5, Math.max(0.2, scale * factor)) + img.style.transform = `scale(${scale})` + } + const onKey = (e) => { if (e.key === 'Escape') close() } + const close = () => { + container.removeEventListener('wheel', onWheel) + document.body.removeEventListener('keydown', onKey) + document.body.contains(container) && document.body.removeChild(container) + } + container.addEventListener('wheel', onWheel, { passive: false }) + container.addEventListener('click', (e) => { if (e.target === container) close() }) + document.body.addEventListener('keydown', onKey) + + container.appendChild(img) + document.body.appendChild(container) +} // 查全部 const getRefund = async function () { try {