386 lines
11 KiB
Vue
386 lines
11 KiB
Vue
<template>
|
||
<view :data-theme="theme">
|
||
<view class="promoter-list">
|
||
<view class='promoterHeader'>
|
||
<view class='headerCon acea-row row-between'>
|
||
<view>
|
||
<view class='name'>推广人数</view>
|
||
<view><text class='num semiBold'>{{peopleData.count || 0}}</text>人</view>
|
||
</view>
|
||
<view class="promoter-pic"><image src="../static/images/promoter.png" class="w-100-p111- h-100-p111-"/></view>
|
||
</view>
|
||
</view>
|
||
<view class="borderPad">
|
||
<view class="borderPad bg--w111-fff borRadius14">
|
||
<view class='nav acea-row row-around'>
|
||
<view :class="grade == 0 ? 'item on' : 'item'" @click='setType(0)'>一级({{peopleData.firstSpreadNum || 0}})</view>
|
||
<view :class="grade == 1 ? 'item on' : 'item'" @click='setType(1)'>二级({{peopleData.secondSpreadNum || 0}})
|
||
</view>
|
||
</view>
|
||
<view class='search acea-row row-between-wrapper'>
|
||
<view class='input'>
|
||
<input placeholder='点击搜索会员名称' placeholder-class='placeholder' v-model="keywords"
|
||
@confirm="submitForm" confirm-type='search' name="search" />
|
||
</view>
|
||
<button class='iconfont icon-ic_search' @click="submitForm"></button>
|
||
</view>
|
||
</view>
|
||
<view class='list borRadius14'>
|
||
<view class="sortNav acea-row row-middle">
|
||
<view class="sortItem acea-row items-baseline row-center" @click='setSort("childCount","ASC")' v-if="sort == 'childCountDESC'">
|
||
团队排序
|
||
<view class="iconfont icon-ic_down2 font-color"></view>
|
||
</view>
|
||
<view class="sortItem acea-row items-baseline row-center" @click='setSort("childCount","")' v-else-if="sort == 'childCountASC'">
|
||
团队排序
|
||
<view class="iconfont icon-ic_up2 font-color"></view>
|
||
</view>
|
||
<view class="sortItem acea-row items-baseline row-center" @click='setSort("childCount","DESC")' v-else>
|
||
团队排序
|
||
<view class="iconfont icon-ic_down2"></view>
|
||
</view>
|
||
<view class="sortItem acea-row items-baseline row-center" @click='setSort("amountCount","ASC")' v-if="sort == 'amountCountDESC'">
|
||
金额排序
|
||
<view class="iconfont icon-ic_down2 font-color"></view>
|
||
</view>
|
||
<view class="sortItem acea-row items-baseline row-center" @click='setSort("amountCount","")' v-else-if="sort == 'amountCountASC'">金额排序
|
||
<view class="iconfont icon-ic_up2 font-color"></view>
|
||
</view>
|
||
<view class="sortItem acea-row items-baseline row-center" @click='setSort("amountCount","DESC")' v-else>金额排序
|
||
<view class="iconfont icon-ic_down2"></view>
|
||
</view>
|
||
<view class="sortItem acea-row items-baseline row-center" @click='setSort("orderCount","ASC")' v-if="sort == 'orderCountDESC'">订单排序
|
||
<view class="iconfont icon-ic_down2 font-color"></view>
|
||
</view>
|
||
<view class="sortItem acea-row items-baseline row-center" @click='setSort("orderCount","")' v-else-if="sort == 'orderCountASC'">订单排序
|
||
<view class="iconfont icon-ic_up2 font-color"></view>
|
||
</view>
|
||
<view class="sortItem acea-row items-baseline row-center" @click='setSort("orderCount","DESC")' v-else>订单排序
|
||
<view class="iconfont icon-ic_down2"></view>
|
||
</view>
|
||
</view>
|
||
<view v-for="(item,index) in recordList" :key="index">
|
||
<view class='item acea-row row-between-wrapper' :class="index===recordList.length-1?'b-b-rd':''">
|
||
<view class="picTxt acea-row row-between-wrapper">
|
||
<view class='pictrue'>
|
||
<image :src='item.avatar'></image>
|
||
</view>
|
||
<view class='text'>
|
||
<view class='name line1'>{{item.nickname}}</view>
|
||
<view>加入时间: {{item.time ? item.time.split(' ')[0] : ''}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view><text class='num font-color'>{{item.childCount ? item.childCount : 0}}</text>人
|
||
</view>
|
||
<view><text class="num">{{item.orderCount ? item.orderCount : 0}}</text>单</view>
|
||
<view><text class="num">{{item.amountCount ? item.amountCount : 0}}</text>元</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='loadingicon acea-row row-center-wrapper'>
|
||
<text class='loading iconfont icon-jiazai' :hidden='loadingList==false'></text>
|
||
</view>
|
||
<block v-if="recordList.length == 0 && isShow && !loadingList">
|
||
<emptyPage title="暂无推广人数～" mTop="19%" :imgSrc="urlDomain+'crmebimage/presets/noJilu.png'"></emptyPage>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
import {
|
||
spreadPeople,
|
||
spreadPeoCount
|
||
} from '@/api/user.js';
|
||
import {toLogin} from '@/libs/login.js';
|
||
import {mapGetters} from "vuex";
|
||
import emptyPage from '@/components/emptyPage.vue'
|
||
import {setThemeColor} from '@/utils/setTheme.js'
|
||
const app = getApp();
|
||
export default {
|
||
components: {
|
||
emptyPage
|
||
},
|
||
data() {
|
||
return {
|
||
urlDomain: this.$Cache.get("imgHost"),
|
||
page: 1,
|
||
limit: 20,
|
||
keywords: '',
|
||
sort: '',
|
||
isAsc: '',
|
||
sortKey: '',
|
||
grade: 0,
|
||
status: false,
|
||
loadingList: false,
|
||
recordList: [],
|
||
peopleData: {},
|
||
isShow: false,
|
||
theme:app.globalData.theme,
|
||
bgColor:'#e93323'
|
||
};
|
||
},
|
||
computed: mapGetters(['isLogin']),
|
||
onLoad() {
|
||
if (this.isLogin) {
|
||
this.userSpreadNewList();
|
||
this.spreadPeoCount();
|
||
} else {
|
||
toLogin();
|
||
}
|
||
let that = this;
|
||
that.bgColor = setThemeColor();
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#ffffff',
|
||
backgroundColor:that.bgColor,
|
||
});
|
||
},
|
||
onShow: function() {
|
||
if (this.is_show) this.userSpreadNewList();
|
||
},
|
||
onHide: function() {
|
||
this.is_show = true;
|
||
},
|
||
methods: {
|
||
setSort: function(sortKey, isAsc) {
|
||
let that = this;
|
||
that.isAsc = isAsc;
|
||
that.sort = sortKey + isAsc;
|
||
that.sortKey = sortKey;
|
||
that.page = 1;
|
||
that.limit = 20;
|
||
that.status = false;
|
||
that.$set(that, 'recordList', []);
|
||
that.userSpreadNewList();
|
||
},
|
||
submitForm: function() {
|
||
this.page = 1;
|
||
this.limit = 20;
|
||
this.status = false;
|
||
this.$set(this, 'recordList', []);
|
||
this.userSpreadNewList();
|
||
},
|
||
|
||
setType: function(grade) {
|
||
if (this.grade != grade) {
|
||
this.grade = grade;
|
||
this.page = 1;
|
||
this.limit = 20;
|
||
this.keywords = '';
|
||
this.sort = '';
|
||
this.isAsc = '';
|
||
this.status = false;
|
||
this.loadingList = false;
|
||
this.$set(this, 'recordList', []);
|
||
this.userSpreadNewList();
|
||
}
|
||
},
|
||
spreadPeoCount() {
|
||
spreadPeoCount().then(res => {
|
||
this.peopleData = res.data;
|
||
});
|
||
},
|
||
userSpreadNewList: function() {
|
||
let that = this;
|
||
let page = that.page;
|
||
let limit = that.limit;
|
||
let status = that.status;
|
||
let keyword = encodeURIComponent(that.keywords);
|
||
let isAsc = that.isAsc;
|
||
let sortKey = that.sortKey;
|
||
let grade = that.grade;
|
||
let recordList = that.recordList;
|
||
let recordListNew = [];
|
||
if (that.loadingList) return;
|
||
if (status == true) return;
|
||
this.loadingList = true;
|
||
spreadPeople({
|
||
page: page,
|
||
limit: limit,
|
||
keyword: keyword,
|
||
grade: grade,
|
||
sortKey: sortKey,
|
||
isAsc: isAsc
|
||
}).then(res => {
|
||
let recordListData = res.data ? res.data : [];
|
||
let len = recordListData.length;
|
||
recordListNew = recordList.concat(recordListData);
|
||
that.status = limit > len;
|
||
that.page = page + 1;
|
||
that.$set(that, 'recordList', recordListNew || []);
|
||
that.loadingList = false;
|
||
that.isShow = true;
|
||
});
|
||
}
|
||
},
|
||
onReachBottom: function() {
|
||
this.userSpreadNewList();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.sortItem{
|
||
.iconfont{
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-left: 6rpx;
|
||
}
|
||
}
|
||
.promoter-pic{
|
||
width: 116rpx;
|
||
height: 106rpx;
|
||
}
|
||
.b-b-rd{
|
||
border-bottom-left-radius: 24rpx;
|
||
border-bottom-right-radius: 24rpx;
|
||
}
|
||
.promoter-list .nav {
|
||
background-color: #fff;
|
||
height: 86rpx;
|
||
line-height: 86rpx;
|
||
font-size: 28rpx;
|
||
color: #282828;
|
||
border-bottom: 1rpx solid #eee;
|
||
border-top-left-radius: 24rpx;
|
||
border-top-right-radius: 24rpx;
|
||
margin-top: -30rpx;
|
||
}
|
||
.promoterHeader{
|
||
@include main_bg_color(theme);
|
||
}
|
||
.promoter-list .nav .item.on {
|
||
@include main_color(theme);
|
||
@include tab_border_bottom(theme);
|
||
}
|
||
.promoter-list .search {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
height: 100rpx;
|
||
box-sizing: border-box;
|
||
border-bottom-left-radius: 24rpx;
|
||
border-bottom-right-radius: 24rpx;
|
||
}
|
||
|
||
.promoter-list .search .input {
|
||
width: 592rpx;
|
||
height: 60rpx;
|
||
border-radius: 50rpx;
|
||
background-color: #f5f5f5;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.promoter-list .search .input input {
|
||
height: 100%;
|
||
font-size: 26rpx;
|
||
width: 610rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.promoter-list .search .input .placeholder {
|
||
color: #bbb;
|
||
}
|
||
|
||
.promoter-list .search .input .iconfont {
|
||
position: absolute;
|
||
right: 28rpx;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.promoter-list .search .iconfont {
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.promoter-list .list {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.promoter-list .list .sortNav {
|
||
background-color: #fff;
|
||
height: 76rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
color: #333;
|
||
font-size: 28rpx;
|
||
border-top-left-radius: 24rpx;
|
||
border-top-right-radius: 24rpx;
|
||
}
|
||
|
||
.promoter-list .list .sortNav .sortItem {
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.promoter-list .list .sortNav .sortItem image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 6rpx;
|
||
vertical-align: -3rpx;
|
||
}
|
||
|
||
.promoter-list .list .item {
|
||
background-color: #fff;
|
||
border-bottom: 1rpx solid #eee;
|
||
height: 152rpx;
|
||
padding: 0 24rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.promoter-list .list .item .picTxt .pictrue {
|
||
width: 106rpx;
|
||
height: 106rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.promoter-list .list .item .picTxt .pictrue image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
border: 3rpx solid #fff;
|
||
box-shadow: 0 0 10rpx #aaa;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.promoter-list .list .item .picTxt .text {
|
||
// width: 304rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-left: 14rpx;
|
||
}
|
||
|
||
.promoter-list .list .item .picTxt .text .name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 13rpx;
|
||
}
|
||
|
||
.promoter-list .list .item .right {
|
||
text-align: right;
|
||
font-size: 22rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.promoter-list .list .item .right .num {
|
||
margin-right: 7rpx;
|
||
}
|
||
</style>
|