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.
371 lines
8.8 KiB
371 lines
8.8 KiB
<template>
|
|
<!-- 客户 -->
|
|
<view>
|
|
<loadlogo v-if="!loadlogo" />
|
|
<view class="container" v-if="loadlogo">
|
|
<far-bottom></far-bottom>
|
|
<view class="header">
|
|
<view class="tabBar b-f dis-flex">
|
|
<view class="tabBar-item p-r f-24 col-9 t-c" :class="{'tabBar-active-text':currentTab === item.typeTab}" v-for="(item,index) in tabBar"
|
|
@click="curtabBar(item.typeTab)">{{item.title}}
|
|
<view :class="{'active':currentTab === item.typeTab}"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="search-main m-top-btm40">
|
|
<view class="client-total dis-flex flex-y-center m-btm30">
|
|
<view class="f-24 col-9 m-right20">今日新增客户:{{day_number}}人</view>
|
|
<view class="f-24 col-9">合计:{{total_number}}人</view>
|
|
</view>
|
|
<view class="search-box dis-flex flex-y-center">
|
|
<view class="search-input p-left-right-30 ">
|
|
<input type="text" value="" placeholder="输入客户昵称查询" placeholder-style="color:#999999;" class="f-24" v-model="searchText" />
|
|
</view>
|
|
<view class="search-btn col-f f-24 t-c" @click="search">搜索</view>
|
|
</view>
|
|
</view>
|
|
<view class="invite-client b-f bor-radius-10upx">
|
|
<view class="client-list-box p-r" v-if="currentType!=='0'|| (!!list&&list.length>0)">
|
|
<view class="invite-title dis-flex flex-y-center flex-x-between padding-box-all border-line border-bottom">
|
|
<view class="f-28 col-3">累计邀请</view>
|
|
<view class="f-24 col-9" @click="typeMask = !typeMask">{{currentTypeT}}<text class="iconfont icon-unfold title-icon m-left10"></text></view>
|
|
</view>
|
|
<view class="formType" v-if="typeMask">
|
|
<view class="TypeItem f-24 t-c col-f" @click="selectUp(item)" v-for="(item,index) in paramType" :key="index">{{item.title}}</view>
|
|
</view>
|
|
<block v-if="!!list&&list.length>0">
|
|
<!-- #ifdef H5 -->
|
|
<view class="scroll-viewH5" >
|
|
<!-- #endif -->
|
|
<!-- #ifndef H5 -->
|
|
<view class="scroll-view" >
|
|
<!-- #endif -->
|
|
<view class="client-list">
|
|
<view class="client-item p-top-bom-30 m-left-right-30 dis-flex flex-y-center border-line border-bottom" v-for="(item,index) in list">
|
|
<view class="user-avatar m-right30" :style="{'background-image':'url('+item.avatar+')'}"></view>
|
|
<view class="user-detail">
|
|
<view class="dis-flex flex-y-center flex-x-between">
|
|
<view class="user-nickname f-28 col-3">{{item.nickname}}</view>
|
|
<view class="dealer-class f-24 dealer-class_3">{{item.lv_name}}</view>
|
|
</view>
|
|
<view class="binding-time f-24 col-9 m-top-btm10">推荐绑定时间：{{item.createtime}}</view>
|
|
<view class="client-price dis-flex flex-y-center flex-x-between">
|
|
<view class="f-24 col-9">累计赏金：￥{{!!item.commission?item.commission:'0.00'}}</view>
|
|
<view class="f-24 col-9">已购买{{item.order_number}}单</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<Loading v-if="!loading" />
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="no-shop-image">
|
|
<view class="not-image"></view>
|
|
<view class="t-c f-28 m-top30 col-9">亲! 暂无相关人员哦~</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import App from '@/common/js/app.js'
|
|
import Loadlogo from '@/components/template/loadlogo'
|
|
import Loading from '@/components/template/loading'
|
|
export default {
|
|
data() {
|
|
return {
|
|
TextSubstitution:null,
|
|
currentTab: '0',
|
|
day_number: null, //今日用户数量
|
|
total_number: null, //总的用户数量
|
|
loadlogo: false, //页面是否加载完成,
|
|
loading: false, //列表加载更多
|
|
current_page: 1, //当前页数
|
|
searchText: '', //客户姓名
|
|
list: [], //我的客户列表
|
|
page_total: null, //总共页数
|
|
slide_Top: 0, // 滚动距离
|
|
tabBar: [{
|
|
title: '全部',
|
|
typeTab: '0',
|
|
},
|
|
{
|
|
title: '已下单',
|
|
typeTab: '1',
|
|
}, {
|
|
title: '未下单',
|
|
typeTab: '2',
|
|
},
|
|
],
|
|
paramType: [{
|
|
title: '全部类型',
|
|
paramtype: '0'
|
|
},
|
|
{
|
|
title: '普通下级',
|
|
paramtype: '1'
|
|
},
|
|
{
|
|
title: '下级分销商',
|
|
paramtype: '2'
|
|
}
|
|
],
|
|
currentTypeT: '全部类型',
|
|
currentType: "0",
|
|
typeMask: false
|
|
}
|
|
},
|
|
components: {
|
|
Loading,
|
|
Loadlogo
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
mounted() {
|
|
this.getClientList()
|
|
},
|
|
onLoad(){
|
|
let _this=this
|
|
_this.TextSubstitution=uni.getStorageSync('TextSubstitution');
|
|
_this.paramType[2].title='下级'+_this.TextSubstitution.fxstext
|
|
},
|
|
methods: {
|
|
//获取客户列表
|
|
getClientList(state = 0, page = 1, type = 0, isPage = false) {
|
|
let _this = this,
|
|
requestData = {
|
|
name: _this.searchText,
|
|
page,
|
|
state,
|
|
type
|
|
};
|
|
App._post_form('&p=distribution&do=myTeam', requestData, res => {
|
|
let ShopData = res.data;
|
|
console.log(ShopData)
|
|
if (isPage) {
|
|
if (ShopData.list.length > 0) {
|
|
_this["list"].push(...ShopData.list);
|
|
} else {
|
|
_this.loading = true;
|
|
}
|
|
} else {
|
|
_this.setData(ShopData);
|
|
_this.loading = ShopData.list.length === 0 || _this.current_page === ShopData.page_total;
|
|
}
|
|
}, false, () => {
|
|
uni.hideLoading();
|
|
_this.loadlogo = true;
|
|
})
|
|
},
|
|
//选项
|
|
curtabBar(current) {
|
|
let _this = this;
|
|
uni.showLoading({})
|
|
_this.slide_Top = 0;
|
|
_this.current_page = 1;
|
|
_this.currentTab = current;
|
|
_this.searchText = '';
|
|
_this.getClientList(current);
|
|
},
|
|
/**
|
|
* 滑动高度
|
|
*/
|
|
scrolly(e) {
|
|
this.slide_Top = e.detail.scrollTop;
|
|
},
|
|
//加载更多
|
|
ReachBottom() {
|
|
|
|
},
|
|
// 搜索
|
|
search() {
|
|
uni.showLoading({})
|
|
this.current_page = 1;
|
|
this.currentTab = '0';
|
|
this.getClientList(this.currentTab);
|
|
},
|
|
selectUp(item) {
|
|
uni.showLoading({})
|
|
this.setData({
|
|
current_page: 1,
|
|
currentTypeT: item.title,
|
|
currentType: item.paramtype,
|
|
typeMask: false
|
|
})
|
|
this.getClientList(this.currentTab, 1, this.currentType);
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
let _this = this;
|
|
if (_this.current_page >= _this.page_total) {
|
|
_this.loading = true;
|
|
return false;
|
|
}
|
|
_this.getClientList(_this.currentTab, ++_this.current_page, _this.currentType, true);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
//头部
|
|
.header {
|
|
|
|
// 导航
|
|
.tabBar {
|
|
width: 100%;
|
|
|
|
.tabBar-active-text {
|
|
font-size: 30upx;
|
|
color: #333333;
|
|
}
|
|
|
|
.tabBar-item {
|
|
width: 33.33%;
|
|
height: 96upx;
|
|
line-height: 96upx;
|
|
|
|
.active {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background-color: #FF4444;
|
|
width: 50upx;
|
|
height: 8upx;
|
|
border-radius: 20upx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
//内容
|
|
.content {
|
|
padding: 0 30upx;
|
|
|
|
// 搜索栏内容
|
|
.search-main {
|
|
.search-box {
|
|
.search-input {
|
|
margin-right: 40upx;
|
|
background-color: #EEEEEE;
|
|
height: 60upx;
|
|
border-radius: 30upx;
|
|
flex: 1;
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
width: 90upx;
|
|
line-height: 60upx;
|
|
height: 60upx;
|
|
background: #FF4444;
|
|
border-radius: 30upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 邀请列表
|
|
.invite-client {
|
|
.scroll-viewH5 {
|
|
height: 70vh;
|
|
}
|
|
.scroll-view {
|
|
height: 65vh;
|
|
}
|
|
.client-list-box {
|
|
|
|
//累计内容标题
|
|
.invite-title {
|
|
.title-icon {
|
|
font-size: 24upx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
//累计用户列表
|
|
.client-list {
|
|
.client-item {
|
|
.user-avatar {
|
|
width: 90upx;
|
|
height: 90upx;
|
|
border-radius: 50%;
|
|
background-size: 90upx 90upx;
|
|
background-repeat: no-repeat;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.user-detail {
|
|
flex: 1;
|
|
|
|
.dealer-class {
|
|
width: 150upx;
|
|
height: 40upx;
|
|
line-height: 40upx;
|
|
text-align: center;
|
|
border-radius: 18upx;
|
|
}
|
|
|
|
.dealer-class_1 {
|
|
color: #999999;
|
|
background-color: #EEEEEE;
|
|
}
|
|
|
|
.dealer-class_2 {
|
|
color: #FF4444;
|
|
background-color: #FFD3D3;
|
|
}
|
|
|
|
.dealer-class_3 {
|
|
color: #FF730D;
|
|
background-color: #FFDFC5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//提示图
|
|
|
|
.no-shop-image {
|
|
.not-image {
|
|
margin: 20% auto 0;
|
|
width: 400upx;
|
|
height: 200upx;
|
|
background-image: url('https://s10.mogucdn.com/p2/161213/upload_27e7gegi3f9acl5e05f3951if5855_514x260.png');
|
|
background-size: 400upx 200upx;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
.formType {
|
|
position: absolute;
|
|
right: 4%;
|
|
top: 9%;
|
|
background-color: #c9c9c9;
|
|
z-index: 10;
|
|
|
|
.TypeItem {
|
|
padding: 16upx 10upx;
|
|
}
|
|
}
|
|
</style>
|
|
|