소스 검색

feat:客服端重新加入会话逻辑&方法提取封装

yangfeng 3 년 전
부모
커밋
036bab60d5
6개의 변경된 파일175개의 추가작업 그리고 177개의 파일을 삭제
  1. 1 0
      .gitignore
  2. 10 11
      src/components/CustomerInfo.vue
  3. 3 9
      src/store/modules/webSocket.js
  4. 151 150
      src/views/CustomerServiceView.vue
  5. 1 1
      src/views/CustomerView.vue
  6. 9 6
      vue.config.js

+ 1 - 0
.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/page_pc_social
 
 
 # local env files

+ 10 - 11
src/components/CustomerInfo.vue

@@ -202,12 +202,12 @@ export default {
     },
     // 获取会话是否已评价
     async getEvalInfo () {
-      this.evalLoading = false
+      this.evalLoading = true
       const { data } = await isEvalInfo({
         chatSessionId: this.sessionId
       })
       if (data) {
-        this.evalLoading = true
+        // this.evalLoading = true
         this.evalNum = data.handle_status
       }
     },
@@ -219,16 +219,15 @@ export default {
         handleStatus: result,
         handleRemark: remark
       })
-      if (code === 0) {
-        this.getEvalInfo()
-        // 客服总结完结束会话
-        const params = {
-          sUserType: 2,
-          sUserId: this.userId,
-          sessionId: this.sessionId
-        }
-        this.$emit('end-session', params)
+      console.log(code)
+      this.getEvalInfo()
+      // 客服总结完结束会话
+      const params = {
+        sUserType: 2,
+        sUserId: this.userId,
+        sessionId: this.sessionId
       }
+      this.$emit('end-session', params)
     },
     handleCurrentChange (currentPage) {
       this.listInfo.pageNum = currentPage

+ 3 - 9
src/store/modules/webSocket.js

@@ -19,18 +19,12 @@ export default {
       if (state.webSocket) {
         return
       }
-      let wsUrl = ''
-      if (process.env.NODE_ENV === 'production') {
-        const { url } = params
-        wsUrl = url
-      } else {
-        wsUrl = `ws://${location.host}/chatCenter/ws`
-      }
+      const { url } = params
       if ('WebSocket' in window) {
-        state.webSocket = new WebSocket(wsUrl)
+        state.webSocket = new WebSocket(url)
       } else if ('MozWebSocket' in window) {
         // eslint-disable-next-line
-        state.webSocket = new MozWebSocket(wsUrl)
+        state.webSocket = new MozWebSocket(url)
       } else {
         return MessageBox.alert('您的浏览器不支持websocket协议,建议使用新版谷歌、火狐等浏览器,请勿使用IE10以下浏览器,360浏览器请使用极速模式,不要使用兼容模式!', '提示', {
           showClose: false,

+ 151 - 150
src/views/CustomerServiceView.vue

@@ -114,7 +114,8 @@ export default {
       },
       lastMsgId: 0,
       selectItem: '', // 当前点击的是哪个列表 '会话' '排队' '结束'
-      loadingMsg: true
+      loadingMsg: true,
+      resetSession: {} // 客服从已结束会话发起聊天 发送聊天要存的参数 key为userId, value为保存发送消息所用到的参数
     }
   },
   computed: {
@@ -291,14 +292,51 @@ export default {
         if (this.other.userId === rUserId) {
           this.other.sessionId = sessionId
           this.showMsgBox = true
-          this.$nextTick(() => {
-            this.$refs.userSide?.setScrollTop()
+          // 保存建立会话时间
+          const connectTime = dateFormatter(new Date().getTime())
+          const params = {
+            ownType: 2,
+            title: '建立会话',
+            content: `${connectTime}您和${this.other.nickName}建立了会话`,
+            item: 8,
+            itemType: 6,
+            receiveId: rUserId,
+            sendId: sessionId,
+            type: 1,
+            link: '',
+            fool: 2,
+            create_time: connectTime
+          }
+          this.saveMessageAction(params).then(res => {
+            this.msgList.push(params)
+          })
+
+          const resetSession = this.resetSession // 客服端重新加入会话所存的消息参数
+          if (resetSession[rUserId] && Object.keys(resetSession[rUserId]).length > 0) {
+            const apiParams = resetSession[rUserId]
+            const socketParams = {
+              type: 6,
+              contentType: apiParams?.type,
+              content: apiParams?.content,
+              sUserType: 1,
+              rUserId: rUserId,
+              rUserType: 2,
+              sessionId: sessionId
+            }
+            // 客服发起聊天后
+            this.onSendCommon({ apiParams, socketParams })
+            this.showInfo = true
+          }
+          // 更新会话列表
+          this.webSocketSend({
+            type: 10
+          })
+          // 更新排队列表
+          this.webSocketSend({
+            type: 9
           })
+          this.selectItem = '会话'
         }
-        // 更新排队列表
-        this.webSocketSend({
-          type: 9
-        })
       } else if (data.type === 7) {
         // 认领失败 更新排队列表
         this.webSocketSend({
@@ -352,19 +390,21 @@ export default {
       } else if (data.type === 10) {
         // 接收结束的会话消息
         const { rUserId, content } = data.data
-        const params = {
-          type: 1,
-          title: '结束会话',
-          content: content,
-          fool: 1,
-          create_time: dateFormatter(new Date().getTime())
-        }
-        this.msgList.push(params)
-        this.$nextTick(() => {
-          this.$refs?.userSide.setScrollTop()
-        })
         if (rUserId === this.other.userId) {
-          this.showMsgBox = false
+          // this.showMsgBox = false
+          const params = {
+            type: 1,
+            title: '结束会话',
+            content: content,
+            fool: 1,
+            create_time: dateFormatter(new Date().getTime())
+          }
+          this.msgList.push(params)
+          this.$nextTick(() => {
+            this.$refs?.userSide.setScrollTop()
+            this.showInfo = false
+            this.selectItem = '结束'
+          })
         }
         // 移除存储的会话标识
         const storageBadge = this.kfSessionBadge
@@ -546,7 +586,7 @@ export default {
     resetJoinSession (message, type) {
       if (this.selectItem === '结束') {
         // 已结束的 加入会话中
-        const { nickName, headImg, userType, userId, sessionId } = this.other
+        const { nickName, headImg, userType, userId } = this.other
         // 加入会话
         this.webSocketSend({
           type: 14,
@@ -555,15 +595,12 @@ export default {
           nickName: nickName,
           headImg: headImg,
           content: message,
-          contentType: type,
-          sessionId: sessionId
+          contentType: type
         })
         // 更新会话列表
         this.webSocketSend({
           type: 10
         })
-        this.createSessionFn()
-        this.selectItem = '会话'
       }
     },
     /**
@@ -571,7 +608,8 @@ export default {
      */
     onSendMsg (data) {
       const { content } = data
-      const params = {
+      // 保存接口所需参数
+      const apiParams = {
         receiveId: this.other.userId,
         sendId: this.other.sessionId,
         ownType: this.other.userType, // 对方身份
@@ -583,41 +621,28 @@ export default {
         type: isHyperlink(content) ? 2 : 1,
         ...data
       }
-      // 保存并发送
-      this.saveMessageAction(params).then(res => {
-        const { error_code: code } = res
-        const contentType = isHyperlink(content) ? 2 : 1 // contentType 1: 文本 2.链接 3.附件
-        const msgSocket = {
-          type: 6,
-          contentType: contentType,
-          content: content,
-          sUserType: 1,
-          rUserId: this.other.userId,
-          rUserType: 2,
-          sessionId: this.other.sessionId
-        }
-        if (code === 0) {
-          this.webSocketSend(msgSocket)
-          this.msgList.push(params)
-          // 重新加入会话
-          this.resetJoinSession(content, contentType)
-        } else {
-          params.error = true
-          this.msgList.push(params)
-        }
-        this.getUserListFn({})
-        // 更新会话列表
-        this.webSocketSend({
-          type: 10
-        })
-        this.$refs.userSide?.setScrollTop()
-      })
+      const contentType = isHyperlink(content) ? 2 : 1 // contentType 1: 文本 2.链接 3.附件
+      // websocket发送消息所需参数
+      const socketParams = {
+        type: 6,
+        contentType: contentType,
+        content: content,
+        sUserType: 1,
+        rUserId: this.other.userId,
+        rUserType: 2,
+        sessionId: this.other.sessionId
+      }
+      const params = {
+        apiParams,
+        socketParams
+      }
+      this.onSendCommon(params)
     },
     /**
      * 发送答案
      */
     onSendAnswer (data) {
-      const params = {
+      const apiParams = {
         receiveId: this.other.userId,
         sendId: this.other.sessionId,
         ownType: this.other.userType, // 对方身份
@@ -630,41 +655,27 @@ export default {
         type: isHyperlink(data) ? 2 : 1,
         create_time: dateFormatter(new Date().getTime())
       }
-      this.saveMessageAction(params).then(res => {
-        const { error_code: code } = res
-        const contentType = isHyperlink(data) ? 2 : 1
-        const msgSocket = {
-          type: 6,
-          contentType: contentType,
-          content: data,
-          sUserType: 1,
-          rUserId: this.other.userId,
-          rUserType: 2,
-          sessionId: this.other.sessionId
-        }
-        if (code === 0) {
-          this.webSocketSend(msgSocket)
-          this.msgList.push(params)
-          // 重新加入会话
-          this.resetJoinSession(data, contentType)
-        } else {
-          params.error = true
-          this.msgList.push(params)
-        }
-        this.getUserListFn({})
-        // 更新会话列表
-        this.webSocketSend({
-          type: 10
-        })
-        this.$refs.userSide?.setScrollTop()
-      })
+      const contentType = isHyperlink(data) ? 2 : 1
+      const socketParams = {
+        type: 6,
+        contentType: contentType,
+        content: data,
+        sUserType: 1,
+        rUserId: this.other.userId,
+        rUserType: 2,
+        sessionId: this.other.sessionId
+      }
+      const params = {
+        apiParams,
+        socketParams
+      }
+      this.onSendCommon(params)
     },
     /**
      * 保存发送图片消息
      */
     onUploadImage (data) {
-      console.log(data)
-      const params = {
+      const apiParams = {
         receiveId: this.other.userId,
         sendId: this.other.sessionId,
         ownType: this.other.userType, // 对方身份
@@ -677,39 +688,22 @@ export default {
         content: JSON.stringify(data),
         create_time: dateFormatter(new Date().getTime())
       }
-      this.saveMessageAction(params).then(res => {
-        const { error_code: code } = res
-        const msgSocket = {
-          type: 6,
-          contentType: 3,
-          content: JSON.stringify(data),
-          sUserType: 1,
-          rUserId: this.other.userId,
-          rUserType: 2,
-          sessionId: this.other.sessionId
-        }
-        if (code === 0) {
-          this.webSocketSend(msgSocket)
-          this.msgList.push(params)
-          // 重新加入会话
-          this.resetJoinSession(JSON.stringify(data), 3)
-        } else {
-          params.error = true
-          this.msgList.push(params)
-        }
-        this.getUserListFn({})
-        // 更新会话列表
-        this.webSocketSend({
-          type: 10
-        })
-        this.$refs.userSide?.setScrollTop()
-      })
+      const socketParams = {
+        type: 6,
+        contentType: 3,
+        content: JSON.stringify(data),
+        sUserType: 1,
+        rUserId: this.other.userId,
+        rUserType: 2,
+        sessionId: this.other.sessionId
+      }
+      this.onSendCommon({ apiParams, socketParams })
     },
     /**
      * 保存发送附件消息
      */
     onUploadAttach (data) {
-      const params = {
+      const apiParams = {
         receiveId: this.other.userId,
         sendId: this.other.sessionId,
         ownType: this.other.userType, // 对方身份
@@ -722,33 +716,16 @@ export default {
         content: JSON.stringify(data),
         create_time: dateFormatter(new Date().getTime())
       }
-      this.saveMessageAction(params).then(res => {
-        const { error_code: code } = res
-        const msgSocket = {
-          type: 6,
-          contentType: 4,
-          content: JSON.stringify(data),
-          sUserType: 1,
-          rUserId: this.other.userId,
-          rUserType: 2,
-          sessionId: this.other.sessionId
-        }
-        if (code === 0) {
-          this.webSocketSend(msgSocket)
-          this.msgList.push(params)
-        } else {
-          params.error = true
-          this.msgList.push(params)
-          // 重新加入会话
-          this.resetJoinSession(JSON.stringify(data), 4)
-        }
-        // 更新会话列表
-        this.webSocketSend({
-          type: 10
-        })
-        this.getUserListFn({})
-        this.$refs.userSide?.setScrollTop()
-      })
+      const socketParams = {
+        type: 6,
+        contentType: 4,
+        content: JSON.stringify(data),
+        sUserType: 1,
+        rUserId: this.other.userId,
+        rUserType: 2,
+        sessionId: this.other.sessionId
+      }
+      this.onSendCommon({ apiParams, socketParams })
     },
     // 发送失败-重新发送
     onResetSend (data) {
@@ -760,16 +737,17 @@ export default {
         }
       })
       data.content = JSON.stringify(data?.content)
-      this.saveMessageAction(data).then(res => {
-        if (res.error_code === 0) {
-          this.msgList.push(data)
-          this.robotAutoReply(JSON.stringify(data))
-        } else {
-          data.error = true
-          this.msgList.push(data)
-        }
-      })
-      this.$refs.userSide?.setScrollTop()
+      const apiParams = data
+      const socketParams = {
+        type: 6,
+        contentType: data?.type,
+        content: data.content,
+        sUserType: 1,
+        rUserId: this.other.userId,
+        rUserType: 2,
+        sessionId: this.other.sessionId
+      }
+      this.onSendCommon({ apiParams, socketParams })
     },
     // 加载更多
     onLoadMore () {
@@ -838,6 +816,29 @@ export default {
       this.webSocketSend({
         type: 10
       })
+    },
+    /**
+     * 保存并发送封装方法
+     */
+    async onSendCommon (params) {
+      console.log(params, 'params')
+      const { apiParams, socketParams } = params
+      const { content, type } = apiParams
+      // 从已结束列表进入聊天, 发送消息,根据是否认领成功 决定是否保存消息
+      if (this.selectItem === '结束') {
+        this.resetJoinSession(content, type)
+        this.resetSession[this.other.userId] = apiParams
+        return
+      }
+      const { error_code: code } = await this.saveMessageAction(apiParams)
+      if (code === 0) {
+        this.webSocketSend(socketParams)
+        this.msgList.push(apiParams)
+      } else {
+        apiParams.error = true
+        this.msgList.push(apiParams)
+      }
+      this.$refs.userSide?.setScrollTop()
     }
   }
 }

+ 1 - 1
src/views/CustomerView.vue

@@ -219,7 +219,7 @@ export default {
         this.webSocketInit({
           url: data,
           callback: () => {
-            // 设置用户身份 
+            // 设置用户身份
             this.webSocketSend({
               type: 19
             })

+ 9 - 6
vue.config.js

@@ -37,28 +37,31 @@ module.exports = defineConfig({
     },
     historyApiFallback: true,
     proxy: {
-      '^/api/userCenter': {
+      '^/jyapi/userCenter': {
         target: 'http://192.168.3.240:8077',
+        // target: 'https://jybx3-webtest.jydev.jianyu360.com',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
-          '^/api': ''
+          '^/jyapi': ''
         }
       },
-      '^/api/orderApplication': {
+      '^/jyapi/orderApplication': {
         target: 'http://192.168.3.240:8077',
+        // target: 'https://jybx3-webtest.jydev.jianyu360.com',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
-          '^/api': ''
+          '^/jyapi': ''
         }
       },
-      '^/api': {
+      '^/jyapi': {
         target: 'http://192.168.3.240:8077',
+        // target: 'https://jybx3-webtest.jydev.jianyu360.com',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
-          '^/api': ''
+          '^/jyapi': ''
         }
       }
     }