Browse Source

fix: 1.互动消息的页面逻辑判断,还有群广场的数据字段修改,还有头部消息通知的红点效果显示与不显示。

suwenjiang 2 months ago
parent
commit
72d58d6c2c

+ 1 - 1
.env.development

@@ -24,7 +24,7 @@ VITE_APP_ENV=development
 # 张维本地
 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://192.168.1.204:8082
 VITE_APP_EMOJI_API=https://v.xiaoyaotravel.com/emoji/

+ 26 - 5
src/components/NavigationBar/index.client.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="h-50 bg-white justify-between w-full fixed z-[999] border-b box-border">
+    <audio
+      class="fixed top-0 left-0"
+      ref="audioRef"
+      :src="audioTips"
+      style="opacity: 0; z-index: -1"
+    ></audio>
     <NuxtLink to="/" class="absolute top-1/2 -translate-y-1/2 left-15">
       <img src="~/assets/img/logo.png" class="h-30 object-contain" />
     </NuxtLink>
@@ -41,10 +47,12 @@
 </template>
 
 <script setup>
-const chatStore = useChatStore()
-const { chatList } = storeToRefs(chatStore)
-
+const chatsStore = useChatsStore()
+const { chatList, chatListLoading } = storeToRefs(chatsStore)
+import { XYWebSocket } from '@/utils/XYWebSocket.ts'
 import defaultAvatar from '~/assets/img/default_avatar.png'
+import audioTips from '@/assets/audio/message.mp3'
+const audioRef = ref(null)
 
 const isMenuShow = ref(false)
 
@@ -65,15 +73,28 @@ watch(
   () => {
     if (token.value) {
       userInfoStore.getUserInfo()
-      chatStore.reqChatList()
     }
   },
   { immediate: true }
 )
 
+// 监听Socket
+onMounted(() => {
+  chatsStore.getChatList()
+  XYWebSocket.SocketEventsBus.on(XYWebSocket.SocketEvents.chatEvent, () => {
+    chatsStore.getChatList()
+    audioRef.value && audioRef.value.play()
+  })
+})
+
+// 卸载Socket
+onUnmounted(() => {
+  XYWebSocket.SocketEventsBus.off(XYWebSocket.SocketEvents.chatEvent)
+})
+
+// 是否有消息显示红点
 const showDot = computed(() => {
   let newTatol = chatList.value.reduce((sum, item) => sum + item?.unreadMessageCount, 0)
-  console.log(newTatol, 'newTatol')
 
   if (newTatol) {
     return true

+ 8 - 10
src/components/Profile/InteractionMessage/Eit.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex justify-between itmes-start px-16 py-8 mb-12">
+  <div
+    class="mx-12 py-8 mb-20 box-border border-b-[1px] border-dashed flex justify-between itmes-start"
+  >
     <div class="w-265 shrink-0 box-border flex justify-start itmes-start">
       <div class="w-32 h-32 shrink-0 rounded-full mr-8 overflow-hidden">
         <img
@@ -16,8 +18,8 @@
         />
       </div>
 
-      <div class="w-223">
-        <div class="-mt-5">
+      <div class="w-[85%]">
+        <div class="-mt-5 w-full text-sm">
           <span class="text-sm text-black-6 pr-4">{{ itemData?.showName }}</span>
 
           <div
@@ -33,12 +35,8 @@
             粉丝
           </div>
         </div>
-        <h1 class="w-full font-semibold line-clamp-2 text-black-3 text-base">
-          {{
-            itemData.messageConten
-              ? `提到了你:${itemData.messageConten}`
-              : '提到了你: 赞了你的游记'
-          }}
+        <h1 class="w-full my-6 font-semibold line-clamp-2 text-black-3 text-base">
+          {{ itemData.messageConten }}
         </h1>
         <p class="text-black-9 text-sm">{{ itemData.creatTime }}</p>
       </div>
@@ -47,7 +45,7 @@
     <NuxtLink
       itemData
       :to="itemData.businessType == 1 ? `/yj/${itemData.businessId}` : '/'"
-      class="block w-71 ml-17 h-47 shrink-0 rounded-[4px] overflow-hidden"
+      class="block w-71 -mt-5 ml-17 h-47 shrink-0 rounded-[4px] overflow-hidden"
     >
       <img
         v-if="itemData?.imageUrl"

+ 6 - 4
src/components/Profile/InteractionMessage/LikesandFavorites.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex justify-between itmes-start px-16 py-8 mb-12">
+  <div
+    class="mx-12 py-8 mb-20 box-border border-b-[1px] border-dashed flex justify-between itmes-start"
+  >
     <div class="w-265 shrink-0 box-border flex justify-start itmes-start">
       <div class="w-32 h-32 shrink-0 rounded-full mr-8 overflow-hidden">
         <img
@@ -16,8 +18,8 @@
         />
       </div>
 
-      <div>
-        <div class="-mt-5">
+      <div class="w-[85%]">
+        <div class="-mt-5 w-full text-sm">
           <span class="text-sm text-black-6 pr-4">{{ itemData.showName }}</span>
           <div
             v-if="itemData.state == 4"
@@ -33,7 +35,7 @@
           </div>
         </div>
         <h1 class="font-semibold text-black-3 text-base">
-          {{ itemData.noticeType == 5 }}
+          {{ itemData.messageContent }}
         </h1>
         <p class="text-black-9 text-sm">{{ itemData.creatTime }}</p>
       </div>

+ 12 - 9
src/components/Profile/InteractionMessage/ReceiveComment.vue

@@ -1,9 +1,10 @@
 <template>
   <div
     style="scrollbar-width: none"
-    class="mx-12 pt-8 mb-12 box-border border-b-[1px] border-dashed flex justify-between items-start"
+    class="mx-12 py-8 mb-20  box-border border-b-[1px] border-dashed flex justify-between items-start"
   >
-    <div class="flex shrink-0 w-[74%] justify-start items-start">
+
+    <div class="flex shrink-0 w-[74%]  justify-start items-start">
       <div class="w-32 h-32 rounded-full shrink-0">
         <img
           v-if="itemData?.headImage"
@@ -19,7 +20,7 @@
         />
       </div>
 
-      <div class="ml-8 w-[85%] w-full text-sm">
+      <div class="-mt-5 ml-8 w-[85%] w-full text-sm">
         <NuxtLink :to="goToPage(itemData)">
           <p class="w-full line-clamp-1 ">
             <span class="text-black-6  text-sm  pr-4">
@@ -34,25 +35,27 @@
           </p>
 
           <p
-            :class="`w-full ${itemData?.state == 7 ? 'line-clamp-1' : 'line-clamp-2'} my-6 text-black-3 text-base leading-4xl`"
+            :class="`w-full  line-clamp-2 my-6 text-black-3 text-base leading-4xl`"
           >
-            <span v-if="itemData?.isReply== 1">
+            <span v-if="itemData?.noticeType== 12">
               回复{{
                 itemData?.showName != userInfo.showName
                   ? `@${itemData?.showName}`
                   : ''
               }}:
             </span>
-            <span v-else>评论:</span>
+            <span v-if="itemData?.noticeType==6">评论:</span>
 
             <span v-html="coveredContent( itemData?.messageContent)"></span>
           </p>
           <p class="w-full mb-6 text-black-9 leading-xl">{{ itemData?.createTime }}</p>
         </NuxtLink>
-        <!--   @click.stop="addReply(itemData, itemData?.id)" -->
+     
         <div
-         v-if="itemData?.isReply== 1"
-         @click.stop="$emit('onAddReply')"
+         v-if="itemData?.noticeType== 12"
+         @click="itemData.noticeType == 12 ? navigateTo({
+          path:`/yj/${itemData.businessId}` ,
+         }) :()=>{}"
           class="box-border mb-12 line-clamp-1 rounded-full w-95 h-26 flex justify-center items-center text-base px-8 text-black-3 leading-4xl bg-[#F5F5F5] active:bg-black/[0.1]"
         >
           <div class="w-16 h-16 rounded-full shrink-0 mr-4">

+ 9 - 6
src/components/Profile/InteractionMessage/SendComment.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="flex justify-between itmes-start px-16 py-8 mb-12">
+  <div
+    class="mx-12 py-8 mb-20 box-border border-b-[1px] border-dashed flex justify-between itmes-start"
+  >
     <div class="w-265 shrink-0 box-border flex justify-start itmes-start">
       <div class="w-32 h-32 shrink-0 rounded-full mr-8 overflow-hidden">
         <img
@@ -20,11 +22,12 @@
         <div class="-mt-5 line-clamp-1 text-sm text-black-6 pr-4">
           {{ userInfo?.showName }}
         </div>
-        <h1 class="w-full font-semibold line-clamp-2 text-black-3 text-base">
-          <template v-if="itemData.isReply == 1">
-            回复 {{ itemData.showName != userInfo.showName ? `@${itemData?.showName}:` : '' }}
-          </template>
-          <template v-else>评论:</template>
+        <h1
+          v-if="itemData.messageConten"
+          class="w-full font-semibold line-clamp-2 text-black-3 text-base"
+        >
+          <template v-if="itemData.noticeType == 12">回复:</template>
+          <template v-if="itemData.noticeType == 6">评论:</template>
           {{ itemData.messageConten }}
         </h1>
         <p class="text-black-9 text-sm">{{ itemData.creatTime }}</p>

+ 16 - 8
src/pages/chat/group-square.vue

@@ -239,21 +239,25 @@ const getList = async () => {
     })
 
     dataList.map((el) => {
-      if (Array.isArray(el?.userList) && userList?.length > 0) {
-        return {
+      console.log(el?.userList, 'userList')
+
+      if (Array.isArray(el?.userList) && el?.userList?.length > 0) {
+        console.log(el?.userList, 'eluserList')
+        el = {
           ...el,
-          userList: changeHeadImage(el?.userList)
+          userList: [...changeHeadImage(el?.userList)]
         }
       } else {
-        return {
+        el = {
           ...el,
           userList: [defaultAvatar]
+          // userList:
         }
       }
-    })
-
-    console.log(dataList, 'arr')
 
+      return el
+    })
+    console.log(dataList, '555')
     if (Array.isArray(dataList) && dataList?.length) {
       groupSquareList.value = groupSquareList.value.concat(dataList)
     } else {
@@ -275,7 +279,11 @@ const getList = async () => {
 }
 
 const changeHeadImage = (headerList) => {
-  return headerList.slice(0, 9).map((el) => (el?.headImageUrl ? el?.headImageUrl : defaultAvatar))
+  let headImageList = headerList
+    .slice(0, 9)
+    .map((el) => (el?.headImageUrl ? el?.headImageUrl : defaultAvatar))
+
+  return headImageList
 }
 
 // 加群聊

+ 51 - 36
src/pages/chat/single.vue

@@ -19,30 +19,33 @@
       </template>
     </van-nav-bar>
     <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 receiveGetter" :key="index">
         <ChatMessage :message="message"></ChatMessage>
       </template>
-      <div v-if="false" class="text-[#979797] text-sm text-center mt-auto mb-10">{{followStatus}}在对方关注或回复前,最多只能发送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>
+    <ChatInput :operates="['image']" @focus="scrollToBottom" @send="handleSendMessage"></ChatInput>
   </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 ChatInput from './chat-input'
+import { findHyperlinks } from '~/pages/chat/chat-message/link-message/handle'
 
 const route = useRoute()
 const router = useRouter()
 const refreshing = ref(false)
-const chatStore = useChatStore();
+const chatStore = useChatStore()
 const user = computed(() => chatStore.user)
-const {ws, curConversiton, receive, conversations, receiveGetter, connectSta, onNewMessage} = storeToRefs(chatStore)
+const { ws, curConversiton, receive, conversations, receiveGetter, connectSta, onNewMessage } =
+  storeToRefs(chatStore)
 console.warn(curConversiton, 'curConversitoncurConversiton')
 // 单聊的标题
 const title = computed(() => route.query.groupRemark)
@@ -74,7 +77,6 @@ const onRefresh = () => {
   refreshing.value = false
 }
 
-
 const onClickRight = () => {
   navigateTo({
     path: '/chat/set-single',
@@ -90,8 +92,6 @@ const messageCount = ref(0)
 
 // 获取聊天记录
 async function getChatHistory(messageId = '') {
-  if (curConversiton.value.isLocal) return
-
   if (!groupId.value) return
 
   if (receive.value.length >= messageCount.value && receive.value.length > 0) return
@@ -105,8 +105,8 @@ async function getChatHistory(messageId = '') {
   }
 
   const {
-    data: {data = [], count = []}
-  } = await request('/website/tourMessage/getMessageByGroupId', {query})
+    data: { data = [], count = [] }
+  } = await request('/website/tourMessage/getMessageByGroupId', { query })
 
   messageCount.value = count || 0
 
@@ -123,14 +123,14 @@ async function getFollowStatus() {
   const query = {
     userId: getUserId.value
   }
-  const {data: status = 0} = await request('/website/tourGroup/isFollow', {query})
+  const { data: status = 0 } = await request('/website/tourGroup/isFollow', { query })
   followStatus.value = status
   console.log('关注情况:', status)
 }
 
 // 发送文本消息
 const sendTextMessage = (text) => {
-  if(!text) return
+  if (!text) return
   let msg = {
     groupId: groupId.value,
     getUserId: getUserId.value,
@@ -144,11 +144,11 @@ const sendTextMessage = (text) => {
     }
   }
   const isLink = !!findHyperlinks(text)
-  if (isLink) msg.messageType = 4;
+  if (isLink) msg.messageType = 4
 
   receive.value.push({
     ...msg,
-    messageContent: JSON.stringify({messageContent: msg.messageContent})
+    messageContent: JSON.stringify({ messageContent: msg.messageContent })
   })
   ws.value.send(JSON.stringify(msg))
 }
@@ -160,7 +160,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
     })
@@ -170,7 +170,7 @@ const sendImageMessage = async (file) => {
       getUserId: getUserId.value,
       sendUserId: sendUserId.value,
       specialUserId: '',
-      messageContent: JSON.stringify({messageContent: data.fileUrl}),
+      messageContent: JSON.stringify({ messageContent: data.fileUrl }),
       messageType: 1,
       noticeType: 1,
       object: {
@@ -179,46 +179,40 @@ const sendImageMessage = async (file) => {
     }
     receive.value.push({
       ...msg,
-      messageContent: JSON.stringify({messageContent: data.fileUrl})
+      messageContent: JSON.stringify({ messageContent: data.fileUrl })
     })
 
     ws.value.send(JSON.stringify(msg))
   } catch (e) {
     console.error(e, '??')
   } finally {
-
   }
 }
 
-const handleSendMessage = async ({type, messageContent}) => {
+const handleSendMessage = async ({ type, messageContent }) => {
   try {
     switch (type) {
       case 'text':
         sendTextMessage(messageContent)
-        break;
+        break
       case 'image':
         await sendImageMessage(messageContent)
-        break;
+        break
     }
     await scrollToBottom()
   } catch (e) {
-
   } finally {
-
   }
-
 }
 
-
 const scrollToBottom = 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
   }
-};
-
+}
 
 watch(groupId, () => {
   // 消息置空
@@ -241,6 +235,27 @@ onMounted(() => {
   // }, 500)
 })
 
+// 用户删除消息
+const delMessage = (messageId) => {
+  showConfirmDialog({
+    width: 260,
+    message: '是否删除这条消息?',
+    confirmButtonColor: '#FF9300'
+  })
+    .then(async () => {
+      const res = await request('/website/tourMessage/delMessage', {
+        method: 'post',
+        body: {
+          messageId: [messageId]
+        }
+      })
+
+      if (res && res?.success) {
+      }
+    })
+    .catch(() => {})
+}
+
 definePageMeta({
   layout: false
 })

+ 40 - 14
src/pages/profile/interaction-message/index.vue

@@ -29,7 +29,7 @@
     </van-dropdown-menu>
 
     <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-      <div class="w-full h-[100vh]">
+      <div class="w-full h-[100vh] pt-10">
         <ChatEmpty
           v-if="!interactionList.length && !loading"
           image="conment"
@@ -46,25 +46,30 @@
           <template v-for="item in interactionList" :key="item?.id">
             <!-- 点赞与收藏 -->
             <ProfileInteractionMessageLikesandFavorites
-              v-if="item.noticeType == 5"
+              v-if="item.noticeType == 5 || item.noticeType == 7"
               :item-data="{
                 ...item,
-                messageContent: messageContentParse(item?.messageContent).messageContent
+                messageContent:
+                  actionTypeList[item.noticeType].text + businessTypeList[item.businessType].text
               }"
             ></ProfileInteractionMessageLikesandFavorites>
 
             <!-- 艾特  -->
             <ProfileInteractionMessageEit
-              v-if="item.noticeType == 6"
+              v-if="item.noticeType == 10"
               :item-data="{
                 ...item,
-                messageContent: messageContentParse(item?.messageContent).messageContent
+                messageContent:
+                  actionTypeList[item.noticeType].text + businessTypeList[item.businessType].text
               }"
             ></ProfileInteractionMessageEit>
 
-            <!-- 收到的评论 -->
+            <!-- 收到的评论 是评论还是 回复 -->
             <ProfileInteractionMessageReceiveComment
-              v-if="item.noticeType == 7"
+              v-if="
+                (item.noticeType == 6 && interactionIndex == 7) ||
+                (item.noticeType == 12 && interactionIndex == 7)
+              "
               :item-data="{
                 ...item,
                 messageContent: messageContentParse(item?.messageContent).messageContent
@@ -75,7 +80,10 @@
 
             <!-- 发出的评论 -->
             <ProfileInteractionMessageSendComment
-              v-if="item.noticeType == 8"
+              v-if="
+                (item.noticeType == 6 && interactionIndex == 8) ||
+                (item.noticeType == 12 && interactionIndex == 8)
+              "
               :item-data="{
                 ...item,
                 messageContent: messageContentParse(item?.messageContent)
@@ -84,14 +92,13 @@
           </template>
         </van-list>
 
-        <div
+        <!-- <div
           v-if="showInput"
           @click="handleBlur"
           class="w-[100vw] h-[100vh] fixed top-0 border-[#000] left-0 z-100 bg-[#000]/[0.1]"
         >
           <div @click.stop="" class="fixed bottom-0 left-0 w-full bg-[#fff] pt-10 pb-30 z-52">
             <div class="flex items-start">
-              <!-- border-[#FD9A00]   @blur="handleBlur"-->
               <div
                 class="relative bg-[#F3F3F3] flex-1 ml-12 mr-12 pl-5 pr-5 pt-4 pb-4 rounded-[4px] h-50 border flex items-center justify-between"
               >
@@ -130,7 +137,7 @@
               </div>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </van-pull-refresh>
   </div>
@@ -160,13 +167,32 @@ onMounted(() => {
   getList()
 })
 
+// noticeType 6 是评论 12 是回复
+// 1单聊 2群聊 3系统消息 4关注消息 5点赞通知 6评论通知 7收藏通知 8浏览通知 9访问主页通知 10评论区艾特通知 11文章内艾特通知 12回复评论通知
+const actionTypeList = {
+  4: { text: '关注了你' },
+  5: { text: '赞了你的' },
+  6: { text: '评论' },
+  7: { text: '收藏了你的' },
+  8: { text: '浏览了你的' },
+  9: { text: '访问你' },
+  10: { text: '提到了你' },
+  11: { text: '提到了你' },
+  12: { text: '回复' }
+}
+
+// 1 游记
+const businessTypeList = {
+  1: { text: '游记' },
+  2: { text: '评论' }
+}
+
 definePageMeta({
   layout: false
 })
 
 // 0未关注 1已关注 2已经互关 3我自己 4被关注      focusStatus字段
 // 条件查询 互动消息--> 5赞与收藏 6提及  7收到的评论 8发出的评论
-// 默认的数组
 const interactionDropdownMenuList = [
   {
     text: '全部消息',
@@ -201,7 +227,7 @@ const loading = ref(false)
 const refreshing = ref(false)
 
 // 互动消息的索引
-const interactionIndex = ref(-1)
+const interactionIndex = ref('-1')
 const interactionTitle = ref('全部消息')
 
 const interactionDropdownMenuRef = ref(null)
@@ -401,7 +427,7 @@ async function addComment() {
 // 下拉刷新
 const onRefresh = () => {
   refreshing.value = true
-  commentList.value = []
+  interactionList.value = []
   getList()
 }
 

+ 4 - 12
src/pages/profile/my-news/index.vue

@@ -1,13 +1,5 @@
 <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
@@ -22,7 +14,7 @@
           v-model:show="showPopover"
           placement="bottom"
           theme="dark"
-          :offset="[5,20]"
+          :offset="[5, 20]"
           :actions="actionsList"
           @select="onSelect"
         >
@@ -334,9 +326,9 @@
 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 audioTips from '@/assets/audio/message.mp3'
+
 import { messageContentParse } from '~/utils/detalTime.js'
-import {XYWebSocket} from '~/utils/XYWebSocket.ts'
+import { XYWebSocket } from '~/utils/XYWebSocket.ts'
 
 const actionsList = [
   { text: '创建群聊', icon: comments },
@@ -347,7 +339,7 @@ const actionsList = [
 const userInfoStore = useUserInfoStore()
 const { userInfo } = storeToRefs(userInfoStore)
 
-const chatsStore = useChatsStore();
+const chatsStore = useChatsStore()
 const { chatList, chatListLoading } = storeToRefs(chatsStore)
 
 const showPopover = ref(false)