feat: 发送图片和视频

src/store/modules/chat/chat.js

@@ -37,7 +37,16 @@ const getters = {
         };
     },
     parseText: () => {
-        return (payload) => {
+        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) {
@@ -49,11 +58,16 @@ const getters = {
                     } else if ('productImageUrl' in payload) {
                         payload = '[商品信息]';
                     } else {
-                    payload = '[未知消息]';
+                        payload = '[未知数据]';
                     }
                 } catch (e) {
                     payload = '[解析异常]';
                 }
+            } else if (type === 7) {
+                payload = '[撤回消息]';
+            } else {
+                payload = '[未知类型]';
+            }
             return payload;
         };
     },
@@ -295,6 +309,24 @@ const actions = {
             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,

src/views/chat/index.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="chat-container" @click="emojiVisible = false">
         <div class="header">
-            <p>当前客服：小爱</p>
-            <el-button type="text" @click="summaryVisible = !summaryVisible">
+            <p>当前客服：{{ userInfo?.employeeName }}</p>
+            <!-- <el-button type="text" @click="summaryVisible = !summaryVisible">
                 {{ summaryVisible ? '收起' : '统计数据' }}
-            </el-button>
+            </el-button> -->
         </div>
         <div class="summary">
             <el-table v-show="summaryVisible" border :data="[summary]">
@@ -42,7 +42,7 @@
                             </div>
                             <div class="row">
                                 <div class="session-content">
-                                    {{ store.getters['chat/parseText'](item.lastMessage.payload) }}
+                                    {{ store.getters['chat/parseText'](item.lastMessage) }}
                                 </div>
                             </div>
                         </div>
@@ -130,6 +130,7 @@
 </template>
 
 <script setup lang="jsx">
+    import { upload } from '@/api/file';
     import { emojiData, entitiestoUtf16 } from '@/utils/chat.js';
     import { ElButton } from 'element-plus/es/components/button/index';
     import 'element-plus/es/components/button/style/css';
@@ -141,6 +142,7 @@
     const opts = computed(() => store.state.chat.opts);
 
     // 统计
+    const userInfo = computed(() => store.state.auth.userInfo);
     const summaryVisible = ref(false);
     const summary = ref({
         historyTimes: 0,
@@ -183,8 +185,8 @@
     const handleLoadMore = () => {
         store.dispatch('chat/querySessionMessage', { topMessageId: unref(sessionMessageList)[0].id });
     };
-    const handleSendMessage = (data) => {
-        if (!data) {
+    const handleSendMessage = () => {
+        if (state.message) {
             store.dispatch('chat/submitMessage', { text: state.message });
             state.message = '';
         } else {
@@ -264,18 +266,11 @@
     const handlePickImage = () => {
         refsImage.value.click();
     };
-    const handleSendImage = (e) => {
+    const handleSendImage = async (e) => {
         const file = e.target.files[0];
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = (e) => {
-            const data = e.target.result;
-            const message = {
-                type: 'image',
-                content: data,
-            };
-            handleSendMessage(message);
-        };
+        e.target.value = null;
+        let url = await upload('mall-product', 'im/', file);
+        store.dispatch('chat/submitImage', { url });
     };
 
     // 视频
@@ -283,18 +278,11 @@
     const handlePickVideo = () => {
         refsVideo.value.click();
     };
-    const handleSendVideo = (e) => {
+    const handleSendVideo = async (e) => {
         const file = e.target.files[0];
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = (e) => {
-            const data = e.target.result;
-            const message = {
-                type: 'video',
-                content: data,
-            };
-            handleSendMessage(message);
-        };
+        e.target.value = null;
+        let url = await upload('mall-product', 'im/', file);
+        store.dispatch('chat/submitVideo', { url });
     };
 </script>
 
@@ -311,9 +299,6 @@
                 margin-left: @layout-space-super;
             }
         }
-        .summary {
-            margin-bottom: @layout-space;
-        }
         .body {
             width: 100%;
             flex: 1;

src/views/chat/message.vue

@@ -88,7 +88,7 @@
                 </video>
             </div>
             <div v-else class="content shadow">
-                {{ store.getters['chat/parseText'](props.message.payload) }}
+                {{ store.getters['chat/parseText'](props.message) }}
             </div>
         </div>
         <div v-if="!['revoke', 'notify'].includes(messageType[props.message.type])" class="time">