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.
250 lines
5.4 KiB
250 lines
5.4 KiB
<template>
|
|
<view>
|
|
<view class="top_box">
|
|
<view class="chanmel_image">
|
|
<image :src="userInfo.headUrl" mode=""></image>
|
|
</view>
|
|
<view class="title_box">
|
|
<view class="left_text">
|
|
<text>我的团队：</text>
|
|
<text>{{fansSize}}人</text>
|
|
</view>
|
|
<view class="right_text">
|
|
<text>我的推荐人：</text>
|
|
<text v-if="Object.keys(fans_userInfo).length >0">{{fans_userInfo.nickName}}</text>
|
|
<text v-else>平台</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 选择框 -->
|
|
<view class="select_pic_video">
|
|
<u-subsection mode="subsection" :list="listOneTow" fontSize="30" height="61"
|
|
:current="current" @change="sectionChange"></u-subsection>
|
|
</view>
|
|
<!-- 数据展示 -->
|
|
<view class="item_list_box" v-if="member_list.length>0">
|
|
<view class="item" v-for="(item,index) in member_list" :key="index">
|
|
<u-badge :offset="['52','668']" :isDot="true" bgColor="#157DF6" showZero='0' type="success"></u-badge>
|
|
<image :src="item.headUrl" mode=""></image>
|
|
<view class="item_text_box">
|
|
<view class="left_box">
|
|
<text>{{item.nickName}}</text>
|
|
<text>注册时间：{{item.createTime}}</text>
|
|
</view>
|
|
<image v-if="item.level" :class="item.level==4?'img2':'img1'" :src="IMG_URL+'vip/'+ (item.level) +'.png'" mode="widthFix" ></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 数据为空 -->
|
|
<u-empty v-else text="无数据" mode="list"></u-empty>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
listOneTow: ['一级推广','二级推广'],
|
|
current: 0,
|
|
member_list: [],
|
|
userInfo: {},
|
|
fans_userInfo: {},
|
|
fansSize: 0,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
IMG_URL: '',
|
|
total: null,
|
|
isLock: false,
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.pageNo = 1,
|
|
this.pageSize = 10,
|
|
this.IMG_URL = '',
|
|
this.total = null,
|
|
this.isLock = false;
|
|
this.fans_userInfo = {}
|
|
this.member_list = []
|
|
this.getFansList();
|
|
|
|
},
|
|
onReachBottom() {
|
|
this.pageNo+=1;
|
|
this.isLock = true;
|
|
if(total!== null && this.pageNo * this.pageSize > this.total){
|
|
this.$Toast('已经没有数据了')
|
|
}
|
|
if(this.isLock) {
|
|
this.getFansList();
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.userInfo = uni.getStorageSync("__user_info");
|
|
this.IMG_URL = this.$IMG_URL;
|
|
console.log(this.IMG_URL)
|
|
this.getFansList();
|
|
},
|
|
methods: {
|
|
getFansList() {
|
|
// 获取粉丝列表
|
|
uni.showLoading();
|
|
const params = {
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
type: this.current
|
|
}
|
|
this.$api('getFansList',params).then(res => {
|
|
let { code, result, message} = res;
|
|
uni.hideLoading();
|
|
this.isLock = false;
|
|
if(code == 200) {
|
|
|
|
console.log(result)
|
|
if(this.total == null) {
|
|
this.total = result.fansInfoPage.total;
|
|
// 将推广人的姓名截取
|
|
|
|
if(result.pidUserInfo){
|
|
if(result.pidUserInfo.nickName.length > 8){
|
|
result.pidUserInfo.nickName = result.pidUserInfo.nickName.substr(0,8) + '...'
|
|
}
|
|
}
|
|
if(result.pidUserInfo!==null){
|
|
this.fans_userInfo = result.pidUserInfo;
|
|
}
|
|
|
|
|
|
this.fansSize = result.fansSize
|
|
}
|
|
this.member_list = this.member_list.concat(result.fansInfoPage.records)
|
|
uni.stopPullDownRefresh()
|
|
}else {
|
|
this.$Toast(message);
|
|
uni.stopPullDownRefresh()
|
|
}
|
|
}).catch(err => {
|
|
this.isLock = false;
|
|
uni.stopPullDownRefresh()
|
|
this.$Toast(err.message)
|
|
})
|
|
},
|
|
sectionChange(index){
|
|
|
|
this.current = index;
|
|
console.log(index,this.current);
|
|
this.member_list = [];
|
|
this.pageNo = 1;
|
|
this.total = null;
|
|
this.getFansList();
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .u-badge{
|
|
padding: 0 !important;
|
|
}
|
|
.top_box{
|
|
.chanmel_image{
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
image{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
.title_box{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-size: 24rpx;
|
|
color: #3B3B3B;
|
|
margin-top: 24rpx;
|
|
.left_text{
|
|
// margin-left: 120rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.right_text{
|
|
// margin-right: 140rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.left_text,
|
|
.right_text{
|
|
text{
|
|
&:last-child{
|
|
color: #E72A37;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.select_pic_video {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 28rpx;
|
|
margin-bottom: 38rpx;
|
|
background-color: #fff;
|
|
border-radius: 30rpx;
|
|
/deep/ .u-subsection {
|
|
border-radius: 30rpx !important;
|
|
width: 556rpx !important;
|
|
height: 61rpx !important;
|
|
.u-item {
|
|
border: none !important;
|
|
}
|
|
.u-item-bg {
|
|
background-color: #01AEEA !important;
|
|
border-radius: 30rpx !important;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
}
|
|
.item_list_box{
|
|
margin-top: 40rpx;
|
|
}
|
|
.item{
|
|
position: relative;
|
|
width: 686rpx;
|
|
margin: 0 auto;
|
|
padding-bottom: 5rpx;
|
|
border-bottom: 1px solid #ECECEC;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
&:last-child{
|
|
border-bottom: none;
|
|
}
|
|
image{
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
margin-left: 36rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
.item_text_box{
|
|
flex: 1;
|
|
font-size: 20rpx;
|
|
color: #929292;
|
|
margin-left: 16rpx;
|
|
margin-right: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left_box{
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 30rpx;
|
|
}
|
|
.img1{
|
|
width: 140rpx;
|
|
}
|
|
.img2{
|
|
width: 160rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
</style>
|