<template>
|
<view class="team-vip">
|
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
<view class="ww100" :style="'height:'+topBarTop()+'px;'"></view>
|
<view class="tc head_top" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
|
<view class="reg180" @click="goback"><text class="icon iconfont icon-jiantou"></text></view>
|
<view class="fb">{{titel}}</view>
|
</view>
|
<!-- #endif -->
|
|
<view class="team-header">
|
<view class="header-bg">
|
<image :src="background" mode="aspectFill"></image>
|
</view>
|
<view class="header-content">
|
<view class="avatar">
|
<image :src="user.avatarUrl" mode="aspectFill"></image>
|
</view>
|
<view class="info">
|
<view class="name">{{ user.nickName }}</view>
|
<view class="level">{{ vip.grade.name }}</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="team-statistics">
|
<view class="stat-item">
|
<view class="num">{{ statistics.invite_count || 0 }}</view>
|
<view class="label">团队人数</view>
|
</view>
|
<view class="stat-item">
|
<view class="num">{{ statistics.unsettled_count || 0 }}</view>
|
<view class="label">未结算订单</view>
|
</view>
|
<view class="stat-item">
|
<view class="num">{{ statistics.settled_money || 0 }}</view>
|
<view class="label">已结算佣金</view>
|
</view>
|
</view>
|
|
<view class="team-list">
|
<view class="list-header">团队成员</view>
|
<view class="list-content">
|
<view class="team-item" v-for="item in team_list" :key="item.user_id">
|
<view class="avatar">
|
<image :src="item.avatarUrl" mode="aspectFill"></image>
|
</view>
|
<view class="info">
|
<view class="name">{{ item.nickName }}</view>
|
<view class="time">加入时间：{{ item.create_time }}</view>
|
</view>
|
<view class="level" v-if="item.vipAreaUser && item.vipAreaUser.grade">
|
{{ item.vipAreaUser.grade.name }}
|
</view>
|
</view>
|
|
<view class="no-data" v-if="team_list.length === 0">
|
暂无团队成员
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
titel: '我的团队',
|
background: '',
|
user: {},
|
vip: {},
|
statistics: {},
|
team_list: []
|
};
|
},
|
onLoad() {
|
this.getData();
|
},
|
methods: {
|
getData() {
|
let self = this;
|
uni.showLoading({ title: '加载中' });
|
|
// 获取团队数据
|
self._get('plus.vip.team/lists', {}, function(res) {
|
self.background = res.data.background || '';
|
self.user = res.data.user || {};
|
self.vip = res.data.vip || {};
|
self.statistics = res.data.statistics || {};
|
self.team_list = res.data.team_list.data || [];
|
uni.hideLoading();
|
});
|
},
|
|
goback() {
|
uni.navigateBack();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.team-vip {
|
min-height: 100vh;
|
background: #f5f5f5;
|
}
|
|
.head_top {
|
position: absolute;
|
width: 100%;
|
padding-top: var(--status-bar-height);
|
height: 30px;
|
line-height: 30px;
|
color: #FFFFFF;
|
font-size: 32rpx;
|
z-index: 2;
|
}
|
|
.reg180 {
|
padding-right: 20rpx;
|
text-align: right;
|
transform: rotateY(180deg);
|
position: absolute;
|
bottom: 0;
|
}
|
|
.icon-jiantou {
|
color: #FFFFFF;
|
font-size: 30rpx;
|
}
|
|
.team-header {
|
position: relative;
|
height: 300rpx;
|
|
.header-bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.header-content {
|
position: relative;
|
display: flex;
|
align-items: center;
|
padding: 0 30rpx;
|
height: 100%;
|
z-index: 1;
|
|
.avatar {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 50%;
|
overflow: hidden;
|
border: 4rpx solid #fff;
|
margin-right: 20rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.info {
|
.name {
|
font-size: 36rpx;
|
color: #fff;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
}
|
|
.level {
|
font-size: 28rpx;
|
color: #fff;
|
background: rgba(255, 255, 255, 0.3);
|
padding: 5rpx 15rpx;
|
border-radius: 20rpx;
|
display: inline-block;
|
}
|
}
|
}
|
}
|
|
.team-statistics {
|
display: flex;
|
background: #fff;
|
margin: -30rpx 20rpx 20rpx;
|
border-radius: 20rpx;
|
padding: 30rpx 0;
|
box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
.stat-item {
|
flex: 1;
|
text-align: center;
|
|
.num {
|
font-size: 36rpx;
|
color: #333;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
}
|
|
.label {
|
font-size: 26rpx;
|
color: #999;
|
}
|
}
|
}
|
|
.team-list {
|
background: #fff;
|
margin: 0 20rpx 20rpx;
|
border-radius: 20rpx;
|
overflow: hidden;
|
|
.list-header {
|
padding: 30rpx;
|
font-size: 32rpx;
|
color: #333;
|
border-bottom: 1rpx solid #f5f5f5;
|
}
|
|
.list-content {
|
.team-item {
|
display: flex;
|
align-items: center;
|
padding: 30rpx;
|
border-bottom: 1rpx solid #f5f5f5;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.avatar {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
overflow: hidden;
|
margin-right: 20rpx;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.info {
|
flex: 1;
|
|
.name {
|
font-size: 30rpx;
|
color: #333;
|
margin-bottom: 10rpx;
|
}
|
|
.time {
|
font-size: 24rpx;
|
color: #999;
|
}
|
}
|
|
.level {
|
font-size: 24rpx;
|
color: #FF5649;
|
background: rgba(255, 86, 73, 0.1);
|
padding: 5rpx 15rpx;
|
border-radius: 20rpx;
|
}
|
}
|
|
.no-data {
|
text-align: center;
|
padding: 100rpx 0;
|
color: #999;
|
font-size: 28rpx;
|
}
|
}
|
}
|
</style>
|
