Skip to content

P
pica-admin-consultation
提交 790800f1 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

图片显示规则

上级 f7e56287
显示空白字符变更
内嵌 并排
正在显示 包含 120 行增加 和 32 行删除
src/components/IM/img-size.vue
浏览文件 @ 790800f1
<template>
<div class="img-container">
<img :src="imgData.url" />
<div class="img-handle-container">
<div class="img-box">
<img :src="imgUrl" :style="{width: imgData.newW + 'px', height: imgData.newH + 'px' }"/>
</div>
</div>
</template>
<script>
export default {
name: 'imgSize',
props: {
imgUrl: {
type: String,
default: ''
},
imgData: {
type: Object,
default: {}
},
index: {
type: Number,
default: 0
}
},
data() {
return {
imgWidth: 0,
imgHeight: 0,
imgProportion: 0
imgProportion: 0,
lw: 0,
lh: 0,
newW: 0,
newH: 0,
}
},
mounted() {
this.imgWidth = this.imgData.width;
this.imgHeight = this.imgData.height;
console.log("222222222222222", this.imgData)
let {lw, lh, newW, newH} = this;
this.imgWidth = this.imgData.width || JSON.parse(this.imgData.content).w;
this.imgHeight = this.imgData.height || JSON.parse(this.imgData.content).h;
this.imgProportion = (this.imgWidth / this.imgHeight).toFixed(1);
console.log("==========dddddddddd",this.imgProportion)
if(this.imgProportion > 0.6) {
if(this.imgWidth > 192) {
lw = 192;
lh = (this.imgHeight * lw) / this.imgWidth;
} else if(this.imgWidth <= 192) {
lw = this.imgWidth;
lh = this.imgHeight;
}
} else if(this.imgProportion == 0.6) {
lh = 320;
lw = lh * 0.6;
}else {
if(this.imgHeight > 320) {
lh = 320;
lw = (this.imgWidth * lh) / this.imgHeight;
}else if(this.imgHeight <= 320) {
lh = this.imgHeight;
lw = this.imgWidth;
}
}
if((lh < 32) && (lh < lw)) {
newH = 32;
newW = (lw * 32) / lh;
}else if((lw < 32) && (lw < lh)) {
newW = 32;
newH = (lh * 32) / lw;
}else {
newH = lh;
newW = lw;
}
this.$emit('imgHandle', {width: newW, height: newH, index: this.index});
},
methods: {
......@@ -34,5 +77,11 @@ export default {
}
</script>
<style lang="scss" scoped>
.img-handle-container {
.img-box {
max-width: 192px;
max-height: 320px;
overflow: hidden;
}
}
</style>
\ No newline at end of file
src/views/IM/chain-history/detail.vue
浏览文件 @ 790800f1
......@@ -9,8 +9,11 @@
<div>{{item.info}}</div>
</div>
<div v-if="item.type == 1" class="img-content" v-viewer>
<img :src="item.url" />
<!-- <img-size :imgData="item"></img-size> -->
<img-size
:imgUrl="item.url"
:imgData="item"
:index="index"
@imgHandle="imgHandle"></img-size>
</div>
<div v-if="item.type == 2" class="file-content">
<div class="file-con" @click="openPDF(item.url)">
......@@ -61,6 +64,7 @@ export default {
mounted() {
commonUtil.resizeHeight();
this.getData();
},
methods: {
// 获取历史群发数据
......@@ -72,13 +76,17 @@ export default {
if (res.code == "000000") {
this.detailData = res.data;
this.detailData.contentModelList.map((item) => {
if(item.type == 2) {
if(item.type == 2) { // 0 文本 1 图片 2PDF 3链接
item.fileSize = betaHandle(item.fileSize);
}
})
}
});
},
imgHandle(data) {
this.$set(this.detailData.contentModelList[data.index], 'newW', data.width)
this.$set(this.detailData.contentModelList[data.index], 'newH', data.height)
},
// 下载目标文件
downFile() {
let a = document.createElement('a');
......@@ -121,11 +129,17 @@ export default {
padding: 16px 0;
border-bottom: 1px solid #F0F1F2;
cursor: pointer;
& > img {
width: 170px;
height: 108px;
border-radius: 8px;
}
// .img-box {
// max-width: 192px;
// max-height: 320px;
// overflow: hidden;
// // & > img {
// // // width: 170px;
// // // height: 108px;
// // border-radius: 8px;
// // }
// }
}
.file-content {
padding: 16px 0;
......
src/views/IM/current-session/index.scss
浏览文件 @ 790800f1
......@@ -248,11 +248,11 @@
// width: 20px;
// height: 20px;
// }
& > .img {
width: 170px;
height: 108px;
border-radius: 8px;
}
// & > .img {
// width: 170px;
// height: 108px;
// border-radius: 8px;
// }
}
}
......
src/views/IM/current-session/index.vue
浏览文件 @ 790800f1
......@@ -91,8 +91,12 @@
<div class="mid-text">{{item.text}}</div>
</div>
<div v-if="item.showType == 2" class="mid-img" v-viewer>
<img class="img" :src="item.url" alt />
<!-- <img :src="item.imgUrl" alt /> -->
<!-- <img class="img" :src="item.url" alt /> -->
<img-size
:imgUrl="item.url"
:imgData="item"
:index="index"
@imgHandle="imgHandle"></img-size>
</div>
<div v-if="item.showType == 3" class="mid-pdf" @click="openPDF(item)">
<div class="midp-left">
......@@ -200,6 +204,7 @@
<script>
import { mapGetters, mapMutations } from "vuex";
import BreadCrumb from "@/components/breadcrumb.vue";
import ImgSize from "@/components/IM/img-size.vue";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { validateWord } from "@/utils/validate.js";
import {
......@@ -220,7 +225,8 @@ let _this = null;
export default {
components: {
BreadCrumb,
UserInfo
UserInfo,
ImgSize
},
data() {
return {
......@@ -1026,9 +1032,17 @@ export default {
// 文件大小单位转换
fileSizeChange(val) {
return betaHandle(val);
}
},
imgHandle(data) {
this.$set(this.messageList[data.index], 'newW', data.width)
this.$set(this.messageList[data.index], 'newH', data.height)
},
},
beforeDestroy() {
console.log("in beforeDestroy", forwardMsgIntervalId);
sessionIntervalId && clearInterval(sessionIntervalId);
......
src/views/IM/search-message/detail.vue
浏览文件 @ 790800f1
......@@ -21,7 +21,12 @@
<div>{{item.content}}</div>
</div>
<div v-if="item.type == 'PICTURE'" class="img-content" v-viewer>
<img :src="item.content.url" />
<!-- <img :src="item.content.url" /> -->
<img-size
:imgUrl="item.content.url"
:imgData="item"
:index="index"
@imgHandle="imgHandle"></img-size>
</div>
<div v-if="item.type == 'CUSTOM'">
<div v-if="item.content.bizType == 18" class="file-content">
......@@ -52,12 +57,14 @@
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
import ImgSize from "@/components/IM/img-size.vue";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import { openLoading, closeLoading, betaHandle, timeHandle } from "@/utils/utils";
import { getPicaKFAccid } from "@/utils";
export default {
components: {
BreadCrumb
BreadCrumb,
ImgSize
},
data() {
return {
......@@ -188,6 +195,10 @@ export default {
}
})
},
imgHandle(data) {
this.$set(this.detailData[data.index], 'newW', data.width)
this.$set(this.detailData[data.index], 'newH', data.height)
},
// 按照时间大小排序
timeSort(arrList) {
arrList.sort((a, b) => {
......@@ -302,11 +313,11 @@ export default {
.img-content {
padding: 16px 0;
cursor: pointer;
& > img {
width: 170px;
height: 108px;
border-radius: 8px;
}
// & > img {
// width: 170px;
// height: 108px;
// border-radius: 8px;
// }
}
.file-content {
padding: 16px 0;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或