From 5decbed4364c0a9d2d5f09ee73d075175ff13068 Mon Sep 17 00:00:00 2001
From: DCloud_JSON <linju@dcloud.io>
Date: Tue, 23 Apr 2024 17:09:57 +0800
Subject: [PATCH] =?UTF-8?q?TODO=EF=BC=9A=E6=8A=8A=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=8B=AC=E7=AB=8B=E4=B8=BA=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E3=80=82=E5=AD=98=E5=9C=A8=E5=86=97=E4=BD=99?=
 =?UTF-8?q?=E6=9C=AA=E6=B8=85=E7=90=86=E5=BE=85=E7=BB=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/group/info.nvue    | 1751 ++++++++++++++++++--------------------
 pages/group/members.nvue |  870 +++++++++++++++++++
 2 files changed, 1694 insertions(+), 927 deletions(-)
 create mode 100644 pages/group/members.nvue

diff --git a/pages/group/info.nvue b/pages/group/info.nvue
index 9978260..bacbdd4 100644
--- a/pages/group/info.nvue
+++ b/pages/group/info.nvue
@@ -1,928 +1,825 @@
-<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-list>
-      <uni-list-item v-if="!leave_group" title="消息免打扰" @switchChange="changeConversationMute"
-        :switchChecked="conversation.mute" :showSwitch="true"></uni-list-item>
-      <uni-list-item v-for="(val,key) in editorFields" :key="key" @click.native="openPopupInfo(key)" :title="val"
-        :showArrow="isAdmin" :clickable="isAdmin">
-        <template v-slot:footer>
-          <text
-            class="group-info-text">{{ (key == "notification" ? conversation.group_info[key]?.content : conversation.group_info[key]) || '未设置' }}</text>
-        </template>
-      </uni-list-item>
-      <uni-list-item @click.native="setAvatar" title="群头像" :clickable="isAdmin">
-        <template v-slot:footer>
-          <image class="logo" :src="logoUrl||'/uni_modules/uni-im/static/avatarUrl.png'" mode=""></image>
-        </template>
-      </uni-list-item>
-      <template v-if="isAdmin">
-        <uni-list-item @click.native="setAddGroupType" title="加群方式" note="申请加入本群的验证规则" :clickable="isAdmin">
-          <template v-slot:footer>
-            <text class="join_option">{{join_option}}</text>
-          </template>
-        </uni-list-item>
-        <uni-list-item title="全员禁言" @switchChange="setMuteAllMembers"
-          :switchChecked="conversation.group_info.mute_all_members" :showSwitch="true"></uni-list-item>
-      </template>
-      <!-- #ifdef H5 -->
-      <uni-list-item @click="share" :clickable="true" title="分享此群">
-        <template v-slot:footer>
-          <uni-icons size="25px" color="#666" type="redo"></uni-icons>
-        </template>
-      </uni-list-item>
-      <!-- #endif -->
-    </uni-list>
-    <view v-if="leave_group">
-      <text style="padding: 15px;text-align: center;color: #666;">- 你不是此群成员 -</text>
-      <!-- <text @click="joinGroup" style="padding: 15px;text-align: center;color: #005eca;cursor: pointer;">申请加入</text> -->
-    </view>
-    <text v-else class="exitGroup" @click="exitGroup">{{isGroupCreator?'解散群聊':'退出群聊'}}</text>
-    <uni-popup ref="popupInfo" type="dialog">
-      <uni-popup-dialog mode="input" :title="editorFields[editorType]" :placeholder="'请输入'+editorFields[editorType]"
-        :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>
-  </view>
-</template>
-
-<script>
-  const db = uniCloud.database()
-  import uniIm from '@/uni_modules/uni-im/sdk/index.js';
-  export default {
-    data() {
-      return {
-        conversation: {
-          group_info: {
-            user_id: "",
-            mute_all_members: false
-          },
-          group_member: {},
-          mute: false
-        },
-        leave_group: false,
-        member_list: [],
-        isManage: false,
-        editorFields: {
-          "name": " 群聊名称",
-          "introduction": "群简介",
-          "notification": "群公告"
-        },
-        editorType: '',
-        editorDefaultValue: '',
-        groupType: '',
-        isAdmin: false,
-        keyword: '',
-        mute_all_members: false,
-        // #ifdef APP-NVUE
-        showAllMember: true,
-        // #endif
-        // #ifndef APP-NVUE
-        showAllMember: false,
-        // #endif
-        // 鼠标在哪个用户id上
-        hoverUserId: ''
-      };
-    },
-    computed: {
-      ...uniIm.mapState(['isWidescreen']),
-      logoUrl() {
-        return this.conversation.group_info.avatar_file ? this.conversation.group_info.avatar_file.url : false
-      },
-      join_option() {
-        let val = this.conversation.group_info.join_option
-        return {
-          needPermission: "需要验证权限",
-          freeAccess: "自由加入",
-          disableApply: "禁止加入"
-        } [val]
-      },
-      memberList() {
-        return this.member_list
-          // 根据关键词搜索
-          .filter(member => {
-            // 忽略大小写
-            return member.users.nickname.toLowerCase().includes(this.keyword.toLowerCase())
-          })
-          // 是管理员排序靠前
-          .sort((a, b) => {
-            if (a.role.includes('admin') && !b.role.includes('admin')) {
-              return -1
-            } else if (!a.role.includes('admin') && b.role.includes('admin')) {
-              return 1
-            } else {
-              return 0
-            }
-          })
-      },
-      isGroupCreator() {
-        return this.conversation.group_info.user_id == uniCloud.getCurrentUserInfo().uid
-      },
-      canPrivateChat(){
-        // 当前登录的账号是管理员，或者当前消息是群管理员发的
-        return this.uniIDHasRole('staff') || this.hoverUserId && this.conversation.group_member[this.hoverUserId].role.includes('admin')
-      }
-    },
-    watch: {
-      "conversation.group_info.user_id"(adminUserId) {
-        // 当前用户是群的创建者或者管理员（在群成员中找到当前用户的角色包含admin）
-        const currentUserId = uniCloud.getCurrentUserInfo().uid
-        this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
-        //非群主 隐藏【管理】按钮
-        if (!this.isAdmin) {
-          if (!this.isWidescreen) {
-            // #ifdef H5
-            let dom = document.getElementsByClassName('uni-page-head-btn')[1]
-            dom.style.visibility = 'hidden'; // 隐藏元素
-            // #endif
-            // #ifdef APP-PLUS
-            var webview = this.$scope.$getAppWebview();
-            // console.log('webview', webview);
-            webview.setStyle({
-              titleNView: {
-                buttons: []
-              }
-            });
-            // #endif
-          }
-        } else {
-          if (this.isWidescreen) {
-            this.isManage = true
-          }
-        }
-      },
-      "conversation.group_member": {
-        handler(group_member, oldValue) {
-          // console.log('group_member',group_member);
-          this.member_list = []
-          for (let key in group_member) {
-            this.member_list.push(group_member[key])
-          }
-          if (!uniIm.isWidescreen) { // pc宽屏不需要
-            let title = "群信息（" + this.member_list.length + "人）"
-            uni.setNavigationBarTitle({
-              title
-            });
-          }
-        },
-        deep: true,
-        immediate: true
-      },
-      // （后续）通过监听实现实时切换管理员实时刷新权限
-      // console.log('isAdmin',isAdmin);
-      conversation: {
-        handler(conversation, oldValue) {
-          const currentUserId = uniCloud.getCurrentUserInfo().uid
-          this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
-          this.leave_group = conversation.leave
-          this.mute_all_members = conversation.group_info.mute_all_members
-        },
-        deep: true
-      },
-    },
-    props: {
-      conversation_id: {
-        default () {
-          return false
-        }
-      },
-    },
-    async onLoad(e) {
-      if (!e.conversation_id) {
-        throw new Error("会话id不能为空")
-      }
-      this.load(e.conversation_id)
-    },
-    mounted() { //pc端以组件模式加载时逻辑
-      if (this.conversation_id) {
-        this.load(this.conversation_id)
-      }
-    },
-    onShow() {
-      // console.log("this.conversation: ", this.conversation.group_member);
-    },
-    // 长按头像出现管理菜单
-    // onNavigationBarButtonTap(e) {
-    //   if (e.index === 0) {}
-    // },
-    methods: {
-      async load(conversation_id) {
-        this.conversation = await uniIm.conversation.get(conversation_id)
-      },
-      async expelAndToBlack(item) {
-
-        uni.showModal({
-          title: '确定要将该用户移出本群并拉黑吗？',
-          content: '拉黑后此用户将不能再次加入本群，不能撤销，请谨慎操作',
-          cancelText: '取消',
-          confirmText: '确认',
-          complete: async (e) => {
-            // console.log(e);
-            if (e.confirm) {
-              uni.showLoading({
-                mask: true
-              });
-              try {
-                let res = await db.collection('uni-im-group-member').where({
-                    user_id: item.users._id,
-                    group_id: this.conversation.group_info._id
-                  })
-                  .remove()
-                console.log('expel', res);
-                const uniImCo = uniCloud.importObject("uni-im-co")
-                res = await uniImCo.addToGroupMenberBlackList({
-                  user_id: item.users._id,
-                  group_id: this.conversation.group_info._id
-                })
-                console.log('expelAndToBlack', res);
-              } catch (error) {
-                uni.showToast({
-                  title: error.message,
-                  icon: 'error',
-                  complete: () => {}
-                });
-              }
-              uni.hideLoading()
-            }
-          }
-        });
-      },
-      async expel(item) {
-        uni.showModal({
-          title: '确定要将该用户移出本群吗？',
-          content: '不能撤销，请谨慎操作',
-          cancelText: '取消',
-          confirmText: '确认',
-          complete: async (e) => {
-            // console.log(e);
-            if (e.confirm) {
-              uni.showLoading({
-                mask: true
-              });
-              try {
-                let res = await db.collection('uni-im-group-member').where({
-                    user_id: item.users._id,
-                    group_id: this.conversation.group_info._id
-                  })
-                  .remove()
-                if (res.result.deleted) {
-                  uni.showToast({
-                    title: '成功移除',
-                    icon: 'none',
-                    complete: () => {}
-                  });
-                  // console.log('exitGroup', res);
-                }
-              } catch (error) {
-                uni.showToast({
-                  title: error.message,
-                  icon: 'error',
-                  complete: () => {}
-                });
-              }
-              uni.hideLoading()
-            }
-          }
-        });
-      },
-      async changeMemberMute(item) {
-        let nickname = item.users.nickname || '匿名用户'
-        uni.showModal({
-          title: '确定要' + (item.mute_type ? `为"${nickname}"解除禁言吗？` : `禁言"${nickname}"吗？`),
-          cancelText: '取消',
-          confirmText: '确认',
-          complete: async (e) => {
-            // console.log(e);
-            if (e.confirm) {
-              uni.showLoading({
-                mask: true
-              });
-              try {
-                let res = await db.collection('uni-im-group-member').where({
-                    _id: item._id,
-                    mute_type: item.mute_type // 防止此时云端已经变化
-                  })
-                  .update({
-                    mute_type: item.mute_type ? 0 : 1
-                  })
-                // console.log('mute_type', res);
-                if (res.result.updated) {
-                  item.mute_type = item.mute_type ? 0 : 1
-
-                  uni.showToast({
-                    title: '设置成功',
-                    icon: 'none',
-                    complete: () => {}
-                  });
-                }
-              } catch (error) {
-                // console.log('error',merror)
-                uni.showToast({
-                  title: error.message,
-                  icon: 'error',
-                  complete: () => {}
-                });
-              }
-              uni.hideLoading()
-            }
-          }
-        });
-      },
-      openConversationMenu(e, index) {
-        let member = this.memberList[index]
-        // console.log('member', member);
-        let menuList = []
-        if (this.isAdmin) {
-          menuList.unshift({
-            "title": "移除",
-            "action": () => {
-              // console.log('移除');
-              this.expel(member)
-            }
-          })
-
-          menuList.unshift({
-            "title": "移除并拉黑",
-            "action": () => {
-              console.log('移除并拉黑');
-              this.expelAndToBlack(member)
-            }
-          })
-
-          if (!this.conversation.group_info.mute_all_members) {
-            menuList.unshift({
-              "title": member.mute_type ? "解除禁言" : '设为禁言',
-              "action": () => {
-                // console.log('禁言');
-                this.changeMemberMute(member)
-              }
-            })
-          }
-
-          const isAdmin = member.role.includes('admin')
-          menuList.push({
-            "title": isAdmin ? "取消管理员" : "设置管理员",
-            "action": () => {
-              let role = member.role;
-              if (isAdmin) {
-                // console.log('取消管理员');
-                role = member.role.filter(item => item !== 'admin')
-              } else {
-                role.push('admin')
-                // console.log('设置管理员');
-              }
-              uni.showLoading({
-                mask: true
-              });
-              db.collection('uni-im-group-member').doc(member._id).update({
-                  "role": role
-                }).then(res => {
-                  // console.log('res', res);
-                  member.role = role
-                })
-                .catch(err => {
-                  console.error(err)
-                  uni.showToast({
-                    title: err.message,
-                    icon: 'none'
-                  });
-                })
-                .finally(() => {
-                  uni.hideLoading()
-                })
-            }
-          })
-        }
-
-        if (menuList.length > 0) {
-          member.focus = true
-          const myContextmenu = this.$refs['uni-im-contextmenu']
-          const position = {
-            "contextmenu": {
-              "top": e.clientY,
-              "left": e.clientX
-            },
-            "longpress": {
-              "top": e.touches[0].screenY || e.touches[0].clientY,
-              "left": e.touches[0].screenX || e.touches[0].clientX
-            }
-          } [e.type]
-
-          // #ifdef H5
-          position.top = position.top + 120
-          // #endif
-
-          myContextmenu.show(position, menuList)
-          myContextmenu.onClose(() => {
-            member.focus = false
-          })
-        }
-      },
-      invite() {
-        // console.log('group_info._id', this.conversation.group_info._id);
-        uni.navigateTo({
-          url: '/uni_modules/uni-im/pages/contacts/createGroup/createGroup?group_id=' + this.conversation.group_info
-            ._id
-        })
-      },
-      async exitGroup() {
-        const group_id = this.conversation.group_info._id
-        if (this.isGroupCreator) {
-          uni.showModal({
-            title: '确认要解散群聊吗？',
-            content: '不能撤销，请谨慎操作',
-            cancelText: '取消',
-            confirmText: '确认',
-            complete: async (e) => {
-              // console.log(e);
-              if (e.confirm) {
-                uni.showLoading({
-                  mask: true
-                });
-                let res = await db.collection('uni-im-group')
-                  .where({
-                    _id: group_id
-                  })
-                  .remove()
-                  .finally((res) => {
-                    // uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
-                    // 	delta: 2
-                    // })
-                    uni.hideLoading()
-                  })
-                // console.log('exitGroup', res);
-              }
-            }
-          });
-        } else {
-          uni.showModal({
-            title: '确认要退出群聊吗？',
-            content: '不能撤销，请谨慎操作',
-            cancelText: '取消',
-            confirmText: '确认',
-            complete: async (e) => {
-              // console.log(e);
-              if (e.confirm) {
-                // uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
-                // 	delta: 2
-                // })
-                uni.showLoading({
-                  mask: true
-                });
-                let res = await db.collection('uni-im-group-member').where({
-                    user_id: uniCloud.getCurrentUserInfo().uid,
-                    group_id
-                  })
-                  .remove()
-                // console.log(res.result);
-                if (res.result.deleted) {
-                  uni.showToast({
-                    title: '成功退出',
-                    icon: 'none'
-                  });
-                }
-                uni.hideLoading()
-                // console.log('exitGroup', res);
-              }
-            }
-          });
-        }
-      },
-      openPopupInfo(type) {
-        // console.log(type);
-        if (!this.isAdmin) return
-        this.editorType = type
-        this.editorDefaultValue = this.conversation.group_info[type]
-        if (this.editorType == "notification") {
-          this.editorDefaultValue = this.editorDefaultValue?.content || ""
-        }
-        this.$refs.popupInfo.open()
-      },
-      closePopupInfo() {
-        this.$refs.popupInfo.close()
-      },
-      confirmPopupInfo(value) {
-        if (!value) {
-          uni.showToast({
-            title: '内容不能为空！',
-            icon: 'none'
-          });
-          return
-        }
-        // console.log('value', value);
-        const updateData = {};
-        if (this.editorType == 'notification') {
-          updateData[this.editorType] = {
-            "content": value
-          }; // 创建时间服务端生成
-        } else {
-          updateData[this.editorType] = value;
-        }
-        this.updateGroupInfo(updateData)
-        this.$refs.popupInfo.close()
-      },
-      setAddGroupType() {
-        if (!this.isAdmin) return
-        uni.showActionSheet({
-          itemList: ['自由加入', '需要验证权限', '禁止加入'],
-          success: (e) => {
-            let join_option = ['freeAccess', 'needPermission', 'disableApply'][e.tapIndex]
-            this.updateGroupInfo({
-              join_option
-            })
-          },
-          fail: (err) => {
-            console.error("err: ", err);
-          }
-        })
-      },
-      async updateGroupInfo(group_info) {
-        // console.log('group_info---------',group_info);
-        this.conversation.group_info = Object.assign(this.conversation.group_info, group_info)
-        let res = await db.collection('uni-im-group')
-          .doc(this.conversation.group_id)
-          .update(group_info)
-        // console.log('change group info', res.result.updated,this.conversation);
-      },
-      async setAvatar() {
-        if (!this.isAdmin) return
-        const crop = {
-          quality: 100,
-          width: 600,
-          height: 600,
-          resize: true
-        };
-        uni.chooseImage({
-          count: 1,
-          crop,
-          success: async (res) => {
-            let tempFile = res.tempFiles[0],
-              avatar_file = {
-                // #ifdef H5
-                extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
-                // #endif
-                // #ifndef H5
-                extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
-                // #endif
-              },
-              filePath = res.tempFilePaths[0]
-            // #ifndef APP-PLUS
-            //非app端用前端组件剪裁头像，app端用内置的原生裁剪
-            let isPC = false
-            // #ifdef H5
-            isPC = !['ios', 'android'].includes(uni.getSystemInfoSync().platform)
-            // #endif
-            if (!isPC) {
-              filePath = await new Promise((callback) => {
-                uni.navigateTo({
-                  url: '/uni_modules/uni-id-pages/pages/users/cropImage/cropImage?path=' +
-                    filePath + `&options=${JSON.stringify(crop)}`,
-                  animationType: "fade-in",
-                  events: {
-                    success: url => {
-                      callback(url)
-                    }
-                  },
-                  complete(e) {
-                    // console.log(e);
-                  }
-                });
-              })
-            }
-            // #endif
-            // console.log(this.users);
-            let cloudPath = uniCloud.getCurrentUserInfo().uid + '' + Date.now()
-            avatar_file.name = cloudPath
-            uni.showLoading({
-              title: "更新中",
-              mask: true
-            });
-            let {
-              fileID
-            } = await uniCloud.uploadFile({
-              filePath,
-              cloudPath,
-              fileType: "image"
-            });
-            // console.log(result)
-            avatar_file.url = fileID
-            // console.log({avatar_file});
-            uni.hideLoading()
-            this.updateGroupInfo({
-              avatar_file
-            })
-          }
-        })
-      },
-      // #ifdef H5
-      share() {
-        // 获取当前域名
-        const data = location.origin + "/#/?joinGroup=" + this.conversation.group_info._id
-        uni.setClipboardData({
-          data,
-          showToast: false,
-          success: () => {
-            uni.showToast({
-              title: "已成功复制分享链接",
-              duration: 2000,
-              icon: 'none'
-            });
-          }
-        })
-      
-        // uni.navigateTo({
-        // 	url: '/uni_modules/uni-im/pages/group/groupQRCode?id=' +
-        // 		this.conversation.group_info._id +
-        // 		'&name=' + this.conversation.group_info.name +
-        // 		'&avatar_file=' + url,
-        // 	complete: (e) => {
-        // 		// console.log(e);
-        // 	}
-        // });
-      },
-      // #endif
-      joinGroup() {
-        db.collection('uni-im-group-join').add({
-          "group_id": this.conversation.group_id,
-          "message": ''
-        }).then((res) => {
-          // console.log("res: ", res);
-          uni.showToast({
-            icon: 'none',
-            title: '已申请'
-          })
-        })
-      },
-      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]
-          member.mute_type += (e.value ? 1 : -1)
-        }
-        this.updateGroupInfo({
-          "mute_all_members": e.value
-        })
-      },
-      changeConversationMute(e) {
-        this.conversation.changeMute()
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-  /* #ifndef APP-NVUE */
-  page,
-  /* #endif */
-  .group-info-box {
-    width: 750rpx;
-    flex: 1;
-    background-color: #f5f5f5;
-    /* #ifdef H5 */
-    @media screen and (min-device-width:960px) {
-      height: calc(95vh - 70px);
-      overflow-y: auto;
-      flex: none;
-    }
-    /* #endif */
-  }
-  .user-list-container {
-    width: 750rpx;
-    flex-direction: row;
-    flex-wrap: wrap;
-    /* #ifndef APP-NVUE */
-    overflow-y: hidden;
-    /* #endif */
-    /* #ifdef APP-NVUE */
-    height: 150px;
-    /* #endif */
-  }
-
-  /* #ifdef H5 */
-  .windows .user-list-container {
-    padding-right: 10rpx;
-  }
-
-  /* #endif */
-
-  .item {
-    width: 150rpx;
-    height: 150rpx;
-    margin: 5px 0;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-  }
-
-  .item.focus {
-    border: 1px dashed #ccc;
-  }
-
-  .group-admin {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    padding: 1px 3px;
-    border-radius: 6px;
-    background-color: #e64141;
-    color: #fff;
-    font-size: 12px;
-  }
-
-  .mute-type-1 {
-    position: absolute;
-    padding: 1px 10px;
-    background-color: #0b60ff;
-    color: #fff;
-    font-size: 10px;
-    bottom: 28px;
-  }
-
-  /* #ifdef H5 */
-  .pointer {
-    cursor: pointer;
-  }
-
-  .windows .user-list-container .item {
-    width: 145rpx;
-  }
-
-  /* #endif */
-
-  .avatar {
-    width: 100rpx;
-    height: 100rpx;
-    border-radius: 10px;
-    box-shadow: 0 0 1px #aaa;
-  }
-
-  .nickname {
-    width: 150rpx;
-    text-align: center;
-    font-size: 14px;
-    color: #666;
-    padding: 0 16rpx;
-    /* #ifndef APP-NVUE */
-    white-space: nowrap;
-    /* #endif */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    lines: 1;
-  }
-
-  .logo {
-    width: 50px;
-    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;
-    padding: 6px 0;
-    color: #e64141;
-    border-radius: 0;
-    font-size: 16px;
-    text-align: center;
-    padding: 15px 0;
-    /* #ifdef H5 */
-    cursor: pointer;
-    /* #endif */
-  }
-
-  /* #ifndef APP-NVUE */
-  .exitGroup::after {
-    display: none;
-  }
-
-  /* #endif */
-
-  .group-info-text {
-    color: #666;
-    font-size: 14px;
-    /* #ifndef APP-NVUE */
-    max-width: 560rpx;
-    /* #endif */
-    /* #ifdef APP-NVUE */
-    width: 560rpx;
-    /* #endif */
-    text-align: right;
-  }
-
-  .join_option {
-    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;
-  }
+<template>
+  <view class="group-info-box">
+    
+    <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>
+      <uni-list-item v-for="(val,key) in editorFields" :key="key" @click.native="openPopupInfo(key)" :title="val"
+        :showArrow="isAdmin" :clickable="isAdmin">
+        <template v-slot:footer>
+          <text
+            class="group-info-text">{{ (key == "notification" ? conversation.group_info[key]?.content : conversation.group_info[key]) || '未设置' }}</text>
+        </template>
+      </uni-list-item>
+      <uni-list-item @click.native="setAvatar" title="群头像" :clickable="isAdmin">
+        <template v-slot:footer>
+          <image class="logo" :src="logoUrl||'/uni_modules/uni-im/static/avatarUrl.png'" mode=""></image>
+        </template>
+      </uni-list-item>
+      <template v-if="isAdmin">
+        <uni-list-item @click.native="setAddGroupType" title="加群方式" note="申请加入本群的验证规则" :clickable="isAdmin">
+          <template v-slot:footer>
+            <text class="join_option">{{join_option}}</text>
+          </template>
+        </uni-list-item>
+        <uni-list-item title="全员禁言" @switchChange="setMuteAllMembers"
+          :switchChecked="conversation.group_info.mute_all_members" :showSwitch="true"></uni-list-item>
+      </template>
+      <!-- #ifdef H5 -->
+      <uni-list-item @click="share" :clickable="true" title="分享此群">
+        <template v-slot:footer>
+          <uni-icons size="25px" color="#666" type="redo"></uni-icons>
+        </template>
+      </uni-list-item>
+      <!-- #endif -->
+    </uni-list>
+    <view v-if="leave_group">
+      <text style="padding: 15px;text-align: center;color: #666;">- 你不是此群成员 -</text>
+      <!-- <text @click="joinGroup" style="padding: 15px;text-align: center;color: #005eca;cursor: pointer;">申请加入</text> -->
+    </view>
+    <text v-else class="exitGroup" @click="exitGroup">{{isGroupCreator?'解散群聊':'退出群聊'}}</text>
+    <uni-popup ref="popupInfo" type="dialog">
+      <uni-popup-dialog mode="input" :title="editorFields[editorType]" :placeholder="'请输入'+editorFields[editorType]"
+        :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> -->
+  </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: {
+          group_info: {
+            user_id: "",
+            mute_all_members: false
+          },
+          group_member: {},
+          mute: false
+        },
+        leave_group: false,
+        member_list: [],
+        isManage: false,
+        editorFields: {
+          "name": " 群聊名称",
+          "introduction": "群简介",
+          "notification": "群公告"
+        },
+        editorType: '',
+        editorDefaultValue: '',
+        groupType: '',
+        isAdmin: false,
+        keyword: '',
+        mute_all_members: false,
+        // #ifdef APP-NVUE
+        showAllMember: true,
+        conversationId:'',
+        // #endif
+        // #ifndef APP-NVUE
+        showAllMember: false,
+        // #endif
+        // 鼠标在哪个用户id上
+        hoverUserId: ''
+      };
+    },
+    computed: {
+      ...uniIm.mapState(['isWidescreen']),
+      logoUrl() {
+        return this.conversation.group_info.avatar_file ? this.conversation.group_info.avatar_file.url : false
+      },
+      join_option() {
+        let val = this.conversation.group_info.join_option
+        return {
+          needPermission: "需要验证权限",
+          freeAccess: "自由加入",
+          disableApply: "禁止加入"
+        } [val]
+      },
+      memberList() {
+        return this.member_list
+          // 根据关键词搜索
+          .filter(member => {
+            // 忽略大小写
+            return member.users.nickname.toLowerCase().includes(this.keyword.toLowerCase())
+          })
+          // 是管理员排序靠前
+          .sort((a, b) => {
+            if (a.role.includes('admin') && !b.role.includes('admin')) {
+              return -1
+            } else if (!a.role.includes('admin') && b.role.includes('admin')) {
+              return 1
+            } else {
+              return 0
+            }
+          })
+      },
+      isGroupCreator() {
+        return this.conversation.group_info.user_id == uniCloud.getCurrentUserInfo().uid
+      },
+      canPrivateChat(){
+        // 当前登录的账号是管理员，或者当前消息是群管理员发的
+        return this.uniIDHasRole('staff') || this.hoverUserId && this.conversation.group_member[this.hoverUserId].role.includes('admin')
+      }
+    },
+    watch: {
+      "conversation.group_info.user_id"(adminUserId) {
+        // 当前用户是群的创建者或者管理员（在群成员中找到当前用户的角色包含admin）
+        const currentUserId = uniCloud.getCurrentUserInfo().uid
+        this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
+        //非群主 隐藏【管理】按钮
+        if (!this.isAdmin) {
+          if (!this.isWidescreen) {
+            // #ifdef H5
+            let dom = document.getElementsByClassName('uni-page-head-btn')[1]
+            dom.style.visibility = 'hidden'; // 隐藏元素
+            // #endif
+            // #ifdef APP-PLUS
+            var webview = this.$scope.$getAppWebview();
+            // console.log('webview', webview);
+            webview.setStyle({
+              titleNView: {
+                buttons: []
+              }
+            });
+            // #endif
+          }
+        } else {
+          if (this.isWidescreen) {
+            this.isManage = true
+          }
+        }
+      },
+      "conversation.group_member": {
+        handler(group_member, oldValue) {
+          // console.log('group_member',group_member);
+          this.member_list = []
+          for (let key in group_member) {
+            this.member_list.push(group_member[key])
+          }
+          if (!uniIm.isWidescreen) { // pc宽屏不需要
+            let title = "群信息（" + this.member_list.length + "人）"
+            uni.setNavigationBarTitle({
+              title
+            });
+          }
+        },
+        deep: true,
+        immediate: true
+      },
+      // （后续）通过监听实现实时切换管理员实时刷新权限
+      // console.log('isAdmin',isAdmin);
+      conversation: {
+        handler(conversation, oldValue) {
+          const currentUserId = uniCloud.getCurrentUserInfo().uid
+          this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
+          this.leave_group = conversation.leave
+          this.mute_all_members = conversation.group_info.mute_all_members
+        },
+        deep: true
+      },
+    },
+    props: {
+      conversation_id: {
+        default () {
+          return false
+        }
+      },
+    },
+    async onLoad(e) {
+      if (!e.conversation_id) {
+        throw new Error("会话id不能为空")
+      }
+      this.conversationId = e.conversation_id
+      this.load(e.conversation_id)
+    },
+    mounted() { //pc端以组件模式加载时逻辑
+      if (this.conversation_id) {
+        this.load(this.conversation_id)
+      }
+    },
+    onShow() {
+      // console.log("this.conversation: ", this.conversation.group_member);
+    },
+    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)
+      },
+      async expelAndToBlack(item) {
+
+        uni.showModal({
+          title: '确定要将该用户移出本群并拉黑吗？',
+          content: '拉黑后此用户将不能再次加入本群，不能撤销，请谨慎操作',
+          cancelText: '取消',
+          confirmText: '确认',
+          complete: async (e) => {
+            // console.log(e);
+            if (e.confirm) {
+              uni.showLoading({
+                mask: true
+              });
+              try {
+                let res = await db.collection('uni-im-group-member').where({
+                    user_id: item.users._id,
+                    group_id: this.conversation.group_info._id
+                  })
+                  .remove()
+                console.log('expel', res);
+                const uniImCo = uniCloud.importObject("uni-im-co")
+                res = await uniImCo.addToGroupMenberBlackList({
+                  user_id: item.users._id,
+                  group_id: this.conversation.group_info._id
+                })
+                console.log('expelAndToBlack', res);
+              } catch (error) {
+                uni.showToast({
+                  title: error.message,
+                  icon: 'error',
+                  complete: () => {}
+                });
+              }
+              uni.hideLoading()
+            }
+          }
+        });
+      },
+      async expel(item) {
+        uni.showModal({
+          title: '确定要将该用户移出本群吗？',
+          content: '不能撤销，请谨慎操作',
+          cancelText: '取消',
+          confirmText: '确认',
+          complete: async (e) => {
+            // console.log(e);
+            if (e.confirm) {
+              uni.showLoading({
+                mask: true
+              });
+              try {
+                let res = await db.collection('uni-im-group-member').where({
+                    user_id: item.users._id,
+                    group_id: this.conversation.group_info._id
+                  })
+                  .remove()
+                if (res.result.deleted) {
+                  uni.showToast({
+                    title: '成功移除',
+                    icon: 'none',
+                    complete: () => {}
+                  });
+                  // console.log('exitGroup', res);
+                }
+              } catch (error) {
+                uni.showToast({
+                  title: error.message,
+                  icon: 'error',
+                  complete: () => {}
+                });
+              }
+              uni.hideLoading()
+            }
+          }
+        });
+      },
+      async changeMemberMute(item) {
+        let nickname = item.users.nickname || '匿名用户'
+        uni.showModal({
+          title: '确定要' + (item.mute_type ? `为"${nickname}"解除禁言吗？` : `禁言"${nickname}"吗？`),
+          cancelText: '取消',
+          confirmText: '确认',
+          complete: async (e) => {
+            // console.log(e);
+            if (e.confirm) {
+              uni.showLoading({
+                mask: true
+              });
+              try {
+                let res = await db.collection('uni-im-group-member').where({
+                    _id: item._id,
+                    mute_type: item.mute_type // 防止此时云端已经变化
+                  })
+                  .update({
+                    mute_type: item.mute_type ? 0 : 1
+                  })
+                // console.log('mute_type', res);
+                if (res.result.updated) {
+                  item.mute_type = item.mute_type ? 0 : 1
+
+                  uni.showToast({
+                    title: '设置成功',
+                    icon: 'none',
+                    complete: () => {}
+                  });
+                }
+              } catch (error) {
+                // console.log('error',merror)
+                uni.showToast({
+                  title: error.message,
+                  icon: 'error',
+                  complete: () => {}
+                });
+              }
+              uni.hideLoading()
+            }
+          }
+        });
+      },
+      openConversationMenu(e, index) {
+        let member = this.memberList[index]
+        // console.log('member', member);
+        let menuList = []
+        if (this.isAdmin) {
+          menuList.unshift({
+            "title": "移除",
+            "action": () => {
+              // console.log('移除');
+              this.expel(member)
+            }
+          })
+
+          menuList.unshift({
+            "title": "移除并拉黑",
+            "action": () => {
+              console.log('移除并拉黑');
+              this.expelAndToBlack(member)
+            }
+          })
+
+          if (!this.conversation.group_info.mute_all_members) {
+            menuList.unshift({
+              "title": member.mute_type ? "解除禁言" : '设为禁言',
+              "action": () => {
+                // console.log('禁言');
+                this.changeMemberMute(member)
+              }
+            })
+          }
+
+          const isAdmin = member.role.includes('admin')
+          menuList.push({
+            "title": isAdmin ? "取消管理员" : "设置管理员",
+            "action": () => {
+              let role = member.role;
+              if (isAdmin) {
+                // console.log('取消管理员');
+                role = member.role.filter(item => item !== 'admin')
+              } else {
+                role.push('admin')
+                // console.log('设置管理员');
+              }
+              uni.showLoading({
+                mask: true
+              });
+              db.collection('uni-im-group-member').doc(member._id).update({
+                  "role": role
+                }).then(res => {
+                  // console.log('res', res);
+                  member.role = role
+                })
+                .catch(err => {
+                  console.error(err)
+                  uni.showToast({
+                    title: err.message,
+                    icon: 'none'
+                  });
+                })
+                .finally(() => {
+                  uni.hideLoading()
+                })
+            }
+          })
+        }
+
+        if (menuList.length > 0) {
+          member.focus = true
+          const myContextmenu = this.$refs['uni-im-contextmenu']
+          const position = {
+            "contextmenu": {
+              "top": e.clientY,
+              "left": e.clientX
+            },
+            "longpress": {
+              "top": e.touches[0].screenY || e.touches[0].clientY,
+              "left": e.touches[0].screenX || e.touches[0].clientX
+            }
+          } [e.type]
+
+          // #ifdef H5
+          position.top = position.top + 120
+          // #endif
+
+          myContextmenu.show(position, menuList)
+          myContextmenu.onClose(() => {
+            member.focus = false
+          })
+        }
+      },
+      invite() {
+        // console.log('group_info._id', this.conversation.group_info._id);
+        uni.navigateTo({
+          url: '/uni_modules/uni-im/pages/contacts/createGroup/createGroup?group_id=' + this.conversation.group_info
+            ._id
+        })
+      },
+      async exitGroup() {
+        const group_id = this.conversation.group_info._id
+        if (this.isGroupCreator) {
+          uni.showModal({
+            title: '确认要解散群聊吗？',
+            content: '不能撤销，请谨慎操作',
+            cancelText: '取消',
+            confirmText: '确认',
+            complete: async (e) => {
+              // console.log(e);
+              if (e.confirm) {
+                uni.showLoading({
+                  mask: true
+                });
+                let res = await db.collection('uni-im-group')
+                  .where({
+                    _id: group_id
+                  })
+                  .remove()
+                  .finally((res) => {
+                    // uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
+                    // 	delta: 2
+                    // })
+                    uni.hideLoading()
+                  })
+                // console.log('exitGroup', res);
+              }
+            }
+          });
+        } else {
+          uni.showModal({
+            title: '确认要退出群聊吗？',
+            content: '不能撤销，请谨慎操作',
+            cancelText: '取消',
+            confirmText: '确认',
+            complete: async (e) => {
+              // console.log(e);
+              if (e.confirm) {
+                // uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
+                // 	delta: 2
+                // })
+                uni.showLoading({
+                  mask: true
+                });
+                let res = await db.collection('uni-im-group-member').where({
+                    user_id: uniCloud.getCurrentUserInfo().uid,
+                    group_id
+                  })
+                  .remove()
+                // console.log(res.result);
+                if (res.result.deleted) {
+                  uni.showToast({
+                    title: '成功退出',
+                    icon: 'none'
+                  });
+                }
+                uni.hideLoading()
+                // console.log('exitGroup', res);
+              }
+            }
+          });
+        }
+      },
+      openPopupInfo(type) {
+        // console.log(type);
+        if (!this.isAdmin) return
+        this.editorType = type
+        this.editorDefaultValue = this.conversation.group_info[type]
+        if (this.editorType == "notification") {
+          this.editorDefaultValue = this.editorDefaultValue?.content || ""
+        }
+        this.$refs.popupInfo.open()
+      },
+      closePopupInfo() {
+        this.$refs.popupInfo.close()
+      },
+      confirmPopupInfo(value) {
+        if (!value) {
+          uni.showToast({
+            title: '内容不能为空！',
+            icon: 'none'
+          });
+          return
+        }
+        // console.log('value', value);
+        const updateData = {};
+        if (this.editorType == 'notification') {
+          updateData[this.editorType] = {
+            "content": value
+          }; // 创建时间服务端生成
+        } else {
+          updateData[this.editorType] = value;
+        }
+        this.updateGroupInfo(updateData)
+        this.$refs.popupInfo.close()
+      },
+      setAddGroupType() {
+        if (!this.isAdmin) return
+        uni.showActionSheet({
+          itemList: ['自由加入', '需要验证权限', '禁止加入'],
+          success: (e) => {
+            let join_option = ['freeAccess', 'needPermission', 'disableApply'][e.tapIndex]
+            this.updateGroupInfo({
+              join_option
+            })
+          },
+          fail: (err) => {
+            console.error("err: ", err);
+          }
+        })
+      },
+      async updateGroupInfo(group_info) {
+        // console.log('group_info---------',group_info);
+        this.conversation.group_info = Object.assign(this.conversation.group_info, group_info)
+        let res = await db.collection('uni-im-group')
+          .doc(this.conversation.group_id)
+          .update(group_info)
+        // console.log('change group info', res.result.updated,this.conversation);
+      },
+      async setAvatar() {
+        if (!this.isAdmin) return
+        const crop = {
+          quality: 100,
+          width: 600,
+          height: 600,
+          resize: true
+        };
+        uni.chooseImage({
+          count: 1,
+          crop,
+          success: async (res) => {
+            let tempFile = res.tempFiles[0],
+              avatar_file = {
+                // #ifdef H5
+                extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
+                // #endif
+                // #ifndef H5
+                extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
+                // #endif
+              },
+              filePath = res.tempFilePaths[0]
+            // #ifndef APP-PLUS
+            //非app端用前端组件剪裁头像，app端用内置的原生裁剪
+            let isPC = false
+            // #ifdef H5
+            isPC = !['ios', 'android'].includes(uni.getSystemInfoSync().platform)
+            // #endif
+            if (!isPC) {
+              filePath = await new Promise((callback) => {
+                uni.navigateTo({
+                  url: '/uni_modules/uni-id-pages/pages/users/cropImage/cropImage?path=' +
+                    filePath + `&options=${JSON.stringify(crop)}`,
+                  animationType: "fade-in",
+                  events: {
+                    success: url => {
+                      callback(url)
+                    }
+                  },
+                  complete(e) {
+                    // console.log(e);
+                  }
+                });
+              })
+            }
+            // #endif
+            // console.log(this.users);
+            let cloudPath = uniCloud.getCurrentUserInfo().uid + '' + Date.now()
+            avatar_file.name = cloudPath
+            uni.showLoading({
+              title: "更新中",
+              mask: true
+            });
+            let {
+              fileID
+            } = await uniCloud.uploadFile({
+              filePath,
+              cloudPath,
+              fileType: "image"
+            });
+            // console.log(result)
+            avatar_file.url = fileID
+            // console.log({avatar_file});
+            uni.hideLoading()
+            this.updateGroupInfo({
+              avatar_file
+            })
+          }
+        })
+      },
+      // #ifdef H5
+      share() {
+        // 获取当前域名
+        const data = location.origin + "/#/?joinGroup=" + this.conversation.group_info._id
+        uni.setClipboardData({
+          data,
+          showToast: false,
+          success: () => {
+            uni.showToast({
+              title: "已成功复制分享链接",
+              duration: 2000,
+              icon: 'none'
+            });
+          }
+        })
+      
+        // uni.navigateTo({
+        // 	url: '/uni_modules/uni-im/pages/group/groupQRCode?id=' +
+        // 		this.conversation.group_info._id +
+        // 		'&name=' + this.conversation.group_info.name +
+        // 		'&avatar_file=' + url,
+        // 	complete: (e) => {
+        // 		// console.log(e);
+        // 	}
+        // });
+      },
+      // #endif
+      joinGroup() {
+        db.collection('uni-im-group-join').add({
+          "group_id": this.conversation.group_id,
+          "message": ''
+        }).then((res) => {
+          // console.log("res: ", res);
+          uni.showToast({
+            icon: 'none',
+            title: '已申请'
+          })
+        })
+      },
+      setMuteAllMembers(e) {
+        for (let user_id in this.conversation.group_member) {
+          const member = this.conversation.group_member[user_id]
+          member.mute_type += (e.value ? 1 : -1)
+        }
+        this.updateGroupInfo({
+          "mute_all_members": e.value
+        })
+      },
+      changeConversationMute(e) {
+        this.conversation.changeMute()
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  /* #ifndef APP-NVUE */
+  page,
+  /* #endif */
+  .group-info-box {
+    width: 750rpx;
+    flex: 1;
+    background-color: #f5f5f5;
+    /* #ifdef H5 */
+    @media screen and (min-device-width:960px) {
+      height: calc(95vh - 70px);
+      overflow-y: auto;
+      flex: none;
+    }
+    /* #endif */
+  }
+  .user-list-container {
+    width: 750rpx;
+    flex-direction: row;
+    flex-wrap: wrap;
+    /* #ifndef APP-NVUE */
+    overflow-y: hidden;
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    height: 150px;
+    /* #endif */
+  }
+
+  /* #ifdef H5 */
+  .windows .user-list-container {
+    padding-right: 10rpx;
+  }
+
+  /* #endif */
+
+  .item {
+    width: 150rpx;
+    height: 150rpx;
+    margin: 5px 0;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .item.focus {
+    border: 1px dashed #ccc;
+  }
+
+  .group-admin {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    padding: 1px 3px;
+    border-radius: 6px;
+    background-color: #e64141;
+    color: #fff;
+    font-size: 12px;
+  }
+
+  .mute-type-1 {
+    position: absolute;
+    padding: 1px 10px;
+    background-color: #0b60ff;
+    color: #fff;
+    font-size: 10px;
+    bottom: 28px;
+  }
+
+  /* #ifdef H5 */
+  .pointer {
+    cursor: pointer;
+  }
+
+  .windows .user-list-container .item {
+    width: 145rpx;
+  }
+
+  /* #endif */
+
+  .avatar {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 10px;
+    box-shadow: 0 0 1px #aaa;
+  }
+
+  .nickname {
+    width: 150rpx;
+    text-align: center;
+    font-size: 14px;
+    color: #666;
+    padding: 0 16rpx;
+    /* #ifndef APP-NVUE */
+    white-space: nowrap;
+    /* #endif */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    lines: 1;
+  }
+
+  .logo {
+    width: 50px;
+    height: 50px;
+  }
+
+  .exitGroup {
+    margin: 10px 0;
+    background-color: #FFFFFF;
+    padding: 6px 0;
+    color: #e64141;
+    border-radius: 0;
+    font-size: 16px;
+    text-align: center;
+    padding: 15px 0;
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  /* #ifndef APP-NVUE */
+  .exitGroup::after {
+    display: none;
+  }
+
+  /* #endif */
+
+  .group-info-text {
+    color: #666;
+    font-size: 14px;
+    /* #ifndef APP-NVUE */
+    max-width: 560rpx;
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    width: 560rpx;
+    /* #endif */
+    text-align: right;
+  }
+
+  .join_option {
+    color: #666;
+    font-size: 14px;
+  }
 </style>
\ No newline at end of file
diff --git a/pages/group/members.nvue b/pages/group/members.nvue
new file mode 100644
index 0000000..56bbf41
--- /dev/null
+++ b/pages/group/members.nvue
@@ -0,0 +1,870 @@
+<template>
+  <view class="group-members-box">
+    <uni-search-bar v-model="keyword" class="search-bar" radius="5" placeholder="输入昵称搜索" clearButton="auto"
+      cancelButton="none"></uni-search-bar>
+    <view v-if="!leave_group" class="members-list-container" :class="{'show-less':!showAllMember}">
+      <view class="invite-box item" v-if="isAdmin">
+        <view class="invite">
+          <uni-icons @click="invite" color="#989898" size="20px" class="invite" type="plusempty"></uni-icons>
+        </view>
+        <text class="nickname">邀请</text>
+      </view>
+      <template v-for="(member,index) in memberList" :key="index">
+        <view class="item" :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>
+    </view>
+    <view class="show-all-menber" v-if="showMoreBtn">
+      <view class="show-all-menber-btn" @click="onClickShowAllMenber">
+        <text>{{showAllMember ? '收起' : '查看更多'}}</text>
+      </view>
+    </view>
+    <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';
+  export default {
+    data() {
+      return {
+        conversation: {
+          group_info: {
+            user_id: "",
+            mute_all_members: false
+          },
+          group_member: {},
+          mute: false
+        },
+        leave_group: false,
+        member_list: [],
+        isManage: false,
+        editorFields: {
+          "name": " 群聊名称",
+          "introduction": "群简介",
+          "notification": "群公告"
+        },
+        editorType: '',
+        editorDefaultValue: '',
+        groupType: '',
+        isAdmin: false,
+        keyword: '',
+        mute_all_members: false,
+        showAllMember: false,
+        // 鼠标在哪个用户id上
+        hoverUserId: '',
+        showMoreBtn: true
+      };
+    },
+    computed: {
+      ...uniIm.mapState(['isWidescreen']),
+      logoUrl() {
+        return this.conversation.group_info.avatar_file ? this.conversation.group_info.avatar_file.url : false
+      },
+      join_option() {
+        let val = this.conversation.group_info.join_option
+        return {
+          needPermission: "需要验证权限",
+          freeAccess: "自由加入",
+          disableApply: "禁止加入"
+        } [val]
+      },
+      memberList() {
+        let memberList = this.member_list
+          // 根据关键词搜索
+          .filter(member => {
+            // 忽略大小写
+            return member.users.nickname.toLowerCase().includes(this.keyword.toLowerCase())
+          })
+          // 是管理员排序靠前
+          .sort((a, b) => {
+            if (a.role.includes('admin') && !b.role.includes('admin')) {
+              return -1
+            } else if (!a.role.includes('admin') && b.role.includes('admin')) {
+              return 1
+            } else {
+              return 0
+            }
+          })
+        const memberCount = memberList.length
+        if(memberCount && memberCount < 10){
+          console.log('this.member_list.length',this.member_list.length);
+          this.showMoreBtn = false
+        }
+          
+        if (!this.showAllMember) {
+          memberList = memberList.slice(0, 9)
+        }
+        return memberList
+      },
+      isGroupCreator() {
+        return this.conversation.group_info.user_id == uniCloud.getCurrentUserInfo().uid
+      },
+      canPrivateChat(){
+        // 当前登录的账号是管理员，或者当前消息是群管理员发的
+        return this.uniIDHasRole('staff') || this.hoverUserId && this.conversation.group_member[this.hoverUserId].role.includes('admin')
+      }
+    },
+    watch: {
+      "conversation.group_info.user_id"(adminUserId) {
+        // 当前用户是群的创建者或者管理员（在群成员中找到当前用户的角色包含admin）
+        const currentUserId = uniCloud.getCurrentUserInfo().uid
+        this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
+        //非群主 隐藏【管理】按钮
+        if (!this.isAdmin) {
+          if (!this.isWidescreen) {
+            // #ifdef H5
+            let dom = document.getElementsByClassName('uni-page-head-btn')[1]
+            dom.style.visibility = 'hidden'; // 隐藏元素
+            // #endif
+            // #ifdef APP-PLUS
+            var webview = this.$scope.$getAppWebview();
+            // console.log('webview', webview);
+            webview.setStyle({
+              titleNView: {
+                buttons: []
+              }
+            });
+            // #endif
+          }
+        } else {
+          if (this.isWidescreen) {
+            this.isManage = true
+          }
+        }
+      },
+      "conversation.group_member": {
+        handler(group_member, oldValue) {
+          // console.log('group_member',group_member);
+          this.member_list = []
+          for (let key in group_member) {
+            this.member_list.push(group_member[key])
+          }
+          if (!uniIm.isWidescreen) { // pc宽屏不需要
+            let title = "群信息（" + this.member_list.length + "人）"
+            uni.setNavigationBarTitle({
+              title
+            });
+          }
+        },
+        deep: true,
+        immediate: true
+      },
+      // （后续）通过监听实现实时切换管理员实时刷新权限
+      // console.log('isAdmin',isAdmin);
+      conversation: {
+        handler(conversation, oldValue) {
+          const currentUserId = uniCloud.getCurrentUserInfo().uid
+          this.isAdmin = this.isGroupCreator || this.conversation.group_member[currentUserId]?.role.includes('admin')
+          this.leave_group = conversation.leave
+          this.mute_all_members = conversation.group_info.mute_all_members
+        },
+        deep: true
+      },
+    },
+    props: {
+      conversation_id: {
+        default () {
+          return false
+        }
+      }
+    },
+    async onLoad(e) {
+      if (!e.conversation_id) {
+        throw new Error("会话id不能为空")
+      }
+      // 以页面的方式打开，不需要显示更多的按钮和隐藏部分用户
+      this.showMoreBtn = false
+      this.showAllMember = true
+      this.load(e.conversation_id)
+    },
+    mounted() { //pc端以组件模式加载时逻辑
+      if (this.conversation_id) {
+        this.load(this.conversation_id)
+      }
+    },
+    onShow() {
+      // console.log("this.conversation: ", this.conversation.group_member);
+    },
+    // 长按头像出现管理菜单
+    // onNavigationBarButtonTap(e) {
+    //   if (e.index === 0) {}
+    // },
+    methods: {
+      async load(conversation_id) {
+        this.conversation = await uniIm.conversation.get(conversation_id)
+      },
+      async expelAndToBlack(item) {
+
+        uni.showModal({
+          title: '确定要将该用户移出本群并拉黑吗？',
+          content: '拉黑后此用户将不能再次加入本群，不能撤销，请谨慎操作',
+          cancelText: '取消',
+          confirmText: '确认',
+          complete: async (e) => {
+            // console.log(e);
+            if (e.confirm) {
+              uni.showLoading({
+                mask: true
+              });
+              try {
+                let res = await db.collection('uni-im-group-member').where({
+                    user_id: item.users._id,
+                    group_id: this.conversation.group_info._id
+                  })
+                  .remove()
+                console.log('expel', res);
+                const uniImCo = uniCloud.importObject("uni-im-co")
+                res = await uniImCo.addToGroupMenberBlackList({
+                  user_id: item.users._id,
+                  group_id: this.conversation.group_info._id
+                })
+                console.log('expelAndToBlack', res);
+              } catch (error) {
+                uni.showToast({
+                  title: error.message,
+                  icon: 'error',
+                  complete: () => {}
+                });
+              }
+              uni.hideLoading()
+            }
+          }
+        });
+      },
+      async expel(item) {
+        uni.showModal({
+          title: '确定要将该用户移出本群吗？',
+          content: '不能撤销，请谨慎操作',
+          cancelText: '取消',
+          confirmText: '确认',
+          complete: async (e) => {
+            // console.log(e);
+            if (e.confirm) {
+              uni.showLoading({
+                mask: true
+              });
+              try {
+                let res = await db.collection('uni-im-group-member').where({
+                    user_id: item.users._id,
+                    group_id: this.conversation.group_info._id
+                  })
+                  .remove()
+                if (res.result.deleted) {
+                  uni.showToast({
+                    title: '成功移除',
+                    icon: 'none',
+                    complete: () => {}
+                  });
+                  // console.log('exitGroup', res);
+                }
+              } catch (error) {
+                uni.showToast({
+                  title: error.message,
+                  icon: 'error',
+                  complete: () => {}
+                });
+              }
+              uni.hideLoading()
+            }
+          }
+        });
+      },
+      async changeMemberMute(item) {
+        let nickname = item.users.nickname || '匿名用户'
+        uni.showModal({
+          title: '确定要' + (item.mute_type ? `为"${nickname}"解除禁言吗？` : `禁言"${nickname}"吗？`),
+          cancelText: '取消',
+          confirmText: '确认',
+          complete: async (e) => {
+            // console.log(e);
+            if (e.confirm) {
+              uni.showLoading({
+                mask: true
+              });
+              try {
+                let res = await db.collection('uni-im-group-member').where({
+                    _id: item._id,
+                    mute_type: item.mute_type // 防止此时云端已经变化
+                  })
+                  .update({
+                    mute_type: item.mute_type ? 0 : 1
+                  })
+                // console.log('mute_type', res);
+                if (res.result.updated) {
+                  item.mute_type = item.mute_type ? 0 : 1
+
+                  uni.showToast({
+                    title: '设置成功',
+                    icon: 'none',
+                    complete: () => {}
+                  });
+                }
+              } catch (error) {
+                // console.log('error',merror)
+                uni.showToast({
+                  title: error.message,
+                  icon: 'error',
+                  complete: () => {}
+                });
+              }
+              uni.hideLoading()
+            }
+          }
+        });
+      },
+      openConversationMenu(e, index) {
+        let member = this.memberList[index]
+        // console.log('member', member);
+        let menuList = []
+        if (this.isAdmin) {
+          menuList.unshift({
+            "title": "移除",
+            "action": () => {
+              // console.log('移除');
+              this.expel(member)
+            }
+          })
+
+          menuList.unshift({
+            "title": "移除并拉黑",
+            "action": () => {
+              console.log('移除并拉黑');
+              this.expelAndToBlack(member)
+            }
+          })
+
+          if (!this.conversation.group_info.mute_all_members) {
+            menuList.unshift({
+              "title": member.mute_type ? "解除禁言" : '设为禁言',
+              "action": () => {
+                // console.log('禁言');
+                this.changeMemberMute(member)
+              }
+            })
+          }
+
+          const isAdmin = member.role.includes('admin')
+          menuList.push({
+            "title": isAdmin ? "取消管理员" : "设置管理员",
+            "action": () => {
+              let role = member.role;
+              if (isAdmin) {
+                // console.log('取消管理员');
+                role = member.role.filter(item => item !== 'admin')
+              } else {
+                role.push('admin')
+                // console.log('设置管理员');
+              }
+              uni.showLoading({
+                mask: true
+              });
+              db.collection('uni-im-group-member').doc(member._id).update({
+                  "role": role
+                }).then(res => {
+                  // console.log('res', res);
+                  member.role = role
+                })
+                .catch(err => {
+                  console.error(err)
+                  uni.showToast({
+                    title: err.message,
+                    icon: 'none'
+                  });
+                })
+                .finally(() => {
+                  uni.hideLoading()
+                })
+            }
+          })
+        }
+
+        if (menuList.length > 0) {
+          member.focus = true
+          const myContextmenu = this.$refs['uni-im-contextmenu']
+          const position = {
+            "contextmenu": {
+              "top": e.clientY,
+              "left": e.clientX
+            },
+            "longpress": {
+              "top": e.touches[0].screenY || e.touches[0].clientY,
+              "left": e.touches[0].screenX || e.touches[0].clientX
+            }
+          } [e.type]
+
+          // #ifdef H5
+          position.top = position.top + 120
+          // #endif
+
+          myContextmenu.show(position, menuList)
+          myContextmenu.onClose(() => {
+            member.focus = false
+          })
+        }
+      },
+      invite() {
+        // console.log('group_info._id', this.conversation.group_info._id);
+        uni.navigateTo({
+          url: '/uni_modules/uni-im/pages/contacts/createGroup/createGroup?group_id=' + this.conversation.group_info
+            ._id
+        })
+      },
+      async exitGroup() {
+        const group_id = this.conversation.group_info._id
+        if (this.isGroupCreator) {
+          uni.showModal({
+            title: '确认要解散群聊吗？',
+            content: '不能撤销，请谨慎操作',
+            cancelText: '取消',
+            confirmText: '确认',
+            complete: async (e) => {
+              // console.log(e);
+              if (e.confirm) {
+                uni.showLoading({
+                  mask: true
+                });
+                let res = await db.collection('uni-im-group')
+                  .where({
+                    _id: group_id
+                  })
+                  .remove()
+                  .finally((res) => {
+                    // uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
+                    // 	delta: 2
+                    // })
+                    uni.hideLoading()
+                  })
+                // console.log('exitGroup', res);
+              }
+            }
+          });
+        } else {
+          uni.showModal({
+            title: '确认要退出群聊吗？',
+            content: '不能撤销，请谨慎操作',
+            cancelText: '取消',
+            confirmText: '确认',
+            complete: async (e) => {
+              // console.log(e);
+              if (e.confirm) {
+                // uni.navigateBack({ // 收到离群的推送通知会自动关闭当前页面
+                // 	delta: 2
+                // })
+                uni.showLoading({
+                  mask: true
+                });
+                let res = await db.collection('uni-im-group-member').where({
+                    user_id: uniCloud.getCurrentUserInfo().uid,
+                    group_id
+                  })
+                  .remove()
+                // console.log(res.result);
+                if (res.result.deleted) {
+                  uni.showToast({
+                    title: '成功退出',
+                    icon: 'none'
+                  });
+                }
+                uni.hideLoading()
+                // console.log('exitGroup', res);
+              }
+            }
+          });
+        }
+      },
+      openPopupInfo(type) {
+        // console.log(type);
+        if (!this.isAdmin) return
+        this.editorType = type
+        this.editorDefaultValue = this.conversation.group_info[type]
+        if (this.editorType == "notification") {
+          this.editorDefaultValue = this.editorDefaultValue?.content || ""
+        }
+        this.$refs.popupInfo.open()
+      },
+      closePopupInfo() {
+        this.$refs.popupInfo.close()
+      },
+      confirmPopupInfo(value) {
+        if (!value) {
+          uni.showToast({
+            title: '内容不能为空！',
+            icon: 'none'
+          });
+          return
+        }
+        // console.log('value', value);
+        const updateData = {};
+        if (this.editorType == 'notification') {
+          updateData[this.editorType] = {
+            "content": value
+          }; // 创建时间服务端生成
+        } else {
+          updateData[this.editorType] = value;
+        }
+        this.updateGroupInfo(updateData)
+        this.$refs.popupInfo.close()
+      },
+      setAddGroupType() {
+        if (!this.isAdmin) return
+        uni.showActionSheet({
+          itemList: ['自由加入', '需要验证权限', '禁止加入'],
+          success: (e) => {
+            let join_option = ['freeAccess', 'needPermission', 'disableApply'][e.tapIndex]
+            this.updateGroupInfo({
+              join_option
+            })
+          },
+          fail: (err) => {
+            console.error("err: ", err);
+          }
+        })
+      },
+      async updateGroupInfo(group_info) {
+        // console.log('group_info---------',group_info);
+        this.conversation.group_info = Object.assign(this.conversation.group_info, group_info)
+        let res = await db.collection('uni-im-group')
+          .doc(this.conversation.group_id)
+          .update(group_info)
+        // console.log('change group info', res.result.updated,this.conversation);
+      },
+      async setAvatar() {
+        if (!this.isAdmin) return
+        const crop = {
+          quality: 100,
+          width: 600,
+          height: 600,
+          resize: true
+        };
+        uni.chooseImage({
+          count: 1,
+          crop,
+          success: async (res) => {
+            let tempFile = res.tempFiles[0],
+              avatar_file = {
+                // #ifdef H5
+                extname: tempFile.name.split('.')[tempFile.name.split('.').length - 1],
+                // #endif
+                // #ifndef H5
+                extname: tempFile.path.split('.')[tempFile.path.split('.').length - 1]
+                // #endif
+              },
+              filePath = res.tempFilePaths[0]
+            // #ifndef APP-PLUS
+            //非app端用前端组件剪裁头像，app端用内置的原生裁剪
+            let isPC = false
+            // #ifdef H5
+            isPC = !['ios', 'android'].includes(uni.getSystemInfoSync().platform)
+            // #endif
+            if (!isPC) {
+              filePath = await new Promise((callback) => {
+                uni.navigateTo({
+                  url: '/uni_modules/uni-id-pages/pages/users/cropImage/cropImage?path=' +
+                    filePath + `&options=${JSON.stringify(crop)}`,
+                  animationType: "fade-in",
+                  events: {
+                    success: url => {
+                      callback(url)
+                    }
+                  },
+                  complete(e) {
+                    // console.log(e);
+                  }
+                });
+              })
+            }
+            // #endif
+            // console.log(this.users);
+            let cloudPath = uniCloud.getCurrentUserInfo().uid + '' + Date.now()
+            avatar_file.name = cloudPath
+            uni.showLoading({
+              title: "更新中",
+              mask: true
+            });
+            let {
+              fileID
+            } = await uniCloud.uploadFile({
+              filePath,
+              cloudPath,
+              fileType: "image"
+            });
+            // console.log(result)
+            avatar_file.url = fileID
+            // console.log({avatar_file});
+            uni.hideLoading()
+            this.updateGroupInfo({
+              avatar_file
+            })
+          }
+        })
+      },
+      // #ifdef H5
+      share() {
+        // 获取当前域名
+        const data = location.origin + "/#/?joinGroup=" + this.conversation.group_info._id
+        uni.setClipboardData({
+          data,
+          showToast: false,
+          success: () => {
+            uni.showToast({
+              title: "已成功复制分享链接",
+              duration: 2000,
+              icon: 'none'
+            });
+          }
+        })
+      
+        // uni.navigateTo({
+        // 	url: '/uni_modules/uni-im/pages/group/groupQRCode?id=' +
+        // 		this.conversation.group_info._id +
+        // 		'&name=' + this.conversation.group_info.name +
+        // 		'&avatar_file=' + url,
+        // 	complete: (e) => {
+        // 		// console.log(e);
+        // 	}
+        // });
+      },
+      // #endif
+      joinGroup() {
+        db.collection('uni-im-group-join').add({
+          "group_id": this.conversation.group_id,
+          "message": ''
+        }).then((res) => {
+          // console.log("res: ", res);
+          uni.showToast({
+            icon: 'none',
+            title: '已申请'
+          })
+        })
+      },
+      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
+            })
+          }
+        }
+      },
+      onClickShowAllMenber() {
+        if(this.isWidescreen){
+          this.showAllMember = !this.showAllMember
+        }else{
+          uni.navigateTo({
+            url: '/uni_modules/uni-im/pages/group/members?conversation_id=' + this.conversation.id
+          })
+        }
+      },
+      setMuteAllMembers(e) {
+        for (let user_id in this.conversation.group_member) {
+          const member = this.conversation.group_member[user_id]
+          member.mute_type += (e.value ? 1 : -1)
+        }
+        this.updateGroupInfo({
+          "mute_all_members": e.value
+        })
+      },
+      changeConversationMute(e) {
+        this.conversation.changeMute()
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  /* #ifndef APP-NVUE */
+  page,
+  /* #endif */
+  .group-members-box {
+    width: 750rpx;
+    // flex: 1;
+    background-color: #f5f5f5;
+    /* #ifdef H5 */
+    @media screen and (min-device-width:960px) {
+      // height: calc(95vh - 70px);
+      // overflow-y: auto;
+      // flex: none;
+    }
+    /* #endif */
+  }
+  .members-list-container {
+    width: 750rpx;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  
+  // 收缩
+  .show-less {
+    max-height: 400px;
+  }
+
+  .item {
+    width: 150rpx;
+    height: 140rpx;
+    margin: 5px 0;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+  }
+
+  .item.focus {
+    border: 1px dashed #ccc;
+  }
+
+  .group-admin {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    padding: 1px 3px;
+    border-radius: 6px;
+    background-color: #e64141;
+    color: #fff;
+    font-size: 12px;
+  }
+
+  .mute-type-1 {
+    position: absolute;
+    padding: 1px 10px;
+    background-color: #0b60ff;
+    color: #fff;
+    font-size: 10px;
+    bottom: 28px;
+  }
+
+  /* #ifdef H5 */
+  .pointer {
+    cursor: pointer;
+  }
+  /* #endif */
+
+  .avatar {
+    width: 100rpx;
+    height: 100rpx;
+    border-radius: 10px;
+    box-shadow: 0 0 1px #aaa;
+  }
+
+  .nickname {
+    width: 140rpx;
+    text-align: center;
+    font-size: 14px;
+    color: #666;
+    padding: 0 16rpx;
+    /* #ifndef APP-NVUE */
+    white-space: nowrap;
+    /* #endif */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    lines: 1;
+  }
+
+  .logo {
+    width: 50px;
+    height: 50px;
+  }
+
+  .invite-box {
+    align-items: center;
+  }
+
+  .invite {
+    width: 100rpx;
+    height: 100rpx;
+    align-content: center;
+    border-radius: 10px;
+    border: #ccc dashed 1px;
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  .exitGroup {
+    margin: 10px 0;
+    background-color: #FFFFFF;
+    padding: 6px 0;
+    color: #e64141;
+    border-radius: 0;
+    font-size: 16px;
+    text-align: center;
+    padding: 15px 0;
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  /* #ifndef APP-NVUE */
+  .exitGroup::after {
+    display: none;
+  }
+
+  /* #endif */
+
+  .group-info-text {
+    color: #666;
+    font-size: 14px;
+    /* #ifndef APP-NVUE */
+    max-width: 560rpx;
+    /* #endif */
+    /* #ifdef APP-NVUE */
+    width: 560rpx;
+    /* #endif */
+    text-align: right;
+  }
+
+  .join_option {
+    color: #666;
+    font-size: 14px;
+  }
+
+  .slot-code {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .group-code {
+    width: 50rpx;
+    height: 50rpx;
+    margin-left: 10rpx;
+  }
+
+  .show-all-menber {
+    margin: 5px 0;
+    flex: 1;
+    justify-content: center;
+  }
+
+  .show-all-menber-btn {
+    flex-direction: row;
+    font-size: 14px;
+    justify-content: center;
+    /* #ifndef APP-NVUE */
+    cursor: pointer;
+    /* #endif */
+    color: #888;
+  }
+
+  .show-all-menber-btn:hover {
+    color: #666;
+  }
+</style>
\ No newline at end of file
-- 
GitLab