图片显示规则

src/components/IM/img-size.vue

 <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

@@ -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

@@ -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

@@ -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

@@ -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;