chanyishenghuo-uniapp/pages/serviceTeacher/memberManagement.vue

<template>
	<view class="member-box">
		<view class="search-box">
			<view class="search-input-box acea-row row-middle">
				<text class="iconfont icon-xiazai5"></text>
				<input type="text" placeholder="请输入会员真实姓名">
			</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 } from "@/api/serverTeacher"
	export default{
		data(){
			return {
				levelList:[],
				memberList: []
			}
		},
		onLoad() {
			this.getMyMemberLevels()
			// this.getList()
		},
		methods:{
			getMyMemberLevels(){
				getMyMemberLevels().then(res=>{
					if(res.success){
						this.levelList = res.data
					}
				})
			},
			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
						}
					})
				}
			},
			getList(){
				getSellerMembers().then((res)=>{
					if(res.success){
						this.memberList = res.data
					}
				})
			},
			toMemberDetail(item){
				console.log(item)
				this.$yrouter.push({
					path:'/pages/serviceTeacher/memberDetail',
					query:{
						item: encodeURIComponent(JSON.stringify(item))
					}
				})
			},
			call(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.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{
			.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{
					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: 28rpx;
					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>