feat: 消息已读

src/store/modules/chat/chat.js

@@ -36,11 +36,15 @@ const getters = {
     },
     parseContent: () => {
         return (payload) => {
-            payload = JSON.parse(payload);
-            if ('text' in payload) {
-                payload = payload.text;
-            } else {
-                payload = '[未知消息]';
+            try {
+                payload = JSON.parse(payload);
+                if ('text' in payload) {
+                    payload = payload.text;
+                } else {
+                    payload = '[未知消息]';
+                }
+            } catch (e) {
+                payload = '[解析异常]';
             }
             return payload;
         };
@@ -102,7 +106,7 @@ const actions = {
             traceType: 26,
             content: { storeId: 1 },
         });
-        console.info('[chat] heart');
+        // console.info('[chat] heart');
         state.task.forEach((item) => {
             dispatch('send', item);
         });
@@ -151,24 +155,23 @@ const actions = {
     handle: ({ state, commit, dispatch }, { code, traceType, content, session }) => {
         if (code === 200) {
             switch (traceType) {
-                // 收到消息
-                case 25:
+                case 25: // 收到消息
                     if (session.id === state.currentSession) {
                         commit('setMessageList', [...state.messageList, content.content]);
                     } else {
                         dispatch('querySession');
                     }
                     break;
-                // 会话列表
-                case 27:
+                case 32: // 发送消息
+                    commit('setMessageList', [...state.messageList, content]);
+                    break;
+                case 27: // 会话列表
                     commit('setSessionData', content);
                     break;
-                // 消息列表
-                case 28:
+                case 28: // 消息列表
                     commit('setMessageList', content);
                     break;
-                // 客服列表
-                case 29:
+                case 29: // 客服列表
                     commit('setCustomerServiceList', content);
                     break;
                 default:
@@ -212,6 +215,24 @@ const actions = {
             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 },
+        });
+    },
 };
 export default {
     state,

src/views/chat/index.vue

@@ -120,6 +120,7 @@
                 :config="transferConfig"
                 :data="customerServiceList"
                 :operation="[]"
+                style="height: 500px"
             />
         </el-dialog>
     </div>
@@ -127,7 +128,8 @@
 
 <script setup lang="jsx">
     import { emojiData, entitiestoUtf16 } from '@/utils/chat.js';
-    import { ElButton } from 'element-plus/es';
+    import { ElButton } from 'element-plus/es/components/button/index';
+    import 'element-plus/es/components/button/style/css';
     import MessageItem from './message.vue';
     const { proxy } = getCurrentInstance();
     const store = useStore();
@@ -152,10 +154,30 @@
         return store.state.chat.sessionData?.sessionVOS || [];
     });
     const currentSession = computed(() => sessionList.value.find((item) => item.id === currentSessionId.value));
-    const sessionMessageList = computed(() => store.state.chat.messageList);
     const handleChangeSession = (id) => {
         store.commit('chat/setCurrentSession', id);
         store.dispatch('chat/querySessionMessage');
+        handleReadMessage();
+    };
+
+    // 聊天
+    const sessionMessageList = computed(() => store.state.chat.messageList);
+    const refsMessageList = ref(null);
+    watch(sessionMessageList, () => {
+        setTimeout(() => {
+            refsMessageList.value.setScrollTop(refsMessageList.value.scrollbar$.scrollHeight);
+        }, 1000);
+    });
+    const handleSendMessage = (data) => {
+        if (!data) {
+            store.dispatch('chat/submitMessage', { text: state.message });
+            state.message = '';
+        } else {
+            proxy.$message.warning('发送消息不能为空');
+        }
+    };
+    const handleReadMessage = () => {
+        store.dispatch('chat/submitRead');
     };
 
     // 转移会话
@@ -170,7 +192,7 @@
             },
             {
                 label: '客户昵称',
-                prop: 'waiterNickname',
+                prop: 'nickname',
                 minWidth: 160,
             },
             {
@@ -183,7 +205,6 @@
             },
             {
                 label: '操作',
-                prop: 'waiterNickname',
                 width: 100,
                 slots: {
                     default: ({ row }) => (
@@ -206,7 +227,11 @@
                 confirmButtonText: '确定',
             });
             if (res.action === 'confirm') {
-                store.dispatch('chat/submitTransferSession', { waiterId: row.waiterId, reason: res.value });
+                store.dispatch('chat/submitTransferSession', {
+                    toWaiterId: row.waiterId,
+                    sessionId: unref(currentSessionId),
+                    reason: res.value,
+                });
                 transferVisible.value = false;
             }
         } catch (e) {
@@ -259,23 +284,6 @@
             handleSendMessage(message);
         };
     };
-
-    // 发送消息
-    const refsMessageList = ref(null);
-    const handleSendMessage = (data) => {
-        if (!data) {
-            store.dispatch('chat/send', {
-                traceType: 20,
-                content: { payload: { 'text ': state.message }, storeId: 2, type: 1 },
-            });
-            state.message = '';
-            nextTick(() => {
-                refsMessageList.value.setScrollTop(refsMessageList.value.scrollbar$.scrollHeight);
-            });
-        } else {
-            proxy.$message.warning('发送消息不能为空');
-        }
-    };
 </script>
 
 <style lang="less" scoped>

src/views/chat/message.vue

@@ -3,15 +3,15 @@
         class="message-item"
         :class="{
             [`--${messageType[props.message.type]}`]: true,
-            '--self': props.message.fromId === props.session.fromId,
+            '--self': props.message.fromId !== props.session.fromId,
         }"
     >
         <div class="avatar">
-            <el-avatar :src="props.session.fromAvatar" />
+            <el-avatar :src="props.message.fromAvatar" />
         </div>
         <div class="message-body">
             <div class="name">
-                {{ props.session.fromNickname }}
+                {{ props.message.fromNickname }}
             </div>
             <el-card v-if="props.message.type === 'product'" class="shadow">
                 <template #header>
@@ -63,7 +63,7 @@
                 {{ store.getters['chat/parseContent'](props.message.payload) }}
             </div>
         </div>
-        <div v-if="props.message.type !== 'notify'" class="time">
+        <div v-if="props.message.type !== 7" class="time">
             {{ store.getters['chat/parseTime'](props.message.createTimeStamp) }}
         </div>
     </div>