dtx_store/pages/team/index.vue

<template>
	<view class="team">
		<!-- 统计信息 -->
		<view class="team-hader">
			<view class="team-hader-item">
				<image class="team-hader-cover" src="@/static/vip/lv_03.png" mode="widthFix"></image>
				<view class="team-hader-title">共力家族</view>
				<view class="team-hader-number"><text>{{count.one}}</text>人</view>
			</view>
			<view class="team-hader-item">
				<image class="team-hader-cover" src="@/static/vip/lv_04.png" mode="widthFix"></image>
				<view class="team-hader-title">共力伙伴</view>
				<view class="team-hader-number"><text>{{count.two}}</text>人</view>
			</view>
			<view class="team-hader-item">
				<image class="team-hader-cover" src="@/static/vip/lv_06.png" mode="widthFix"></image>
				<view class="team-hader-title">供应商</view>
				<view class="team-hader-number"><text>{{count.supplier}}</text>人</view>
			</view>
		</view>
		<!-- 邀请好友 -->
		<view class="team-invite" @click="onInvitation">
			<image src="@/static/img/team_00.png" mode="widthFix"></image>
		</view>
		<!-- 团队 -->
		<view class="team-tabs">
			<u-tabs
				:list="teamTabs"
				:scrollable="false"
				lineColor="#34CE98"
				@click="onTeamTab"
			></u-tabs>
			<view class="team-lists">
				<view class="team-list-header">
					<view class="team-list-header-item">用户</view>
					<view class="team-list-header-item">手机号码</view>
					<view class="team-list-header-item">{{tabsType === 'supplier' ? '业绩': '注册时间'}}</view>
				</view>
				<block v-if="users.length > 0">
					<view class="team-list-flex" v-for="(item, index) in users" :key="index">
						<view class="team-list-flex-item user">
							<image class="user-cover" :src="item.avatar || ''" mode="aspectFill"></image>
							<view class="user-nickname nowrap">{{item.nickname}}</view>
						</view>
						<view class="team-list-flex-item number nowrap">{{item.username}}</view>
						<view class="team-list-flex-item number nowrap">{{item.created_at}}</view>
					</view>

				</block>
				<block v-else>
					<view class="vertical pages-empty">
						<u-empty
							icon="http://cdn.uviewui.com/uview/empty/list.png"
							textColor="#999"
							text="暂无成员"
						>
						</u-empty>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import { relations } from '@/apis/interfaces/team.js'
	export default {
		data() {
			return {
				teamTabs: [
					{ name: '共力家族', type: 'one'},
					{ name: '共力伙伴', type: 'two'},
					{ name: '供应商', type: 'supplier'},
				],
				tabsType: 'one',
				count: {
					all: 0,
					one: 0,
					two: 0,
					supplier: 0
				},
				users: [],
				page : {}
			};
		},
		created() {
			this.getRelations()
		},
		methods: {
			// 共力团队
			onTeamTab(e){
				if(this.tabsType === e.type) return
				this.tabsType = e.type
				this.getRelations()
			},
			// 团队信息
			getRelations(){
				uni.showLoading({
					title: '加载中...'
				})
				relations({
					larer: this.tabsType
				}).then(res => {
					this.count = res.count
					this.users = res.users.data
					this.pages = res.users.page
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message
					})
				})
			},
			onInvitation(){
				this.$Router.push({name: 'Invitation'})
			}
		}
	}
</script>

<style lang="scss">
	.team{
		background: $window-color;
		min-height: 100vh;
		padding-bottom: $padding*2;
		box-sizing: border-box;
	}
	// 用户数据
	.pages-empty{
		height: 45vh;
	}
	// 团队统计
	.team-hader{
		position: relative;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		&-item{
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: calc(33.33% - 20rpx);
			background-color: white;
			margin: 0 10rpx;
			border-radius: $radius*2 $radius $radius*2 $radius;
			height: 150rpx;
			padding: 20rpx;
			box-sizing: border-box;
			color: white;
			overflow: hidden;
			&:nth-child(1){
				background-image: linear-gradient(to bottom right, #f6d5c2, #edc0a1);
			}
			&:nth-child(2){
				background-image: linear-gradient(to bottom right, #d5ddee, #b5c1d9);
			}
			&:nth-child(3){
				background-image: linear-gradient(to bottom right, #f5cb8e, #efba6d);
			}
		}
		&-title{
			position: relative;
			z-index: 1;
			font-size: 26rpx;
			@extend .nowrap;
		}
		&-number{
			position: relative;
			z-index: 1;
			@extend .nowrap;
			text{
				font-size: 40rpx;
				font-weight: bold;
				padding-right: 6rpx;
			}
			font-size: 26rpx;
		}
		&-cover{
			position: absolute;
			width: 240rpx;
			height: 240rpx;
			right: -100rpx;
			top: -30rpx;
			opacity: .7;
		}
	}
	// 邀请团队
	.team-invite{
		padding: 0 $padding;
		image{
			width: 100%;
		}
	}
	// 团队列表
	.team-tabs{
		margin: 0 $margin $margin $margin; 
		padding-bottom: $padding;
		.team-lists{
			margin-top: $margin/2;
			border-radius: $radius;
			background: white;
			padding: 20rpx $padding;
			.team-list-header{
				display: flex;
				justify-content: space-between;
				text-align: center;
				border-bottom: solid 1px $border-color;
				line-height: 70rpx;
				padding-bottom: 15rpx;
				text-align: center;
				font-size: 28rpx;
				color: $text-gray;
				margin-bottom: 10rpx;
				.team-list-header-item{
					width: 33.33%;
				}
			}
			.team-list-flex{
				display: flex;
				font-size: 28rpx;
				padding: 10rpx 0;
				&-item{
					width: 33.33%;
					height: 60rpx;
					line-height: 60rpx;
					color: #333; 
					&.user{
						padding-left: 70rpx;
						box-sizing: border-box;
						position: relative;
						.user-cover{
							position: absolute;
							left: 0;
							top: 5rpx;
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							background: $window-color;
						}
						.user-nickname{
							@extend .nowrap;
						}
					}
					&.number{
						text-align: center;
					}
				}
			}
		}
	}
</style>