Files
dvcp_v2_wxcp_app/src/project/lianhuaH5/AppPatrolReport/AiImage.vue
2024-11-01 09:30:03 +08:00

81 lines
1.6 KiB
Vue

<template>
<section class="AiImage">
<div v-if="$slots.default" @tap="prev">
<slot/>
</div>
<u-image v-else :src="image" @tap="prev">
<image v-if="link" class="errorImage" slot="error" :src="$cdn+'link.png'"/>
<image v-else-if="miniapp" class="errorImage" slot="error" :src="$cdn+'miniwxmp.jpg'"/>
<div v-else-if="$slots.errorImage" slot="error">
<slot name="errorImage"/>
</div>
<image v-else class="errorImage" slot="error" :src="$cdn+'file.png'"/>
</u-image>
</section>
</template>
<script>
import {mapActions} from "vuex";
export default {
name: "AiImage",
data() {
return {
dialog: false
}
},
computed: {
image() {
return this.src?.replace(/\\/g, '/')
}
},
props: {
src: String,
preview: Boolean,
link: Boolean,
miniapp: Boolean,
file: {
default: () => {
}
}
},
methods: {
...mapActions(['previewFile', 'injectJWeixin']),
prev() {
if (this.preview) {
if (!!this.image) {
uni.previewImage({
current: this.image,
urls: [this.image],
success() {
sessionStorage.setItem("previewImage", " 1")
}
})
} else {
this.previewFile({size: 1, ...this.file})
}
}
},
}
}
</script>
<style lang="scss" scoped>
.AiImage {
::v-deep image {
width: 160px;
height: 160px;
object-fit: cover;
}
::v-deep .u-image__error {
position: relative;
}
.errorImage {
width: 80px;
height: 80px;
}
}
</style>