anmo-master/my/team/team.vue

<template>
	<view class="content">
		<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">
					<view class="view1_itemmoney"><text>￥</text>{{ teamMoney }}</view>
					<view class="view1_itemname">我的收益</view>
				</view>
			</view>
		</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="https://h5.taidudaojia.cc/file/uploadPath/2023/01/16/f5305e9ce03a6d0269f58ce55e6c3d0d.png"
						style="width: 50upx; height: 50upx;"></image>
					<image v-if="index == 1"
						src="https://h5.taidudaojia.cc/file/uploadPath/2023/01/16/20b80ec8d3f4db15754426697d0054b8.png"
						style="width: 50upx; height: 50upx;"></image>
					<image v-if="index == 2"
						src="https://h5.taidudaojia.cc/file/uploadPath/2023/01/16/6f61f5e7ec61a1d815bee3c9f0af3c58.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>
			<empty v-if="rankingList.length==0"></empty>
			<!-- 加载更多提示 -->
			<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>
	import empty from '@/components/empty.vue'
	export default {
		components:{
			empty
		},
		data() {
			return {
				tabFromIndex: 2,
				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: {
			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: 270upx;
		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>