From ad989779a2ed5263c2bcdc318bad2ae94507df0a Mon Sep 17 00:00:00 2001 From: ch Date: Mon, 13 Jun 2022 15:47:03 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E4=B8=8D=E8=83=BD?= =?UTF-8?q?=E8=B7=B3=E5=88=B0=E6=9C=80=E5=BA=95=E4=B8=8B=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/chat/index.js | 2 +- src/store/modules/im/im.js | 4 +-- src/utils/im.js | 3 +-- src/utils/msb-im.js | 4 ++- src/views/chat/index.vue | 53 +++++++++++++++++++------------------- 5 files changed, 34 insertions(+), 32 deletions(-) diff --git a/src/api/chat/index.js b/src/api/chat/index.js index 47484c2..e98fb7d 100644 --- a/src/api/chat/index.js +++ b/src/api/chat/index.js @@ -2,7 +2,7 @@ * @Author: xwk * @Date: 2022-05-24 17:00:26 * @LastEditors: ch - * @LastEditTime: 2022-06-11 18:41:23 + * @LastEditTime: 2022-06-13 14:26:53 * @Description: file content */ import request from '@/utils/request.js'; diff --git a/src/store/modules/im/im.js b/src/store/modules/im/im.js index 760fe51..131dc85 100644 --- a/src/store/modules/im/im.js +++ b/src/store/modules/im/im.js @@ -2,7 +2,7 @@ * @Author: ch * @Date: 2022-06-07 15:41:05 * @LastEditors: ch - * @LastEditTime: 2022-06-13 14:03:18 + * @LastEditTime: 2022-06-13 14:32:42 * @Description: file content */ import * as api from '@/api/chat'; @@ -107,7 +107,7 @@ const getters = { }; const mutations = { SET_CUR_SERVICE(state, data) { - state.curCustomerService = data; + state.curCustomerService = data || {}; }, SET_SESSION_DATA(state, data) { state.sessionData = data; diff --git a/src/utils/im.js b/src/utils/im.js index bbe97df..8a0bc70 100644 --- a/src/utils/im.js +++ b/src/utils/im.js @@ -2,7 +2,7 @@ * @Author: ch * @Date: 2022-06-07 15:52:37 * @LastEditors: ch - * @LastEditTime: 2022-06-13 14:14:26 + * @LastEditTime: 2022-06-13 15:46:19 * @Description: file content */ import * as api from '@/api/chat'; @@ -15,7 +15,6 @@ const Im = new MsbIm({ }); const ImInit = (waiterId) => { return new Promise((reslove, reject) => { - console.log(waiterId, 'waiterId'); api.getCustomeServiceTicket().then(async (res) => { console.log(res); const par = FormatJsonSearch({ diff --git a/src/utils/msb-im.js b/src/utils/msb-im.js index 2bec60b..b94d6bb 100644 --- a/src/utils/msb-im.js +++ b/src/utils/msb-im.js @@ -2,7 +2,7 @@ * @Author: ch * @Date: 2022-05-18 14:54:47 * @LastEditors: ch - * @LastEditTime: 2022-06-10 19:15:46 + * @LastEditTime: 2022-06-13 15:16:50 * @Description: file content */ import '@/utils/poto-req'; @@ -369,6 +369,8 @@ class MsbIm { } // 点发送，立即把消息加入消息列表，标记为发送中状态 curSession.messageList.push(msgCtx); + this.setSessionData(this.sessionData); + // 超过时间未返回视为发送失败 this.timerStatus(msgCtx); diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue index c38e8c2..843b884 100644 --- a/src/views/chat/index.vue +++ b/src/views/chat/index.vue @@ -68,16 +68,11 @@ - + 加载更多 { - console.log('----', store.state.im.curCustomerService); - if (typeof store.state.im.curCustomerService !== 'string') { + if (!store.state.im.curCustomerService.waiterId) { setTimeout(() => { socketInit(); }, 1000); return false; } - console.log('++++', typeof store.state.im.curCustomerService); - ImInit(store.state.im.curCustomerService).then(() => { + ImInit(store.state.im.curCustomerService.waiterId).then(() => { Im.getSessionList(); }); }; @@ -190,20 +183,24 @@ currentSessionId.value = id; // 设置实例对象当前会话ID Im.setCurSessionId(id); + // 已读 Im.setRead({ content: { sessionId: id, }, }); - if (!sessionMessageList.length) { - Im.getHistoryMsg(); - } + setTimeout(() => { + if (!sessionMessageList.value.length) { + Im.getHistoryMsg(); + } + }, 100); }; // 聊天 - const sessionMessageList = computed(() => { - return currentSession.messageList || []; + const sessionMessageList = ref([]); + watch(currentSession, () => { + sessionMessageList.value = currentSession.value.messageList || []; }); const refsMessageList = ref(null); watch(sessionMessageList, (value, old) => { @@ -211,11 +208,11 @@ ? refsMessageList.value.resize$.scrollHeight - refsMessageList.value.resize$.scrollTop : 0; nextTick(() => { - if (!old?.length || value.indexOf(old[0]) === 0) { - refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight); - } else { - refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight - offset); - } + // if (!old?.length || value.indexOf(old[0]) === 0) { + refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight); + // } else { + // refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight - offset); + // } }); }); const handleLoadMore = () => { @@ -230,6 +227,7 @@ Im.sendMsg({ fromId: curService.waiterId, fromAvatar: curService.waiterAvatar, + fromNickname: curService.waiterNickname, content: { toSessionId: currentSessionId.value, payload: { text: state.message }, @@ -324,10 +322,11 @@ const file = e.target.files[0]; e.target.value = null; let url = await upload('mall-product', 'im/', file); - // store.dispatch('chat/submitImage', { url }); - + const curService = store.state.im.curCustomerService; Im.sendMsg({ - fromId: 2, //userInfo.value.id, + fromId: curService.waiterId, + fromAvatar: curService.waiterAvatar, + fromNickname: curService.waiterNickname, content: { toSessionId: currentSessionId.value, payload: { url }, @@ -347,8 +346,11 @@ let url = await upload('mall-product', 'im/', file); // store.dispatch('chat/submitVideo', { url }); + const curService = store.state.im.curCustomerService; Im.sendMsg({ - fromId: 2, //userInfo.value.id, + fromId: curService.waiterId, + fromAvatar: curService.waiterAvatar, + fromNickname: curService.waiterNickname, content: { toSessionId: currentSessionId.value, payload: { url }, @@ -378,7 +380,6 @@ display: flex; border: 1px solid #ebeef5; .aside { - width: 240px; border-right: 1px solid #ebeef5; .aside-header { height: 60px;