fix: 1.聊天页面的 消息 和二维码的页面调整

     2.消息的处理 聊天的逻辑

.env.development

@@ -14,17 +14,17 @@ VITE_APP_ENV=development
 # VITE_APP_BASE_URL=http://cilicli.qicp.vip
 
 # 黄雯本地
-VITE_APP_BASE_URL=http://192.168.1.44:8082/
+# VITE_APP_BASE_URL=http://192.168.1.44:8082/
 # 本地socoket
-VITE_APP_IM_URL=ws://192.168.1.44:8082/system/message
+# VITE_APP_IM_URL=ws://192.168.1.44:8082/system/message
 # 花生壳
 # VITE_APP_BASE_URL=http://q9943037p3.goho.co
 # VITE_APP_IM_URL=ws://q9943037p3.goho.co/system/message
 
 # 张维本地
-# VITE_APP_BASE_URL=http://192.168.1.73:8082/
+VITE_APP_BASE_URL=http://192.168.1.73:8082/
 # 本地socoket
-# VITE_APP_IM_URL=ws://192.168.1.73:8082/system/message
+VITE_APP_IM_URL=ws://192.168.1.73:8082/system/message
 # 花生壳
 # VITE_APP_BASE_URL=http://4eqxwr.natappfree.cc
 # VITE_APP_IM_URL=ws://4eqxwr.natappfree.cc/system/message

src/pages/chat/chat-message/image-message/index.vue → src/pages/chat/components/chat-message/image-message/index.vue

@@ -106,11 +106,11 @@ onMounted(() => {
           <div class="absolute w-full h-full left-0 right-0 flex items-center justify-center">
             <van-loading type="spinner" size="20"/>
           </div>
-          <img class="w-full h-full" src="../../../../assets/img/chat/image-loading.png" alt="loading"/>
+          <img class="w-full h-full" src="../../../../../assets/img/chat/image-loading.png" alt="loading"/>
         </div>
       </template>
       <template v-slot:error>
-        <img src="../../../../assets/img/chat/image-error.png" alt="error"/>
+        <img src="../../../../../assets/img/chat/image-error.png" alt="error"/>
       </template>
     </van-image>
   </div>

src/pages/chat/chat-message/index.vue → src/pages/chat/components/chat-message/index.vue

@@ -40,12 +40,12 @@
   </div>
 </template>
 <script setup>
-import defaultAvatar from "~/assets/img/default_avatar.png";
-import TextMessage from "~/pages/chat/chat-message/text-message/index.vue";
-import ImageMessage from "~/pages/chat/chat-message/image-message/index.vue";
-import AudioMessage from "~/pages/chat/chat-message/audio-message/index.vue";
-import LinkMessage from "~/pages/chat/chat-message/link-message/index.vue";
-import {findHyperlinks} from "~/pages/chat/chat-message/link-message/handle";
+import defaultAvatar from "assets/img/default_avatar.png";
+import TextMessage from "~/pages/chat/components/chat-message/text-message/index.vue";
+import ImageMessage from "~/pages/chat/components/chat-message/image-message/index.vue";
+import AudioMessage from "~/pages/chat/components/chat-message/audio-message/index.vue";
+import LinkMessage from "~/pages/chat/components/chat-message/link-message/index.vue";
+import {findHyperlinks} from "~/pages/chat/components/chat-message/link-message/handle";
 
 const userInfoStore = useUserInfoStore();
 const {userInfo} = storeToRefs(userInfoStore);

src/pages/chat/chat-message/link-message/index.vue → src/pages/chat/components/chat-message/link-message/index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { findHyperlinks } from '~/pages/chat/chat-message/link-message/handle'
+import { findHyperlinks } from '~/pages/chat/components/chat-message/link-message/handle'
 
 const props = defineProps({
   messageContent: String | Number, // 消息内容

src/pages/chat/group-chat.vue

@@ -3,7 +3,7 @@
     <van-nav-bar @click-left="router.back()" @click-right="onClickRight">
       <template #left>
         <div>
-          <van-icon name="arrow-left" color="black" size="18"/>
+          <van-icon name="arrow-left" color="black" size="18" />
         </div>
       </template>
       <template #title>
@@ -19,24 +19,24 @@
         </div>
       </template>
       <template #right>
-        <van-icon name="ellipsis" color="black" size="18"/>
+        <van-icon name="ellipsis" color="black" size="18" />
       </template>
     </van-nav-bar>
 
     <van-notice-bar
-        v-if="groupInfo?.groupNotice?.messageContent"
-        left-icon="volume-o"
-        mode="link"
-        :text="groupInfo?.groupNotice?.messageContent"
+      v-if="groupInfo?.groupNotice?.messageContent"
+      left-icon="volume-o"
+      mode="link"
+      :text="groupInfo?.groupNotice?.messageContent"
     ></van-notice-bar>
 
     <template v-if="showPage">
       <van-pull-refresh v-model="refreshing" @refresh="loadMore" class="flex-1">
         <van-list
-            ref="chatListRef"
-            class="h-full overflow-y-auto px-12 flex flex-col"
-            :finished="true"
-            finished-text=""
+          ref="chatListRef"
+          class="h-full overflow-y-auto px-12 flex flex-col"
+          :finished="true"
+          finished-text=""
         >
           <template v-for="(message, index) in currConversationChatList" :key="index">
             <ChatMessage :show-name="true" :message="message"></ChatMessage>
@@ -45,7 +45,11 @@
       </van-pull-refresh>
       <div class="h-70 w-full bg-[#fff]"></div>
       <div class="fixed bottom-0 left-0 right-0 w-full bg-[#fff]">
-        <ChatInput :operates="['image', 'share-group']" @focus="scrollToBottom" @send="handleSendMessage"></ChatInput>
+        <ChatInput
+          :operates="['image', 'share-group']"
+          @focus="scrollToBottom"
+          @send="handleSendMessage"
+        ></ChatInput>
       </div>
     </template>
     <template v-else>
@@ -63,49 +67,47 @@
   </div>
 </template>
 <script setup>
-import ChatMessage from './chat-message'
-import ChatInput from "./chat-input";
-import {findHyperlinks} from "~/pages/chat/chat-message/link-message/handle";
-import {XYWebSocket} from "~/utils/XYWebSocket";
-import {isValidJson} from "~/utils";
+import ChatMessage from './components/chat-message'
+import ChatInput from './components/chat-input'
+import { findHyperlinks } from '~/pages/chat/components/chat-message/link-message/handle'
+import { XYWebSocket } from '~/utils/XYWebSocket'
+import { isValidJson } from '~/utils'
 
 const route = useRoute()
 const router = useRouter()
 
-const chatsStore = useChatsStore();
-const userInfoStore = useUserInfoStore();
+const chatsStore = useChatsStore()
+const userInfoStore = useUserInfoStore()
 
-const {userInfo} = storeToRefs(userInfoStore)
+const { userInfo } = storeToRefs(userInfoStore)
 // 群聊的标题
 const groupInfo = ref({})
 // 每个成员的信息
 const groupMemberInfo = ref({})
 
 // 聊天列表
-const chatListRef = ref(null);
+const chatListRef = ref(null)
 
-const pageLoading = ref(true);
-const getUserId = ref(null); // 消息接收者的用户id
+const pageLoading = ref(true)
+const getUserId = ref(null) // 消息接收者的用户id
 const sendUserId = computed(() => userInfo?.value.pass) // 消息发送者：当前登录用户的加密id
-const groupId = ref(route.query?.groupId); // 会话ID
+const groupId = ref(route.query?.groupId) // 会话ID
 const showPage = computed(() => groupId.value)
 
 const initGroupId = async () => {
   try {
-    if (!groupId.value) return;
+    if (!groupId.value) return
     await getAnnouncement()
     await getChatList('init')
-
   } catch (e) {
-
   } finally {
-    pageLoading.value = false;
+    pageLoading.value = false
   }
 }
 
 let pageNum = ref(0)
 let totalCount = ref(0)
-const currConversationChatList = ref([]);
+const currConversationChatList = ref([])
 /**
  * 加载当前聊天信息
  * @param type init|more
@@ -114,7 +116,7 @@ const currConversationChatList = ref([]);
 const getChatList = async (type = 'init') => {
   try {
     let lastMessageId = null
-    let page = 1;
+    let page = 1
     if (type === 'more') {
       lastMessageId = getLastMessageId()
       page = pageNum.value + 1
@@ -125,13 +127,14 @@ const getChatList = async (type = 'init') => {
       groupId: groupId.value,
       messageId: type === 'more' ? lastMessageId : null
     })
-    pageNum.value = page;
-    await handleResponse(res);
-    let resList = chatsStore.handleMessageList(res.data?.data);
-    totalCount.value = res.data.count;
+    pageNum.value = page
+    await handleResponse(res)
+    let resList = chatsStore.handleMessageList(res.data?.data)
+    totalCount.value = res.data.count
 
-    if (type === 'more') {// 滚动条位置
-      resList = resList.filter(o => o.messageId !== lastMessageId);
+    if (type === 'more') {
+      // 滚动条位置
+      resList = resList.filter((o) => o.messageId !== lastMessageId)
       currConversationChatList.value = [...resList, ...currConversationChatList.value]
     } else {
       currConversationChatList.value = resList
@@ -140,12 +143,11 @@ const getChatList = async (type = 'init') => {
   } catch (e) {
     console.error(e)
   } finally {
-
   }
 }
 
 const getLastMessageId = () => {
-  const len = currConversationChatList.value.length;
+  const len = currConversationChatList.value.length
   if (len) {
     return currConversationChatList.value[0]?.messageId ?? null
   }
@@ -173,7 +175,7 @@ const sendTextMessage = async (text) => {
       }
     }
     const isLink = !!findHyperlinks(text)
-    if (isLink) msg.messageType = 4;
+    if (isLink) msg.messageType = 4
     currConversationChatList.value.push(msg)
     await scrollToBottom()
     const res = await chatsStore.sendSocketMessage(msg)
@@ -181,7 +183,6 @@ const sendTextMessage = async (text) => {
   } catch (e) {
     console.log(e, '2')
   } finally {
-
   }
 }
 
@@ -192,7 +193,7 @@ const sendImageMessage = async (file) => {
     formData.append('uploadFile', file)
     formData.append('asImage', true)
     formData.append('fieldName', 'messageContent')
-    const {data} = await request('/website/tourMessage/upload', {
+    const { data } = await request('/website/tourMessage/upload', {
       method: 'post',
       body: formData
     })
@@ -218,43 +219,37 @@ const sendImageMessage = async (file) => {
   } catch (e) {
     console.error(e, '??')
   } finally {
-
   }
 }
 
-const handleSendMessage = async ({type, messageContent}) => {
+const handleSendMessage = async ({ type, messageContent }) => {
   try {
     switch (type) {
       case 'text':
         await sendTextMessage(messageContent)
-        break;
+        break
       case 'image':
         await sendImageMessage(messageContent)
-        break;
+        break
 
       default:
-
-        break;
+        break
     }
-
   } catch (e) {
-
   } finally {
-
   }
 }
 
 const scrollToBottom = async () => {
   setTimeout(async () => {
-    await nextTick(); // 确保DOM已经更新
-    const listElement = chatListRef.value?.$el;
+    await nextTick() // 确保DOM已经更新
+    const listElement = chatListRef.value?.$el
     if (listElement) {
-      const scrollContainer = listElement;
-      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      const scrollContainer = listElement
+      scrollContainer.scrollTop = scrollContainer.scrollHeight
     }
   }, 200)
-};
-
+}
 
 // 加载更多
 const refreshing = ref(false)
@@ -262,7 +257,7 @@ const loadMore = async () => {
   try {
     refreshing.value = true
     if (currConversationChatList.value.length) {
-      if(totalCount.value === currConversationChatList.value.length) {
+      if (totalCount.value === currConversationChatList.value.length) {
         // 已经加载了全部
       } else {
         await getChatList('more')
@@ -277,13 +272,13 @@ const loadMore = async () => {
 }
 
 const onClickRight = () => {
-  groupId.value && navigateTo({
-    path: '/chat/set',
-    query: {groupId: groupId.value}
-  })
+  groupId.value &&
+    navigateTo({
+      path: '/chat/set',
+      query: { groupId: groupId.value }
+    })
 }
 
-
 // 本地生成一个唯一消息id
 function getLocalId() {
   const random = Math.floor(Math.random() * 10000)
@@ -293,26 +288,30 @@ function getLocalId() {
 onMounted(() => {
   initGroupId()
 
-  XYWebSocket.SocketEventsBus.on(XYWebSocket.SocketEvents.chatEvent, async (chat) => {
-    console.log('订阅群聊消息', chat)
-    const isCurrGroupId = chat.groupId && chat.groupId === groupId.value;
-    const isOtherUserMessage = chat.sendUserId && chatsStore.isRealMessage(chat.sendUserId);
-    if (isCurrGroupId) {
-      if (isOtherUserMessage) {
-        currConversationChatList.value.push(chat)
-        await scrollToBottom()
-      }
-      if (!isOtherUserMessage) {
-        await getChatList('init')
+  try {
+    XYWebSocket.SocketEventsBus.on(XYWebSocket.SocketEvents.chatEvent, async (chat) => {
+      console.log('订阅群聊消息', chat)
+      const isCurrGroupId = chat.groupId && chat.groupId === groupId.value
+      const isOtherUserMessage = chat.sendUserId && chatsStore.isRealMessage(chat.sendUserId)
+      if (isCurrGroupId) {
+        if (isOtherUserMessage) {
+          currConversationChatList.value.push(chat)
+          await scrollToBottom()
+        }
+        if (!isOtherUserMessage) {
+          await getChatList('init')
+        }
       }
-    }
-  })
+    })
+  } catch (error) {
+    console.log(error, '--------------error-----------')
+  }
 })
 
 // 查寻群公告
 async function getAnnouncement() {
-  let {data} = await request('/website/tourGroup/getGroupInfoAndMemberByGroupId', {
-    query: {groupId: groupId.value}
+  let { data } = await request('/website/tourGroup/getGroupInfoAndMemberByGroupId', {
+    query: { groupId: groupId.value }
   })
   console.log(data.memberList)
 
@@ -335,19 +334,18 @@ const delMessage = (messageId) => {
     message: '是否删除这条消息?',
     confirmButtonColor: '#FF9300'
   })
-      .then(async () => {
-        const res = await request('/website/tourMessage/delMessage', {
-          method: 'post',
-          body: {
-            messageId: [messageId]
-          }
-        })
-
-        if (res && res?.success) {
+    .then(async () => {
+      const res = await request('/website/tourMessage/delMessage', {
+        method: 'post',
+        body: {
+          messageId: [messageId]
         }
       })
-      .catch(() => {
-      })
+
+      if (res && res?.success) {
+      }
+    })
+    .catch(() => {})
 }
 
 definePageMeta({

src/pages/chat/single-chat.vue

@@ -55,9 +55,9 @@
   </div>
 </template>
 <script setup>
-import ChatMessage from './chat-message'
-import ChatInput from "./chat-input";
-import {findHyperlinks} from "~/pages/chat/chat-message/link-message/handle";
+import ChatMessage from './components/chat-message'
+import ChatInput from "./components/chat-input";
+import {findHyperlinks} from "~/pages/chat/components/chat-message/link-message/handle";
 import {XYWebSocket} from "~/utils/XYWebSocket";
 
 const route = useRoute()

src/pages/test/index.vue

@@ -32,7 +32,7 @@
   </div>
 </template>
 <script setup>
-import ChatMessage from '../chat/chat-message'
+import ChatMessage from '../chat/components/chat-message'
 import {useRecording} from "~/pages/test/useRecording";
 // import VConsole from 'vconsole';
 // new VConsole({ theme: 'dark' });