baiyuApp/pages_im/pages/conversation/groupManage/index.vue

<template>
  <view class="group_settings_container">
    <custom-nav-bar title="群管理" />
    <view class="setting_row">
      <setting-item
        v-if="isOwner || isAdmin"
        title="全体禁言"
        :loading="switchLoading.mute"
        @switch="changeMute"
        :switchValue="isAllMuted"
        :is_switch="true"
        :border="false"
      />
    </view>

    <view class="setting_row">
      <setting-item @click="showActionSheet" title="进群验证" :border="false">
        <text class="sub_title">{{ getGroupVerStr() }}</text>
      </setting-item>
      <setting-item
        title="不允许查看群成员资料"
        :loading="switchLoading.look"
        @switch="changeLook"
        :switchValue="!canLookOther"
        :is_switch="true"
        :border="false"
      />
      <setting-item
        title="不允许添加群成员为好友"
        :loading="switchLoading.add"
        @switch="changeAdd"
        :switchValue="!canAddOther"
        :is_switch="true"
        :border="false"
      />
    </view>

    <view class="setting_row">
      <setting-item
        v-if="isOwner"
        @click="toTransfer"
        title="群主管理权转让"
        :border="false"
      />
    </view>

    <action-sheet
      :groupID="storeCurrentConversation.groupID"
      :visible.sync="actionSheetVisible"
    />
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { GroupMemberListTypes } from "../../../constant";
import IMSDK, {
  GroupMemberRole,
  GroupStatus,
  GroupVerificationType,
  IMMethods,
  MessageReceiveOptType,
  AllowType,
} from "openim-uniapp-polyfill";
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import SettingItem from "../../../components/SettingItem/index.vue";
import ActionSheet from "./components/ActionSheet.vue";
export default {
  components: {
    CustomNavBar,
    SettingItem,
    ActionSheet,
  },
  data() {
    return {
      actionSheetVisible: false,
      confirmType: null,
      switchLoading: {
        pin: false,
        opt: false,
        mute: false,
        look: false,
        add: false,
      },
    };
  },
  computed: {
    ...mapGetters([
      "storeCurrentConversation",
      "storeCurrentMemberInGroup",
      "storeCurrentGroup",
    ]),
    isOwner() {
      return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
    },
    isAdmin() {
      return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
    },
    isAllMuted() {
      return this.storeCurrentGroup.status === GroupStatus.Muted;
    },
    canLookOther() {
      return (
        this.$store.getters.storeCurrentGroup.lookMemberInfo ===
        AllowType.Allowed
      );
    },
    canAddOther() {
      return (
        this.$store.getters.storeCurrentGroup.applyMemberFriend ===
        AllowType.Allowed
      );
    },
  },
  methods: {
    changeLook(flag) {
      this.switchLoading.look = true;
      IMSDK.asyncApi(IMSDK.IMMethods.SetGroupLookMemberInfo, IMSDK.uuid(), {
        groupID: this.$store.getters.storeCurrentGroup.groupID,
        rule: flag ? AllowType.NotAllowed : AllowType.Allowed,
      })
        .catch(() => uni.$u.toast("设置失败"))
        .finally(() => (this.switchLoading.look = false));
    },
    changeAdd(flag) {
      this.switchLoading.add = true;
      IMSDK.asyncApi(IMSDK.IMMethods.SetGroupApplyMemberFriend, IMSDK.uuid(), {
        groupID: this.$store.getters.storeCurrentGroup.groupID,
        rule: flag ? AllowType.NotAllowed : AllowType.Allowed,
      })
        .catch(() => uni.$u.toast("设置失败"))
        .finally(() => (this.switchLoading.add = false));
    },
    changeMute(isMute) {
      this.switchLoading.mute = true;
      IMSDK.asyncApi(IMSDK.IMMethods.ChangeGroupMute, IMSDK.uuid(), {
        groupID: this.storeCurrentGroup.groupID,
        isMute,
      })
        .then(() => uni.$u.toast("禁言成功"))
        .catch(() => uni.$u.toast("禁言失败"))
        .finally(() => (this.switchLoading.mute = false));
    },
    getGroupVerStr() {
      if (
        this.storeCurrentGroup.needVerification ===
        GroupVerificationType.ApplyNeedInviteNot
      ) {
        return "群成员邀请无需验证";
      }
      if (
        this.storeCurrentGroup.needVerification === GroupVerificationType.AllNot
      ) {
        return "允许所有人加群";
      }
      return "需要发送验证消息";
    },
    toTransfer() {
      uni.navigateTo({
        url: `/pages_im/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Transfer}&groupID=${this.storeCurrentGroup.groupID}`,
      });
    },
    showActionSheet() {
      if (!this.isAdmin && !this.isOwner) {
        return;
      }

      this.actionSheetVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.group_settings_container {
  @include colBox(false);
  height: 100vh;
  background-color: #f6f6f6;

  .setting_row {
    background-color: #fff;
    margin: 24rpx 24rpx 0;
    border-radius: 6px;
    overflow: hidden;
  }
}
</style>