254 lines
5.7 KiB
Vue
254 lines
5.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- <view class="total">
|
||
<uni-icons type="staff" size="50" color="white"></uni-icons>
|
||
<view class="total-user">
|
||
<view class="total-number">{{count.one}}人</view>
|
||
<view class="total-title">总人数</view>
|
||
</view>
|
||
</view> -->
|
||
<u-sticky>
|
||
<u-tabs
|
||
:list="tabs"
|
||
:scrollable="false"
|
||
:current="tabVal"
|
||
style="margin-bottom: 30rpx;"
|
||
keyName="title"
|
||
lineColor="#446EFE"
|
||
@click="onClick"
|
||
></u-tabs>
|
||
</u-sticky>
|
||
<block v-if="users.length > 0">
|
||
<view class="team-item" v-for="(item, index) in users" :key="index" @click="onCallPhone(item.real_username)">
|
||
<u-avatar :src="item.avatar" size="48"></u-avatar>
|
||
<view class="team-content">
|
||
<view class="nowrap name">{{item.nickname}}</view>
|
||
<view class="nowrap identitys">
|
||
<text class="identity certification-y" v-if="item.certification"><image src="@/static/icons/user_nav_03.png"></image>已实名</text>
|
||
<text class="identity identity-2" v-if="item.identity.order == 2">实习顾问</text>
|
||
<text class="identity identity-1" v-if="item.identity.order == 1">普通用户</text>
|
||
<text class="identity identity-3" v-if="item.identity.order == 3">顾问</text>
|
||
</view>
|
||
<view class="nowrap submit">团队业绩：{{ item.show_perf ? item.perf: '身份不符暂无业绩' }}</view>
|
||
<view class="nowrap submit">联系电话：{{item.username}}</view>
|
||
<view class="nowrap submit">注册时间：{{item.created_at}}</view>
|
||
</view>
|
||
<view class="mobile">
|
||
<uni-icons class="mobile-icon" type="phone-filled" size="18" color="white"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<!-- 分页 -->
|
||
<u-loadmore v-if="pagesShow" :status="status" />
|
||
</block>
|
||
<block v-else>
|
||
<view class="list-null">
|
||
<u-empty
|
||
mode="data"
|
||
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
||
text="暂无客户数据"
|
||
>
|
||
</u-empty>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { relations, relationsTab } from '@/apis/interfaces/user.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabs : [],
|
||
tabVal : 0,
|
||
users : [],
|
||
count : {
|
||
all: 0
|
||
},
|
||
// 分页
|
||
page : {
|
||
current : 1,
|
||
has_more: false,
|
||
},
|
||
pagesShow : false,
|
||
status : false,
|
||
};
|
||
},
|
||
created() {
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask : true
|
||
})
|
||
relationsTab().then(res => {
|
||
uni.hideLoading()
|
||
this.tabs = res
|
||
this.getList()
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
methods: {
|
||
// 切换tabs
|
||
onClick(e){
|
||
this.tabVal = e.index
|
||
this.page = { current : 1, has_more: false },
|
||
this.getList()
|
||
},
|
||
// 获取列表
|
||
getList(){
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask : true
|
||
})
|
||
relations({
|
||
larer : 1,
|
||
page : this.page.current,
|
||
key : this.tabs[this.tabVal].key
|
||
}).then(res => {
|
||
let { users, count } = res;
|
||
let atList = users.page.current == 1 ? [] : this.users
|
||
this.count = count
|
||
this.users = atList.concat(users.data)
|
||
this.page = users.page
|
||
this.pagesShow = false
|
||
uni.hideLoading()
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
onCallPhone(phone){
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
this.pagesShow = true;
|
||
if(this.page.has_more){
|
||
this.status = 'loading';
|
||
this.page.current++
|
||
this.getList()
|
||
return
|
||
}
|
||
this.status = 'nomore';
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content{
|
||
box-sizing: border-box;
|
||
background: white;
|
||
padding-top: 1rpx;
|
||
}
|
||
// 统计数据
|
||
.total{
|
||
margin: 30rpx 30rpx 0;
|
||
background: linear-gradient(to top left, #446EFE, #0f36bb);
|
||
box-shadow: 10rpx 0 15rpx 15rpx rgba(0, 0, 0, .03);
|
||
border-radius: 20rpx;
|
||
padding: 50rpx;
|
||
color: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.total-title{
|
||
font-size: 28rpx;
|
||
opacity: .8;
|
||
padding-top: 10rpx;
|
||
}
|
||
.total-number{
|
||
text-align: right;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
// 团队列表
|
||
.team-item{
|
||
background: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 30rpx;
|
||
border-radius: 20rpx;
|
||
margin: 0 30rpx 30rpx 30rpx;
|
||
box-shadow: 10rpx 0 15rpx 15rpx rgba(0, 0, 0, .03);
|
||
position: relative;
|
||
overflow: hidden;
|
||
&::after{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 15rpx;
|
||
background: linear-gradient(to top left, #446EFE, #0f36bb);
|
||
position: absolute;
|
||
left: -15rpx;
|
||
top: 30rpx;
|
||
content: " ";
|
||
}
|
||
.team-content{
|
||
width: calc( 100% - 48px - 100rpx );
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
.name{
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
}
|
||
.submit{
|
||
line-height: 40rpx;
|
||
font-size: 26rpx;
|
||
color: gray;
|
||
}
|
||
.identitys{
|
||
margin-bottom: 10rpx;
|
||
.identity{
|
||
font-size: 24rpx;
|
||
border-radius: 15rpx;
|
||
line-height: 30rpx;
|
||
padding: 0 10rpx;
|
||
color: white;
|
||
margin-right: 20rpx;
|
||
&.identity-2{
|
||
background: #443DE2;
|
||
}
|
||
&.identity-1{
|
||
background: #e1e1e1;
|
||
}
|
||
&.identity-3{
|
||
background: #FEAD45;
|
||
}
|
||
&.certification-y{
|
||
background: #FFF7EC;
|
||
border-color: #FEAD45;
|
||
color: #FEAD45;
|
||
image{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
vertical-align: middle;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.mobile{
|
||
width: 100rpx;
|
||
border-radius: 35rpx;
|
||
margin-top: 9px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
color: white;
|
||
background: #446EFE;
|
||
text-align: center;
|
||
.mobile-icon{
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
// 空页面
|
||
.list-null{ height: 60vh; display: flex; align-items: center; justify-content: center; }
|
||
</style>
|