Merge branch 'master' of https://git.nanodreamtech.com/wkw/wallet_app

src/views/im/chat/index.vue

@@ -42,9 +42,10 @@
               </div>
 
               <!-- 图片消息 -->
-              <div v-else-if="item.contentType === 2">
-                <img
-                  :src="item.content"
+              <div class="content" v-else-if="item.contentType === MSG_TYPE.IMAGE">
+                <van-image
+                  :src="item?.localUrl ||  IM_PATH + item.url"
+                  alt="图片"
                   style="max-width: 120px; border-radius: 8px"
                 />
               </div>
@@ -59,9 +60,23 @@
               </div>
 
               <!-- 录音消息 -->
-              <div v-else-if="item.contentType === MSG_TYPE.AUDIO">
-                <messageAudio  v-if="item.localUrl" :src="item.localUrl" :isSender="isSender(item.toUsername)"/>
-                <messageAudio  v-else :src="IM_PATH + item.url" :isSender="isSender(item.toUsername)"/>
+              <div
+                class="audio-message"
+                v-else-if="item.contentType === MSG_TYPE.AUDIO"
+              >
+                <!-- <audio
+                  v-if="item.localUrl"
+                  :src="item.localUrl"
+                  controls
+                  style="width: 200px"
+                />
+                <audio
+                  v-else
+                  :src="IM_PATH + item.url"
+                  controls
+                  style="width: 200px"
+                /> -->
+                <messageAudio :src="item?.localUrl ||  IM_PATH + item.url" :isSender="isSender(item.toUsername)"/> 
               </div>
 
               <!-- 其他未知类型 -->
@@ -288,7 +303,6 @@ const stopRecording = async () => {
       resolve(new Uint8Array());
       return;
     }
-
     // 停止录音
     mediaRecorder.value.stop();
     mediaRecorder.value.stream.getTracks().forEach((track) => track.stop());
@@ -306,6 +320,8 @@ const stopRecording = async () => {
   });
 };
 
+
+// 发送音频消息
 const sendAudioMessage = async (event) => {
   if (isTouchDevice.value && event.type === "mouseup") {
     return;
@@ -349,17 +365,18 @@ const sendMessage = () => {
   scrollToBottom();
 };
 
-const afterRead = async (file) => {
-  const formData = new FormData();
-  formData.append("uuid", walletStore.account);
-  formData.append("file", file.file);
-  const { code, data } = await uploadFile(formData);
+// 发送图片消息
+const afterRead = async (file) => { 
+  const arrayBuffer = await file.file.arrayBuffer(); 
   const message = {
-    content: data,
-    contentType: MSG_TYPE.IMAGE, // 3: 文本消息
-    messageType: MESSAGE_TYPE_USER, // 3: 单聊天
-    to: route.query.uuid,
+    content: text.value, // 如果有文本内容
+    contentType: MSG_TYPE.IMAGE, // 音频消息类型
+    messageType: MESSAGE_TYPE_USER, // 单聊消息
+    to: route.query.uuid, // 接收方ID
+    fileSuffix: file.type, // 使用webm后缀更准确
+    file: new Uint8Array(arrayBuffer), // 将Uint8Array转为普通数组
   };
+ 
   wsStore.sendMessage(message);
 };
 

src/views/im/components/messageAudio/index.vue

@@ -7,7 +7,7 @@
         :key="i"
         class="bar"
         :style="{
-          height: isPlaying ? `${randomHeights[i-1]}px` : `4px`
+          height: isPlaying ? `${randomHeights[i-1]}px` : `3px`
         }"
       ></span>
     </div>

src/views/im/hook/messagesHook.js

@@ -21,6 +21,17 @@ export const setMessageHook = (message, state) => {
       localUrl: url,
     });
   }
+
+  // 图片
+  if (message.contentType === MSG_TYPE.IMAGE) { 
+    const blob = new Blob([message.file], { type: message.fileSuffix });
+    const url = URL.createObjectURL(blob);
+    state.messages.push({
+      ...message,
+      toUsername: message.to,
+      localUrl: url,
+    });
+  }
 };
 
 export const handleMessageHook = (message, state) => {
@@ -45,4 +56,15 @@ export const handleMessageHook = (message, state) => {
       toUsername: message.to,
     });
   }
+
+  // 图片
+  if (message.contentType === MSG_TYPE.IMAGE) { 
+    const blob = new Blob([message.file], { type: message.fileSuffix });
+    const url = URL.createObjectURL(blob);
+    state.messages.push({
+      ...message,
+      file: url,
+      toUsername: message.to,
+    });
+  }
 };