ZhangYong
1 month ago
7 changed files with 279 additions and 64 deletions
-
147src/components/previews/PreviewImage.vue
-
2src/views/moneyManage/executor/executor.vue
-
29src/views/moneyManage/receiveDetail/receiveDetail.vue
-
14src/views/moneyManage/refundDetail/refundCharge.vue
-
87src/views/moneyManage/refundDetail/refundFinance.vue
-
12src/views/moneyManage/refundDetail/refundHeader.vue
-
52src/views/moneyManage/refundDetail/refundService.vue
@ -0,0 +1,147 @@ |
|||
<!-- 图片预览组件，下一期再使用 --> |
|||
<template> |
|||
<div v-if="showPreview" class="image-preview-overlay" @click="closePreview"> |
|||
<div class="image-container" @click.stop> |
|||
<img :src="currentImageUrl" :alt="altText" class="preview-image" /> |
|||
<button class="close-button" @click="closePreview">×</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from 'vue' |
|||
|
|||
// 组件属性 |
|||
const props = defineProps({ |
|||
// 图片URL |
|||
imageUrl: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 图片描述 |
|||
altText: { |
|||
type: String, |
|||
default: '预览图片' |
|||
}, |
|||
// 是否显示预览 |
|||
modelValue: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
|
|||
// 组件事件 |
|||
const emit = defineEmits(['update:modelValue', 'close']) |
|||
|
|||
// 响应式数据 |
|||
const showPreview = ref(false) |
|||
const currentImageUrl = ref('') |
|||
|
|||
// 打开预览 |
|||
const openPreview = (url) => { |
|||
currentImageUrl.value = url || props.imageUrl |
|||
showPreview.value = true |
|||
emit('update:modelValue', true) |
|||
} |
|||
|
|||
// 关闭预览 |
|||
const closePreview = () => { |
|||
showPreview.value = false |
|||
emit('update:modelValue', false) |
|||
emit('close') |
|||
} |
|||
|
|||
// 监听modelValue变化 |
|||
watch(() => props.modelValue, (newVal) => { |
|||
showPreview.value = newVal |
|||
if (newVal) { |
|||
currentImageUrl.value = props.imageUrl |
|||
} |
|||
}) |
|||
|
|||
// 监听imageUrl变化 |
|||
watch(() => props.imageUrl, (newUrl) => { |
|||
if (showPreview.value) { |
|||
currentImageUrl.value = newUrl |
|||
} |
|||
}) |
|||
|
|||
// 暴露方法给父组件 |
|||
defineExpose({ |
|||
openPreview, |
|||
closePreview |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.image-preview-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background-color: rgba(0, 0, 0, 0.7); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 9999; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.image-container { |
|||
position: relative; |
|||
max-width: 90vw; |
|||
max-height: 90vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.preview-image { |
|||
max-width: 100%; |
|||
max-height: 100%; |
|||
object-fit: contain; |
|||
border-radius: 8px; |
|||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.close-button { |
|||
position: absolute; |
|||
top: -40px; |
|||
right: -40px; |
|||
width: 40px; |
|||
height: 40px; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
border: none; |
|||
border-radius: 50%; |
|||
font-size: 24px; |
|||
font-weight: bold; |
|||
cursor: pointer; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #333; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.close-button:hover { |
|||
background: rgba(255, 255, 255, 1); |
|||
transform: scale(1.1); |
|||
} |
|||
|
|||
/* 响应式设计 */ |
|||
@media (max-width: 768px) { |
|||
.image-container { |
|||
max-width: 95vw; |
|||
max-height: 95vh; |
|||
} |
|||
|
|||
.close-button { |
|||
top: -30px; |
|||
right: -30px; |
|||
width: 30px; |
|||
height: 30px; |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue