feat: 添加数量展示

src/views/customerService/chatDetail.vue

@@ -8,11 +8,11 @@
     <el-container v-loading="loading" style="width: 100%;height: 100%; border: 1px solid #eee">
       <el-aside style="width: 25%;background-color: white;padding: 0">
         <el-tabs style="padding: 10px 10px 0;" @tab-click="handleClick">
-          <el-tab-pane v-for="(item, indexNum) in customerList" :key="item.code" >
+          <el-tab-pane v-for="(item) in customerList" :key="item.code" >
             <div slot="label">
               <div class="span-box">
                 <span>{{ item.name }}</span>
-                <div v-if="indexNum === currentCustomerIndex && totalUnreadMessageCount > 0" class="span-box__num"/>
+                <div v-if="item.unReadMessageCount > 0" class="span-box__num"/>
               </div>
             </div>
           </el-tab-pane>
@@ -76,7 +76,7 @@
         </div>
       </el-main>
       <el-aside style="width: 25%;background-color: white;padding: 10px">
-        <ChatUserInfo :chat-user-info="chatUserInfo"/>
+        <ChatUserInfo v-if="chatUserInfo && chatUserInfo.user" :chat-user-info="chatUserInfo"/>
       </el-aside>
     </el-container>
 
@@ -125,9 +125,6 @@ export default {
       if (this.customerList && this.customerList.length > 0 && this.currentCustomerIndex <= this.customerList.length - 1) {
         return this.customerList[this.currentCustomerIndex]
       }
-    },
-    isShowTotalUnRead(index) {
-      return index === this.currentCustomerIndex && this.totalUnreadMessageCount
     }
   },
 
@@ -135,7 +132,6 @@ export default {
   },
   created() {
     console.log('==环境==', process.env.NODE_ENV)
-    chat.on(TencentCloudChat.EVENT.SDK_READY, this.onSdkReady)
     this.handleGetUserInfo()
     this.handleGetChatList()
   },
@@ -199,7 +195,13 @@ export default {
       this.nextReqMessageID = ''
       this.messageList = []
       this.messageContent = ''
-      this.totalUnreadMessageCount = 0
+      this.totalUnreadMessageCount = -1
+      this.customerList = this.customerList.map((item) => {
+        return {
+          ...item,
+          unReadMessageCount: 0
+        }
+      })
     },
     /**
      * 获取客服列表
@@ -265,6 +267,8 @@ export default {
      * IM 登录
      */
     handleImLoin(userId, userSign) {
+      chat.on(TencentCloudChat.EVENT.SDK_READY, this.onSdkReady)
+      chat.on(TencentCloudChat.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED, this.onTotalUnreadMessageCountUpdated)
       console.log('====用户信息===', userId, userSign) // 登录成功
       this.closeLoading()
       const promise = chat.login({ userID: this.envText + userId, userSig: userSign })
@@ -273,9 +277,7 @@ export default {
         console.log('====登录成功===', imResponse.data) // 登录成功
         chat.on(TencentCloudChat.EVENT.CONVERSATION_LIST_UPDATED, this.onConversationListUpdated)
         chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, this.onMessageReceived)
-        chat.on(TencentCloudChat.EVENT.TOTAL_UNREAD_MESSAGE_COUNT_UPDATED, this.onTotalUnreadMessageCountUpdated)
         this.handleGetConversationList()
-
         if (imResponse.data.repeatLogin === true) {
           // 标识账号已登录，本次登录操作为重复登录。
           console.log(imResponse.data.errorInfo)
@@ -345,7 +347,7 @@ export default {
      * */
     onTotalUnreadMessageCountUpdated(event) {
       console.log('====会话未读总数', event.data) // 当前单聊和群聊会话的未读总数
-      this.totalUnreadMessageCount = event.data
+      // this.totalUnreadMessageCount = event.data
     },
     /**
      * 获取会话列表
@@ -355,7 +357,6 @@ export default {
       promise.then((imResponse) => {
         // 全量的会话列表，用该列表覆盖原有的会话列表
         const conversationList = imResponse.data.conversationList
-        this.totalUnreadMessageCount = chat.getTotalUnreadMessageCount()
         this.setConversationList(conversationList)
       }).catch((imError) => {
         // 获取会话列表失败的相关信息
@@ -377,6 +378,7 @@ export default {
         this.conversationList = []
       } else {
         const newList = []
+        let num = 0
         list.map((item) => {
           const object = {
             conversationID: item.conversationID || '',
@@ -388,8 +390,12 @@ export default {
             isPinned: item.isPinned,
             unreadCount: item.unreadCount || 0
           }
+          num = num + (item.unreadCount || 0)
           newList.push(object)
         })
+        this.customerList[this.currentCustomerIndex].unReadMessageCount = num
+        this.totalUnreadMessageCount = num
+        console.log('=====数量, ', this.totalUnreadMessageCount)
         this.conversationList = newList
       }
     },

src/views/customerService/components/chatUserInfo.vue

@@ -42,17 +42,24 @@ export default {
   props: {
     chatUserInfo: {
       type: Object,
-      required: true
+      required: true,
+      default: () => {
+        return {
+          user: {
+            remark: ''
+          }
+        }
+      }
     }
   },
   data() {
     return {
-      preRemark: this.chatUserInfo.user && this.chatUserInfo.user.remark || ''
+      preRemark: this.chatUserInfo && this.chatUserInfo.user && this.chatUserInfo.user.remark || ''
     }
   },
   methods: {
     handleBlur() {
-      if (this.chatUserInfo.user.remark && this.chatUserInfo.user.remark !== this.preRemark) {
+      if (this.chatUserInfo && this.chatUserInfo.user && this.chatUserInfo.user.remark && this.chatUserInfo.user.remark !== this.preRemark) {
         const params = {
           user: this.chatUserInfo.user.id,
           remark: this.chatUserInfo.user.remark