MeetMateApp/pages/chat/groupSetting.vue

<template>
	<view class="page">
		<block v-if="have_chk > 0">
			<view class="viewMore">
				申请待审核
				<image src="../../static/me/arrow_down_gray.png" mode="widthFix" />
			</view>
			<view class="bcenter">
				<view class="avator" v-for="(item, index) in list0" :key="index" @click="actMenuC(item.userID)">
					<image :src="item.avator" mode="aspectFill" />
					<text>{{item.nick}}</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="line"></view>
			<view class="line"></view>
		</block>
		<view class="bcenter">
			<view class="avator" v-for="(item, index) in list" :key="index" @click="actMenu(item.userID)">
				<image :src="item.avator" mode="aspectFill" />
				<text>{{item.nick}}</text>
				<image v-if="is_del" class="delit" src="../../static/icon/del_mem.png">
				</image>
			</view>
			<view class="avator" @click="addMember">
				<image src="../../static/icon/icon_add.png" mode="widthFix" />
				<text></text>
			</view>
			<!-- <view class="avator" @click="delMember">
				<image src="../../static/icon/icon_del.png" mode="widthFix" />
				<text></text>
			</view> -->
		</view>
		<view class="viewMore" @click="viewMore">
			更多群成员
			<image src="../../static/me/arrow_down_gray.png" mode="widthFix" />
		</view>
		<view class="line"></view>
		<view class="list_info">
			<view class="item">
				<text>群聊名称</text>
				<view class="right" @click="editName">
					<text>{{name}}</text>
					<image src="../../static/me/arrow_right_gray.png" mode="widthFix" />
				</view>
			</view>
			<view class="item">
				<text>全体禁言</text>
				<switch color="#FF2A95" style="transform:scale(0.7);" v-if="is_lock == 0" @change="LockGroup(1)" />
				<switch checked color="#FF2A95" style="transform:scale(0.7);" v-else @change="LockGroup(0)" />

			</view>

			<view class="blankHeight"></view>
		</view>
		<view class="line"></view>
		<view class="submitLogout" @click="actMem('remove',0)" v-if="isManage == 0">退出群聊</view>
		<view class="submitLogout" @click="actMem('remove',0)" v-if="isManage == 1">解散群聊</view>

		<view class="thread2"></view>
		<view class="thread2"></view>

		<ToastW3 ref="ToastW3"></ToastW3>
		<DialogBox ref="DialogBox"></DialogBox>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				page: 1,
				have_chk: 0,
				list0: [],
				list: [],
				num_total: 0,
				groupId: '',
				hasMore: true,
				name: '',
				is_lock: 0,
				is_del: false,
				isManage: 0,
				info: {}
			}
		},
		onLoad(parms) {
			let self = this;
			this.groupId = parms.groupId || "1"
		},
		onShow() {
			this.loadData();
		},
		methods: {
			delMember() {
				if (this.is_del) {
					this.is_del = false;
				} else {
					this.is_del = true;
				}
			},
			addMember() {
				uni.navigateTo({
					url: '/pages/chat/addMem?groupId=' + this.groupId
				})
			},
			viewMore() {
				uni.navigateTo({
					url: '/pages/chat/groupMemlist?groupId=' + this.groupId
				})
			},
			loadData() {
				// this.groupID = 1;
				this.page = 1;
				this.hasMore = true;
				// let res = await this.TIM.getGroupMemberList(id, this.page)
				// this.list = res.data.memberList;

				let that = this;
				var offset = (this.page - 1) * 20;
				uni.request({
					url: this.$apiHost2 + '/Chat/groupMembers', //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						groupId: this.groupId,
						offset: offset
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log("----", res.data);
						if (res.data.list == undefined || res.data.list == null) {
							res.data.list = []
						}
						this.have_chk = 0;
						if (res.data.list0 != undefined && res.data.list0 != null) {
							if (res.data.list0.length > 0) {
								this.list0 = res.data.list0;
								this.have_chk = 1;
							}
						}
						this.isManage = res.data.isManage;
						if (that.page > 1) {
							that.list = that.list.concat(res.data.list)
						} else {
							that.list = res.data.list;
						}
						that.name = res.data.name;
						that.is_lock = res.data.is_lock;
						that.num_total = res.data.total;
					}
				});
			},
			actMem(act, uid) {
				let that = this;
				this.$refs['DialogBox'].confirm({
					title: '提示',
					content: '请再次确认是否执行',
					DialogType: 'inquiry',
					btn1: '否',
					btn2: '是',
					animation: 0
				}).then((res) => {
					uni.showLoading({})
					uni.request({
						url: that.$apiHost2 + '/Chat/groupActMem', //仅为示例，并非真实接口地址。
						data: {
							uuid: getApp().globalData.uuid,
							groupId: that.groupId,
							userId: uid,
							act: act
						},
						header: {
							'content-type': 'application/json' //自定义请求头信息
						},
						success: (res) => {
							console.log("----", res.data);
							that.$refs['ToastW3'].showToast({
								title: res.data.str,
								animation: 0
							});
							if (res.data.success == "yes") {
								this.loadData();
							}
						},
						complete: (com) => {
							uni.hideLoading();
						},
					});
				})
			},
			LockGroup(lock) {
				let that = this;
				uni.showLoading({})
				uni.request({
					url: that.$apiHost2 + '/Chat/groupActMem', //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						groupId: that.groupId,
						lock: lock,
						act: "lockGroup"
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log("----", res.data);
						that.$refs['ToastW3'].showToast({
							title: res.data.str,
							animation: 0
						});
					},
					complete: (com) => {
						uni.hideLoading();
					},
				});
			},
			editName() {
				let that = this;
				this.$refs['DialogBox'].confirm({
					title: '请谨慎修改',
					placeholder: '请输入新的群名称',
					Infinity: true,
					DialogType: 'input',
					btn1: '取消',
					btn2: '确定',
					animation: 0
				}).then((res) => {
					uni.showLoading({})
					uni.request({
						url: that.$apiHost2 + '/Chat/groupActMem',
						data: {
							uuid: getApp().globalData.uuid,
							groupId: that.groupId,
							name: res.value,
							act: "editName"
						},
						header: {
							'content-type': 'application/json' //自定义请求头信息
						},
						success: (res) => {
							console.log("----", res.data);
							that.$refs['ToastW3'].showToast({
								title: res.data.str,
								animation: 0
							});
							if (res.data.success == "yes") {
								this.loadData();
							}
						},
						complete: (com) => {
							uni.hideLoading();
						},
					});
				})
			},
			actMenuC(uid) {
				let that = this;
				uni.showActionSheet({
					title: '',
					itemList: ['拒绝', '同意'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.actMem('noagree', uid);
						} else {
							that.actMem('agree', uid);
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			actMenu(uid) {
				let that = this;
				uni.showActionSheet({
					title: '',
					itemList: ['禁言', '移除'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.actMem('lock', uid);
						} else {
							that.actMem('del', uid);
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			actMem(act, uid) {
				let tips = '确定禁言吗？';
				if (act == 'del') {
					tips = '您确认删除吗？';
				}
				let that = this;
				this.$refs['DialogBox'].confirm({
					title: '提示',
					content: tips,
					DialogType: 'inquiry',
					btn1: '否',
					btn2: '是',
					animation: 0
				}).then((res) => {
					uni.showLoading({})
					uni.request({
						url: that.$apiHost2 + '/Chat/groupActMem', //仅为示例，并非真实接口地址。
						data: {
							uuid: getApp().globalData.uuid,
							groupId: that.groupId,
							userId: uid,
							act: act
						},
						header: {
							'content-type': 'application/json' //自定义请求头信息
						},
						success: (res) => {
							console.log("----", res.data);
							that.$refs['ToastW3'].showToast({
								title: res.data.str,
								animation: 0
							});
							if (res.data.success == "yes") {
								this.loadData();
							}
						},
						complete: (com) => {
							uni.hideLoading();
						},
					});
				})
			},


		}
	}
</script>

<style scoped lang="scss">
	@import 'groupSetting.scss';
</style>