MeetMateApp/pages/chat/components/member.vue

<template>
	<uni-popup ref="popup" type="bottom">
		<view class="main">
			<view class="top" @click="closeTA">
				<image src="../../../static/me/close2.png"></image>
			</view>
			<view class="bcenter">
				<view class="avator" v-for="(item, index) in list" :key="index">
					<image src="https://e.yujianmate.com/images/avator/a1.jpg" mode="widthFix" />
					<text>{{item.nick}}</text>
				</view>
				<view class="avator" @click="selAvator('a2.jpg')">
					<image src="../../../static/icon/my-icon-6.png" mode="widthFix" />
					<text></text>
				</view>
				<view class="avator" @click="selAvator('a3.jpg')">
					<image src="../../../static/icon/my-icon-4.png" mode="widthFix" />
					<text></text>
				</view>
			</view>
			<view class="viewMore" @click="viewMore">查看更多群成员&raquo;</view>
			<view class="line"></view>
			<view class="list_info">
				<view class="item">
					<text>群聊名称</text>
					<input type="text" class="input" v-model="name" placeholder="请输入新的名称" maxlength="11" />

				</view>
				<view class="item">
					<text>全体禁言</text>
					<switch color="#FFCC33" style="transform:scale(0.7)" />

				</view>

				<view class="blankHeight"></view>
			</view>
			<view class="line"></view>
			<view class="submitLogout">退出群聊/解散群聊</view>
			<scroll-view scroll-y="true" class="list" @scrolltolower="loadMore" v-if="false">
				<view class="text">群成员列表(总成员:{{num_total}})</view>
				<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item.userID)">
					<view class="left">
						<view class="avatorImg2">{{item.ava_name}}</view>
						<!-- <image class="avatar" lazy-load="true" :src="item.avatar"></image> -->
						<view class="nick">{{item.nick}}</view>
						<!-- <image class="gender" v-if="item.gender == 2" src="@/static/icon/woman.png" mode="aspectFill" />
						<image class="gender" v-if="item.gender == 1" src="@/static/icon/man.png" mode="aspectFill" /> -->
					</view>
					<image v-if="true" class="hi" src="@/static/images/article/dazhaohu_2.png" mode="aspectFill"
						@click="navigateToChatDetail(item.userID, item.nick)" />
				</view>
			</scroll-view>

		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				page: 1,
				list: [],
				num_total: 0,
				groupID: "",
				hasMore: true,
				name: '',
			}
		},
		methods: {
			closeTA() {
				// this.$refs.member.open(this.userID);
				this.$refs.popup.close();
			},
			viewMore() {

			},
			async open(id) {
				this.groupID = id;
				this.page = 1;
				this.hasMore = true;
				this.$refs.popup.open();
				// 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: {
						skey: getApp().globalData.skey,
						groupId: id,
						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 = []
						}
						if (that.page > 1) {
							that.list = that.list.concat(res.data.list)
						} else {
							that.list = res.data.list;
						}
						that.num_total = res.data.total;
					}
				});
			},
			async loadMore() {
				console.log('loadMore');
				if (!this.hasMore) {
					return
				}
				this.page = this.page + 1;
				let that = this;
				var offset = (this.page - 1) * 20;
				uni.request({
					url: this.$apiHost2 + '/Chat/groupMembers', //仅为示例，并非真实接口地址。
					data: {
						skey: getApp().globalData.skey,
						groupId: that.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 = [];
						}
						if (that.page > 1) {
							that.list = that.list.concat(res.data.list)
						}
						if (res.data.list.length == 0) {
							that.hasMore = false;
						}
					}
				});
				// let res = await this.TIM.getGroupMemberList(this.groupID, this.page)
				// if (res.data.memberList.length == 0) {
				// 	this.hasMore = false
				// }
				// this.list = this.list.concat(res.data.memberList)
			},
			toDetail(uid) {
				// uni.navigateTo({
				// 	url: "/pages/detail/index?uid=" + uid,
				// });
			},
			navigateToChatDetail(userID, nickName) {
				if (true) {
					return;
				}
				let jsonUserID = encodeURIComponent(JSON.stringify(userID));
				let jsonNickName = encodeURIComponent(JSON.stringify(nickName));
				let jsonConversationID = encodeURIComponent(JSON.stringify("C2C" + userID));
				let jsonConversationType = encodeURIComponent(JSON.stringify("C2C"));
				uni.navigateTo({
					url: "/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName +
						"&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100vh;
		padding: 0rpx 0rpx;
		background: #f0f0f0;
	}

	.top {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: flex-end;
		padding-right: 30rpx;
		padding-top: 20rpx;

		image {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.text {}

	.list {
		height: 86vh;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;
			border-bottom: dotted 1px #f0f0f0;

			.left {
				display: flex;
				align-items: center;

				.avatorImg2 {
					width: 90rpx;
					height: 90rpx;
					background-color: #d4237a;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-weight: bold;
					font-size: 40rpx;
				}

				.nick {
					margin-left: 20rpx;
				}

				.avatar {
					border-radius: 100%;
					width: 75rpx;
					height: 75rpx;
				}

				.gender {
					margin-left: 20rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.hi {
				width: 45rpx;
				height: 45rpx;
			}

		}

	}

	.list_info {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		color: #fff;
		background-color: #fff;
		width: 100%;

		.item {
			width: 690rpx;
			height: 84rpx;
			margin-top: 10rpx;
			color: #000;
			font-size: 28rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			text {}

			input {
				text-align: right;
			}

			.arrow {
				width: 36rpx;
			}

			.desc {
				color: #333;
			}
		}
	}

	.title {}

	.bcenter {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
		padding-left: 30rpx;
		background-color: #fff;
		flex-wrap: wrap;

		.avator {
			width: 132rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			padding-bottom: 12rpx;

			image {
				border-radius: 100rpx;
				width: 80rpx;
				height: 80rpx;
			}

			text {
				height: 30rpx;
			}
		}

		.active {
			image {
				border-radius: 100rpx;
				border: solid 4rpx #FF2A95;
				border-radius: 100rpx;
			}
		}
	}

	.line {
		width: 750rpx;
		height: 8rpx;
		background-color: #f0f0f0;
	}

	.viewMore {
		width: 750rpx;
		height: 70rpx;
		background-color: #fff;
		text-align: center;
		line-height: 70rpx;
		font-size: 24rpx;
	}

	.submitLogout {
		width: 750rpx;
		height: 96rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: 26rpx;
		background-color: #fff;
		color: #FF2A95;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.blankHeight {
		height: 30rpx;
	}
</style>