小程序客服图片报警处理，瀑布流重构

pages/chat/index.vue

@@ -495,9 +495,9 @@
     });
     chat.showTools = false;
     // scrollBottom();
-    setTimeout(()=>{
+    setTimeout(() => {
       chat.msg = '';
-    },100)
+    }, 100);
   }
 
   // 点击猜你想问
@@ -546,7 +546,7 @@
           let emojiFile = selEmojiFile(item);
           newData = newData.replace(
             item,
-            `<img class="chat-img" style="width:25px;height:25px;margin:0 3px" src="${sheep.$url.cdn(
+            `<img class="chat-img" src="${sheep.$url.cdn(
               '/static/img/chat/emoji/' + emojiFile,
             )}"/>`,
           );
@@ -587,6 +587,7 @@
     background-size: 750rpx 100%;
     z-index: 1;
   }
+
   .chat-wrap {
     // :deep() {
     //   .ui-navbar-box {
@@ -701,10 +702,12 @@
           background: #fff;
           color: #333;
         }
+
         :deep() {
           .imgred {
             width: 100%;
           }
+
           .imgred,
           img {
             width: 100%;
@@ -852,3 +855,16 @@
     }
   }
 </style>
+<style>
+  .chat-img {
+    width: 25px;
+    height: 25px;
+    margin: 0 3px;
+  }
+  .full-img {
+    object-fit: cover;
+    width: 100px;
+    height: 100px;
+    border-radius: 6px;
+  }
+</style>

pages/chat/socket.js

@@ -494,7 +494,7 @@ export function useChatWebSocket(socketConfig) {
         const img = await readImg(file);
         const blob = await compressImg(img, file.type);
         const { data } = await upload(file.name, blob);
-        let image = `<img src='${data.fullurl}'  style='object-fit: cover;width:100px;height:100px;border-radius:6px'>`;
+        let image = `<img class="full-url" src='${data.fullurl}'>`;
         document.execCommand('insertHTML', false, image);
       } else {
         document.execCommand('insertHTML', false, paste.getData('text'));
@@ -516,7 +516,7 @@ export function useChatWebSocket(socketConfig) {
         const img = await readImg(file);
         const blob = await compressImg(img, file.type);
         const { data } = await upload(file.name, blob);
-        let image = `<img src='${data.fullurl}'   style='object-fit: cover;width:100px;height:100px;border-radius:6px'>`;
+        let image = `<img class="full-url" src='${data.fullurl}' >`;
         document.execCommand('insertHTML', false, image);
       } else {
         ElMessage({
@@ -818,4 +818,4 @@ export function useChatWebSocket(socketConfig) {
     showTime,
     formatTime,
   };
-}
+}

sheep/components/s-goods-column/s-goods-column.vue

@@ -65,12 +65,7 @@
       <view v-if="tagStyle.show" class="tag-icon-box">
         <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src)"></image>
       </view>
-      <image
-        class="md-img-box"
-        :src="sheep.$url.cdn(data.image)"
-        mode="widthFix"
-        @load="calculatePanelHeight"
-      ></image>
+      <image class="md-img-box" :src="sheep.$url.cdn(data.image)" mode="widthFix"></image>
       <view
         class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
         :id="elId"
@@ -296,7 +291,7 @@
    * @event {Function()} click 										- 点击卡片
    *
    */
-  import { computed, reactive, getCurrentInstance } from 'vue';
+  import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
   import sheep from '@/sheep';
   import { formatSales } from '@/sheep/hooks/useGoods';
   import { formatStock } from '@/sheep/hooks/useGoods';
@@ -417,23 +412,32 @@
     emits('click');
   };
 
-  // 获取实时卡片高度
+  // 获取卡片实时高度
   const { proxy } = getCurrentInstance();
   const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
-  function calculatePanelHeight(e) {
+  function getGoodsPriceCardWH() {
     if (props.size === 'md') {
       const view = uni.createSelectorQuery().in(proxy);
       view.select(`#${elId}`).fields({ size: true, scrollOffset: true });
       view.exec((data) => {
+        let totalHeight = 0;
         const goodsPriceCard = data[0];
-        const card = {
-          width: goodsPriceCard.width,
-          height: (goodsPriceCard.width / e.detail.width) * e.detail.height + goodsPriceCard.height,
-        };
-        emits('getHeight', card.height);
+        if (props.data.image_wh) {
+          totalHeight =
+            (goodsPriceCard.width / props.data.image_wh.w) * props.data.image_wh.h +
+            goodsPriceCard.height;
+        } else {
+          totalHeight = goodsPriceCard.width;
+        }
+        emits('getHeight', totalHeight);
       });
     }
   }
+  onMounted(() => {
+    nextTick(() => {
+      getGoodsPriceCardWH();
+    });
+  });
 </script>
 
 <style lang="scss" scoped>

sheep/components/s-share-modal/canvas-poster/index.vue

@@ -20,6 +20,7 @@
           height: poster.height + 'px',
           width: poster.width + 'px',
         }"
+		:show-menu-by-longpress="true"
       ></image>
       <canvas
         class="hideCanvas"