anmo-user/pages/my/myteam.vue

<template>
	<view class="content">
		<view class="flex text-center  text-lg bg">
			<view class="title_btn flex-sub bg" @click="cut(1)" :class="tabFromIndex==1?'bgCol2': ''">团队用户
			</view>
			<view class="title_btn flex-sub bg" @click="cut(2)" :class="tabFromIndex==2?'bgCol2': ''">团队技师
			</view>
		</view>
		<view class="view1">
			<view class="flex">
				<view class="view1_item">
					<view class="view1_itemmoney">{{ teamCount }} <text>人</text> </view>
					<view class="view1_itemname">已邀请</view>
				</view>
				<view class="view1_item" @tap="goDetail">
					<view class="view1_itemmoney"><text>￥</text>{{ teamMoney }}</view>
					<view class="view1_itemname">我的收益</view>
				</view>
			</view>
			<image src="../../static/teamYao.png" @tap="goYao"></image>
		</view>
		<view class="view2" style="border-radius: 20upx;">
			<view style="display: flex;flex-direction: row;padding: 20upx;">
				<view style="width: 20%;">排名</view>
				<view style="width: 50%;">用户</view>
				<view style="width: 30%;text-align: center;">收益</view>
			</view>
			<view style="display: flex;flex-direction: row;padding: 20upx;" v-for="(item, index) in rankingList"
				:key="index">
				<view style="width: 20%;">
					<image v-if="index == 0"
						src="/static/image/paihang_1.png"
						style="width: 50upx; height: 50upx;"></image>
					<image v-if="index == 1"
						src="/static/image/paihang_2.png"
						style="width: 50upx; height: 50upx;"></image>
					<image v-if="index == 2"
						src="/static/image/paihang_3.png"
						style="width: 50upx; height: 50upx;"></image>
					<view v-if="item.rankNum > 2" style="font-size: 19px; color: #999999; margin-left: 15upx;">
						{{ index + 1 }}
					</view>
				</view>
				<view style="width: 50%;display: flex;flex-direction: row;align-items: center;">
					<image :src="item.avatar ? item.avatar : '/static/logo.png'"
						style="border-radius: 100upx;width: 50upx; height: 50upx;"></image>
					<view style="font-size: 14px; color: #333333;margin-left: 20upx; width: 65%;">{{ item.userName }}
					</view>
				</view>
				<view style="width: 30%;text-align: center;">
					<view style="font-size: 16px;color: #2FB57A;">¥{{ item.money }}</view>
				</view>
			</view>
			<!-- 加载更多提示 -->
			<view class="s-col is-col-24" v-if="rankingList.length > 0">
				<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabFromIndex: 1,
				teamCount: 0,
				teamMoney: 0,
				rankingList: [],
				imageUrl: '/static/logo2.jpg',
				money: 0,
				nickName: '游客',
				rankNum: 0,
				page: 1,
				size: 20,
				loadingType: 0,
				scrollTop: false,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onLoad() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getRankingList(userId);
				this.getUserInfo();
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		methods: {
			goDetail(){
				if(this.tabFromIndex == 1){
					uni.navigateTo({
						url: '/my/wallet/usermoneydetail?classIndex=5'
					});
				}else{
					uni.navigateTo({
						url: '/my/wallet/usermoneydetail?classIndex=6'
					});
				}
			},
			cut(index) {
				this.tabFromIndex = index;
				this.page = 1;
				let userId = this.$queue.getData('userId');
				this.getRankingList(userId);
				this.getUserInfo();
			},
			goYao() {
				uni.navigateTo({
					url: '/pages/my/invitationUser'
				});
			},
			getUserInfo() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/artificer/selectTeamStatistics?userId=' + userId + '&type=' + this.tabFromIndex)
					.then(res => {
						if (res.code == 0) {
							this.teamCount = res.data.teamCount ? res.data.teamCount : 0;
							this.teamMoney = res.data.teamMoney ? res.data.teamMoney : 0;
						}
					});
			},
			getRankingList() {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/artificer/selectTeamUserList?type=' + this.tabFromIndex + '&page=' + this.page +
					'&limit=' + this
					.size +
					'&userId=' + userId).then(res => {
					if (res.code === 0) {
						if (this.page === 1) {
							this.rankingList = [];
						}
						res.data.list.forEach(d => {
							this.rankingList.push(d);
						});
						if (res.data.list.length === this.size) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
				});
			}
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getRankingList();
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getRankingList();
		}
	};
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.bg {
		background: #FFFFFF;
	}

	.view1 {
		background-color: #ffffff;
		width: 93%;
		height: 360upx;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 20upx;
		border-radius: 20upx;

		image {
			width: 586rpx;
			height: 88rpx;
			margin: 80rpx 50rpx 0rpx;
		}

		.view1_item {
			margin: 60upx 0 0 0;
			height: 100upx;
			flex: 1;
			text-align: center;

			.view1_itemmoney {
				font-size: 56rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333333;

				text {
					font-size: 28rpx;
				}
			}

			.view1_itemname {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				margin-top: 30rpx;
			}
		}
	}

	.title_btn {
		height: 78upx;
		line-height: 78upx;
		color: #333333;
		/* background: #f7f7f7; */
	}

	.bgCol2 {
		color: #2FB57A;
		background: #EAFFF5;
	}

	.view2 {
		background-color: #ffffff;
		width: 93%;
		height: 100%;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		margin-top: 20rpx;
	}
</style>