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

.env.development

@@ -1,22 +1,32 @@
 VITE_APP_ENV=development
 
-VITE_APP_BASE_URL=https://service.xiaoyaotravel.com/api/
+# VITE_APP_BASE_URL=https://service.xiaoyaotravel.com/api/
 # VITE_APP_BASE_URL=http://1.94.207.143:8082/
+
+
+# VITE_APP_BASE_URL=http://192.168.1.43:8082
+# VITE_APP_IM_URL=ws://192.168.1.43:8082/system/message
+
 # 黄雯本地
-# VITE_APP_BASE_URL=http://192.168.137.226:8082
+VITE_APP_BASE_URL=http://192.168.1.44:8082
+VITE_APP_IM_URL=ws://192.168.1.44:8082/system/message
 # 黄雯花生壳
 # VITE_APP_BASE_URL=http://q9943037p3.goho.co
 
+# 张维本地
+# VITE_APP_BASE_URL=http://192.168.1.73:8082
+# VITE_APP_IM_URL=ws://192.168.1.73:8082/system/message
+
 # 李忠畅本地
 # VITE_APP_BASE_URL=http://192.168.1.38:8082
 # 李忠畅花生壳
 # VITE_APP_BASE_URL=http://cilicli.qicp.vip
 # 测试服务器
-VITE_APP_BASE_URL=http://192.168.1.204:8082
+# VITE_APP_BASE_URL=http://192.168.1.204:8082
 # VITE_APP_BASE_URL=http://192.168.1.3:8082
 
 VITE_APP_WEBSITE_BASE_URL=http://101.126.146.250:8082
 
-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_IM_USER_SUFFIX=dev

src/components/NavBar/Login.client.vue

@@ -122,6 +122,8 @@ const { token } = storeToRefs(authStore)
 const userInfoStore = useUserInfoStore()
 const { userInfo } = storeToRefs(userInfoStore)
 
+const chatStore = useChatStore()
+
 const route = useRoute()
 async function handleToLogin() {
   await navigateTo({
@@ -151,6 +153,8 @@ async function handleLogout() {
     authStore.cleanToken()
     navigateTo('/')
   }
+  // 关闭socket连接
+  chatStore.close();
 }
 </script>
 

src/pages/chat/components/ActiveMessage.vue

@@ -30,7 +30,7 @@
         <div v-if="!loading && !list.length" clalss="text-center h-200 text-[#999] w-full">
             暂无消息
         </div>
-        <div class="pb-30" v-for="item in 20" :key="item">
+        <div class="pb-30">
             <div v-for="(item,index) in list" :key="index" @click="handleClick(item)" class="flex items-center justify-between py-15 px-20 rounded cursor-pointer hover:bg-[#fafafa]">
                 <div class="flex items-center">
                     <div class="w-[44px] h-[44px] rounded-full overflow-hidden shrink-0">

src/pages/chat/components/Chat.vue

@@ -40,11 +40,15 @@
                                         <div class="flex w-[80%] pr-10 justify-end">
                                             <div class="mr-10">
                                                 <div class="text-[#666] text-right">{{ user?.showName }}</div>
-                                                <div class="p-5 rounded relative overflow-hidden flex justify-end" style="float:right;width:200px;">
+                                                <div class="p-5 rounded relative flex justify-end items-center" style="float:right;width:200px;">
+                                                    <div v-if="item.messageLimit == 1" class="w-[20px] h-[20px] bg-[#f40] rounded-full text-[12px] text-[#fff] flex items-center justify-center shrink-0" style="z-index:200;margin-right:10px;">
+                                                        !
+                                                    </div>
                                                     <el-image :preview-src-list="[convertImg(item.messageContent)]" :src="convertImg(item.messageContent)" fit="cover" />
                                                     <div v-if="!item?.createTime" class="absolute top-[50%] left-[0px]" style="transform: translateY(-50%) translateX(-105%);">
                                                         <MsgStatus></MsgStatus>
                                                     </div>
+                                                    
                                                     <!-- <div v-else class="absolute top-[50%] left-[0px]" style="transform: translateY(-50%) translateX(-105%);">
                                                         <MsgStatus :messageLimit="item?.messageLimit"></MsgStatus>
                                                     </div> -->
@@ -65,7 +69,7 @@
                                     <div class="flex justify-end mt-30">
                                         <div class="flex w-[80%] pr-10 justify-end">
                                             <div class="mr-10">
-                                                <div class="text-[#666] text-right">{{ user?.showName }}</div>
+                                                <div class="text-[#666] text-right">{{ myName() }}</div>
                                                 <div class="bg-[#FD9A00]/10 py-10 px-10 rounded text-[#333] text-wrap relative"
                                                     style="float:right;">
 
@@ -77,6 +81,9 @@
                                                         style="transform: translateY(-50%) translateX(-100%);">
                                                         <MsgStatus></MsgStatus>
                                                     </div>
+                                                    <div v-if="item?.messageLimit==1" class="absolute top-[50%] left-[0px] w-[20px] h-[20px] bg-[#f40] rounded-full text-[12px] text-[#fff] flex items-center justify-center" style="transform: translateY(-50%) translateX(-120%);">
+                                                        !
+                                                    </div>
                                                 </div>
                                             </div>
                                             <div class="w-40 h-40 rounded-full overflow-hidden shrink-0 bg-[#dedede]">
@@ -86,6 +93,9 @@
                                         </div>
                                     </div>
                                 </template>
+                                 <div v-if="item.messageLimit == 1" class="text-center text-[#f40] mt-30 text-[12px]">
+                                    在对方关注或回复你之前，您只可以发送一条消息
+                                 </div>
                             </template>
                             <template v-else>
                                 <template v-if="item.messageType == 0 && item.messageContent">
@@ -93,19 +103,18 @@
                                     <div class="text-center text-[#666] mt-30 text-[12px]">
                                         {{ item.createTime }}
                                     </div>
-                                    <!-- 左侧消息 文本 -->
+                                    <!-- 文本 -->
                                     <div class="flex w-[80%] pl-10 mt-30">
                                         <div class="w-40 h-40 rounded-full overflow-hidden shrink-0 bg-[#dedede]">
-                                            <img v-if="item?.headImageUrl" class="w-full h-full object-cover"
-                                                :src="item?.headImageUrl" alt="" />
+                                            <img class="w-full h-full object-cover" :src="item?.headImageUrl || item?.object?.headImageUrl || curConversiton?.headImage" alt="" />
                                         </div>
                                         <div class="ml-10">
                                             <div class="text-[#666]">
-                                                {{ item?.showName }}
+                                                {{ item?.showName || item?.object?.showName || curConversiton?.groupRemark }}
                                             </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;">
-                                                <!-- {{ convertImg(item.messageContent) }} -->
+                                                
                                                 <TextMsg :msg="item.messageContent"></TextMsg>
                                             </div>
                                         </div>
@@ -115,20 +124,18 @@
                                     <div class="text-center text-[#666] mt-30 text-[12px]">
                                         {{ item.createTime }}
                                     </div>
-                                    <!-- 左侧消息 图片 -->
+                                    <!-- 图片 -->
                                     <div class="flex w-[80%] pl-10 mt-30">
                                         <div class="w-40 h-40 rounded-full overflow-hidden shrink-0">
-                                            <img class="w-full h-full object-cover" :src="item?.headImageUrl" alt="" />
+                                            <img class="w-full h-full object-cover" :src="item?.headImageUrl || item?.object?.headImageUrl || curConversiton?.headImage" alt="" />
                                         </div>
                                         <div class="ml-10">
                                             <div class="text-[#666]">
-                                                {{ item?.showName }}
+                                                {{ item?.showName || item?.object?.showName || curConversiton?.groupRemark }}
                                             </div>
                                             <div class="p-5 rounded border relative" style="width:200px">
-                                                <!-- <img  :src="[convertImg(item.messageContent)]" alt="" /> -->
                                                 <el-image  :preview-src-list="[convertImg(item.messageContent)]" :src="convertImg(item.messageContent)" fit="cover" />
-                                                
-                                                
+                                    
                                             </div>
                                         </div>
                                     </div>
@@ -139,7 +146,6 @@
                     </div>
                     <div class="w-full h-[160px] border-t-[1px] border-[#ccc] flex flex-col justify-between">
                         <div class="flex items-center h-[36px] pl-10 cursor-pointer">
-
                             <el-popover placement="top-start" :width="420" trigger="hover">
                                 <template #reference>
                                     <img src="~assets/img/chat/emoji_icon.png" class="w-[20px] h-[20px]" alt="" />
@@ -242,6 +248,8 @@ const wsConnect = computed(() => connectSta.value)
 // 显示聊天框右侧信息(主要是好友信息，群信息，群设置)
 const showInfo = ref(false)
 
+// 如果是群聊的话，获取群成员列表
+const groupMemberList = ref([])
 
 
 // 聊天记录的弹窗开关
@@ -267,9 +275,13 @@ function sendMessage() {
         messageType: 0,
         noticeType: noticeType.value,
         object: {
-            id: getLocalId()
+            id: getLocalId(),
         }
     }
+    if (noticeType.value == 2) {
+        msg.object.headImageUrl = user.value?.headImageUrl
+        msg.object.showName = user.value?.showName
+    }
     receive.value.push(msg)
     messageContent.value = ''
     nextTick(() => {
@@ -338,7 +350,17 @@ 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
+            }
+        }
+    }
+    return user.value.showName
+}
 function showInfoTurnOnOff() {
     if (noticeType.value == 1) {
         showInfo.value = !showInfo.value
@@ -367,7 +389,6 @@ function onClearMsg() {
 
 // 监听输入框的输入事件
 function onMsgInput(evt){
-    console.log('value:', evt.data)
     if(evt.data == '@'){
 
     }
@@ -444,9 +465,13 @@ function selectImg(evt) {
                 messageType: 1,
                 noticeType: noticeType.value,
                 object: {
-                    id: getLocalId()
+                    id: getLocalId(),
                 }
             }
+            if (noticeType.value == 2) {
+                msg.object.headImageUrl = user.value?.headImageUrl
+                msg.object.showName = user.value?.showName
+            }
             receive.value.push(msg)
             ws.value.send(JSON.stringify(msg))
         }
@@ -494,6 +519,19 @@ async function handleFollow() {
     isFollow()
 }
 
+async function getGroupMembers(){
+    if(!groupId.value) return
+    if(noticeType.value !== 2) return
+    const query = {
+        groupId: groupId.value
+    }
+    const { data } = await request('/website/tourGroup/getGroupInfoAndMemberByGroupId', { query })
+    const { memberList } = data || {}
+
+    if (Array.isArray(memberList)) {
+        groupMemberList.value = memberList
+    }
+}
 
 // 监听当前会话的切换
 watch(groupId, async () => {
@@ -523,6 +561,9 @@ watch(groupId, async () => {
     // 清除未读消息
     chatStore.updateRead(groupId.value)
 
+    // 如果是群聊天的话，获取群成员列表
+    getGroupMembers()
+
 })
 watch(onNewMessage, () => {
     messageBoxRef.value && (messageBoxRef.value.scrollTop = messageBoxRef.value.scrollHeight + 100000)

src/pages/chat/components/ChatList.vue

@@ -29,7 +29,7 @@
             <div class="flex justify-between items-center">
                 <div class="text-[12px] truncate w-[150px] text-[#999]">
                     <template v-if="item?.lastMessage?.messageType == 0">
-                        {{ convertMsg(item?.lastMessage?.messageContent) }}
+                        {{ item?.lastMessage?.messageContent.messageContent }}
                     </template>
                     <template v-if="item?.lastMessage?.messageType == 1">
                         [图片]

src/pages/chat/components/GroupSetting.vue

@@ -332,7 +332,7 @@ async function clearMsg(){
 }
 // 解散/退出群聊
 async function exitGroup(){
-    const query = {
+    const data = {
         groupId:curConversiton.value.groupId
     }
     ElLoading.service({
@@ -341,7 +341,7 @@ async function exitGroup(){
         background: 'rgba(0, 0, 0, 0.2)'
     })
 
-    await request('/website/tourGroup/exitGroup',{query}).finally(() => ElLoading.service().close())
+    await request('/website/tourGroup/exitGroup',{method:'post',body:data}).finally(() => ElLoading.service().close())
 
     ElMessage.success('操作成功')
     curConversiton.value = {}

src/pages/chat/components/InviteGroup.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">

src/stores/chat.js

@@ -84,6 +84,11 @@ export const useChatStore = defineStore('chat', () => {
 
     }
 
+    // 关闭连接
+    function close(){
+        ws.value.close()
+    }
+
     // 会话列表
     const chatList = ref([])
     const conversations = computed(() => chatList.value)
@@ -246,6 +251,7 @@ export const useChatStore = defineStore('chat', () => {
         handleFollow,
         createConversation,
         getListSystemAndFocusMessages,
-        updateRead
+        updateRead,
+        close
     }
 })