feat: 修改单聊页面交互

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

@@ -1,7 +1,6 @@
 <template v-if="message">
   <div class="chat-message" :class="msg.viewType ? 'chat-message--accept' : 'chat-message--send'">
     <div class="text-center text-sm text-[#000]/40 mb-16">{{ message.createTime }}</div>
-
     <div class="chat-message__content">
       <van-image
           v-if="msg.viewType === 1"
@@ -44,6 +43,7 @@ import {isValidJson} from "~/utils";
 const chatStore = useChatStore()
 const user = computed(() => chatStore.user)
 const {curConversiton} = storeToRefs(chatStore)
+
 const props = defineProps({
   message: Object
 });
@@ -51,13 +51,15 @@ const props = defineProps({
 let msg = ref(null)
 const initMsg = () => {
   try {
-    console.log(props.message, 'messagemessage')
     if (!isValidJson(props.message?.messageContent)) return
     const {createTime, getUserId, sendUserId, messageContent} = JSON.parse(props.message?.messageContent)
+    console.log(props.message, 'messagemessage')
+    console.log(curConversiton.value.id, 'curConversiton')
+
     msg.value = {
       messageContent: messageContent,
       type: getMessageType(props.message?.messageType),
-      viewType: getUserId === sendUserId ? 0 : 1,
+      viewType: props.message?.sendUserId == user.value.pass,
       createTime: createTime
     }
   } catch (e) {

src/pages/chat/single.vue

@@ -46,7 +46,7 @@ const router = useRouter()
 const refreshing = ref(false)
 const uploadUrl = `${import.meta.env.VITE_APP_BASE_URL}/website/tourMessage/upload`
 const chatStore = useChatStore()
-const {ws, curConversiton, receive, receiveGetter, connectSta, onNewMessage} =
+const {ws, curConversiton, receive,conversations, receiveGetter, connectSta, onNewMessage} =
     storeToRefs(chatStore)
 
 const user = computed(() => chatStore.user)
@@ -145,8 +145,7 @@ function sendMessage(messageParams) {
     messageContent: JSON.stringify({messageContent: msg.messageContent})
   })
   messageContent.value = ''
-  messageBoxRef.value.scrollTop = messageBoxRef.value.scrollHeight
-
+  scrollToBottom()
   msg = JSON.stringify(msg)
   ws.value.send(msg)
 }
@@ -185,7 +184,7 @@ async function getChatHistory(messageId = '') {
   if (!messageId) {
     nextTick(() => {
       setTimeout(() => {
-        messageBoxRef.value && messageBoxRef.value.scrollTo({top: msgBottomRef.value.offsetTop})
+        mscrollToBottom()
       }, 100)
     })
   }
@@ -246,7 +245,7 @@ function selectImg(fileUrl) {
       ...msg,
       messageContent: JSON.stringify({messageContent: fileUrl})
     })
-    messageBoxRef.value.scrollTop = messageBoxRef.value.scrollHeight
+    scrollToBottom()
     ws.value.send(JSON.stringify(msg))
   } catch (e) {
     console.error(e, '??')
@@ -267,6 +266,15 @@ async function isFollow() {
   console.log('关注情况：', status)
 }
 
+const scrollToBottom = async () => {
+  await nextTick(); // 确保DOM已经更新
+  const listElement = messageBoxRef.value?.$el;
+  if (listElement) {
+    const scrollContainer = listElement.querySelector('.van-list') || listElement;
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+  }
+};
+
 watch(groupId, async () => {
   // 消息置空
   receive.value = []