feat: ✨ 优化im 接口403判定，新增从买家端以及卖家端进行跳转im权限判定，新增im掉线重连以及重连成功提醒，新增发送的消息断线将会进行重新发送消息提示，优化最近浏览订单列表空展示。注释部分im打印的日志信息

2025-12-18 00:45:54 +08:00 · 2023-03-01 14:59:54 +08:00
parent 32b29f45e7
commit 4700bc995a
16 changed files with 288 additions and 153 deletions
--- a/im/src/components/chat/panel/TalkPanel.vue
+++ b/im/src/components/chat/panel/TalkPanel.vue
@@ -58,16 +58,21 @@
                    {{ item.float == "right" ? name : toUser.name }} |
                    {{ unixToDate(item.createTime, "MM月dd日 hh:mm") }}
                  </span>
-                  <!-- 文本消息 -->
-                  <div v-if="item.messageType == 'MESSAGE'" style="background-color: #d0e9ff;color: black;"
-                    class="text-message" :class="{
-                      left: item.float == 'left',
-                      right: item.float == 'right',
-                    }">
-                    <div class="arrow"></div>
-                    <pre v-if="!emojistwo.includes(item.text)" v-html="item.text" />
-                    <pre v-if="emojistwo.includes(item.text)" v-html="textReplaceEmoji(item.text)" />
+                  <div class="flex flex-a-c">
+                    <i @click="againSendMessage(item)" v-if="item.webSocketStatus" class="el-icon-refresh-left again main-color"></i>
+                    <!-- 文本消息 -->
+                    <div v-if="item.messageType == 'MESSAGE'" style="background-color: #d0e9ff;color: black;"
+                      class="text-message" :class="{
+                        left: item.float == 'left',
+                        right: item.float == 'right',
+                      }">
+                      <div class="arrow"></div>
+                      <pre v-if="!emojistwo.includes(item.text)" v-html="item.text" />
+                      <pre v-if="emojistwo.includes(item.text)" v-html="textReplaceEmoji(item.text)" />
+                    </div>
+                   
                  </div>
+                   <div v-if="item.webSocketStatus" class="tips">网络异常发送失败，请重新发送。</div>

                  <div v-if="item.messageType == 'GOODS' && item.text != null" class="goodsStyle " :class="{
                    left: item.float == 'left',
@@ -93,17 +98,24 @@
                    left: item.float == 'left',
                    right: item.float == 'right',
                  }" @click="linkToOrders(item.text.sn)">
+                  
                    <div class="oedersn">
                      <el-tooltip class="item" effect="dark" :content="item.text.sn" placement="top-start">
                        <a> 订单号:{{ item.text.sn }} </a>
                      </el-tooltip>
                    </div>
                    <div class="goods-shared-box">
-                      <div>
-                        <img :src="item.text.groupImages" style="height: 100px;width: 100px;" />
+                     
+                      <div class="goods-item" v-for="(order,orderIndex) in item.text.orderItems" :key="orderIndex">
+                        <img :src="order.image" style="height: 100px;width: 100px;" />
+                        <div>
+                          <span class="orderGoodsName">{{ order.name }}</span>
+                          <div class="goods-item-price">
+                           <span>{{ order.goodsPrice | unitPrice('￥') }}</span>
+                          </div> 
+                        </div>
                      </div>
                      <div class="shared-goods">
-                      <span class="orderGoodsName">{{ item.text.groupName }}</span>
                      <div class="orderGoodsTime">{{ item.text.paymentTime }}</div>
                      <span class="orderFlowPrice">
                        订单金额：<span>{{ item.text.flowPrice | unitPrice('￥') }}</span>
@@ -395,6 +407,12 @@ export default {
    },
    // #冗余代码结束

+    // 重新发送消息
+    againSendMessage(val){
+     
+      this.submitSendMessage(val.text)
+    },
+
    // 回车键发送消息回调事件
    submitSendMessage (content) {
      const record = {
@@ -848,7 +866,21 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-
+.flex-a-c{
+  align-items: center;
+  >div{
+    margin-left: 10px;
+  }
+}
+.tips{
+  margin-top:10px;
+  color: #999;
+  font-size: 12px;
+}
+.again{
+  margin-top: 5px;
+  cursor: pointer;
+}

 .oderStyle {
  border: 1px solid #f2f2f2;
@@ -926,13 +958,18 @@ export default {

 .orderFlowPrice {
  color: #999;
-
+  
  font-size: 12px;
  >span{
    color: red;
    font-size: 18px;
  }
 }
+.goods-item-price{
+  margin-top: 10px;
+  font-size: 13px;
+   color: red;
+}

 .main-box {
  position: relative;
@@ -1247,7 +1284,14 @@ export default {
  }
 }
 .goods-shared-box{
-  display: flex;
+   cursor: pointer;
+  >.goods-item{
+   
+    margin: 10px 0;
+    display: flex;
+    border-bottom: 1px solid #ededed;
+    align-items: center;
+  }
  >.shared-goods{
    padding-left: 10px;
    display: flex;
--- a/im/src/components/chat/panel/template/footPrint.vue
+++ b/im/src/components/chat/panel/template/footPrint.vue
@@ -3,7 +3,7 @@
    <div class="tab">
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
        <el-tab-pane label="最近浏览" name="goods">
-          <dl>
+          <dl v-if='list.length' class='base-list'>
            <dd :key="index"  @click="linkToGoods(item.goodsId, item.id)" v-for="(item,index) in list" v-infinite-scroll="loadMore">
              <div class="base">
                <div>
@@ -27,32 +27,38 @@
            </dd>

          </dl>
+          <div v-else class='no-more'>
+              {{noMoreList.goods.title}}
+          </div>
        </el-tab-pane>
        <el-tab-pane label="订单列表" name="orders">
-          <dl>
-            <dd v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
+          <dl class='base-order-list' v-if='orderList.length'>
+            <dd  v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
              <div class="order-list">
                <div class="order-top order-padding">
                  <span class="order-sn" @click="linkToOrders(item.sn)">订单号:{{ item.sn }}</span>
                </div>
                <div class="order-section order-padding">
-                  <img :src="item.groupImages" alt="">
-                  <span class="order-goods-name" @click="linkToOrders(item.sn)"> {{ item.groupName }}</span>
+                  <div class="order-items" v-for="(order,orderIndex) in item.orderItems" :key="orderIndex">
+                      <img :src="order.image" alt="">
+                      <span class="order-goods-name" @click="linkToOrders(item.sn)"> {{ order.name }}</span>
+                      <span class="price">{{order.goodsPrice | unitPrice("￥")}}</span>
+                  </div>
+                  <!-- <img  :src="item.groupImages" alt=""> -->
+                 
                  <div class="order-btn ">
                    <el-button class="store-button" v-if="item.btnHide == 1 && toUser.storeFlag"
                      size="mini" @click="submitSendOrderMessage(item, index)" plain>发送</el-button>
                  </div>
                </div>
                <div class="order-footer order-padding">
-                  <span> 订单金额： <span style="color: red;">{{
-                    item.orderItems[0].goodsPrice | unitPrice("￥")
-                  }}</span></span>
+                  <span></span>
                  <el-tag  size='mini' :type="col[item.orderStatus]">{{
                    item.orderStatus == 'STAY_PICKED_UP' ? '待自提'
                      : item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus
                        ==
                        'PAID' ? '已付款' : item.orderStatus == 'UNDELIVERED' ? '待发货' : item.orderStatus == 'DELIVERED'
-                          ? '已发货' : item.orderStatus == 'COMPLETED' ? '已完成' : item.orderStatus == 'TAKE' ? '待校验' :
+                          ? '已发货' : item.orderStatus == 'COMPLETED' ? '已完成' : item.orderStatus == 'TAKE' ? '待核销' :
                            ''
                  }}</el-tag>
                </div>
@@ -61,6 +67,9 @@
            
            </dd>
          </dl>
+          <div v-else class='no-more'>
+              {{noMoreList.orders.title}}
+          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
@@ -78,12 +87,16 @@ export default {
  },
  data () {
    return {
+      noMoreList:{
+        'goods':{title:'暂无最近浏览',value:false},
+        'orders':{title:'暂无订单信息',value:false},
+      },
      activeName: 'goods',
      btnHide: undefined,
      hide: true,
      col: {
-        CANCELLED: 'error',
-        PAID: 'error',
+        CANCELLED: 'danger',
+        PAID: 'danger',
        TAKE: '',
        COMPLETED: 'success',
        DELIVERED: 'danger',
@@ -142,12 +155,14 @@ export default {
    // 发送订单列表
    submitSendOrderMessage (item, index) {
      console.log(item, 'item');
+    
      const context = {
        sn: item.sn,
        groupImages: item.groupImages,
        paymentTime: item.paymentTime,
        groupName: item.groupName,
        flowPrice: item.flowPrice,
+        orderItems:item.orderItems,
        orderStatus: item.orderStatus
      }
      const record = {
@@ -163,7 +178,7 @@ export default {
      item.btnHide = 0
    },
    handleClick (tab, event) {
-      console.log(tab, event);
+      
    }
  },
  props: {
@@ -178,7 +193,7 @@ export default {
  },
  mounted () {
    //  state.user.toUser
-    console.log(this.orderList, '  this.$store.state.user.toUser  this.$store.state.user.toUser  this.$store.state.user.toUser');
+    // console.log(this.orderList, '  this.$store.state.user.toUser  this.$store.state.user.toUser  this.$store.state.user.toUser');
    this.btnHide = localStorage.getItem('btnHide')
  }
 }
@@ -193,7 +208,12 @@ export default {
  white-space: nowrap;
  width: 200px;
 }
-
+.no-more{
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+  margin-top: 20px;
+}

 .box {
  max-width: 362px;
@@ -374,4 +394,18 @@ export default {
 //   height: calc(100vh - 110px);
 //   overflow-y: auto;
 // }
+.base-list{
+  padding-bottom: 120px;
+}
+.base-order-list{
+  padding-bottom: 100px;
+}
+.price{
+  color: red;
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+.order-items{
+  margin-bottom: 10px;
+}
 </style>
--- a/im/src/components/editor/MeEditor.vue
+++ b/im/src/components/editor/MeEditor.vue
@@ -173,7 +173,6 @@ export default {
  methods: {
    // 读取对话编辑草稿信息 并赋值给当前富文本
    getDraftText (index_name) {
-      console.log("findTalk(index_name)", findTalk(index_name));
      return findTalk(index_name)?.draft_text || "";
    },

--- a/im/src/components/face.vue
+++ b/im/src/components/face.vue
@@ -1,5 +1,5 @@
 <template>
-    <img :src="text" alt=""/>
+    <img :src="text || 'https://avatars.dicebear.com/api/initials/'+name+'.svg?fontSize=38'" alt=""/>
 </template>

 <script>
@@ -8,7 +8,11 @@
            text:{
                type:null,
                default:''
-            }
+            },
+            name:{
+                type:null,
+                default:''
+            },
        }
    }
 </script>