Эх сурвалжийг харах

fix:消息重复、图片上传限制等缺陷

yangfeng 3 жил өмнө
parent
commit
855a37c3e8

+ 1 - 0
src/components/MessageInput.vue

@@ -97,6 +97,7 @@ export default {
       background: transparent;
       color: $color-text--default;
       font-size: 14px;
+      font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
     }
   }
 }

+ 8 - 1
src/components/MessageItem.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="message--item" :class="{'active': active}" @click="$emit('on-click')">
   <div class="head">
-    <el-badge :value="badge" :hidden="!badge">
+    <el-badge :value="badge > 0 ? badge : ''" :hidden="!badge" :max="99" :class="badge > 99 ? 'user-badge' : ''">
       <img :src="headImg" alt="头像" @error="defaultImg">
     </el-badge>
   </div>
@@ -130,6 +130,7 @@ export default {
     border: 1px solid #E0E0E0;
     ::v-deep {
       .el-badge__content {
+        height: auto;
         right: 15px;
         top: 5px;
       }
@@ -186,5 +187,11 @@ export default {
     border-radius: 16px;
     box-sizing: content-box;
   }
+  ::v-deep.user-badge{
+    .el-badge__content{
+      height: auto;
+      right: 30px;
+    }
+  }
 }
 </style>

+ 0 - 2
src/components/action-list/index.vue

@@ -18,7 +18,6 @@
           :http-request="uploadImage"
           :show-file-list="false"
           :multiple="true"
-          :limit="5"
           :before-upload="beforeUploadImage"
           slot="reference"
         >
@@ -32,7 +31,6 @@
           :http-request="uploadFiles"
           :show-file-list="false"
           :multiple="true"
-          :limit="5"
           :before-upload="beforeUploadAttach"
           slot="reference"
         >

+ 6 - 1
src/components/aside/index.vue

@@ -28,7 +28,7 @@
         </div>
       </el-menu-item>
       <el-menu-item index="1">
-        <el-badge :value="badge" :hidden="!badge">
+        <el-badge :value="badge" :hidden="!badge" :max="99" :class="badge > 10 ? 'aside-badge' : ''">
           <em class="icon-message"></em>
         </el-badge>
       </el-menu-item>
@@ -151,6 +151,11 @@ export default {
       height: auto!important;
       visibility: unset!important;
     }
+    .aside-badge{
+      .el-badge__content.is-fixed{
+        right: 20px;
+      }
+    }
   }
 }
 </style>

+ 1 - 1
src/views/ChatView.vue

@@ -494,7 +494,7 @@ export default {
           color: #fff;
           text-decoration: underline;
         }
-      } 
+      }
     }
   }
   .msg-status{

+ 31 - 68
src/views/CustomerServiceView.vue

@@ -60,7 +60,7 @@ import MessageList from '@/components/MessageList'
 import SearchFilter from '@/components/search/'
 import AsideView from '@/components/aside/'
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
-import { getUserList, getMessageCount, createChatSession, findMessage, getServiceInfo, getWebSocketNode } from '@/api/modules/'
+import { getUserList, getMessageCount, findMessage, getServiceInfo, getWebSocketNode } from '@/api/modules/'
 import { dateFormatter, isJSON, isHyperlink, momentTime, imgReg } from '@/utils/'
 
 export default {
@@ -152,8 +152,14 @@ export default {
       const result = list.sort((a, b) => {
         return new Date(a?.create_time.replace(/-/g, '/')).getTime() - new Date(b?.create_time.replace(/-/g, '/')).getTime()
       })
-      console.log(result)
-      return result
+      // console.log(result)
+      const obj = {}
+      const newResult = result.reduce((item, next) => {
+        // eslint-disable-next-line
+        obj[next.messageId] ? '' : obj[next.messageId] = true && item.push(next)
+        return item
+      }, [])
+      return newResult
     },
     // 获取已结束列表
     getEndList () {
@@ -164,6 +170,7 @@ export default {
         return u.userId
       })
       const result = tList.filter(v => {
+        v.badge = 0
         return mergeList.indexOf(v.userId) === -1
       })
       return result
@@ -307,8 +314,8 @@ export default {
       } else if (data.type === 6) {
         // 接收到的消息 认领成功存储会话id
         const { rUserId, sessionId } = data.data
-        Object.assign(this.kfSessionBadge, { [rUserId]: sessionId })
-        this.setKfSessionBadge(this.kfSessionBadge)
+        // Object.assign(this.kfSessionBadge, { [rUserId]: sessionId })
+        // this.setKfSessionBadge(this.kfSessionBadge)
         if (this.other.userId === rUserId) {
           this.other.sessionId = sessionId
           this.showMsgBox = true
@@ -328,6 +335,7 @@ export default {
             create_time: connectTime
           }
           this.saveMessageAction(params).then(res => {
+            params.messageId = res.data.messageId
             this.msgList.push(params)
           })
           const resetSession = this.resetSession // 客服端重新加入会话所存的消息参数
@@ -346,6 +354,7 @@ export default {
             this.selectItem = '会话'
             // 客服发起聊天后
             this.onSendCommon({ apiParams, socketParams })
+            this.other.sessionId = sessionId
             this.showInfo = true
             this.tabIndex = 0
           }
@@ -359,10 +368,7 @@ export default {
           // })
         }
       } else if (data.type === 7) {
-        // 认领失败 更新排队列表
-        // this.webSocketSend({
-        //   type: 9
-        // })
+        // 认领失败
         this.$toast('已被其他客户认领')
       } else if (data.type === 8) {
         // 正常双方通话接收的消息
@@ -374,7 +380,16 @@ export default {
             v.msgType = contentType
             v.message = content
             v.lastTime = momentTime(new Date().getTime(), 'HH:mm:ss')
-            v.badge++
+            if (sUserId !== this.other.userId) {
+              v.badge++
+            } else {
+              v.badge = 0
+              // 未读消息变已读
+              const paramId = {
+                messageId: id
+              }
+              this.modifyMessageAction(paramId)
+            }
           }
         })
         // 更新排队列表中的最后一条消息内容
@@ -388,26 +403,23 @@ export default {
         })
         if (sUserId === this.other.userId) {
           this.msgList.push({
+            messageId: id,
             fool: 2,
             type: contentType,
             content: contentType !== 1 ? JSON.parse(content) : content,
             create_time: dateFormatter(new Date().getTime())
           })
-          // 未读消息变已读
-          const paramId = {
-            messageId: id
-          }
-          this.modifyMessageAction(paramId)
           this.$nextTick(() => {
             this.$refs.userSide?.setScrollTop()
           })
         }
       } else if (data.type === 9) {
         // 系统消息 人工客服自动回复语
-        const { rUserId, content } = data.data
+        const { rUserId, content, id } = data.data
         if (rUserId === this.other.userId) {
           setTimeout(() => {
             this.msgList.push({
+              messageId: id,
               fool: 1,
               type: 1,
               content: content,
@@ -420,10 +432,11 @@ export default {
         }
       } else if (data.type === 10) {
         // 接收结束的会话消息
-        const { rUserId, content } = data.data
+        const { rUserId, content, id } = data.data
         if (rUserId === this.other.userId) {
           // this.showMsgBox = false
           const params = {
+            messageId: id,
             type: 1,
             title: '结束会话',
             content: content,
@@ -487,7 +500,7 @@ export default {
         if (e === '结束') {
           this.showInfo = false
           this.showMsgBox = true
-          this.getUserListFn()
+          this.getUserListFn({})
           // 点已结束 发送一句话即加入会话列表
         } else {
           if (e === '排队') {
@@ -546,56 +559,6 @@ export default {
         this.userList = []
       }
     },
-    /**
-     * 创建会话
-     */
-    async createSessionFn (msgType = 5) {
-      const storageInfo = this.kfSessionBadge
-      if (storageInfo && Object.keys(storageInfo).length > 0) {
-        for (const key in storageInfo) {
-          if (key === this.other.userId && storageInfo[key]) {
-            this.other.sessionId = storageInfo[key]
-            this.getFindMessage()
-            return
-          }
-        }
-      }
-      const { data } = await createChatSession({
-        userType: 1,
-        msgType: msgType, // 消息类型 ;1:站内信消息 2:点对点消息 3:群消息 4:机器人消息 5:客服消息
-        receiveId: this.other.userId,
-        customerserviceName: this.login.nickName
-      })
-      if (data) {
-        this.other.sessionId = data
-        const kfStorage = {
-          [this.other.userId]: data
-        }
-        Object.assign(this.kfSessionBadge, kfStorage)
-        // 存储会话标识
-        this.setKfSessionBadge(this.kfSessionBadge)
-        // 设置首次建立连接时间
-        const connectTime = dateFormatter(new Date().getTime())
-        // 保存建立会话时间
-        const params = {
-          ownType: 2,
-          title: '建立会话',
-          content: `${connectTime}您和${this.other.nickName}建立了会话`,
-          item: 8,
-          itemType: 6,
-          receiveId: this.other.userId,
-          sendId: data,
-          type: 1,
-          link: ''
-        }
-        this.saveMessageAction(params).then(res => {
-          params.fool = 2
-          params.create_time = dateFormatter(new Date().getTime())
-          this.msgList.push(params)
-        })
-        this.loadingMsg = false
-      }
-    },
     /**
      * 分页查询聊天内容
      */

+ 16 - 9
src/views/CustomerView.vue

@@ -153,7 +153,13 @@ export default {
       const result = list.sort((a, b) => {
         return new Date(a?.create_time.replace(/-/g, '/')).getTime() - new Date(b?.create_time.replace(/-/g, '/')).getTime()
       })
-      return result
+      const obj = {}
+      const newResult = result.reduce((item, next) => {
+        // eslint-disable-next-line
+        obj[next.messageId] ? '' : obj[next.messageId] = true && item.push(next)
+        return item
+      }, [])
+      return newResult
     },
     // 获取未读消息总量
     getUnreadCount () {
@@ -299,8 +305,9 @@ export default {
           }
           console.log(params.content)
           this.saveMessageAction(params).then(res => {
-            const { error_code: code } = res
+            const { error_code: code, data } = res
             if (code === 0) {
+              params.messageId = data.messageId
               this.msgList.push(params)
               this.$refs.userSide.setScrollTop()
             } else {
@@ -335,11 +342,7 @@ export default {
             v.message = content
             v.lastTime = momentTime(new Date().getTime(), 'HH:mm:ss')
             if (this.other.userId !== sUserId) {
-              if (v.badge > 99) {
-                v.badge = 99 + '+'
-              } else {
-                v.badge++
-              }
+              v.badge++
             } else {
               v.badge = 0
               const paramId = {
@@ -351,6 +354,7 @@ export default {
         })
         if (sUserId === this.other.userId) {
           this.msgList.push({
+            messageId: id,
             type: contentType,
             content,
             create_time: dateFormatter(new Date().getTime())
@@ -358,7 +362,7 @@ export default {
           this.$refs.userSide?.setScrollTop()
         }
       } else if (data.type === 9) {
-        const { content, rUserId } = data.data
+        const { content, rUserId, id } = data.data
         // 客服自动回复消息
         // 更新聊天列表最后消息及未读数量
         this.userList.forEach(v => {
@@ -378,6 +382,7 @@ export default {
           }
         })
         const params = {
+          messageId: id,
           type: 1,
           title: '文本',
           content: content,
@@ -411,8 +416,9 @@ export default {
       } else if (data.type === 10) {
         // 收到系统消息-关闭会话
         // 系统关闭会话消息由服务端保存 前端只更新列表
-        const { rUserId, content } = data.data
+        const { rUserId, content, id } = data.data
         const params = {
+          messageId: id,
           type: 1,
           title: '结束会话',
           content: content,
@@ -573,6 +579,7 @@ export default {
           if (code === 0) {
             params.create_time = dateFormatter(new Date().getTime())
             params.fool = 2
+            params.messageId = res.data.messageId
             this.msgList.push(params)
           } else {
             params.error = true