TODO：把用户列表独立为一个页面。存在冗余未清理待续

pages/group/info.nvue

 <template>
   <view class="group-info-box">
-    <uni-search-bar v-model="keyword" class="search-bar" radius="5" placeholder="输入昵称搜索" clearButton="auto"
-      cancelButton="none"></uni-search-bar>
-    <view class="user-list" v-if="!leave_group">
-      <!-- #ifndef APP-NVUE -->
-      <view class="user-list-container">
-      <!-- #endif -->
-      <!-- #ifdef APP-NVUE -->
-      <scroll-view :scroll-y="true" class="user-list-container">
-      <!-- #endif -->
-        <view class="invite-box" v-if="isAdmin">
-          <view class="invite">
-            <uni-icons @click="invite" color="#989898" size="20px" class="plusempty" type="plusempty">
-            </uni-icons>
-          </view>
-          <text class="nickname">邀请</text>
-        </view>
-        <template v-for="(member,index) in memberList" :key="index">
-          <view class="item" v-if="showAllMember || index < (isAdmin?9:10)" :title="member.users.nickname"
-            :class="{'pointer': canPrivateChat,'focus':member.focus}" @click="toChat(member.users._id)"
-            @longpress.prevent="openConversationMenu($event,index)"
-            @contextmenu.prevent="openConversationMenu($event,index)"
-            @mousemove="hoverUserId = member.users._id"
-            >
-            <image class="avatar"
-              :src="(member.users.avatar_file && member.users.avatar_file.url) ? member.users.avatar_file.url:'/uni_modules/uni-im/static/avatarUrl.png'"
-              mode="widthFix"></image>
-            <text class="nickname">{{member.users.nickname||'匿名用户'}}</text>
-            <text v-if="member.role.includes('admin')" class="group-admin">管</text>
-            <text v-if="!mute_all_members && member.mute_type" class="mute-type-1">已被禁言</text>
-          </view>
-        </template>
-      <!-- #ifndef APP-NVUE -->
-      </view>
-      <!-- #endif -->
-      <!-- #ifdef APP-NVUE -->
-      </scroll-view>
-      <!-- #endif -->
-      <!-- #ifndef APP-NVUE -->
-      <template v-if="memberList.length > 9">
-        <view class="more-users-bar">
-          <view v-if="!showAllMember" class="more-users-btn" @click="showAllMember = true">
-            <text style="cursor:pointer">展开更多</text>
-            <uni-icons color="#989898" size="20" type="bottom" />
-          </view>
-          <view v-else class="more-users-btn" @click="showAllMember = false">
-            <text style="cursor:pointer">收起</text>
-            <uni-icons color="#989898" size="20" type="top" />
-          </view>
-          <text style="flex:1"></text>
-        </view>
-      </template>
-      <!-- #endif -->
-    </view>
+    
+    <uni-im-group-members v-if="conversation_id" :conversation_id="conversation_id"></uni-im-group-members>
+    
+    
     <uni-list>
       <uni-list-item v-if="!leave_group" title="消息免打扰" @switchChange="changeConversationMute"
         :switchChecked="conversation.mute" :showSwitch="true"></uni-list-item>
@@ -95,14 +46,18 @@
         :duration="2000" :before-close="true" :value="editorDefaultValue" @close="closePopupInfo"
         @confirm="confirmPopupInfo"></uni-popup-dialog>
     </uni-popup>
-    <uni-im-contextmenu ref="uni-im-contextmenu"></uni-im-contextmenu>
+    <!-- <uni-im-contextmenu ref="uni-im-contextmenu"></uni-im-contextmenu> -->
   </view>
 </template>
 
 <script>
   const db = uniCloud.database()
   import uniIm from '@/uni_modules/uni-im/sdk/index.js';
+  import members from '@/uni_modules/uni-im/pages/group/members.nvue';
   export default {
+    components: {
+      'uni-im-group-members':members
+    },
     data() {
       return {
         conversation: {
@@ -129,6 +84,7 @@
         mute_all_members: false,
         // #ifdef APP-NVUE
         showAllMember: true,
+        conversationId:'',
         // #endif
         // #ifndef APP-NVUE
         showAllMember: false,
@@ -244,6 +200,7 @@
       if (!e.conversation_id) {
         throw new Error("会话id不能为空")
       }
+      this.conversationId = e.conversation_id
       this.load(e.conversation_id)
     },
     mounted() { //pc端以组件模式加载时逻辑
@@ -254,11 +211,12 @@
     onShow() {
       // console.log("this.conversation: ", this.conversation.group_member);
     },
-    // 长按头像出现管理菜单
-    // onNavigationBarButtonTap(e) {
-    //   if (e.index === 0) {}
-    // },
     methods: {
+      navToMembers(conversationId){
+        uni.navigateTo({
+          url:"/uni_modules/uni-im/pages/group/members?conversation_id=" + conversationId
+        })
+      },
       async load(conversation_id) {
         this.conversation = await uniIm.conversation.get(conversation_id)
       },
@@ -706,20 +664,6 @@
           })
         })
       },
-      toChat(user_id) {
-        if (this.canPrivateChat) {
-          if (uniIm.isWidescreen) {
-            uni.$emit('uni-im-toChat', {
-              user_id
-            })
-          } else {
-            uni.navigateTo({
-              url: '/uni_modules/uni-im/pages/chat/chat?user_id=' + user_id,
-              animationDuration: 300
-            })
-          }
-        }
-      },
       setMuteAllMembers(e) {
         for (let user_id in this.conversation.group_member) {
           const member = this.conversation.group_member[user_id]
@@ -841,23 +785,6 @@
     height: 50px;
   }
 
-  .invite-box {
-    align-items: center;
-  }
-
-  .invite {
-    width: 100rpx;
-    height: 100rpx;
-    margin: 5px 0;
-    justify-content: center;
-    border-radius: 10px;
-    background-color: #f5f5f5;
-    border: #9d9f9d solid 0.3px;
-    /* #ifdef H5 */
-    cursor: pointer;
-    /* #endif */
-  }
-
   .exitGroup {
     margin: 10px 0;
     background-color: #FFFFFF;
@@ -895,34 +822,4 @@
     color: #666;
     font-size: 14px;
   }
-
-  .slot-code {
-    align-items: center;
-    flex-direction: row;
-  }
-
-  .group-code {
-    width: 50rpx;
-    height: 50rpx;
-    margin-left: 10rpx;
-  }
-
-  .more-users-bar {
-    margin: 5px 0;
-    flex: 1;
-    justify-content: center;
-  }
-
-  .more-users-btn {
-    flex-direction: row;
-    font-size: 14px;
-    justify-content: center;
-    /* #ifndef APP-NVUE */
-    cursor: pointer;
-    /* #endif */
-  }
-
-  .more-users-btn:hover {
-    color: #666;
-  }
 </style>
\ No newline at end of file