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.
185 lines
4.2 KiB
185 lines
4.2 KiB
<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>
|
|
|