fix:修改不能跳到最底下问题

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';

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;

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({

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);
 

src/views/chat/index.vue

@@ -68,16 +68,11 @@
                     </div>
                 </div>
                 <el-scrollbar ref="refsMessageList" class="message-list">
-                    <el-button
-                        v-if="currentSession.messageList?.length"
-                        class="load"
-                        type="text"
-                        @click="handleLoadMore"
-                    >
+                    <el-button v-if="sessionMessageList.length" class="load" type="text" @click="handleLoadMore">
                         加载更多
                     </el-button>
                     <message-item
-                        v-for="(item, index) in currentSession.messageList"
+                        v-for="(item, index) in sessionMessageList"
                         :key="index"
                         :message="item"
                         :session="currentSession"
@@ -151,15 +146,13 @@
     const store = useStore();
     store.dispatch('im/queryCurCustomerService');
     const socketInit = () => {
-        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;