73 lines
1.4 KiB
Vue
73 lines
1.4 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'"/>
|
|
<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,
|
|
cdn: "https://cdn.cunwuyun.cn/"
|
|
}
|
|
},
|
|
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],
|
|
})
|
|
} 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>
|