cansnow
124 lines
2.9 KiB
Vue
124 lines
2.9 KiB
Vue
<template>
|
|
<view class="picture_message_container" @click="clickMediaItem">
|
|
<u--image
|
|
:showLoading="true"
|
|
width="120"
|
|
:height="maxHeight"
|
|
mode="widthFix"
|
|
v-if="src"
|
|
:src="src"
|
|
@load="onLoaded"
|
|
@click="clickMediaItem">
|
|
<template v-slot:loading>
|
|
<u-loading-icon color="red"></u-loading-icon>
|
|
</template>
|
|
</u--image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import util from "@/util"
|
|
import md5 from "md5";
|
|
export default {
|
|
name: "PictureMessageContainer",
|
|
props: {
|
|
message: Object,
|
|
conversationID:String,
|
|
},
|
|
data() {
|
|
//console.log(this.message);
|
|
return {
|
|
loadingWidth: "120px",
|
|
src:"",
|
|
coverCachePath:"",
|
|
coverDownloading:false,
|
|
coverExists:false,
|
|
coverDownloadProgress:"",
|
|
};
|
|
},
|
|
computed: {
|
|
maxHeight() {
|
|
const imageHeight = this.message.pictureElem.sourcePicture.height;
|
|
const imageWidth = this.message.pictureElem.sourcePicture.width;
|
|
const aspectRatio = imageHeight / imageWidth;
|
|
return 120 * aspectRatio;
|
|
},
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
async init(){
|
|
const self = this;
|
|
let url = "";
|
|
// 如果有远程 snapshotUrl，则下载到 coverCachePath
|
|
const snapshotUrl = (this.message.pictureElem.snapshotPicture?.url ?? this.message.pictureElem.sourcePath );
|
|
const key = md5(snapshotUrl || '');
|
|
this.coverCachePath = `_doc/${this.conversationID}/img_${key}.jpg`;
|
|
if (typeof plus === 'undefined' || !this.coverCachePath) return;
|
|
try {
|
|
// 检查封面是否存在
|
|
const coverExists = await util.fileExsit(self.coverCachePath);
|
|
this.coverExists = !!coverExists;
|
|
if (this.coverExists) {
|
|
this.src = this.coverCachePath;
|
|
return;
|
|
}
|
|
if (!snapshotUrl) {
|
|
this.src="/static/images/sync_error.png";
|
|
return;
|
|
}
|
|
this.coverDownloading = true;
|
|
await new Promise((resolve, reject) => {
|
|
util.downloadFile(snapshotUrl, self.coverCachePath, function(localPath) {
|
|
self.coverDownloading = false;
|
|
self.coverExists = true;
|
|
resolve(localPath);
|
|
}, function(err) {
|
|
self.coverDownloading = false;
|
|
reject(err);
|
|
}, function(progress) {
|
|
self.coverDownloadProgress = progress;
|
|
});
|
|
});
|
|
} catch (e) {
|
|
this.coverDownloading = false;
|
|
}
|
|
},
|
|
clickMediaItem() {
|
|
uni.previewImage({
|
|
current: 0,
|
|
urls: [this.message.pictureElem.sourcePicture.url],
|
|
indicator: "none",
|
|
});
|
|
},
|
|
onLoaded() {
|
|
this.loadingWidth = "auto";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.picture_message_container {
|
|
position: relative;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
|
|
.play_icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.video_duration {
|
|
position: absolute;
|
|
bottom: 12rpx;
|
|
right: 24rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style> |