You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

186 lines
4.2 KiB

3 years ago
<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>