chanyishenghuo-uniapp/pages/serviceTeacher/memberManagement.vue

<template>
	<view class="member-box">
		 <movable-area style="width: 100%; height:100%;position: absolute;">
				<movable-view class="move-view" direction="all" x="300" y="300" out-of-bounds="false">
					<view class="btn-item" @click="toAddMemeber()">
						<image src="../../static/addMenber.png"></image>
						<text>添加学员</text>
					</view>
				</movable-view>
		</movable-area>
		<view class="search-box">
			<view class="search-input-box acea-row row-middle">
				<text class="iconfont icon-xiazai5"></text>
				<input type="text" style="width:80%" placeholder="请输入会员真实姓名" v-model="keyWord" @input="search">
			</view>
		</view>
		<view class="tabs-box acea-row row-middle row-between">
			<view class="tab-item" :class="active == 1 ? 'tab-item-active' : ''" @click="tabClick(1)">我的学员</view>
			<view class="tab-item" :class="active == 0 ? 'tab-item-active' : ''" @click="tabClick(0)">审核中学员</view>
		</view>
		
		<view class="member-list">
			<view class="member-item acea-row" v-for="(member,idx) in memberList" :key="idx" @click="toMemberDetail(member)">
				<view class="img-box"><image :src="member.avatar" mode="aspectFill"></image></view>
				<view class="memberInfo-box">
					<view class="name">{{member.realName}}</view>
					<view class="jifen" v-if="active == 1">{{member.integral}}积分</view>
					<view class="record-box acea-row" v-if="active == 1">
						<view class="course-record">
							<image src="../../static/kecheng-icon2.png"></image>
							<text>课程 {{member.finishCourseNum || 0}}/{{member.enterCourseNum || 0}}</text>
						</view>
						<view class="course-record">
							<image src="../../static/dabang-icon.png"></image>
							<text>打榜 {{member.finishStudylistNm || 0}}/{{member.enterStudylistNum  || 0}}</text>
						</view>
					</view>
				</view>
				<view class="call-btn" v-if="active == 2 && member.status == 1">待审核</view>
				<!-- <view class="call-btn" v-if="active == 2 && member.state == 2"></view> -->
				<view class="call-btn" v-if="active == 2 && member.status == 3">审核不通过</view>
				<view class="call-btn" @click.stop="call(member.phone)" v-if="active == 1">拨号</view>
			</view>
			<view class="no-more">{{loadState}}</view>
		</view>
		<!-- <uni-collapse accordion="true" @change="openChange()">
		    <uni-collapse-item 
				:title="`${item.levelName} (${item.memberNum})`"
				:show-animation="true"
				ref="add"
				v-for="(item,index) in levelList" 
				:key="index"
				style="border-top: 1px solid #f3f3f3;">
					<view style="padding: 20rpx;">
						<view class="member-list">
							<view class="member-item acea-row" v-for="(member,idx) in memberList" :key="idx" @click="toMemberDetail(member)">
								<view class="img-box"><image :src="member.avatar" mode="aspectFill"></image></view>
								<view class="memberInfo-box">
									<view class="name">{{member.realName}}</view>
									<view class="jifen">{{member.integral}}积分</view>
									<view class="record-box acea-row">
										<view class="course-record">
											<image src="../../static/kecheng-icon2.png"></image>
											<text>课程 {{member.finishCourseNum}}/{{member.enterCourseNum}}</text>
										</view>
										<view class="course-record">
											<image src="../../static/dabang-icon.png"></image>
											<text>打榜 {{member.finishStudylistNm}}/{{member.enterStudylistNum}}</text>
										</view>
									</view>
								</view>
								<view class="call-btn" @click.stop="call(member.phone)">拨号</view>
							</view>
						</view>
					</view>
		    </uni-collapse-item>
		</uni-collapse> -->
	</view>
</template>

<script>
	import { getMyMemberLevels , getSellerMembers, searchBindInfo} from "@/api/serverTeacher"
	import {debounce} from '@/utils/index'
	export default{
		data(){
			return {
				keyWord: '',
				active: 1,
				levelList:[],
				memberList: [],
				loading: true,
				loadState: '没有更多了...',
				page: 0,
				size: 10
			}
		},
		onLoad() {
			this.searchBindInfo()
		},
		onPullDownRefresh(){
			this.page = 0
			this.memberList = []
			this.searchBindInfo()
		},
		onReachBottom(){
			this.page = this.page + 1
			this.searchBindInfo()
		},
		methods:{
			search: debounce(function(){
				uni.showLoading({
					title: '正在加载中...'
				})
				searchBindInfo({keywords: this.keyWord,state: this.active}).then(res=>{
					if(res.success){
						this.memberList = res.data.records
					}
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			}),
			searchBindInfo(){
				uni.showLoading({
					title: '正在加载中...'
				})
				this.loadState = '正在加载...'
				searchBindInfo({
					keywords: this.keyWord,
					state: this.active,
					page: this.page,
					size: this.size,
				}).then(res=>{
					if(res.success){
						if(res.data.records.length < this.size){
							this.loading = false
							this.loadState = '没有更多了...'
						} else{
							this.loading = true
							this.loadState = '上拉记载更多...'
						}
						this.memberList = this.memberList.concat(res.data.records) 
					}
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},
			tabClick(idx){
				this.page = 0
				this.memberList = []
				this.active = idx
				this.searchBindInfo()
			},
			toAddMemeber(){
				this.$yrouter.push({
					path: '/pages/serviceTeacher/addMember',
				})
			},
			// openChange(e){
			// 	this.memberList = [];
			// 	if(e.length > 0){
			// 		uni.showLoading({
			// 			title: '正在加载中...'
			// 		})
			// 		let level = this.levelList[e[0]].level;
			// 		getSellerMembers({level:level}).then((res)=>{
			// 			uni.hideLoading()
			// 			if(res.success){
			// 				this.memberList = res.data
			// 			}
			// 		})
			// 	}
			// },
			toMemberDetail(item){
				if(this.active == 1){
					this.$yrouter.push({
						path:'/pages/serviceTeacher/memberDetail',
						query:{
							item: encodeURIComponent(JSON.stringify(item))
						}
					})
				}
			},
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.move-view{
		width: 50rpx;
		height: 50rpx;
		z-index: 999;
	}
	.btn-item{
		width: 146rpx;
		height: 146rpx;
		padding:20rpx 10rpx;
		background: #FFFFFF;
		border: 1px solid #E4E4E4;
		box-shadow: 0px 4px 8px rgba(240, 240, 240, 0.5);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.no-more{
		font-size: 28rpx;
		color: #333;
		text-align: center;
		margin: 20rpx auto;
	}
	.tabs-box{
		border-top: 1px solid #d8d8d8;
		width: 100%;
		height: 90rpx;
		padding: 0 122rpx;
		background-color: #fff;
		color: #999;
		font-size: 32rpx;
		position: relative;
		z-index: 99;
		.tab-item{
			height: 100%;
			line-height: 90rpx;
			border-bottom: 6rpx solid #fff;
			text-align: center;
		}
		.tab-item-active{
			color: #222;
			height: 100%;
			line-height: 90rpx;
			border-bottom: 4rpx solid #f4c076;
			// font-weight: bold;
		}
	}
	.member-box{
		width: 100%;
		.search-box{
			background: #fff;
			width: 100%;
			padding: 20rpx 30rpx;
			.search-input-box{
				width: 100%;
				height: 70rpx;
				background: #F2F2F2;
				font-size: 28rpx;
				color: #999999;
				border-radius: 25px;
				padding-left: 26rpx;
				.iconfont{
					margin-right: 12rpx;
				}
				input{
					height: 100%;
				}
			}
		}
		.member-list{
			margin-top: 20rpx;
			.member-item{
				position: relative;
				background: #fff;
				padding: 28rpx 20rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				.img-box{
					width: 144rpx;
					height: 144rpx;
					margin-right: 20rpx;
					image{
						width: 144rpx;
						height: 144rpx;
						border-radius: 50px;
					}
				}
				.memberInfo-box{
					display: flex;
					flex-direction: column;
					justify-content: center;
					font-size: 32rpx;
					color: #222;
					.jifen{
						font-size: 24rpx;
						color: #EB5744;
					}
					.record-box{
						margin-top: 22rpx;
					}
					.course-record{
						color: #666;
						font-size: 28rpx;
						margin-right: 60rpx;
						image{
							width: 24rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}
					}
				}
				.call-btn{
					position: absolute;
					right: 28rpx;
					top: 50%;
					margin-top: -30rpx;
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 32rpx;
					color: #fff;
					text-align: center;
					background: #F4C076;
					border-radius: 30rpx;
				}
			}
		}
		/deep/.uni-collapse-cell__title{
			background: #fff !important;
		}
	}
</style>