heshanApp/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, { IMMethods } from 'openim-uniapp-polyfill';
import { GroupMemberRole, GroupStatus, GroupVerificationType, MessageReceiveOptType, AllowType } from '@/pages_im/constant/imConstants';
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>