Merge branch 'feat-im-0607-ch' into msb_test

.eslintignore

@@ -4,5 +4,5 @@ public
 dist
 node_modules
 src/utils/msb-im.js
-src/utils/proto-rsq.js
+src/utils/poto-req.js
 src/utils/proto-rsp.js

src/api/chat/index.js

@@ -2,7 +2,7 @@
  * @Author: xwk
  * @Date: 2022-05-24 17:00:26
  * @LastEditors: ch
- * @LastEditTime: 2022-06-09 10:10:47
+ * @LastEditTime: 2022-06-13 14:26:53
  * @Description: file content
  */
 import request from '@/utils/request.js';
@@ -52,6 +52,16 @@ export const getCustomeServiceTicket = () => {
         },
     });
 };
+
+/**
+ * 获取当前客服
+ */
+export const getCustomerService = () => {
+    return request({
+        url: '/mall/im/admin/waiterUser/getWaiterByUserId',
+        method: 'get',
+    });
+};
 /**
  * 获取可转移客服列表
  * @param {*} params

src/store/modules/chat/chat copy.js

@@ -0,0 +1,363 @@
+import { login } from '@/api/chat';
+import config from '@/configs';
+import { ElMessage } from '@/plugins/element-plus';
+import { UUID } from '@/utils/chat';
+import dayjs from 'dayjs';
+const state = () => ({
+    socket: null,
+    heart: null,
+    queue: [],
+    task: [],
+
+    currentSession: null,
+    messageList: [],
+    messageType: { 1: 'text', 2: 'audio', 3: 'image', 4: 'video', 5: 'revoke', 6: 'custom', 7: 'notify' },
+
+    curCustomerService: {},
+    sessionData: [],
+    customerServiceList: [],
+    opts: {
+        customerServiceType: [
+            {
+                label: '售前',
+                value: 1,
+            },
+            {
+                label: '售后',
+                value: 2,
+            },
+            {
+                label: '发货',
+                value: 3,
+            },
+        ],
+    },
+});
+const getters = {
+    parseTime: () => {
+        return (timestamp) => {
+            dayjs(new Date(timestamp)).format('MM-DD HH:mm:ss');
+        };
+    },
+    parseText: () => {
+        return ({ payload, type }) => {
+            if (type === 2) {
+                payload = '[语音]';
+            } else if (type === 3) {
+                payload = '[图片]';
+            } else if (type === 4) {
+                payload = '[视频]';
+            } else if (type === 5) {
+                payload = '[撤回消息]';
+            } else if (type === 6 || type === 1) {
+                try {
+                    // payload = JSON.parse(payload);
+                    if ('text' in payload) {
+                        payload = payload.text;
+                    } else if ('linkJump' in payload) {
+                        payload = '[超链接]';
+                    } else if ('orderNo' in payload) {
+                        payload = '[订单信息]';
+                    } else if ('productImageUrl' in payload) {
+                        payload = '[商品信息]';
+                    } else {
+                        payload = '[未知数据]';
+                    }
+                } catch (e) {
+                    payload = '[解析异常]';
+                }
+            } else if (type === 7) {
+                payload = '[撤回消息]';
+            } else {
+                payload = '[未知类型]';
+            }
+            return payload;
+        };
+    },
+    parseImage: () => {
+        return (payload) => {
+            try {
+                // payload = JSON.parse(payload);
+                if ('url' in payload) {
+                    payload = payload.url;
+                } else {
+                    payload = '[未知图片]';
+                }
+            } catch (e) {
+                payload = '[解析异常]';
+            }
+            return payload;
+        };
+    },
+    parseVideo: () => {
+        return (payload) => {
+            try {
+                // payload = JSON.parse(payload);
+                if ('url' in payload) {
+                    payload = payload.url;
+                } else {
+                    payload = '[未知视频]';
+                }
+            } catch (e) {
+                payload = '[解析异常]';
+            }
+            return payload;
+        };
+    },
+    parseContent: () => {
+        return (payload) => {
+            try {
+                // payload = JSON.parse(payload);
+                if ('linkJump' in payload) {
+                    payload.type = 'link';
+                } else if ('orderNo' in payload) {
+                    payload.type = 'order';
+                } else if ('productImageUrl' in payload) {
+                    payload.type = 'product';
+                } else {
+                    payload = '[未知消息]';
+                }
+            } catch (e) {
+                payload = '[解析异常]';
+            }
+            return payload;
+        };
+    },
+};
+const mutations = {
+    setSocket: (state, data) => (state.socket = data),
+    setHeart: (state, data) => (state.heart = data),
+    setTask: (state, data) => (state.task = data),
+    addTask: (state, data) => state.task.push(data),
+    delTask: (state, data) => state.task.splice(data, 1),
+    setCurrentSession: (state, data) => (state.currentSession = data),
+    setSessionData: (state, data) => (state.sessionData = data),
+    setMessageList: (state, data) => (state.messageList = data),
+    setCustomerServiceList: (state, data) => (state.customerServiceList = data),
+
+    SET_CUR_SERVICE(state, data) {
+        state.curCustomerService = data || {};
+    },
+    SET_SESSION_DATA(state, data) {
+        state.sessionData = data;
+    },
+    SET_SERVICE_LIST(state, data) {
+        state.customerServiceList = data;
+    },
+};
+const actions = {
+    /**
+     * 创建连接
+     */
+    connect: async ({ state, commit, dispatch }) => {
+        let { ticket } = await login({ storeId: 1 });
+        return new Promise((resolve, reject) => {
+            if (window.WebSocket) {
+                const socket = new WebSocket(`${config.socketURL}?client=${ticket}&type=2`);
+                socket.onmessage = ({ data }) => {
+                    dispatch('receive', data);
+                };
+                socket.onopen = () => {
+                    commit(
+                        'setHeart',
+                        setInterval(() => {
+                            dispatch('heart');
+                        }, 3000)
+                    );
+                    console.info('[chat] open');
+                    resolve(socket);
+                };
+                socket.onclose = () => {
+                    clearInterval(state.heart);
+                    console.info('[chat] close');
+                };
+                socket.onerror = (e) => {
+                    clearInterval(state.heart);
+                    console.info('[chat] error', e);
+                    reject(e);
+                };
+                commit('setSocket', socket);
+            } else {
+                ElMessage.error('当前浏览器不支持 WebSocket');
+                reject('not support websocket');
+            }
+        });
+    },
+    /**
+     * 发送心跳，任务监测
+     */
+    heart: ({ state, dispatch }) => {
+        dispatch('send', {
+            traceType: 26,
+            content: { storeId: 1 },
+        });
+        // console.info('[chat] heart');
+        state.task.forEach((item) => {
+            dispatch('send', item);
+        });
+    },
+    /**
+     * 执行任务
+     */
+    invoke: ({ commit, dispatch }, data) => {
+        data.traceId = UUID();
+        commit('addTask', data);
+        dispatch('send', data);
+    },
+    /**
+     * 撤销任务
+     */
+    revoke: ({ state, commit }, data) => {
+        console.info(state.task.length);
+        commit(
+            'setTask',
+            state.task.filter((item) => item.traceType !== data)
+        );
+        console.info(state.task.length);
+    },
+    /**
+     * 发送数据
+     */
+    send: ({ state }, data) => {
+        if (window.WebSocket) {
+            if (state.socket?.readyState === WebSocket.OPEN) {
+                data.traceId = data.traceId || UUID();
+                state.socket.send(JSON.stringify(data));
+                if (data.traceType !== 26) {
+                    console.info('[chat] send', data);
+                }
+            }
+        }
+    },
+    /**
+     * 接收数据
+     */
+    receive: ({ state, commit, dispatch }, data) => {
+        data = JSON.parse(data);
+        if (data.traceType !== 0) {
+            let index = state.task.findIndex((item) => item.traceId === data.traceId);
+            if (index !== -1) {
+                console.info('[chat] data', data);
+                commit('delTask', index);
+                dispatch('handle', data);
+            } else if (data.traceType === 25) {
+                console.info('[chat] msg', data);
+                dispatch('handle', data);
+            } else {
+                console.info('[chat] deprecated', data);
+            }
+        }
+    },
+    /**
+     * 处理数据
+     */
+    handle: ({ state, commit, dispatch }, { code, traceType, content }) => {
+        if (code === 200) {
+            switch (traceType) {
+                case 25: // 收到消息
+                    if (content.sessionId === state.currentSession) {
+                        commit('setMessageList', [...state.messageList, content]);
+                        dispatch('submitRead');
+                    } else {
+                        dispatch('querySession');
+                    }
+                    break;
+                case 32: // 发送消息
+                    commit('setMessageList', [...state.messageList, content]);
+                    break;
+                case 27: // 会话列表
+                    commit('setSessionData', content);
+                    break;
+                case 28: // 消息列表
+                    commit('setMessageList', [...content, ...state.messageList]);
+                    break;
+                case 29: // 客服列表
+                    commit('setCustomerServiceList', content);
+                    break;
+                case 31: // 已读消息
+                    dispatch('querySession');
+                    break;
+                default:
+                    break;
+            }
+        }
+    },
+    /**
+     * 查询会话列表
+     */
+    querySession: ({ dispatch }) => {
+        dispatch('invoke', {
+            traceType: 27,
+            content: { storeId: 1 },
+        });
+    },
+    /**
+     * 查询会话消息列表
+     */
+    querySessionMessage: ({ state, dispatch }, data) => {
+        dispatch('invoke', {
+            traceType: 28,
+            content: { sessionId: state.currentSession, size: 10, topMessageId: null, ...data },
+        });
+    },
+    /**
+     * 查询可转移客服列表
+     */
+    queryCustomerService: ({ dispatch }) => {
+        dispatch('invoke', {
+            traceType: 29,
+            content: { storeId: 1 },
+        });
+    },
+    /**
+     * 提交转移会话
+     */
+    submitTransferSession: ({ dispatch }, data) => {
+        dispatch('invoke', {
+            traceType: 30,
+            content: { storeId: 1, ...data },
+        });
+    },
+    /**
+     * 提交已读消息
+     */
+    submitRead: ({ state, dispatch }) => {
+        dispatch('invoke', {
+            traceType: 31,
+            content: { sessionId: state.currentSession },
+        });
+    },
+    /**
+     * 提交发送消息
+     */
+    submitMessage: ({ state, dispatch }, payload) => {
+        dispatch('invoke', {
+            traceType: 32,
+            content: { payload, toSessionId: state.currentSession, type: 1 },
+        });
+    },
+    /**
+     * 提交发送图片
+     */
+    submitImage: ({ state, dispatch }, payload) => {
+        dispatch('invoke', {
+            traceType: 32,
+            content: { payload, toSessionId: state.currentSession, type: 3 },
+        });
+    },
+    /**
+     * 提交发送视频
+     */
+    submitVideo: ({ state, dispatch }, payload) => {
+        dispatch('invoke', {
+            traceType: 32,
+            content: { payload, toSessionId: state.currentSession, type: 4 },
+        });
+    },
+};
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};

src/store/modules/chat/chat.js

@@ -1,18 +1,18 @@
-import { login } from '@/api/chat';
-import config from '@/configs';
-import { ElMessage } from '@/plugins/element-plus';
-import { UUID } from '@/utils/chat';
+/*
+ * @Author: ch
+ * @Date: 2022-06-07 15:41:05
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-13 16:30:57
+ * @Description: file content
+ */
+import * as api from '@/api/chat';
 import dayjs from 'dayjs';
-const state = () => ({
-    socket: null,
-    heart: null,
-    queue: [],
-    task: [],
-    sessionData: {},
-    currentSession: null,
-    messageList: [],
-    messageType: { 1: 'text', 2: 'audio', 3: 'image', 4: 'video', 5: 'revoke', 6: 'custom', 7: 'notify' },
+const state = {
+    curCustomerService: {},
+    sessionData: [],
     customerServiceList: [],
+    messageType: { 1: 'text', 2: 'audio', 3: 'image', 4: 'video', 5: 'revoke', 6: 'custom', 7: 'notify' },
+
     opts: {
         customerServiceType: [
             {
@@ -29,7 +29,8 @@ const state = () => ({
             },
         ],
     },
-});
+};
+
 const getters = {
     parseTime: () => {
         return (timestamp) => {
@@ -48,7 +49,7 @@ const getters = {
                 payload = '[撤回消息]';
             } else if (type === 6 || type === 1) {
                 try {
-                    payload = JSON.parse(payload);
+                    // payload = JSON.parse(payload.value);
                     if ('text' in payload) {
                         payload = payload.text;
                     } else if ('linkJump' in payload) {
@@ -74,7 +75,7 @@ const getters = {
     parseImage: () => {
         return (payload) => {
             try {
-                payload = JSON.parse(payload);
+                // payload = JSON.parse(payload);
                 if ('url' in payload) {
                     payload = payload.url;
                 } else {
@@ -89,7 +90,7 @@ const getters = {
     parseVideo: () => {
         return (payload) => {
             try {
-                payload = JSON.parse(payload);
+                // payload = JSON.parse(payload);
                 if ('url' in payload) {
                     payload = payload.url;
                 } else {
@@ -104,7 +105,7 @@ const getters = {
     parseContent: () => {
         return (payload) => {
             try {
-                payload = JSON.parse(payload);
+                // payload = JSON.parse(payload);
                 if ('linkJump' in payload) {
                     payload.type = 'link';
                 } else if ('orderNo' in payload) {
@@ -122,223 +123,43 @@ const getters = {
     },
 };
 const mutations = {
-    setSocket: (state, data) => (state.socket = data),
-    setHeart: (state, data) => (state.heart = data),
-    setTask: (state, data) => (state.task = data),
-    addTask: (state, data) => state.task.push(data),
-    delTask: (state, data) => state.task.splice(data, 1),
-    setCurrentSession: (state, data) => (state.currentSession = data),
-    setSessionData: (state, data) => (state.sessionData = data),
-    setMessageList: (state, data) => (state.messageList = data),
-    setCustomerServiceList: (state, data) => (state.customerServiceList = data),
-};
-const actions = {
-    /**
-     * 创建连接
-     */
-    connect: async ({ state, commit, dispatch }) => {
-        let { ticket } = await login({ storeId: 1 });
-        return new Promise((resolve, reject) => {
-            if (window.WebSocket) {
-                const socket = new WebSocket(`${config.socketURL}?client=${ticket}&type=2`);
-                socket.onmessage = ({ data }) => {
-                    dispatch('receive', data);
-                };
-                socket.onopen = () => {
-                    commit(
-                        'setHeart',
-                        setInterval(() => {
-                            dispatch('heart');
-                        }, 3000)
-                    );
-                    console.info('[chat] open');
-                    resolve(socket);
-                };
-                socket.onclose = () => {
-                    clearInterval(state.heart);
-                    console.info('[chat] close');
-                };
-                socket.onerror = (e) => {
-                    clearInterval(state.heart);
-                    console.info('[chat] error', e);
-                    reject(e);
-                };
-                commit('setSocket', socket);
-            } else {
-                ElMessage.error('当前浏览器不支持 WebSocket');
-                reject('not support websocket');
-            }
-        });
-    },
-    /**
-     * 发送心跳，任务监测
-     */
-    heart: ({ state, dispatch }) => {
-        dispatch('send', {
-            traceType: 26,
-            content: { storeId: 1 },
-        });
-        // console.info('[chat] heart');
-        state.task.forEach((item) => {
-            dispatch('send', item);
-        });
+    SET_CUR_SERVICE(state, data) {
+        state.curCustomerService = data || {};
     },
-    /**
-     * 执行任务
-     */
-    invoke: ({ commit, dispatch }, data) => {
-        data.traceId = UUID();
-        commit('addTask', data);
-        dispatch('send', data);
+    SET_SESSION_DATA(state, data) {
+        state.sessionData = data;
     },
-    /**
-     * 撤销任务
-     */
-    revoke: ({ state, commit }, data) => {
-        console.info(state.task.length);
-        commit(
-            'setTask',
-            state.task.filter((item) => item.traceType !== data)
-        );
-        console.info(state.task.length);
+    SET_SERVICE_LIST(state, data) {
+        state.customerServiceList = data;
     },
-    /**
-     * 发送数据
-     */
-    send: ({ state }, data) => {
-        if (window.WebSocket) {
-            if (state.socket?.readyState === WebSocket.OPEN) {
-                data.traceId = data.traceId || UUID();
-                state.socket.send(JSON.stringify(data));
-                if (data.traceType !== 26) {
-                    console.info('[chat] send', data);
-                }
-            }
-        }
-    },
-    /**
-     * 接收数据
-     */
-    receive: ({ state, commit, dispatch }, data) => {
-        data = JSON.parse(data);
-        if (data.traceType !== 0) {
-            let index = state.task.findIndex((item) => item.traceId === data.traceId);
-            if (index !== -1) {
-                console.info('[chat] data', data);
-                commit('delTask', index);
-                dispatch('handle', data);
-            } else if (data.traceType === 25) {
-                console.info('[chat] msg', data);
-                dispatch('handle', data);
-            } else {
-                console.info('[chat] deprecated', data);
-            }
-        }
-    },
-    /**
-     * 处理数据
-     */
-    handle: ({ state, commit, dispatch }, { code, traceType, content }) => {
-        if (code === 200) {
-            switch (traceType) {
-                case 25: // 收到消息
-                    if (content.sessionId === state.currentSession) {
-                        commit('setMessageList', [...state.messageList, content]);
-                        dispatch('submitRead');
-                    } else {
-                        dispatch('querySession');
-                    }
-                    break;
-                case 32: // 发送消息
-                    commit('setMessageList', [...state.messageList, content]);
-                    break;
-                case 27: // 会话列表
-                    commit('setSessionData', content);
-                    break;
-                case 28: // 消息列表
-                    commit('setMessageList', [...content, ...state.messageList]);
-                    break;
-                case 29: // 客服列表
-                    commit('setCustomerServiceList', content);
-                    break;
-                case 31: // 已读消息
-                    dispatch('querySession');
-                    break;
-                default:
-                    break;
-            }
-        }
-    },
-    /**
-     * 查询会话列表
-     */
-    querySession: ({ dispatch }) => {
-        dispatch('invoke', {
-            traceType: 27,
-            content: { storeId: 1 },
-        });
-    },
-    /**
-     * 查询会话消息列表
-     */
-    querySessionMessage: ({ state, dispatch }, data) => {
-        dispatch('invoke', {
-            traceType: 28,
-            content: { sessionId: state.currentSession, size: 10, topMessageId: null, ...data },
+};
+const actions = {
+    queryCurCustomerService: ({ commit }) => {
+        api.getCustomerService().then((res) => {
+            commit('SET_CUR_SERVICE', res);
         });
     },
+
     /**
      * 查询可转移客服列表
      */
-    queryCustomerService: ({ dispatch }) => {
-        dispatch('invoke', {
-            traceType: 29,
-            content: { storeId: 1 },
+    queryCustomerService: ({ commit }) => {
+        api.customerServiceList({
+            length: 100,
+            pageIndex: 1,
+        }).then((res) => {
+            commit('SET_SERVICE_LIST', res.records);
         });
     },
     /**
      * 提交转移会话
      */
-    submitTransferSession: ({ dispatch }, data) => {
-        dispatch('invoke', {
-            traceType: 30,
-            content: { storeId: 1, ...data },
-        });
-    },
-    /**
-     * 提交已读消息
-     */
-    submitRead: ({ state, dispatch }) => {
-        dispatch('invoke', {
-            traceType: 31,
-            content: { sessionId: state.currentSession },
-        });
-    },
-    /**
-     * 提交发送消息
-     */
-    submitMessage: ({ state, dispatch }, payload) => {
-        dispatch('invoke', {
-            traceType: 32,
-            content: { payload, toSessionId: state.currentSession, type: 1 },
-        });
-    },
-    /**
-     * 提交发送图片
-     */
-    submitImage: ({ state, dispatch }, payload) => {
-        dispatch('invoke', {
-            traceType: 32,
-            content: { payload, toSessionId: state.currentSession, type: 3 },
-        });
-    },
-    /**
-     * 提交发送视频
-     */
-    submitVideo: ({ state, dispatch }, payload) => {
-        dispatch('invoke', {
-            traceType: 32,
-            content: { payload, toSessionId: state.currentSession, type: 4 },
+    submitTransferSession: ({}, data) => {
+        api.transferCustomerService({
+            storeId: 1,
+            ...data,
+        }).then((res) => {
+            console.log(res, 'resresres');
         });
     },
 };

src/utils/im.js

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-06-07 15:52:37
  * @LastEditors: ch
- * @LastEditTime: 2022-06-09 10:59:15
+ * @LastEditTime: 2022-06-13 16:18:45
  * @Description: file content
  */
 import * as api from '@/api/chat';
@@ -13,27 +13,15 @@ import { FormatJsonSearch, ToAsyncAwait } from '@/utils/utils';
 const Im = new MsbIm({
     reconnect: true,
 });
-const ImInit = () => {
+const ImInit = (waiterId) => {
     return new Promise((reslove, reject) => {
-        const storeUc = $store.state.auth.userInfo;
-        if (!storeUc) {
-            ImInit();
-            return false;
-        }
         api.getCustomeServiceTicket().then(async (res) => {
+            console.log(res);
             const par = FormatJsonSearch({
                 client: res.client,
                 ticket: res.ticket,
-                user: storeUc.userId,
-                // nickname: storeUc.employeeName,
-                // avatar: storeUc.avatar,
-                // 1普通用户 2客服链接
+                user: waiterId,
                 connect: 2,
-                // user: 2,
-                // client: 'yan_xuan',
-                // ticket: '9kpEgiLzVG14znSTvElLOJE5MEMa/EGdexhab4CbDmLzDGnE+UXmVOvUs4ixyPeQ',
-                // nickname: '周渺',
-                // avatar: 'https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/桌面水果.jpg',
             });
             const { error, result } = await ToAsyncAwait(
                 Im.init({
@@ -50,7 +38,7 @@ const ImInit = () => {
 };
 
 Im.interceptors.dataChangeAfter = () => {
-    $store.commit('im/SET_SESSION_DATA', JSON.parse(JSON.stringify(Im.sessionData)));
+    $store.commit('chat/SET_SESSION_DATA', JSON.parse(JSON.stringify(Im.sessionData)));
     // let msgCount = 0;
     // Im.sessionData.forEach((i) => {
     //     msgCount += i.unreadCount;
@@ -61,7 +49,7 @@ Im.interceptors.dataChangeAfter = () => {
 Im.interceptors.onLogout = () => {
     Im.setSessionData([]);
     // Im.setCurSessionId(null);
-    $store.commit('im/SET_SESSION_DATA', []);
+    $store.commit('chat/SET_SESSION_DATA', []);
     // $store.commit('SET_IM_MSG_COUNT', 0);
 };
 export { Im, ImInit };

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

@@ -37,12 +37,12 @@
                             <div class="row">
                                 <div class="session-name">{{ item.fromNickname }}</div>
                                 <div class="session-time">
-                                    {{ store.getters['im/parseTime'](item.lastMessage.createTimeStamp) }}
+                                    {{ store.getters['chat/parseTime'](item.lastMessage.createTimeStamp) }}
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="session-content">
-                                    {{ store.getters['im/parseText'](item.lastMessage) }}
+                                    {{ store.getters['chat/parseText'](item.lastMessage) }}
                                 </div>
                             </div>
                         </div>
@@ -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"
@@ -149,10 +144,22 @@
     const { proxy } = getCurrentInstance();
     const router = useRouter();
     const store = useStore();
-
-    ImInit().then(() => {
+    store.dispatch('chat/queryCurCustomerService');
+    const socketInit = () => {
+        if (!store.state.chat.curCustomerService.waiterId) {
+            setTimeout(() => {
+                socketInit();
+            }, 1000);
+            return false;
+        }
+        ImInit(store.state.chat.curCustomerService.waiterId).then(() => {
             Im.getSessionList();
         });
+    };
+    onMounted(() => {
+        socketInit();
+    });
+
     const opts = computed(() => store.state.chat.opts);
 
     // 统计
@@ -170,26 +177,30 @@
     const state = reactive({
         message: '',
     });
-    const sessionList = computed(() => store.state.im.sessionData);
+    const sessionList = computed(() => store.state.chat.sessionData);
     const currentSession = computed(() => sessionList.value.find((item) => item.id === currentSessionId.value));
     const handleChangeSession = (id) => {
         currentSessionId.value = id;
         // 设置实例对象当前会话ID
         Im.setCurSessionId(id);
+
         // 已读
         Im.setRead({
             content: {
                 sessionId: id,
             },
         });
-        if (!sessionMessageList.length) {
+        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) => {
@@ -197,23 +208,26 @@
             ? refsMessageList.value.resize$.scrollHeight - refsMessageList.value.resize$.scrollTop
             : 0;
         nextTick(() => {
-            if (!old?.length || value.indexOf(old[0]) === 0) {
+            // if (!old?.length || value.indexOf(old[0]) === 0) {
             refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight);
-            } else {
-                refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight - offset);
-            }
+            // } else {
+            // refsMessageList.value.setScrollTop(refsMessageList.value.resize$.scrollHeight - offset);
+            // }
         });
     });
     const handleLoadMore = () => {
         Im.getHistoryMsg();
     };
     const handleSendMessage = (e) => {
+        const curService = store.state.chat.curCustomerService;
         if (e && e.shiftKey) {
             state.message += '\n';
         } else {
             if (state.message) {
                 Im.sendMsg({
-                    fromId: userInfo.value.userId,
+                    fromId: curService.waiterId,
+                    fromAvatar: curService.waiterAvatar,
+                    fromNickname: curService.waiterNickname,
                     content: {
                         toSessionId: currentSessionId.value,
                         payload: { text: state.message },
@@ -268,9 +282,9 @@
             },
         ],
     });
-    const customerServiceList = computed(() => store.state.im.customerServiceList);
+    const customerServiceList = computed(() => store.state.chat.customerServiceList);
     const handleTransferSession = () => {
-        store.dispatch('im/queryCustomerService');
+        store.dispatch('chat/queryCustomerService');
         transferVisible.value = true;
     };
     const handleConfirmTransfer = async (row) => {
@@ -279,7 +293,7 @@
                 confirmButtonText: '确定',
             });
             if (res.action === 'confirm') {
-                store.dispatch('im/submitTransferSession', {
+                store.dispatch('chat/submitTransferSession', {
                     toWaiterId: row.waiterId,
                     sessionId: unref(currentSessionId),
                     reason: res.value,
@@ -308,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.chat.curCustomerService;
         Im.sendMsg({
-            fromId: 2, //userInfo.value.id,
+            fromId: curService.waiterId,
+            fromAvatar: curService.waiterAvatar,
+            fromNickname: curService.waiterNickname,
             content: {
                 toSessionId: currentSessionId.value,
                 payload: { url },
@@ -331,8 +346,11 @@
         let url = await upload('mall-product', 'im/', file);
         // store.dispatch('chat/submitVideo', { url });
 
+        const curService = store.state.chat.curCustomerService;
         Im.sendMsg({
-            fromId: 2, //userInfo.value.id,
+            fromId: curService.waiterId,
+            fromAvatar: curService.waiterAvatar,
+            fromNickname: curService.waiterNickname,
             content: {
                 toSessionId: currentSessionId.value,
                 payload: { url },
@@ -362,7 +380,6 @@
             display: flex;
             border: 1px solid #ebeef5;
             .aside {
-                width: 240px;
                 border-right: 1px solid #ebeef5;
                 .aside-header {
                     height: 60px;

src/views/chat/message.vue

@@ -73,26 +73,26 @@
             <div v-else-if="messageType[props.message.type] === 'image'" class="content shadow">
                 <el-image
                     alt="[图片消息]"
-                    :src="store.getters['im/parseImage'](props.message.payload)"
+                    :src="store.getters['chat/parseImage'](props.message.payload)"
                     style="max-width: 240px"
                 />
             </div>
             <div v-else-if="messageType[props.message.type] === 'video'" class="shadow">
                 <video controls width="240">
-                    <source :src="store.getters['im/parseVideo'](props.message.payload)" type="video/mp4" />
+                    <source :src="store.getters['chat/parseVideo'](props.message.payload)" type="video/mp4" />
                     <object
-                        :data="store.getters['im/parseVideo'](props.message.payload)"
+                        :data="store.getters['chat/parseVideo'](props.message.payload)"
                         height="240"
                         width="320"
                     ></object>
                 </video>
             </div>
             <div v-else class="content shadow">
-                {{ store.getters['im/parseText'](props.message) }}
+                {{ store.getters['chat/parseText'](props.message) }}
             </div>
         </div>
         <div v-if="!['revoke', 'notify'].includes(messageType[props.message.type])" class="time">
-            {{ store.getters['im/parseTime'](props.message.createTimeStamp) }}
+            {{ store.getters['chat/parseTime'](props.message.createTimeStamp) }}
         </div>
     </div>
 </template>
@@ -111,7 +111,7 @@
         },
     });
     const messageType = computed(() => store.state.chat.messageType);
-    const content = computed(() => store.getters['im/parseContent']({ ...props.message.payload }));
+    const content = computed(() => store.getters['chat/parseContent']({ ...props.message.payload }));
     const handleProduct = (id) => {
         router.push({
             name: 'UpdateProduct',