feat: 修改单聊页面交互

src/pages/chat/single.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="single-page h-full w-full" style="height: 100vh">
-    <van-nav-bar @click-left="onClickLeft" @click-right="onClickRight">
+    <van-nav-bar @click-left="router.back()" @click-right="onClickRight">
       <template #left>
         <div>
           <van-icon name="arrow-left" color="black" size="18"/>
@@ -19,7 +19,7 @@
       </template>
     </van-nav-bar>
     <van-list
-        ref="messageBoxRef"
+        ref="chatListRef"
         class="flex-1 overflow-y-auto px-12 flex flex-col"
         :finished="true"
         finished-text=""
@@ -27,7 +27,7 @@
       <template v-for="(message, index) in receiveGetter" :key="index">
         <ChatMessage :message="message"></ChatMessage>
       </template>
-      <div v-if="false" class="text-[#979797] text-sm text-center mt-auto mb-10">在对方关注或回复前，最多只能发送1条信息</div>
+      <div v-if="false" class="text-[#979797] text-sm text-center mt-auto mb-10">{{followStatus}}在对方关注或回复前，最多只能发送1条信息</div>
     </van-list>
     <ChatInput :operates="['image']"  @focus="scrollToBottom" @send="handleSendMessage"></ChatInput>
   </div>
@@ -35,73 +35,45 @@
 <script setup>
 import ChatMessage from './chat-message'
 import ChatInput from "./chat-input";
-import {messageContentParse, formatTimestamp} from '~/utils/detalTime'
 import {findHyperlinks} from "~/pages/chat/chat-message/link-message/handle";
 
 const route = useRoute()
 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,conversations, receiveGetter, connectSta, onNewMessage} =
-    storeToRefs(chatStore)
-
+const chatStore = useChatStore();
 const user = computed(() => chatStore.user)
+const {ws, curConversiton, receive, conversations, receiveGetter, connectSta, onNewMessage} = storeToRefs(chatStore)
+console.warn(curConversiton, 'curConversitoncurConversiton')
+// 单聊的标题
+const title = computed(() => route.query.groupRemark)
 
-// 消息接收者的用户id
-const getUserId = computed(() => curConversiton.value.toUserId)
+// 聊天列表
+const chatListRef = ref(null)
+
+// 当前websocket连接状态 0: 未连接 1: 连接中 2: 已连接 3: 已断开
+// const wsConnect = computed(() => connectSta?.value)
 
+// 消息接收者的用户id
+const getUserId = computed(() => curConversiton?.value.toUserId)
 // 消息发送者：当前登录用户的加密id
-const sendUserId = computed(() => user.value.pass)
+const sendUserId = computed(() => user?.value.pass)
 
 // 会话id
 const groupId = computed(() => route.query.groupId)
 
-// 用户在群聊中艾特的人
-const specialUserId = ref('')
-
-// 用户输入的文本消息
-const messageContent = ref('')
-
-// 聊天类型 1单聊 2群聊 3系统消息 4关注信息
-const noticeType = computed(() => curConversiton.value.noticeType)
-
-const messageBoxRef = ref(null)
-const msgBottomRef = ref(null)
-const inputBoxRef = ref(null)
-
-// 当前websocket连接状态 0: 未连接 1: 连接中 2: 已连接 3: 已断开
-const wsConnect = computed(() => connectSta.value)
-
 const followStatus = ref(0)
 
-const querySwParams = reactive({
-  getUserId: computed(() => route.query.getUserId ?? ''),
-  groupId: computed(() => route.query.groupId ?? ''),
-  sendUserId: computed(() => user.value?.pass)
-})
-
 // 本地生成一个唯一消息id
 function getLocalId() {
   const random = Math.floor(Math.random() * 10000)
   return Date.now() + '' + random
 }
 
-// 刷新次数
-const count = ref(0)
-const loading = ref(false)
-const finished = ref(false)
-const messageList = ref([])
-
-// 单聊的标题
-const title = computed(() => route.query.groupRemark)
-
 // 刷新
 const onRefresh = () => {
   refreshing.value = false
 }
 
-const onClickLeft = () => router.back()
 
 const onClickRight = () => {
   navigateTo({
@@ -141,74 +113,29 @@ async function getChatHistory(messageId = '') {
   if (Array.isArray(data)) {
     receive.value = [...data, ...receive.value]
   }
-
-  // 获取到数据后，滚动到底部
-  if (!messageId) {
-    nextTick(() => {
-      setTimeout(() => {
-        mscrollToBottom()
-      }, 100)
-    })
-  }
   console.log('历史记录：', data)
-}
-
-// 监听输入框的enter事件
-function addEventListenerTextarea() {
-  nextTick(() => {
-    if (inputBoxRef.value) {
-      inputBoxRef.value.removeEventListener('keydown', () => {
-      })
-      inputBoxRef.value.addEventListener('keydown', function (event) {
-        if (event.key === 'Enter') {
-          event.preventDefault()
-          sendTextMessage()
-        }
-      })
-    }
-  })
-}
-
-// 监听消息列表的滚动事件
-function addEventListenerMessage() {
-  nextTick(() => {
-    if (messageBoxRef.value) {
-      messageBoxRef.value.removeEventListener('scroll', () => {
-      })
-
-      messageBoxRef.value.addEventListener('scroll', (e) => {
-        if (messageBoxRef.value.scrollTop == 0 && receive.value[0]?.id) {
-          console.log('滚动到顶部了')
-          console.log(receive.value[0].id)
-          getChatHistory(receive.value[0].id)
-        }
-      })
-    }
-  })
+  // 获取到数据后，滚动到底部
+  if (!messageId) await scrollToBottom()
 }
 
 // 获取我与对方的关注情况
-async function isFollow() {
-  if (noticeType.value !== 1) return //只有单聊中才需要获取关注情况
-
+async function getFollowStatus() {
   const query = {
-    userId: curConversiton.value.toUserId
+    userId: getUserId.value
   }
   const {data: status = 0} = await request('/website/tourGroup/isFollow', {query})
   followStatus.value = status
   console.log('关注情况：', status)
 }
 
-
 // 发送文本消息
 const sendTextMessage = (text) => {
   if(!text) return
   let msg = {
-    // getUserId: getUserId.value,
-    // sendUserId: sendUserId.value,
-    // groupId: groupId.value,
-    ...querySwParams,
-    specialUserId: specialUserId.value,
+    groupId: groupId.value,
+    getUserId: getUserId.value,
+    sendUserId: sendUserId.value,
+    specialUserId: '',
     messageContent: text,
     messageType: 0,
     noticeType: 1,
@@ -229,7 +156,6 @@ const sendTextMessage = (text) => {
 // 选择发送图片
 const sendImageMessage = async (file) => {
   try {
-    console.log(file, 'file')
     const formData = new FormData()
     formData.append('uploadFile', file)
     formData.append('asImage', true)
@@ -240,13 +166,13 @@ const sendImageMessage = async (file) => {
     })
 
     const msg = {
+      groupId: groupId.value,
       getUserId: getUserId.value,
       sendUserId: sendUserId.value,
       specialUserId: '',
-      groupId: groupId.value,
       messageContent: JSON.stringify({messageContent: data.fileUrl}),
       messageType: 1,
-      noticeType: noticeType.value,
+      noticeType: 1,
       object: {
         id: getLocalId()
       }
@@ -286,7 +212,7 @@ const handleSendMessage = async ({type, messageContent}) => {
 
 const scrollToBottom = async () => {
   await nextTick(); // 确保DOM已经更新
-  const listElement = messageBoxRef.value?.$el;
+  const listElement = chatListRef.value?.$el;
   if (listElement) {
     const scrollContainer = listElement;
     scrollContainer.scrollTop = scrollContainer.scrollHeight;
@@ -294,24 +220,12 @@ const scrollToBottom = async () => {
 };
 
 
-watch(groupId, async () => {
+watch(groupId, () => {
   // 消息置空
-  receive.value = []
-
-  // 监听消息输入框键盘enter事件
-  // addEventListenerTextarea()
-
-  // 监听聊天框消息滚动事件
-  addEventListenerMessage()
-
-  // 获取与当前会话用户的关注状态
-  isFollow()
-
-  // 获取前会话用户的聊天记录
-  getChatHistory()
+  // receive.value = []
 })
 
-watch(onNewMessage, () => {
+watchEffect(onNewMessage, () => {
   scrollToBottom()
 })
 
@@ -319,15 +233,12 @@ onMounted(() => {
   // 获取前会话用户的聊天记录
   getChatHistory()
 
-  // addEventListenerTextarea()
-  addEventListenerMessage()
-
   // 获取与当前会话用户的关注状态
-  isFollow()
+  getFollowStatus()
 
-  setTimeout(() => {
-    scrollToBottom()
-  }, 500)
+  // setTimeout(() => {
+  //   scrollToBottom()
+  // }, 500)
 })
 
 definePageMeta({