|
@@ -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,7 +19,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #right>
|
|
|
- <van-icon name="ellipsis" color="black" size="18"/>
|
|
|
+ <van-icon name="ellipsis" color="black" size="18" />
|
|
|
</template>
|
|
|
</van-nav-bar>
|
|
|
|
|
@@ -32,19 +32,23 @@
|
|
|
|
|
|
<template v-if="showPage">
|
|
|
<van-list
|
|
|
- ref="chatListRef"
|
|
|
- class="flex-1 overflow-y-auto px-12 flex flex-col"
|
|
|
- :finished="true"
|
|
|
- finished-text=""
|
|
|
+ ref="chatListRef"
|
|
|
+ class="flex-1 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>
|
|
|
+ <ChatMessage :show-name="true" :message="message"></ChatMessage>
|
|
|
</template>
|
|
|
</van-list>
|
|
|
<!-- <van-pull-refresh v-model="refreshing" @refresh="loadMore" class="flex-1">
|
|
|
</van-pull-refresh>-->
|
|
|
<!-- <div class="fixed bottom-0 left-0 right-0 w-full">-->
|
|
|
- <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>
|
|
@@ -53,7 +57,7 @@
|
|
|
<div v-else class="grid place-items-center">
|
|
|
<div v-if="groupId">创建成功</div>
|
|
|
<div v-else class="grid place-items-center">
|
|
|
- <div class="mb-10">创建会话失败</div>
|
|
|
+ <div class="mb-10">创建会话失败</div>
|
|
|
<van-button size="small" @click="initGroupId">点击重试</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -63,16 +67,16 @@
|
|
|
</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 ChatInput from './chat-input'
|
|
|
+import { findHyperlinks } from '~/pages/chat/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)
|
|
|
// 群聊的标题
|
|
@@ -81,34 +85,32 @@ 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
|
|
|
+ /*
|
|
|
pageLoading.value = true;
|
|
|
const res = await chatsStore.getCurrConversationId(getUserId.value)
|
|
|
await handleResponse(res)
|
|
|
groupId.value = res.data;*/
|
|
|
await getAnnouncement()
|
|
|
await getChatList('init')
|
|
|
-
|
|
|
} catch (e) {
|
|
|
-
|
|
|
} finally {
|
|
|
- pageLoading.value = false;
|
|
|
+ pageLoading.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let pageNum = ref(0)
|
|
|
-const currConversationChatList = ref([]);
|
|
|
+const currConversationChatList = ref([])
|
|
|
/**
|
|
|
* 加载当前聊天信息
|
|
|
* @param type init|more
|
|
@@ -116,22 +118,27 @@ const currConversationChatList = ref([]);
|
|
|
*/
|
|
|
const getChatList = async (type = 'init') => {
|
|
|
try {
|
|
|
- const page = type === 'init' ? 1 : pageNum.value + 1;
|
|
|
+ const page = type === 'init' ? 1 : pageNum.value + 1
|
|
|
const res = await chatsStore.getChatHistory({
|
|
|
pageNum: page,
|
|
|
pageSize: 100,
|
|
|
- groupId: groupId.value,
|
|
|
+ groupId: groupId.value
|
|
|
})
|
|
|
- pageNum.value = page;
|
|
|
- await handleResponse(res);
|
|
|
- currConversationChatList.value = chatsStore.handleMessageList(res.data?.data)
|
|
|
+ pageNum.value = page
|
|
|
+ await handleResponse(res)
|
|
|
+ currConversationChatList.value = handleChatList(res.data?.data)
|
|
|
+ console.log(currConversationChatList.value, 'currConversationChatList')
|
|
|
if (type === 'init') await scrollToBottom()
|
|
|
} catch (e) {
|
|
|
console.error(e)
|
|
|
} finally {
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
+const handleChatList = (list = []) => {
|
|
|
+ return (list ?? [])
|
|
|
+ .filter((o) => isValidJson(o.messageContent))
|
|
|
+ .map((o) => JSON.parse(o.messageContent))
|
|
|
+}
|
|
|
|
|
|
// 发送文本消息
|
|
|
const sendTextMessage = async (text) => {
|
|
@@ -154,7 +161,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)
|
|
@@ -162,7 +169,6 @@ const sendTextMessage = async (text) => {
|
|
|
} catch (e) {
|
|
|
console.log(e, '2')
|
|
|
} finally {
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -173,7 +179,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
|
|
|
})
|
|
@@ -199,44 +205,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)
|
|
@@ -244,19 +243,20 @@ const loadMore = async () => {
|
|
|
try {
|
|
|
refreshing.value = true
|
|
|
await getChatList('more')
|
|
|
- } catch (e) { } finally {
|
|
|
+ } catch (e) {
|
|
|
+ } finally {
|
|
|
refreshing.value = false
|
|
|
}
|
|
|
}
|
|
|
|
|
|
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)
|
|
@@ -267,17 +267,11 @@ 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')
|
|
|
- }
|
|
|
+ const isCurrGroupId = chat.groupId && chat.groupId === groupId.value
|
|
|
+ const isOtherUserMessage = chat.sendUserId && chatsStore.isRealMessage(chat.sendUserId)
|
|
|
+ if (isCurrGroupId && isOtherUserMessage) {
|
|
|
+ currConversationChatList.value.push(chat)
|
|
|
+ await scrollToBottom()
|
|
|
}
|
|
|
})
|
|
|
})
|
|
@@ -287,12 +281,15 @@ async function getAnnouncement() {
|
|
|
let { data } = await request('/website/tourGroup/getGroupInfoAndMemberByGroupId', {
|
|
|
query: { groupId: groupId.value }
|
|
|
})
|
|
|
+ console.log(data.memberList)
|
|
|
|
|
|
if (data) {
|
|
|
groupInfo.value = data
|
|
|
- if (Array.isArray(data.memberList) && data.memberList?.lenght) {
|
|
|
- data.memberList.map((el) => {
|
|
|
+ if (Array.isArray(data?.memberList) && data?.memberList?.lenght) {
|
|
|
+ data?.memberList?.map((el) => {
|
|
|
if (el.userId == userInfo.value.userId) {
|
|
|
+ // console.log(el, '8888-------')
|
|
|
+
|
|
|
groupMemberInfo.value = el
|
|
|
}
|
|
|
})
|
|
@@ -307,19 +304,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({
|