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>
|