yunshan/pages/user/myTeam.vue

<template>
	<view class="container">
		<view class="list-box flex">
			<view class="list-tpl">
				<view class="num">{{ data.recommend_num || 0 }}</view>
				<view class="name">推荐会员数</view>
			</view>
			<view class="list-tpl" @click="nav('/pages/finance/allMiner')">
				<view class="num">{{ data.group_num || 0 }}</view>
				<view class="name">团队会员数</view>
			</view>
			<!-- <view class="list-title">我的团队</view> -->
		</view>
		<view class="info-box">
			<view class="info-name flex">
				<scroll-view scroll-x="true" style="width: 750rpx;">
					<view class="flex">
						<view class="info-cell">
							<view class="cell">{{ data.recommend_achievement || 0 }}台</view>
							<view class="cell-title">分享业绩</view>
						</view>
						<view class="info-cell">
							<view class="cell">{{ data.group_achievenent || 0 }}台</view>
							<view class="cell-title">团队总业绩</view>
						</view>
						<view class="info-cell">
							<view class="cell">{{ data.today_achievement || 0 }}台</view>
							<view class="cell-title">今日新增业绩</view>
						</view>
						<!-- <view class="info-cell">
							<view class="cell">{{ data.small_group_achievenent || 0 }}T</view>
							<view class="cell-title">小区业绩</view>
						</view> -->
					</view>
				</scroll-view>
			</view>
			<view class="list-cell" v-if="list.length > 0">
				<view class="cell-name flex">
					<view class="title">成员信息</view>
					<view class="title-box flex">
						<view class="title">待运行矿机</view>
						<view class="title">运行矿机</view>
						<view class="title">等级</view>
					</view>
				</view>
			<!-- 	@click="nav('/pages/user/rake?uid=' + ls.uid)" -->
				<view class="cell-box flex" v-for="(ls, index) in list" :key="index" >
					<view class="cell-tit flex_item">
						<image :src="ls.avatar"></image>
						<view class="tit-box">
							<!-- 							<view class="tit-tpl clamp">{{ls.nickname}}</view>
							<view class="tit-tip">{{ls.phone}}</view> -->
							<view class="tit-tpl ">{{ ls.phone }}</view>
							<view class="tit-tip">UID：{{ ls.uid }}</view>
						</view>
					</view>
					<view class="flex num-box">
						<view class="num clamp">{{ ls.wait_mining==null?'0':ls.wait_mining }}台</view>
						<view class="num clamp">{{ ls.mining==null?'0':ls.mining }}台</view>
						<view class="level">V{{ ls.level }}</view>
					</view>
				</view>
				<view class="nav flex" v-show="page == 1 && isLast">
					<view class="next" @click="last" v-if="page != 1">上一页</view>
					<view class="next" v-else>已经是第一页了</view>
					<view class="next" v-if="isLast" @click="next">下一页</view>
					<view class="next" v-else>已经是最后一页了</view>
				</view>
			</view>
			<view class="empty-box" v-show="list.length === 0"><empty></empty></view>
		</view>
	</view>
</template>
<script>
import { spread } from '@/api/finance.js';
import empty from '@/components/empty';
export default {
	components: {
		empty
	},
	data() {
		return {
			page: 1,
			limit: 5,
			data: '',
			list: '',
			isLast: true
		};
	},
	onLoad(option) {
		this.loadData();
		this.loadDataNext();
	},
	onShow() {},
	methods: {
		// 请求载入数据
		async loadData() {
			let obj = this;
			spread({
				page: obj.page,
				limit: obj.limit
			}).then(({ data }) => {
				obj.data = data;
				obj.list = data.list;
				console.log(obj);
			});
		},
		async loadDataNext() {
			let obj = this;
			console.log(obj.page);
			spread({
				page: obj.page + 1,
				limit: obj.limit
			}).then(({ data }) => {
				if (data.list.length === 0) {
					obj.isLast = false;
				} else {
					obj.isLast = true;
				}
			});
		},
		nav(url) {
			uni.navigateTo({
				url: url
			});
		},
		next() {
			this.page = this.page + 1;
			this.loadData();
			this.loadDataNext();
		},
		last() {
			if (this.page != 1) {
				this.page = this.page - 1;
			}
			this.loadData();
			this.loadDataNext();
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
	}
}
.list-box {
	width: 100%;
	padding: 50rpx 41rpx;
	padding-top: 80rpx !important;
	background-image: url(../../static/user/bg.png);
	position: relative;
	.list-title {
		position: absolute;
		top: 80rpx;
		color: #ffffff;
		left: 40%;
		font-size: 36rpx;
	}
	.list-tpl {
		background-color: #ffffff;
		width: 314rpx;
		height: 168rpx;
		text-align: center;
		padding-top: 40rpx;
		border-radius: 15rpx;
		.num {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			padding-bottom: 15rpx;
		}
		.name {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}
	}
}
.info-box {
	// padding: 25rpx 25rpx;
	.info-name {
		padding: 40rpx 0rpx;
		.info-cell {
			width: 33.33%;
			text-align: center;
			flex-shrink: 0;
			.cell {
				font-size: 38rpx;
				font-weight: bold;
				color: #333333;
			}
			.cell-title {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
				padding-top: 20rpx;
			}
		}
	}
	.list-cell {
		padding: 40rpx 25rpx;
		.cell-name {
			padding: 50rpx 50rpx;
			.title-box {
				width: 60%;
			}
		}
		.cell-box {
			margin-bottom: 94rpx;
			.cell-tit {
				width: 40%;
				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
				}
				.tit-box {
					padding-left: 15rpx;
					width: 70%;
					.tit-tpl {
						font-size: 30rpx;
						font-weight: 500;
						color: #333333;
					}
					.tit-tip {
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
						padding-top: 20rpx;
					}
				}
			}
			.num-box {
				width: 60%;
				.num {
					width: 33.33%;
					text-align: center;
				}
				.level {
					background-color: #fed82f;
					border-radius: 25rpx;
					padding: 8rpx 50rpx;
					font-size: 26rpx;
				}
			}
		}
	}
}
.empty-box {
	margin-top: 60rpx;
	width: 100%;
	height: 500rpx;
}
.nav {
	.next {
		margin: 40rpx;
		width: 50%;
		background-color: #5771df;
		color: #ffffff;
		text-align: center;
		padding: 26rpx 0rpx;
		border-radius: 50rpx;
	}
}
</style>