You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
3.7 KiB
156 lines
3.7 KiB
<template>
|
|
<el-image
|
|
:fit="fit"
|
|
:preview-src-list="imageList"
|
|
:src="imgUrl"
|
|
@load="handleImageLoad"
|
|
@error="handleImageLoadError"
|
|
@click="onClicked"
|
|
>
|
|
<div slot="placeholder" class="image-slot">
|
|
加载中<span class="dot">...</span>
|
|
</div>
|
|
|
|
<div slot="error" class="image-slot">
|
|
{{ errorTips }}
|
|
</div>
|
|
</el-image>
|
|
</template>
|
|
|
|
<script>
|
|
// import { ftpImageViewUrl } from "@/utils/index";
|
|
import { mapGetters } from "vuex";
|
|
import { getConfigByKeys } from "@/api/system/config";
|
|
import store from "@/store";
|
|
import { buildImageUrl } from "@/utils/image-url";
|
|
|
|
export default {
|
|
name: "AsyncImage",
|
|
components: {},
|
|
props: {
|
|
fit: {
|
|
type: String,
|
|
default: "scale-down",
|
|
},
|
|
srcList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
src: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
errorTips: {
|
|
type: String,
|
|
default: "加载失败",
|
|
},
|
|
supportPreview: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
async created() {},
|
|
data() {
|
|
return {
|
|
imgUrl: "",
|
|
loading: false,
|
|
imageList: [],
|
|
config: null,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(["systemParams"]),
|
|
},
|
|
methods: {
|
|
async ftpImageViewUrl(url) {
|
|
const ftpViewAddress = this.systemParams && this.systemParams.ftpViewAddress;
|
|
if (!ftpViewAddress) {
|
|
const systemParams = {};
|
|
await getConfigByKeys([
|
|
"EXTRANET_ADDRESS",
|
|
"EXTRANET_FTP_VIEW_ADDRESS",
|
|
"INTRANET_FTP_VIEW_ADDRESS",
|
|
"VIRTUAL_RTC_MEDIAURL",
|
|
"EXTRANET_MEDIA_URL",
|
|
"INTRANET_MEDIA_URL",
|
|
"VIRTUAL_FLV_MEDIAURL",
|
|
"INTRANET_FLV_MEDIA_URL",
|
|
"EXTRANET_FLV_MEDIA_URL",
|
|
]).then((res) => {
|
|
res.data.forEach((x) => {
|
|
systemParams[x.configKey] = x.configValue;
|
|
});
|
|
systemParams.PREFIX =
|
|
location.hostname === systemParams.EXTRANET_ADDRESS
|
|
? "EXTRANET"
|
|
: "INTRANET";
|
|
systemParams.ftpViewAddress =
|
|
systemParams[systemParams.PREFIX + "_FTP_VIEW_ADDRESS"];
|
|
systemParams.MEDIA_URL =
|
|
systemParams[systemParams.PREFIX + "_MEDIA_URL"];
|
|
systemParams.FLV_MEDIA_URL =
|
|
systemParams[systemParams.PREFIX + "_FLV_MEDIA_URL"];
|
|
});
|
|
return buildImageUrl(systemParams.ftpViewAddress, url);
|
|
} else {
|
|
return buildImageUrl(ftpViewAddress, url);
|
|
}
|
|
},
|
|
async getUrls(val) {
|
|
this.imageList = [];
|
|
const urls = [];
|
|
for (let index = 0; index < val.length; index++) {
|
|
const element = val[index];
|
|
urls.push(await this.ftpImageViewUrl(element));
|
|
}
|
|
if (this.supportPreview) {
|
|
this.imageList = urls;
|
|
}
|
|
},
|
|
handleImageLoad(e) {
|
|
const imgOriginalHeight = e.target.naturalHeight;
|
|
const imgOriginalWidth = e.target.naturalWidth;
|
|
this.$emit("imgload", { imgOriginalHeight, imgOriginalWidth });
|
|
},
|
|
handleImageLoadError() {
|
|
this.$emit("imgloaderror");
|
|
},
|
|
|
|
onClicked() {
|
|
this.$emit("click");
|
|
},
|
|
},
|
|
watch: {
|
|
srcList: {
|
|
handler(val) {
|
|
this.getUrls(val);
|
|
},
|
|
immediate: true,
|
|
},
|
|
src: {
|
|
async handler(val) {
|
|
if (val && val.length > 0) {
|
|
this.imgUrl = await this.ftpImageViewUrl(val);
|
|
if (this.srcList.length === 0) {
|
|
this.getUrls([val]);
|
|
}
|
|
} else {
|
|
this.imgUrl = "";
|
|
}
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.image-slot {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #ddd;
|
|
}
|
|
</style>
|