MeiMeiZhuan/pages/user/team.vue

<template>
	<view class="container">
		<view class="img">
			<image src="https://mmz.liuniu946.com/statics/img/img02.png"></image>
		</view>
		<view class="team-box">
			<view class="team-header">
				<view class="return" @click="navTo('/pages/user/spread')"><image src="../../static/img/img03.png"></image></view>
				<view class="team-title">我的团队</view>
			</view>
			<view class="Personal-information">
				<view class="avatar">
					<image :src="userInfo.avatar || '/static/error/missing-face.png'"></image>
				</view>
				<view class="name">{{userInfo.nickname}}</view>
			</view>
		</view>
		<view class="team-info">
			<view class="team-info-item" >
				<view class="count">3</view>
				<view class="info">团队人数</view>
			</view>
			<view class="team-info-item">
				<view class="count">￥0.00</view>
				<view class="info">团队奖励（元）</view>
			</view>
		</view>
		<view class="number-box">
			<view class="number-box-item">
				<view class="avatar">
					<image src="../../static/img/1.jpg"></image>
				</view>
				<view class="number-info">
					<view class="number-header">
						<view  class="number-name">御风</view>
						<view  class="number-title">粉丝</view>
					</view>
					<view class="number-time">2020-07-02 12:00:00</view>
				</view>
			</view>
			<view class="number-box-item">
				<view class="avatar">
					<image src="../../static/img/1.jpg"></image>
				</view>
				<view class="number-info">
					<view class="number-header">
						<view  class="number-name">御风</view>
						<view  class="number-title">粉丝</view>
					</view>
					<view class="number-time">2020-07-02 12:00:00</view>
				</view>
			</view>
			<view class="number-box-item">
				<view class="avatar">
					<image src="../../static/img/1.jpg"></image>
				</view>
				<view class="number-info">
					<view class="number-header">
						<view  class="number-name">御风</view>
						<view  class="number-title">粉丝</view>
					</view>
					<view class="number-time">2020-07-02 12:00:00</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default{
	computed: {
		...mapState([ 'userInfo'])
	},
	onLoad() {
		this.loadData();
	},
	methods:{
		loadData() {
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state + 1;
			myGroup({
				layer: state,
				// page: navItem.page,
				// limit: navItem.limit
			}).then(({ data }) => {
				this.list = data.list;
				if( state == 1) {
					this.yiNum = data.sum;
				}
				if( state == 2) {
					this.erNum = data.sum;
				}
				this.numbers = parseFloat(this.yiNum) + parseFloat(this.erNum);
			})
		},
		// 跳转
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
		
	}
}
</script>

<style lang="scss">
page, .conteiner{
		background: #F0F0F0;
		height: 100%;	
}
	.container{
		position: relative;
		// background-color: pink;
		.img{
			width: 100%;
			image{
				width: 100%;
				height: 500rpx;
			}
		}
		.team-box{
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			height: 500rpx;
			padding: 0 24rpx;
			.team-header{
				margin-top: 30rpx;
				display: flex;
				.return{
					width: 21rpx;
					height: 36rpx;
					image{
						width: 21rpx;
						height: 36rpx;
					}
				}
				.team-title{
				width: 100%;
				text-align: center;
				color: #fff;
				font-size:32rpx;
				}
			}
			.Personal-information{
				display: flex;
				flex-direction: column;
				justify-content: center;
				.avatar{
					width: 140rpx;
					height: 140rpx;
					margin: 0  auto;
					margin-top: 80rpx;
					border-radius: 70rpx;
					image{
						width: 140rpx;
						height: 140rpx;
						border-radius: 70rpx;
					}
				}
				.name{
					margin-top:30rpx;
					font-size: 30rpx;
					color: #FFF;
					text-align: center;
				}
			}
		}
		.team-info{
			height: 164rpx;
			width: 94%;
			background-color: #fff;
			margin-left: 24rpx;
			margin-right:24rpx;
			position: absolute;
			left:0;
			top:420rpx;
			display: flex;
			text-align: center;
			justify-content: space-around;
			border-radius: 16rpx;
			.count{
				font-size: 42rpx;
				color: #222222;
				margin-top: 36rpx;
			}
			.info{
				font-size: 24rpx;
				color: #666666;
				margin-top: 10rpx;
			}
		}
		.number-box{
			width: 94%;
			height: 377rpx;
			background-color: #FFF;
			margin-top:96rpx;
			margin-left: 24rpx;
			border-radius: 10rpx;
			.number-box-item{
				border-bottom: 1px solid #F0F0F0;
				width: 100%;
				height: 130rpx;
				display: flex;
				.avatar{
					height: 130rpx;
					width: 130rpx;
					image{
						margin: 30rpx 24rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}
				.number-info{
					.number-header{
						display: flex;
						.number-name{
							color: #3F454B;
							font-size: 30rpx;
							margin-top: 40rpx;
						}
						.number-title{
							width: 68rpx;
							height: 32rpx;
							border: 1px solid #FC4141;
							border-radius: 16rpx;
							text-align: center;
							line-height: 32rpx;
							font-size: 20rpx;
							color: #FC4141;
							margin-top: 42rpx;
							margin-left: 10rpx;
						}
						
					}
					.number-time{
						font-size: 22rpx;
						color: #999999;
					}
				}
			}
		
		}
	}
</style>