feat：输入超链接页面卡死&换行处理&未读消息处理

src/utils/globalFunctions.js

@@ -719,3 +719,13 @@ export function formatNum(s) {
   var money = t.split('').reverse().join('') + point + right
   return money
 }
+
+export function getLink(str) {
+  if (!str) return
+  const reg = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/
+  const strValue = str.match(reg)
+  if (strValue && strValue.length > 0) {
+    return strValue[0]
+  }
+  return null
+}

src/views/ChatView.vue

@@ -50,7 +50,7 @@
                     </div>
                   </a>
                   <div v-else class="message-box-flex">
-                    <div class="msg-text-box" :class="{'self-msg': item.fool === 1}">
+                    <div class="msg-text-box" :class="{'self-msg': item.fool === 1, 'short-text-box': oneselfInfo.userType === 1 && otherInfo.userType === 2 && item.fool !== 1}">
                       <span class="hy-text" v-html="textAddLink(formatSpace(item.content))" v-if="oneselfInfo.userType === 2&&item.fool === 1"></span>
                       <span class="hy-text" v-else>
                         <span v-html="imgAddBig(formatSpace(item.content))"></span>
@@ -118,7 +118,7 @@ import ActionList from '@/components/action-list/'
 import MessageInput from '@/components/MessageInput'
 import Rate from '@/components/rate/'
 import { customerEval, isEvalInfo, recommendAnswer } from '@/api/modules/'
-import { dateFormatter, sizeFormatter, isHyperlink, textAddLink, imgAddBig, momentTime } from '@/utils/'
+import { dateFormatter, sizeFormatter, textAddLink, imgAddBig, momentTime } from '@/utils/'
 // uploadImgToBase64
 export default {
   name: 'ChatView',
@@ -218,7 +218,6 @@ export default {
   methods: {
     momentTime,
     sizeFormatter,
-    isHyperlink,
     textAddLink,
     imgAddBig,
     defaultImg (event) {
@@ -474,7 +473,9 @@ export default {
     padding: 8px 24px;
     border-radius: 8px;
     background: #fff;
-    word-break: break-word;
+    word-break: break-all;
+    word-wrap: break-word;
+    max-width: 400px;
     ::v-deep .hy-text {
       a {
         color: #2CB7CA;
@@ -499,6 +500,9 @@ export default {
         }
       }
     }
+    &.short-text-box{
+      max-width: 290px;
+    }
   }
   .msg-status{
     display: flex;

src/views/CustomerServiceView.vue

@@ -12,7 +12,7 @@
               <span :class="{'active': tabIndex === 1 }" @click="onClickTab(1)">已结束用户（{{getEndList.length || 0}}）</span>
             </div>
             <div v-if="tabIndex === 0">
-              <message-list :list="dialogueList" @select="onSelectCurMsg($event, '会话')"></message-list>
+              <message-list :list="loadingList" @select="onSelectCurMsg($event, '会话')"></message-list>
               <message-list :title="'排队中（' + queueList.length + '）'" :list="queueList" @select="onSelectCurMsg($event, '排队')"></message-list>
             </div>
             <div v-else-if="tabIndex === 1">
@@ -42,7 +42,7 @@
         >
         </ChatView>
         <div class="message--info-group" v-if="showInfo">
-          <customer-info :userId="other.userId" :sessionId="other.sessionId" @end-session="onEndSession" :key="other.userId"></customer-info>
+          <customer-info :userId="other.userId" :sessionId="other.sessionId" @end-session="onEndSession" :key="other.sessionId"></customer-info>
         </div>
       </el-container>
       <el-container class="message--empty-group" v-else>
@@ -61,7 +61,7 @@ import SearchFilter from '@/components/search/'
 import AsideView from '@/components/aside/'
 import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
 import { getUserList, getMessageCount, findMessage, getServiceInfo, getWebSocketNode } from '@/api/modules/'
-import { dateFormatter, isJSON, isHyperlink, momentTime, imgReg } from '@/utils/'
+import { dateFormatter, isJSON, getLink, momentTime, imgReg } from '@/utils/'
 
 export default {
   name: 'CustomerView',
@@ -117,7 +117,8 @@ export default {
       lastMsgId: '0',
       selectItem: '', // 当前点击的是哪个列表 '会话' '排队' '结束'
       loadingMsg: true,
-      resetSession: {} // 客服从已结束会话发起聊天 发送聊天要存的参数 key为userId, value为保存发送消息所用到的参数
+      resetSession: {}, // 客服从已结束会话发起聊天 发送聊天要存的参数 key为userId, value为保存发送消息所用到的参数
+      badgeMap: {}
     }
   },
   computed: {
@@ -187,6 +188,13 @@ export default {
       } else {
         return 0
       }
+    },
+    loadingList () {
+      this.dialogueList.forEach(v => {
+        console.log(v, this.badgeMap)
+        v.badge = this.badgeMap[v.userId]
+      })
+      return this.dialogueList
     }
   },
   watch: {
@@ -271,7 +279,7 @@ export default {
     /**
      * 处理websocket接收到的消息 根据type值判断
      */
-    todoMessage (res) {
+    async todoMessage (res) {
       const data = JSON.parse(res.data)
       console.log(data)
       if (data.type === 2) {
@@ -358,14 +366,6 @@ export default {
             this.showInfo = true
             this.tabIndex = 0
           }
-          // // 更新会话列表
-          // this.webSocketSend({
-          //   type: 10
-          // })
-          // // 更新排队列表
-          // this.webSocketSend({
-          //   type: 9
-          // })
         }
       } else if (data.type === 7) {
         // 认领失败
@@ -379,9 +379,12 @@ export default {
           if (v.userId === sUserId) {
             v.msgType = contentType
             v.message = content
+            v.badge = v.badge ? v.badge : 0
             v.lastTime = momentTime(new Date().getTime(), 'HH:mm:ss')
             if (sUserId !== this.other.userId) {
               v.badge++
+              this.badgeMap[sUserId] = v.badge
+              // console.log(this.badgeMap, v.badge, 'mao')
             } else {
               v.badge = 0
               // 未读消息变已读
@@ -467,6 +470,7 @@ export default {
      * 切换用户聊天窗口
      */
     onSelectCurMsg (data, e) {
+      console.log(this.badgeMap, '333')
       // 点击添加节流，3s内不能重复点击
       // 设置定时器
       // 设置现在的时间
@@ -516,7 +520,6 @@ export default {
             })
           } else {
             this.other.sessionId = sessionId
-            console.log(this.other.sessionId, 'this.other.sessionId')
             this.showMsgBox = true
           }
           this.showInfo = true
@@ -555,6 +558,13 @@ export default {
             active: false
           }
         })
+        const temp = {}
+        data.forEach(s => {
+          if (s.number) {
+            temp[s.userId] = s.number
+          }
+        })
+        this.badgeMap = temp
       } else {
         this.userList = []
       }
@@ -621,19 +631,20 @@ export default {
     onSendMsg (data) {
       const { content } = data
       // 保存接口所需参数
+      const isLink = getLink(content) === content
       const apiParams = {
         receiveId: this.other.userId,
         sendId: this.other.sessionId,
         ownType: this.other.userType, // 对方身份
-        title: isHyperlink(content) ? '链接' : '文本',
+        title: isLink ? '链接' : '文本',
         item: 8,
         itemType: 5,
-        link: isHyperlink(content) ? content : '',
+        link: isLink ? content : '',
         fool: 1,
-        type: isHyperlink(content) ? 2 : 1,
+        type: isLink ? 2 : 1,
         ...data
       }
-      const contentType = isHyperlink(content) ? 2 : 1 // contentType 1: 文本 2.链接 3.附件
+      const contentType = isLink ? 2 : 1 // contentType 1: 文本 2.链接 3.附件
       // websocket发送消息所需参数
       const socketParams = {
         type: 6,
@@ -654,20 +665,21 @@ export default {
      * 发送答案
      */
     onSendAnswer (data) {
+      const isLink = getLink(data) === data
       const apiParams = {
         receiveId: this.other.userId,
         sendId: this.other.sessionId,
         ownType: this.other.userType, // 对方身份
-        title: isHyperlink(data) ? '链接' : '文本',
+        title: isLink ? '链接' : '文本',
         content: data,
         item: 8,
         itemType: 5,
-        link: isHyperlink(data) ? data : '',
+        link: isLink ? data : '',
         fool: 1,
-        type: isHyperlink(data) ? 2 : 1,
+        type: isLink ? 2 : 1,
         create_time: dateFormatter(new Date().getTime())
       }
-      const contentType = isHyperlink(data) ? 2 : 1
+      const contentType = isLink ? 2 : 1
       const socketParams = {
         type: 6,
         contentType: contentType,

src/views/CustomerView.vue

@@ -45,7 +45,7 @@ import AsideView from '@/components/aside/'
 import MessageList from '@/components/MessageList'
 import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
 import { robotInfo, createChatSession, findMessage, getUserList, getMessageCount, getUserInfo, closeChatSession, getWebSocketNode, robotFindAnswer } from '@/api/modules/'
-import { dateFormatter, isJSON, isHyperlink, momentTime, imgReg } from '@/utils/'
+import { dateFormatter, isJSON, getLink, momentTime, imgReg } from '@/utils/'
 
 export default {
   name: 'CustomerServiceView',
@@ -629,7 +629,6 @@ export default {
     },
     // 机器人根据问题自动回复
     async robotAutoReply (question, type = 1) {
-      console.log(question, '1111')
       // 如果是跟用户或者人工聊则不用自动回复
       if (this.other.userType === 2 || !this.other.isRobot) return
       const kfKeywords = ['客服', '人工', '人工客服']
@@ -777,22 +776,23 @@ export default {
     // 发送、存储文本消息
     onSendMsg (data) {
       const { content } = data
-      console.log(content, isHyperlink(content))
+      // console.log(content, getLink(content), getLink(content) === content, '66666')
+      const isLink = getLink(content) === content
       const apiParams = {
         receiveId: this.other.userType === 2 ? this.other.userId : this.other.sessionId,
         ownType: this.other.userType, // 对方身份
-        title: isHyperlink(content) ? '链接' : '文本',
+        title: isLink ? '链接' : '文本',
         item: 8,
         itemType: this.other.userType === 2 ? 2 : 5, // 机器人是5 人工是4
-        link: isHyperlink(content) ? content : '',
-        type: isHyperlink(content) ? 2 : 1,
+        link: isLink ? content : '',
+        type: isLink ? 2 : 1,
         fool: 1,
         ...data
       }
       const socketParams = {
         type: 6,
         content: content,
-        contentType: isHyperlink(content) ? 2 : 1,
+        contentType: isLink ? 2 : 1,
         sUserType: 2,
         rUserId: this.other.userId,
         rUserType: this.other.userType,