members.nvue

<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" 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,
        // 延迟渲染，避免页面卡顿
        laterRenderIndex: 1
      };
    },
    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
            }
          })
          // laterRenderIndex
          .filter((item, index) => {
            return index < this.laterRenderIndex * 50
          })
        
        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')
      }
    },
    onReachBottom() {
      this.laterRenderIndex++
    },
    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) {
          uniIm.toChat({
            user_id,
            source:{
              group_id: this.conversation.group_id
            }
          })
        }
      },
      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;
  }
  .item {
    width: 150rpx;
    height: 140rpx;
    margin: 5px 0;
    align-items: center;
    justify-content: center;
    position: relative;
    /* #ifndef APP-NVUE */
    display: inline-flex;
    /* #endif */
  }
  
  /* #ifdef H5 */
  // 收缩
  .show-less {
    max-height: 400px;
  }
  .windows .item {
    width: 146rpx;
  }
  /* #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;
    justify-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>