|
@@ -1,483 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="w-full">
|
|
|
- <!-- <audio
|
|
|
- class="fixed top-0 left-0"
|
|
|
- ref="audioRef"
|
|
|
- :src="audioTips"
|
|
|
- style="opacity: 0; z-index: -1"
|
|
|
- ></audio>-->
|
|
|
-
|
|
|
- <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
|
|
|
- <van-sticky :offset-top="50">
|
|
|
- <div class="w-full text-xl font-semibold px-16 h-48 flex justify-start items-center bg-white">
|
|
|
- <span
|
|
|
- @click="showPopover = true"
|
|
|
- v-if="showPopover"
|
|
|
- class="iconfont icon-plus text-[#FF9300]"
|
|
|
- style="font-size: 24px"
|
|
|
- ></span>
|
|
|
- <span v-else class="iconfont icon-plus text-black" style="font-size: 24px"></span>
|
|
|
-
|
|
|
- <van-popover
|
|
|
- v-model:show="showPopover"
|
|
|
- placement="bottom"
|
|
|
- theme="dark"
|
|
|
- offset="[5,20]"
|
|
|
- :actions="actionsList"
|
|
|
- @select="onSelect"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <span :class="`${showPopover ? 'text-[#FF9300]' : 'text-black-3'}`">添加</span>
|
|
|
- </template>
|
|
|
- </van-popover>
|
|
|
- </div>
|
|
|
- </van-sticky>
|
|
|
-
|
|
|
- <div
|
|
|
- @click="onChatPage('/profile/system-message', {})"
|
|
|
- class="w-full relative h-82 flex justify-start items-center px-16"
|
|
|
- >
|
|
|
- <van-badge
|
|
|
- v-if="chatList[0]?.unreadMessageCount"
|
|
|
- v-bind="messageNumber(chatList[0]?.unreadMessageCount)"
|
|
|
- max="99"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="w-48 h-48 bg-[#0052D9] rounded-full overflow-hidden flex justify-center items-center"
|
|
|
- >
|
|
|
- <img class="w-24 h-24 shrink-0 object-cover" src="~/assets/img/chat/remind.svg" alt="" />
|
|
|
- </div>
|
|
|
- </van-badge>
|
|
|
-
|
|
|
- <div
|
|
|
- v-else
|
|
|
- class="w-48 h-48 bg-[#0052D9] rounded-full overflow-hidden flex justify-center items-center"
|
|
|
- >
|
|
|
- <img class="w-24 h-24 shrink-0 object-cover" src="~/assets/img/chat/remind.svg" alt="" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
|
|
|
- <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
|
|
|
- {{ chatList[0]?.groupName }}
|
|
|
- </h1>
|
|
|
- <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
|
|
|
- {{
|
|
|
- chatList[0]?.lastMessage
|
|
|
- ? messageContentParse(chatList[0]?.lastMessage?.messageContent)
|
|
|
- : ''
|
|
|
- }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="w-35 h-48 shrink-0">
|
|
|
- <p class="text-black/[0.6] text-sm text-end">
|
|
|
- {{
|
|
|
- chatList[0]?.lastMessage ? createTimeSplit(chatList[0]?.lastMessage?.createTime) : ''
|
|
|
- }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- @click="navigateTo('/follow?listType=fans')"
|
|
|
- class="w-full relative h-82 flex justify-start items-center px-16"
|
|
|
- >
|
|
|
- <van-badge
|
|
|
- v-if="chatList[1]?.unreadMessageCount"
|
|
|
- v-bind="messageNumber(chatList[1]?.unreadMessageCount)"
|
|
|
- max="99"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="w-48 h-48 bg-[#FF9300] rounded-full overflow-hidden flex justify-center items-center"
|
|
|
- >
|
|
|
- <img class="w-24 h-24 shrink-0 object-cover" src="~/assets/img/chat/user.svg" alt="" />
|
|
|
- </div>
|
|
|
- </van-badge>
|
|
|
-
|
|
|
- <div
|
|
|
- v-else
|
|
|
- @click="navigateTo('/follow?listType=fans')"
|
|
|
- class="w-48 h-48 bg-[#0052D9] rounded-full overflow-hidden flex justify-center items-center"
|
|
|
- >
|
|
|
- <img class="w-24 h-24 shrink-0 object-cover" src="~/assets/img/chat/user.svg" alt="" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
|
|
|
- <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
|
|
|
- {{ chatList[1]?.groupName }}
|
|
|
- </h1>
|
|
|
- <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
|
|
|
- {{
|
|
|
- chatList[1]?.lastMessage
|
|
|
- ? messageContentParse(chatList[1]?.lastMessage?.messageContent)
|
|
|
- : ''
|
|
|
- }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="w-35 h-48 shrink-0">
|
|
|
- <p class="text-black/[0.6] text-sm text-end">
|
|
|
- {{
|
|
|
- chatList[1]?.lastMessage ? createTimeSplit(chatList[1]?.lastMessage?.createTime) : ''
|
|
|
- }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- @click="onChatPage('/profile/interaction-message', {})"
|
|
|
- class="w-full relative h-82 flex justify-start items-center px-16"
|
|
|
- >
|
|
|
- <van-badge v-if="messagesNumber > 0" v-bind="messageNumber(messagesNumber)" max="99">
|
|
|
- <div
|
|
|
- class="w-48 h-48 bg-[#FF476A] rounded-full overflow-hidden flex justify-center items-center"
|
|
|
- >
|
|
|
- <img
|
|
|
- class="w-24 h-24 shrink-0 object-cover"
|
|
|
- src="~/assets/img/chat/weixin-shake.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
- </van-badge>
|
|
|
-
|
|
|
- <div
|
|
|
- v-else
|
|
|
- class="w-48 h-48 bg-[#FF476A] rounded-full overflow-hidden flex justify-center items-center"
|
|
|
- >
|
|
|
- <img
|
|
|
- class="w-24 h-24 shrink-0 object-cover"
|
|
|
- src="~/assets/img/chat/weixin-shake.svg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
|
|
|
- <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
|
|
|
- {{ chatList[2]?.groupName }}
|
|
|
- </h1>
|
|
|
- <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
|
|
|
- {{
|
|
|
- chatList[2]?.lastMessage
|
|
|
- ? messageContentParse(chatList[2]?.lastMessage?.messageContent)
|
|
|
- : ''
|
|
|
- }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="w-35 h-48 shrink-0">
|
|
|
- <p class="text-black/[0.6] text-sm text-end">
|
|
|
- {{
|
|
|
- chatList[2]?.lastMessage ? createTimeSplit(chatList[2]?.lastMessage?.createTime) : ''
|
|
|
- }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 置顶绘画列表 "-->
|
|
|
- <div v-if="isTopList?.length && activeNames" class="w-full">
|
|
|
- <template v-for="(item, index) in isTopList" :key="item?.id">
|
|
|
- <template v-if="index > 2">
|
|
|
- <!-- 单聊会话 -->
|
|
|
- <ProfileNewsGroupChat
|
|
|
- v-if="item?.noticeType == 2"
|
|
|
- :item-data="{
|
|
|
- ...item,
|
|
|
- updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
|
|
|
- }"
|
|
|
- @on-chat-page="
|
|
|
- onChatPage('/chat/group-chat', { userId: user.userId, groupId: item?.groupId })
|
|
|
- "
|
|
|
- @on-no-bother="noBother(item)"
|
|
|
- @on-is-top="onIsTop(item)"
|
|
|
- @on-conv-delete="onIsShow(item)"
|
|
|
- />
|
|
|
-
|
|
|
- <!-- 群聊会话 -->
|
|
|
- <ProfileNewsSingleChat
|
|
|
- v-if="item?.noticeType == 1"
|
|
|
- :item-data="{
|
|
|
- ...item,
|
|
|
- updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
|
|
|
- }"
|
|
|
- @on-chat-page="
|
|
|
- onChatPage('/chat/single', {
|
|
|
- sendUserId: userInfo.userId,
|
|
|
- groupId: item?.groupId,
|
|
|
- getUserId: item?.toUserId,
|
|
|
- groupRemark: item?.groupRemark
|
|
|
- })
|
|
|
- "
|
|
|
- @on-no-bother="noBother(item)"
|
|
|
- @on-is-top="onIsTop(item)"
|
|
|
- @on-conv-delete="onIsShow(item)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-else></template>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- v-if="isTopList.length >= 6"
|
|
|
- @click="activeNames = !activeNames"
|
|
|
- class="flex justify-between border items-center h-20 w-full p-16 box-border"
|
|
|
- >
|
|
|
- <div class="shrink-0 flex items-center">
|
|
|
- <van-icon name="bars" size="16" class="mr-5" />
|
|
|
- <span class="text-sm">{{ collapseTitle }}</span>
|
|
|
- </div>
|
|
|
- <div class="w-16 h-16 shrink-0">
|
|
|
- <van-icon name="arrow" size="16" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 不置顶的会话列表 -->
|
|
|
- <template v-for="(item, index) in pinnedList" :key="item?.id">
|
|
|
- <ProfileNewsGroupChat
|
|
|
- v-if="item?.noticeType == 2"
|
|
|
- :item-data="{
|
|
|
- ...item,
|
|
|
- updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
|
|
|
- }"
|
|
|
- @on-chat-page="
|
|
|
- onChatPage('/chat/group-chat', {
|
|
|
- userId: userInfo.userId,
|
|
|
- groupId: item?.groupId
|
|
|
- })
|
|
|
- "
|
|
|
- @on-no-bother="noBother(item)"
|
|
|
- @on-is-top="onIsTop(item)"
|
|
|
- @on-conv-delete="onIsShow(item)"
|
|
|
- />
|
|
|
- <ProfileNewsSingleChat
|
|
|
- v-if="item?.noticeType == 1"
|
|
|
- :item-data="{
|
|
|
- ...item,
|
|
|
- updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
|
|
|
- }"
|
|
|
- @on-chat-page="
|
|
|
- onChatPage('/chat/single', {
|
|
|
- sendUserId: userInfo.userId,
|
|
|
- groupId: item?.groupId,
|
|
|
- getUserId: item?.toUserId,
|
|
|
- groupRemark: item?.groupRemark
|
|
|
- })
|
|
|
- "
|
|
|
- @on-no-bother="noBother(item)"
|
|
|
- @on-is-top="onIsTop(item)"
|
|
|
- @on-conv-delete="onIsShow(item)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <!-- </van-pull-refresh> -->
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import comments from '~/assets/img/chat/comments-white.svg'
|
|
|
-import plaza from '~/assets/img/chat/guangchang.svg'
|
|
|
-import userAdd from '~/assets/img/chat/user-add.svg'
|
|
|
-
|
|
|
-import { messageContentParse } from '~/utils/detalTime.js'
|
|
|
-
|
|
|
-const actionsList = [
|
|
|
- { text: '创建群聊', icon: comments },
|
|
|
- { text: '群聊广场', icon: plaza },
|
|
|
- { text: '加入群聊', icon: plaza },
|
|
|
- { text: '添加用户', icon: userAdd }
|
|
|
-]
|
|
|
-const userInfoStore = useUserInfoStore()
|
|
|
-const { userInfo } = storeToRefs(userInfoStore)
|
|
|
-// const uploadUrl = `${import.meta.env.VITE_APP_BASE_URL}/website/tourMessage/upload`
|
|
|
-const chatStore = useChatStore()
|
|
|
-const { messages, connectSta, chatList, curConversiton, onNewMessage } = storeToRefs(chatStore)
|
|
|
-
|
|
|
-// 链接的状态
|
|
|
-const wsConnect = computed(() => connectSta.value)
|
|
|
-
|
|
|
-const chatLists = computed(() => chatList.value)
|
|
|
-
|
|
|
-const audioRef = ref(null)
|
|
|
-
|
|
|
-const finished = ref(false)
|
|
|
-
|
|
|
-const error = ref(false)
|
|
|
-
|
|
|
-const loading = ref(false)
|
|
|
-
|
|
|
-const showPopover = ref(false)
|
|
|
-
|
|
|
-const messagesNumber = ref(10)
|
|
|
-
|
|
|
-// 置顶列表
|
|
|
-const isTopList = computed(() => chatList.value.filter((el) => el.isTop != 1))
|
|
|
-const pinnedList = computed(() => chatList.value.filter((el) => el?.isTop == 1) ?? [])
|
|
|
-const pinnedSystemList = ref([]) //三个固定的消息
|
|
|
-
|
|
|
-// 个置顶聊天
|
|
|
-const collapse_text = '折叠置顶聊天'
|
|
|
-
|
|
|
-const activeNames = ref(true)
|
|
|
-// collapse
|
|
|
-const collapseTitle = ref(collapse_text)
|
|
|
-
|
|
|
-// 刷新
|
|
|
-const refreshing = ref(false)
|
|
|
-
|
|
|
-// 建立链接
|
|
|
-// async function getUserInfo() {
|
|
|
-// const { data } = await request('/website/tourism/user/view')
|
|
|
-// chatStore.user = data
|
|
|
-// user.value = data
|
|
|
-// console.log(data, 'createConnection')
|
|
|
-
|
|
|
-// await chatStore.createConnection(data.pass)
|
|
|
-// chatStore.reqChatList()
|
|
|
-
|
|
|
-// console.log('用户信息:', chatStore.user)
|
|
|
-
|
|
|
-// // console.log('会话列表:', chatStore.chatList.value)
|
|
|
-// }
|
|
|
-
|
|
|
-useSeoMeta({
|
|
|
- title: '我的消息'
|
|
|
-})
|
|
|
-
|
|
|
-// 时间的转换
|
|
|
-const createTimeSplit = (timer) => {
|
|
|
- if (timer) {
|
|
|
- return timer.split(' ')[1]
|
|
|
- }
|
|
|
-}
|
|
|
-// 下拉刷新
|
|
|
-const onRefresh = () => {
|
|
|
- refreshing.value = true
|
|
|
- chatStore.reqChatList()
|
|
|
- refreshing.value = false
|
|
|
-}
|
|
|
-
|
|
|
-// 打扰和免打扰得
|
|
|
-const noBother = (parmas) => {
|
|
|
- handleBoolean({ groupId: parmas.groupId, isNotDisturb: parmas.isNotDisturb })
|
|
|
-}
|
|
|
-
|
|
|
-// 是否置顶
|
|
|
-const onIsTop = (parmas) => {
|
|
|
- handleBoolean({ groupId: parmas.groupId, isTop: parmas.isTop })
|
|
|
-}
|
|
|
-
|
|
|
-// 是否显示会话
|
|
|
-const onIsShow = (parmas) => {
|
|
|
- handleBoolean({ groupId: parmas.groupId, isShow: parmas.isShow })
|
|
|
-}
|
|
|
-
|
|
|
-// 是否免打扰和 是否置顶 公共
|
|
|
-const handleBoolean = async (body) => {
|
|
|
- try {
|
|
|
- let { data } = await request('/website/tourMember/updateSingleTourMember', {
|
|
|
- method: 'post',
|
|
|
- body
|
|
|
- })
|
|
|
- if (data) {
|
|
|
- chatStore.reqChatList()
|
|
|
- }
|
|
|
- } catch (error) {}
|
|
|
-}
|
|
|
-
|
|
|
-// 消息数量通知的展示 需要动态的展示
|
|
|
-const messageNumber = (content) => {
|
|
|
- let messageNumberObj = {}
|
|
|
-
|
|
|
- if (content != null || content != undefined || content != '') {
|
|
|
- if (content <= 1) {
|
|
|
- messageNumberObj = {
|
|
|
- offset: [-5, 4],
|
|
|
- dot: true,
|
|
|
- content
|
|
|
- }
|
|
|
- }
|
|
|
- if (content > 1) {
|
|
|
- messageNumberObj = {
|
|
|
- offset: [-10, 7],
|
|
|
- content
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- content = 0
|
|
|
- messageNumberObj = {
|
|
|
- offset: [-5, 4],
|
|
|
- dot: true,
|
|
|
- content
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return messageNumberObj
|
|
|
-}
|
|
|
-
|
|
|
-// 跳转聊天页面
|
|
|
-const onChatPage = async (path, query) => {
|
|
|
- const res = await request('/website/tourMessage/updateRead', {
|
|
|
- query: {
|
|
|
- groupId: query.groupId
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- if (res && res?.success) {
|
|
|
- navigateTo({
|
|
|
- path,
|
|
|
- query
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 选中的是那个页面
|
|
|
-const onSelect = (action) => {
|
|
|
- if (action.text == '创建群聊') onChatPage('/chat/create-group', {})
|
|
|
- if (action.text == '群聊广场') onChatPage('/chat/group-square', {})
|
|
|
- if (action.text == '加入群聊') onChatPage('/scan', {})
|
|
|
- if (action.text == '添加用户') onChatPage('/chat/user-add', {})
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- if (wsConnect == 0) {
|
|
|
- showToast('聊天网络连接中...')
|
|
|
- } else if (wsConnect == 1) {
|
|
|
- showToast(' 聊天正在连接中...')
|
|
|
- } else if (wsConnect == 3) {
|
|
|
- showToast(' 聊天连接已断开,请刷新页面重新连接,或稍后重试!')
|
|
|
- } else if (wsConnect == 2) {
|
|
|
- }
|
|
|
- chatStore.reqChatList()
|
|
|
- // chatStore.reqChatList()
|
|
|
-})
|
|
|
-
|
|
|
-// watch(
|
|
|
-// wsConnect,
|
|
|
-// async (newValue, oldValue) => {
|
|
|
-// console.log(newValue, 'wsConnect')
|
|
|
-// console.log(chatLists.value, 'chatLists')
|
|
|
-
|
|
|
-// if (newValue == 2) {
|
|
|
-// pinnedList.value = chatList.value.filter((el) => el.isTop != 1)
|
|
|
-// isTopList.value = chatList.value.filter((el) => el.isTop == 1)
|
|
|
-// }
|
|
|
-// },
|
|
|
-// { immediate: true }
|
|
|
-// )
|
|
|
-// watch(
|
|
|
-// chatList.value,
|
|
|
-// (newList, oldList) => {
|
|
|
-// // pinnedSystemList.value = newList.filter((el) => el.noticeType == 3)
|
|
|
-// pinnedList.value = newList.filter((el) => el.isTop != 1)
|
|
|
-// isTopList.value = newList.filter((el) => el.isTop == 1)
|
|
|
-
|
|
|
-// console.log(pinnedList.value, 'pinnedList')
|
|
|
-// console.log(isTopList.value, 'isTopList')
|
|
|
-// // console.log(newList, 'newList')
|
|
|
-// console.log(oldList, 'oldList')
|
|
|
-// },
|
|
|
-// { immediate: true }
|
|
|
-// )
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped></style>
|