Selaa lähdekoodia

Merge branch 'dev' of http://1.94.207.143:3000/xyy/xyy-web into dev

songzhen 1 kuukausi sitten
vanhempi
commit
07e630456d

BIN
src/assets/img/chat/not_remind.png


+ 55 - 41
src/pages/chat/components/Chat.vue

@@ -97,6 +97,7 @@
                                     在对方关注或回复你之前,您只可以发送一条消息
                                  </div>
                             </template>
+                            <!-- 左侧消息 -->
                             <template v-else>
                                 <template v-if="item.messageType == 0 && item.messageContent">
                                     <!-- 时间 -->
@@ -110,7 +111,7 @@
                                         </div>
                                         <div class="ml-10">
                                             <div class="text-[#666]">
-                                                {{ item?.showName || item?.object?.showName || curConversiton?.groupRemark }}
+                                                {{ memberName(item) }}
                                             </div>
                                             <div class="bg-[#eee] py-5 px-10 rounded text-[#333] text-wrap"
                                                 style="float:left;max-width: 500px;white-space:pre-wrap;word-wrap: break-word;">
@@ -170,7 +171,7 @@
                             <div class="flex-1 flex flex-col justify-end">
                                 <textarea @input="onMsgInput" ref="inputBoxRef" v-model="messageContent" class="pl-10"
                                     style="width:100%;height:95%;resize:none;border:none;outline: none;"
-                                    placeholder="请输入消息,按Enter键或点击发送按钮发送"></textarea>
+                                    placeholder="请输入消息,按Enter键或点击发送按钮发送" type="text"></textarea>
                             </div>
                             <div class="h-full shrink-0 flex flex-col justify-between mr-5 items-end">
                                 <div class="text-[#999]">{{ messageContent?.length }}/5000</div>
@@ -263,15 +264,13 @@ function getLocalId() {
 // 发送文本消息
 function sendMessage() {
     if (!messageContent.value.trim()) return
-    const msgJSONString = JSON.stringify({
-        messageContent: messageContent.value
-    })
+    
     const msg = {
         getUserId: getUserId.value,
         sendUserId: sendUserId.value,
         specialUserId: specialUserId.value,
         groupId: groupId.value,
-        messageContent: messageContent.value,
+        messageContent: inputBoxRef.value.value,
         messageType: 0,
         noticeType: noticeType.value,
         object: {
@@ -308,7 +307,7 @@ async function getChatHistory(messageId = '') {
 
         if (receive.value.length >= messageCount.value && receive.value.length > 0) return
 
-        if (receive.value.length && !messageId) return
+        // if (receive.value.length && !messageId) return
 
         const query = {
             pageSize: pageSize.value,
@@ -350,17 +349,34 @@ function convertImg(msgJSONString) {
         return msgJSONString
     }
 }
+
+// 我的名称
 function myName(){
     if(noticeType.value==2){
         for(let i=0;i<groupMemberList.value.length;i++){
-            const userPass = groupMemberList.value[i].pass
-            if(userPass == user.value.pass){
-                return groupMemberList.value[i].groupNickname
+            const {groupNickname,showName,loginName,pass} = groupMemberList.value[i]
+            
+            if(pass == user.value.pass){
+                return groupNickname || showName || loginName
             }
         }
     }
     return user.value.showName
 }
+// 群成员名称
+function memberName(member={}){
+    const {pass:p,sendUserId} = member || {}
+    const pass = sendUserId || p
+    if(noticeType.value==2){
+        for(let i=0;i<groupMemberList.value.length;i++){
+            const {groupNickname,showName,loginName} = groupMemberList.value[i]
+            if(groupMemberList.value[i].pass == pass){
+                return groupNickname || showName || loginName || ''
+            }
+        }
+    }
+    return curConversiton.value.groupRemark || ''
+}
 function showInfoTurnOnOff() {
     if (noticeType.value == 1) {
         showInfo.value = !showInfo.value
@@ -416,7 +432,7 @@ function addEventListenerMessage() {
             messageBoxRef.value.removeEventListener('scroll', () => { })
 
             messageBoxRef.value.addEventListener('scroll', (e) => {
-
+                console.log(messageBoxRef.value.scrollTop,messageBoxRef.value.scrollHeight)
                 if (messageBoxRef.value.scrollTop == 0 && receive.value[0]?.id) {
                     console.log('滚动到顶部了')
                     console.log(receive.value[0].id)
@@ -525,30 +541,32 @@ async function getGroupMembers(){
     const query = {
         groupId: groupId.value
     }
-    const { data } = await request('/website/tourGroup/getGroupInfoAndMemberByGroupId', { query })
-    const { memberList } = data || {}
-
-    if (Array.isArray(memberList)) {
-        groupMemberList.value = memberList
+    const { data } = await request('/website/tourMember/getGroupUserListVo', { query })
+    
+    if (Array.isArray(data)) {
+        groupMemberList.value = data
     }
+    console.log(groupMemberList.value)
 }
 
-const newMsgTimer = ref(0)
-function getNewMsg(){
-    clearInterval(newMsgTimer.value)
-    setInterval(()=>{
-        const msgId = receive.value[receive.value.length-1]?.id
-        chatStore.getNewMessage(groupId.value,msgId)
-    },5000)
-}
+
 // 监听当前会话的切换
 watch(groupId, async () => {
+    init()
+})
+watch(onNewMessage, () => {
+    console.log('滚',Date.now())
+    console.log(messageBoxRef.value.scrollTop,messageBoxRef.value.scrollHeight)
+    return
+    nextTick(()=>{
+        messageBoxRef.value.scrollTop = messageBoxRef.value.scrollHeight + 1000
+    })
+    
+    
+})
+async function init(){
     // 消息置空
     receive.value = []
-
-    // 获取前会话用户的聊天记录
-    getChatHistory()
-
     //隐藏右侧信息
     if (noticeType.value == 2) {
         showInfo.value = true
@@ -566,24 +584,20 @@ watch(groupId, async () => {
     // 获取与当前会话用户的关注状态
     isFollow()
 
-    // 清除未读消息
-    chatStore.updateRead(groupId.value)
-
     // 如果是群聊天的话,获取群成员列表
-    getGroupMembers()
+    await getGroupMembers()
 
-})
-watch(onNewMessage, () => {
-    messageBoxRef.value && (messageBoxRef.value.scrollTop = messageBoxRef.value.scrollHeight + 100000)
-})
-onMounted(() => {
+    // 获取前会话用户的聊天记录
     getChatHistory()
-    addEventListenerTextarea()
-    addEventListenerMessage()
-    isFollow()
+
+    // 清除未读消息
+    chatStore.updateRead(groupId.value)
+}
+onMounted(() => {
+    init()
 })
 onBeforeUnmount(()=>{
-    clearInterval(newMsgTimer.value)
+    
 })
 </script>
 <style scoped lang="scss">

+ 5 - 4
src/pages/chat/components/ChatList.vue

@@ -8,11 +8,9 @@
             <template v-if="item.noticeType == 1 || item.noticeType == 3">
                 <img v-if="item?.headImage" :src="item?.headImage" alt="" class="w-full h-full object-cover">
             </template>
-
-
         </div>
         <template v-if="item.noticeType == 2">
-            <div class="shrink-0 mx-[10px]">
+            <div class="shrink-0 mx-[10px] w-[44px] h-[44px] overflow-hidden">
                 <MultiHeader :size="44" :imgUrls="item.dfGroupImage || []"></MultiHeader>
             </div>
         </template>
@@ -34,7 +32,10 @@
                         [图片]
                     </template>
                 </div>
-                <div v-if="item?.unreadMessageCount"
+                <template v-if="item?.isNotDisturb==1">
+                    <img src="~assets/img/chat/not_remind.png" alt="" class="w-[15px] h-[15px] shrink-0 mr-[10px]">
+                </template>
+                <div v-else-if="item?.unreadMessageCount"
                     class="text-[12px] text-[#fff] shrink-0 mr-[10px] bg-[#f40]  rounded-full px-[5px]">
                     {{ item?.unreadMessageCount }}
                 </div>

+ 6 - 1
src/pages/chat/components/GroupIntro.vue

@@ -44,7 +44,12 @@ async function confirm(){
         groupId: props.groupId,
         description:intro.value
     }
-    await request('/website/tourGroup/updateGroup',{method:'post',body:data})
+    ElLoading.service({
+        lock: true,
+        text: '正在提交...',
+        background: 'rgba(0, 0, 0, 0.2)'
+    })
+    await request('/website/tourGroup/updateGroup',{method:'post',body:data}).finally(()=>ElLoading.service().close())
     ElMessage.success('保存成功!')
     emit('confirm')
     handleClose()

+ 11 - 5
src/pages/chat/components/GroupSetting.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="flex flex-wrap items-center justify-between text-[#333] px-12">
             <template v-for="(item, index) in list" :key="index">
-                <div v-if="index < 5" class="w-[25%] mt-15 flex flex-col justify-center items-center">
+                <div v-if="index < isShowAll?list.length:5" class="w-[25%] mt-15 flex flex-col justify-center items-center">
                     <div class="w-[60%] aspect-[1/1] rounded-full overflow-hidden bg-[#f5f5f5]">
                         <img v-if="item?.headImageUrl" class="w-full h-full object-cover" :src="item?.headImageUrl" alt="" />
                     </div>
@@ -29,11 +29,16 @@
                 </div>
             </div>
         </div>
-        <div v-if="list.length>6" class="h-[50px] cursor-pointer border-b-[1px] border-[#eee] flex items-center justify-center text-[14px] text-[#666]">
+        <div @click="isShowAll=true" v-if="list.length>6 && !isShowAll" class="h-[50px] cursor-pointer border-b-[1px] border-[#eee] flex items-center justify-center text-[14px] text-[#666]">
             查看全部
             <img class="w-[15px] h-[15px]" src="~assets/img/chat/downArrowGray.png" alt=""
                 style="transform:rotate(-90deg)" />
         </div>
+        <div @click="isShowAll=false" v-if="list.length>6 && isShowAll" class="h-[50px] cursor-pointer border-b-[1px] border-[#eee] flex items-center justify-center text-[14px] text-[#666]">
+            收起全部
+            <img class="w-[15px] h-[15px]" src="~assets/img/chat/downArrowGray.png" alt=""
+                style="transform:rotate(-90deg)" />
+        </div>
         <div class="px-12 cursor-pointer text-[14px] text-[#333] border-b-[1px] border-[#eee] pb-24">
             <div v-if="isLord" class="flex items-center justify-between mt-24">
                 <div>群聊名称</div>
@@ -53,7 +58,7 @@
                 <div>群公告</div>
                 <div class="flex items-center justify-between">
                     <div class="text-[#999] text-[12px] tips3">
-                        {{ groupInfo?.groupNotice?.messageContent || '暂无公告' }}
+                        {{ groupInfo?.groupNotice || '暂无公告' }}
                     </div>
                     <img class="w-[15px] h-[15px] shrink-0" src="~assets/img/chat/downArrowGray.png" alt=""
                         style="transform:rotate(-90deg)" />
@@ -169,7 +174,7 @@
     title="设置群类型" @close="showSetGroupTypeModal = false,getGroupInfo()"></SetGroupType>
     
     <!-- 群公告查看与设置 -->
-    <GroupTips v-if="showSetGroupTipsModal" :groupId="curConversiton.groupId" :groupInfo="groupInfo" :editable="isLord" :show="showSetGroupTipsModal" width="560px" title="群公告" @close="showSetGroupTipsModal = false,getGroupInfo()"></GroupTips>
+    <GroupTips v-if="showSetGroupTipsModal" :groupId="curConversiton.groupId" :groupInfo="groupInfo" :editable="isLord" :show="showSetGroupTipsModal" width="560px" title="群公告" @close="showSetGroupTipsModal = false" @confirm="getGroupInfo"></GroupTips>
     <!-- 群介绍查看与设置 -->
     <GroupIntro v-if="showSetGroupIntroModal" :groupId="curConversiton.groupId" :groupInfo="groupInfo" :editable="isLord" :show="showSetGroupIntroModal" width="560px" title="群介绍" @close="showSetGroupIntroModal = false" @confirm="getGroupInfo"></GroupIntro>
     <!-- 群二维码 -->
@@ -198,7 +203,7 @@ import RemoveMember from './RemoveMember.vue'
 import InviteGroup from './InviteGroup.vue'
 import GroupIntro from './GroupIntro.vue'
 const chatStore = useChatStore()
-const { messages, reqChatList, ws, curConversiton, receive, receiveGetter, isConnect } = storeToRefs(chatStore)
+const { curConversiton } = storeToRefs(chatStore)
 const user = computed(() => chatStore.user)
 const show = ref(false)
 const bather = ref(false)
@@ -211,6 +216,7 @@ const showApplyListModal = ref(false)
 const showRemoveMemberModal = ref(false)
 const showInviteModal = ref(false)
 const showSetGroupIntroModal = ref(false)
+const isShowAll = ref(false)
 const isNotDisturb = ref(curConversiton.value.isNotDisturb==1?true:false)
 const isTop = ref(curConversiton.value.isTop==1?true:false)
 

+ 1 - 1
src/pages/chat/components/GroupSquare.vue

@@ -29,7 +29,7 @@
                 <div v-for="(item, index) in groupList" :key="index" class="flex items-center justify-between mt-20">
                     <div class="flex items-center">
                         <div class="w-[44px] h-[44px] rounded-full overflow-hidden bg-[#dedede]">
-
+                            
                         </div>
                         <div class="ml-10">
                             <div class="flex items-center text-[14px] text-[#333]">

+ 12 - 5
src/pages/chat/components/GroupTips.vue

@@ -3,7 +3,7 @@
         <div class="p-20 bg-[#fff]">
             <div class="flex items-center border-b border-[#eee] pb-20 mb-20">
                 <div class=" ">
-                    <MultiHeader :imgUrls="headImages"></MultiHeader>
+                    <MultiHeader :imgUrls="headImages" :size="44"></MultiHeader>
                 </div>
                 <div class="text-[14px] ml-15">
                     <div class="text-[#333] ">
@@ -16,7 +16,7 @@
             </div>
             <textarea v-if="editable" v-model="groupTip" class="w-full h-[300px] p-20 outline-none resize-none bg-[#fafafa]" placeholder="请输入群公告"></textarea>
             <div v-else class="text-[12px] text-[#333]" style="min-height:200px;">
-                {{ groupInfo?.groupNotice?.messageContent || '暂无群公告' }}
+                {{ groupInfo?.groupNotice || '暂无群公告' }}
             </div>
             <div v-if="editable" class="flex justify-end items-center text-[14px] mt-20 cursor-pointer">
                 <div @click="handleClose" class="w-[80px] h-[32px] mr-20 flex items-center justify-center border rounded text-[#999]">
@@ -41,9 +41,9 @@ const props = defineProps({
     groupInfo: Object,
 })
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close','confirm'])
 
-const groupTip = ref(props.groupInfo?.groupNotice?.messageContent)
+const groupTip = ref(props.groupInfo?.groupNotice)
 function handleClose() {
     emit('close')
 }
@@ -55,9 +55,16 @@ async function confirm(){
         groupId: props.groupId,
         messageContent:groupTip.value
     }
-    await request('/website/tourMessage/updateAnnouncement',{method:'post',body:data})
+    ElLoading.service({
+        lock: true,
+        text: '正在发布公告',
+        background: 'rgba(0, 0, 0, 0.2)'
+    })
+    await request('/website/tourMessage/updateAnnouncement',{method:'post',body:data}).finally(()=>ElLoading.service().close())
     ElMessage.success('公告发布成功!')
+    emit('confirm')
     handleClose()
+    
 }
 
 const headImages = ref([])

+ 1 - 1
src/pages/chat/components/InviteGroup.vue

@@ -72,7 +72,6 @@ const props = defineProps({
 const emit = defineEmits(['close','invite'])
 const frendsBoxRef = ref(null)
 const chatStore = useChatStore()
-const { messages, reqChatList, ws, curConversiton, receive, receiveGetter, isConnect } = storeToRefs(chatStore)
 function handleClose() {
     emit('close')
 }
@@ -121,6 +120,7 @@ async function comfirm(){
     emit('invite')
     ElMessage.success('邀请成功')
     handleClose()
+    chatStore.reqChatList()
 }
 
 // 获取互关好友列表,没有在群里的

+ 4 - 4
src/pages/chat/components/NewFans.vue

@@ -25,22 +25,22 @@
                 </div>
 
                 <!-- 未关注 -->
-                <div v-if="item.focusStatus == 0" @click="follow(item.id,item.focusStatus)"
+                <div v-if="item.focusStatus == 0" @click="follow(item?.tourUserVo?.userId,item.focusStatus)"
                     class="text-[#fff] bg-[#FD9A00] w-[72px] h-[32px] rounded text-[14px] flex items-center justify-center">
                     关注
                 </div>
                 <!-- 已关注 -->
-                <div v-if="item.focusStatus == 1" @click="follow(item.id,item.focusStatus)"
+                <div v-if="item.focusStatus == 1" @click="follow(item?.tourUserVo?.userId,item.focusStatus)"
                     class="text-[#fff] bg-[#FD9A00] w-[72px] h-[32px] rounded text-[14px] flex items-center justify-center">
                     取消关注
                 </div>
                 <!-- 相互关注 -->
-                <div v-if="item.focusStatus == 2" @click="follow(item.id,item.focusStatus)"
+                <div v-if="item.focusStatus == 2" @click="follow(item?.tourUserVo?.userId,item.focusStatus)"
                     class="text-[#fff] bg-[#FD9A00] w-[72px] h-[32px] rounded text-[14px] flex items-center justify-center">
                     私聊
                 </div>
                 <!-- 被关注 -->
-                <div v-if="item.focusStatus == 4" @click="follow(item.id,item.focusStatus)"
+                <div v-if="item.focusStatus == 4" @click="follow(item?.tourUserVo?.userId,item.focusStatus)"
                     class="text-[#fff] bg-[#FD9A00] w-[72px] h-[32px] rounded text-[14px] flex items-center justify-center">
                     回关
                 </div>

+ 2 - 2
src/pages/chat/components/RemoveMember.vue

@@ -7,7 +7,7 @@
                         <div class="h-[15px]"></div>
                         <div class="flex items-center border rounded-full h-[35px]">
                             <img src="~assets/img/search.png" class="w-[16px] h-[16px] mx-10" alt="">
-                            <input v-model="keyword" @input="search" class="outline-none" type="text" placeholder="搜索">
+                            <input v-model="keyword" @input="search" class="outline-none" type="text" placeholder="搜索群成员">
                         </div>
                     </div>
                     <div class="mt-5 pb-20">
@@ -105,7 +105,7 @@ async function comfirm(){
     const ids = arr.map(item=>item.userId)
     const data = {
         groupId:props.groupId,
-        ids
+        delUser:ids
     }
     ElLoading.service({
         lock:true,

+ 14 - 3
src/pages/chat/index.vue

@@ -138,7 +138,7 @@ import constant from './const.js';
 
 const route = useRoute()
 const chatStore = useChatStore()
-const { user, onNewMessage, curConversiton,onPlayMsgAudio } = storeToRefs(chatStore)
+const { user, onNewMessage, curConversiton,onPlayMsgAudio,receive } = storeToRefs(chatStore)
 const audioRef = ref(null)
 
 // 地址栏有参数groupId、time就处理加群操作
@@ -183,9 +183,20 @@ async function appllyJoinGroup() {
 
   showApplyJoinGroupModal.value = true
 }
-watch(onPlayMsgAudio, () => {
-  console.log('播放消息提示音');
+watch(onNewMessage, () => {
+
+  const lastMessage= receive.value[receive.value.length-1]
+
+  if(lastMessage?.sendUserId == user.value?.pass) return
+
+  // 清除未读消息
+  chatStore.updateRead(curConversiton.value.groupId)
+
+  if(curConversiton.value?.isNotDisturb == 1) return
+
   audioRef.value && audioRef.value.play()
+
+  
 })
 onMounted(() => {
   getUserInfo()

+ 7 - 1
src/stores/chat.js

@@ -94,8 +94,14 @@ export const useChatStore = defineStore('chat', () => {
     const chatList = ref([])
     const conversations = computed(() => chatList.value)
     // 请求聊天会话列表
+    const reqChatListLoading = ref(false)
     async function reqChatList() {
-        const { data } = await request('/website/tourism/fans/getTourMemberList')
+
+        if(reqChatListLoading.value) return
+
+        reqChatListLoading.value = true
+        
+        const { data } = await request('/website/tourism/fans/getTourMemberList').finally(()=>reqChatListLoading.value = false)
         const { list } = data || {}
         if (Array.isArray(list)) {
             // 找到当前会话,清除未读消息