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.
330 lines
8.5 KiB
330 lines
8.5 KiB
<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>
|
|
|