1

src/stores/modules/webSocketStore.js

@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 import { $root as protobuf } from "@/common/proto/proto";
 import * as Constant from "@/common/constant/Constant";
 import { useWalletStore } from "@/stores/modules/walletStore";
-import { getMessageApi, friendRequest } from "@/api/path/im.api";
+import { getMessageApi, friendRequest, groupList } from "@/api/path/im.api";
 import { showDialog } from 'vant';
 import { eventBus } from '@/utils/utils';
 import { useSystemStore } from "@/stores/modules/systemStore";
@@ -38,6 +38,7 @@ export const useWebSocketStore = defineStore("webSocketStore", {
     reconnectAttempts: 0,
     sessionId:null,//当前会话id
     messages: [],
+    groupMembersList:{},//群成员列表
     toUserInfo: {},
     unreadMessages: [],
     uuid: null,
@@ -674,6 +675,19 @@ export const useWebSocketStore = defineStore("webSocketStore", {
         systemStore.ImsessionList = sessions;
       }
     },
-    
+    // 群成员列表
+    async fetchGroupMembers(){
+      if (this.groupMembersList[this.toUserInfo.uuid]) {
+        return this.groupMembersList[this.toUserInfo.uuid]
+      }
+      try {
+        const res = await groupList(this.toUserInfo.uuid);
+        this.groupMembersList[this.toUserInfo.uuid] = res.data || [];
+        return res.data
+      } catch (e) {
+        console.error('获取群成员失败', e);
+        return []
+      }
+    }
   },
 });

src/views/im/chat/components/AtUserList/index.vue

@@ -23,8 +23,8 @@
                 <template #icon>
                     <van-image
                         round
-                        width="40px"
-                        height="40px"
+                        width="32px"
+                        height="32px"
                         :src="IM_PATH + user.avatar"
                     />
                 </template>
@@ -36,7 +36,6 @@
 <script setup>
 import { useWebSocketStore } from '@/stores/modules/webSocketStore.js';
 import { useWalletStore } from "@/stores/modules/walletStore.js";
-import { groupList } from '@/api/path/im.api';
 const wsStore = useWebSocketStore();
 const walletStore = useWalletStore();
 const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
@@ -44,36 +43,13 @@ const emit = defineEmits(['select']);
 
 const show = ref(false);
 const keyword = ref('');
-const loading = ref(false);
-const finished = ref(false);
-// 模拟用户数据
 const users = ref([]);
 
-// 获取群成员信息
-const fetchGroupMembers = async () => {
-    try {
-        const res = await groupList(wsStore.toUserInfo.uuid);
-
-        users.value = res.data || [];
-    } catch (e) {
-        console.error('获取群成员失败', e);
-    }
-};
-
 // 关键字过滤
 const filteredUsers = computed(() => {
     if (!keyword.value) return users.value;
-    return users.value.filter(u => u.name.includes(keyword.value));
+    return users.value.filter(u => u.nickname.includes(keyword.value));
 });
-
-// 模拟加载更多
-// const onLoad = () => {
-//     setTimeout(() => {
-//         finished.value = true;
-//         loading.value = false;
-//     }, 1000);
-// };
-
 // 选中用户
 const selectUser = user => {
     console.log('选择用户：', user);
@@ -89,8 +65,23 @@ const close = () => {
 // 供父组件调用打开
 const open = () => {
     show.value = true;
-    fetchGroupMembers();
 };
-
+onMounted(async () => {
+  // 获取群成员信息
+  users.value = await wsStore.fetchGroupMembers();
+})
 defineExpose({ open });
 </script>
+<style scoped lang="less">
+:deep(.van-cell){
+    align-items: center;
+    
+}
+:deep(.van-cell__title){
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 15px;
+    color: #000000;
+    margin-left: 12px;
+}
+</style>

src/views/im/chat/index.vue

@@ -7,7 +7,7 @@
     <!-- 顶部导航 -->
     <div class="header-chat">
       <svg-icon class="page-icon" name="lf-arrow" @click="goBack" />
-      <div class="header-title">{{ wsStore.toUserInfo.nickname || '群聊' }}</div>
+      <div class="header-title">{{ wsStore.toUserInfo.nickname || '群聊' }}({{ groupMembersArr.length }})</div>
       <svg-icon class="page-icon" name="more" @click="goDetail" />
     </div>
 
@@ -327,7 +327,8 @@ const emojis = [
 const atList = ref();
 const showBurn = ref(false)  // 阅后即焚是否开启
 const showNotice = ref(false);
-const noticeRead = ref(false)
+const noticeRead = ref(false);
+const groupMembersArr = ref([]);
 
 const isSender = (toUsername, item) => {
   if(item?.sender){
@@ -555,7 +556,7 @@ const destroyMessage = (message) => {
 const handleNoticeClose = () => {
   console.log(11)
   showNotice.value = false
-  noticeRead.value = true
+  // noticeRead.value = true
 }
 
 
@@ -821,6 +822,7 @@ const formatTime = (timestamp) => {
 // 页面生命周期
 onMounted(async () => {
   wsStore.toUserInfo.uuid = route.query.uuid;
+  groupMembersArr.value = await wsStore.fetchGroupMembers();
   await wsStore.getMessages({
     uuid: wsStore.toUserInfo.type == 'user'?walletStore.account : route.query.uuid,
     messageType: wsStore.toUserInfo.type == 'user'?1:2, //1:个人  2:群组