222

src/common/login.js

@@ -5,7 +5,7 @@ import { userInfo } from "@/api/path/jdfh.api";
 import { useWalletStore } from "@/stores/modules/walletStore";
 import { useSystemStore } from "@/stores/modules/systemStore";
 
-const imgHost = import.meta.env.VITE_PRO_IM_PATH + "/api/v1/file/";
+const imgHost = import.meta.env.VITE_IM_PATH_FIlE
 
 
 

src/stores/modules/webSocketStore.js

@@ -6,6 +6,9 @@ import { useWalletStore } from "@/stores/modules/walletStore";
 import { getMessageApi } from "@/api/path/im.api";
 import { MSG_TYPE, MSG_TYPE_MAP } from "@/common/constant/msgType";
 
+
+const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
+
 export const useWebSocketStore = defineStore("webSocketStore", {
   // 状态定义
   state: () => ({
@@ -16,6 +19,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
     maxReconnectAttempts: 5, // 最大重连次数
     reconnectInterval: 3000, // 重连间隔
     messages: [], // 消息列表
+    toAvatar: "",
     unreadMessages: [], // 未读消息列表
     uuid: null,
 
@@ -42,7 +46,11 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         uuid: params.uuid,
         friendUsername: params.friendUsername,
       });
-      this.messages = data || [];
+      this.messages = data.map(item =>{
+        item.url = item.url ?  IM_PATH +item.url :  item.url
+        item.avatar = item.avatar ?  IM_PATH +item.avatar :  item.avatar
+        return item
+      }) || [];
     },
     // 初始化socket
     startHeartbeat() {
@@ -136,14 +144,15 @@ export const useWebSocketStore = defineStore("webSocketStore", {
           // if (MSG_TYPE_MAP.includes(message.messageType)) {
 
           // 文本消息
-          if (message.messageType === MSG_TYPE.TEXT) {
+          message.avatar = this.toAvatar
+          if (message.contentType === MSG_TYPE.TEXT) {
             this.messages.push({
               ...message,
               toUsername: message.to,
             });
           }
           // 音频消息
-          if (message.messageType === MSG_TYPE.AUDIO) {
+          if (message.contentType === MSG_TYPE.AUDIO) {
             const audioBlob = new Blob([message.file], {
               type: `audio/${message.fileSuffix}`,
             });
@@ -241,7 +250,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
       }
 
       const walletStore = useWalletStore();
-      const data = {
+      let data = {
         ...messageData,
         fromUsername: walletStore.username,
         from: walletStore.account,
@@ -253,8 +262,9 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         const buffer = MessageType.encode(messagePB).finish();
         this.socket.send(buffer);
 
+        data.avatar = walletStore.avatar
         // 文本消息
-        if (data.messageType == MSG_TYPE.TEXT) {
+        if (data.contentType == MSG_TYPE.TEXT) {
           this.messages.push({
             ...data,
             toUsername: data.friendUsername,
@@ -262,15 +272,14 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         }
 
         // 音频消息
-        if (data.messageType === MSG_TYPE.AUDIO) {
-          const audioBlob = new Blob([data.file], {
-            type: `audio/${data.fileSuffix}`,
-          });
-          const audioUrl = URL.createObjectURL(audioBlob);
+        if (data.contentType === MSG_TYPE.AUDIO) {
+          const blob = new Blob([data.file], { type: data.fileSuffix });
+          const url = URL.createObjectURL(blob);
+          console.log("url=",url)
           this.messages.push({
             ...data,
             toUsername: data.to,
-            url: audioUrl,
+            localUrl: url,
           });
         }
 

src/views/im/chat/index.vue

@@ -29,7 +29,7 @@
               class="list-img"
               :class="walletStore.account == item.toUsername ? 'mr12' : 'ml12'"
               round
-              :src="IM_PATH + item.avatar"
+              :src="item.avatar"
               @click="router.push('personal')"
             />
             <!-- 内容 -->
@@ -54,7 +54,8 @@
 
               <!-- 录音消息 -->
               <div class="audio-message" v-else-if="item.contentType === MSG_TYPE.AUDIO">
-                <audio :src="IM_PATH + item.url" controls style="width: 200px;" />
+                <audio v-if="item.localUrl" :src="item.localUrl" controls style="width: 200px;" />
+                <audio  v-else :src="item.url" controls style="width: 200px;" />
               </div>
 
               <!-- 其他未知类型 -->
@@ -155,9 +156,6 @@ import { Capacitor } from "@capacitor/core";
 import { MSG_TYPE, MESSAGE_TYPE_USER } from "@/common/constant/msgType";
  
 
-const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
-console.log("avatar=>", IM_PATH)
-
 // 路由 & store
 const router = useRouter();
 const route = useRoute();

src/views/im/index.vue

@@ -31,7 +31,7 @@
         <span>请输入关键词</span>
       </div>
       <div class="message-list">
-        <div class="list-item" v-for="(item,i) in list" :key="i" @click="goToChat(item.uuid)">
+        <div class="list-item" v-for="(item,i) in list" :key="i" @click="goToChat(item)">
           <van-image class="item-img" round :src="item.avatar"/>
           <div class="item-content">
             <div class="item-top">
@@ -79,10 +79,13 @@ import { userList } from "@/api/path/im.api";
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import Discover from './components/Discover/Discover.vue'
+import { useWebSocketStore } from "@/stores/modules/webSocketStore.js";
+const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
 
 
 const walletStore = useWalletStore(); 
 const router = useRouter();
+const wsStore = useWebSocketStore();
 
 
 const activeTab = ref(0)
@@ -93,13 +96,17 @@ const notice = ref(false)
 
 const getuserList = async () => {
   const res = await userList({uuid:walletStore.account});
-  list.value = res.data;
+  list.value = res.data.map(item => {
+    item.avatar = item.avatar ? IM_PATH + item.avatar : item.avatar
+    return item
+  });
 }
 
-const goToChat = (uuid) => {
+const goToChat = (item) => {
+  wsStore.toAvatar = item.avatar
   router.push({
     path: 'chat',
-    query:{uuid}
+    query:{ uuid:item.uuid }
   })
 }
 const goToPage = (url) => {