bawangcan-user/pages/member/yaoqing.vue

<template>
	<view class="content">
		<view class="view1"
			style="box-shadow: rgba(183, 183, 183, 0.3) 1px 1px 10px 1px;border-radius: 20upx;margin-bottom: 20upx;">
			<view style="display: flex;">
				<view style="margin: 70upx 0 0 20upx;height: 100upx; width: 300upx; text-align: center;">
					<view style="font-size: 28upx;color: #666666;margin-left: 20upx;">邀请好友（人）</view>
					<view style="font-size: 58upx;color: #333333;">{{ total }}</view>
				</view>
				<view style="margin: 70upx 0 0 75upx;height: 100upx; width: 300upx;text-align: center;">
					<view style="font-size: 28upx;color: #666666;">总收益（积分）</view>
					<view style="font-size: 58upx;color: #333333;">{{ totalMoney }}</view>
				</view>
			</view>

			<button class="yaoqing_btn" @tap="goYao">邀请好友</button>
		</view>


		<view class="navbar" v-if="setting==2">
			<view v-for="(item, index) in tabListz" :key="index" class="nav-item"
				:class="{current: tabFromIndex === item.totalElementts}" @click="changeList(item.totalElementts)">
				{{item.text}}
			</view>
		</view>
		<view class="view2"
			style="box-shadow: rgba(183, 183, 183, 0.3) 1px 1px 10px 1px;border-radius: 20upx;margin-bottom: 50upx;">
			<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 list" :key="index">
				<view style="width: 20%;">
					<view style="font-size: 28upx; color: #000000; margin-left: 15upx;margin-top: 6upx;">{{ index + 1 }}
					</view>
				</view>
				<view style="width: 50%;display: flex;flex-direction: row;align-items: center;">
					<view style="font-size: 28upx; color: #333333; width: 65%;">{{ item.nickName }}</view>
				</view>
				<view style="width: 30%;text-align: center;">
					<view style="font-size: 32upx;color: #ffc705;" v-if="item.money != 0">
						{{ item.money ? item.money : '0' }}
					</view>
					<view style="font-size: 32upx;color: #ffc705;" v-else>{{ item.money ? item.money : '0' }}
					</view>
				</view>
			</view>
		</view>
		<view style="height:80upx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setting: 2,
				list: [],
				page: 1,
				limit: 0,
				pagesize: 20,
				tabFromIndex: 1,
				show: false,
				currentTab: 0,
				totalMoney: 0,
				total: 0,
				tabsnva: [{
					loadingType: ''
				}],
				tabListz: [{
					state: 'zs',
					text: '一级',
					totalElementts: 1
				}, {
					state: 'fzs',
					text: '二级',
					totalElementts: 2
				}],
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...'
			});
			this.getMoney(1);
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.list = [];
			this.getMoney(this.tabFromIndex)
		},
		onReachBottom() {
			this.page = this.page + 1;
			this.getMoney(this.tabFromIndex)
		},
		methods: {
			goYao() {
				uni.navigateTo({
					url: '/pages/my/shareFriends'
				});
			},
			changeList(zhishu) {
				this.page = 1;
				this.list = [];
				this.getMoney(zhishu)
			},
			changeTab(e) {
				this.currentTab = e.target.current;
				if (this.currentTab == 0) {
					this.getMoney(1)
				} else if (this.currentTab == 1) {
					this.getMoney(2)
				}
			},
			getMoney(zhishu) {
				uni.showLoading({
					title: '加载中...'
				});
				this.tabFromIndex = zhishu;
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/statistical/selectTeamList?page=' + this.page + '&limit=' + this.pagesize + '&type=' +
					zhishu + '&userId=' + userId).then(
					res => {
						if (res.code === 0 && res.data) {
							this.total = res.data.userCount;
							this.totalMoney = res.data.money;

							res.data.data.list.forEach(d => {
								d.money = d.money ? d.money : 0;
								this.list.push(d);
							});
							if (res.data.totalCount === this.pagesize) {
								this.tabsnva.loadingType = 'noMore';
							} else {
								this.tabsnva.loadingType = 'more';

							}
						}
						setTimeout(function() {
							uni.hideLoading();
							this.show = true;
						}, 1000);
						uni.hideLoading();
					});
			}
		}
	};
</script>

<style lang="scss">
	@import '../../static/css/index.css';

	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.content2 {
		height: 100%;
	}

	.uni-swiper-item {
		height: auto;
	}

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

	.view2 {
		background-color: #ffffff;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: relative;
		top: -100upx;
		z-index: 10;
	}

	.navbar {
		display: flex;
		border-radius: 20upx;
		padding: 0 5px;
		position: relative;
		z-index: 10;
		color: #FFFFFF;
		height: 174upx;
		background: #ffc705;
		position: relative;
		top: -30upx;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			height: 100%;
			font-size: 15px;
			color: #ffffff;
			position: relative;
			margin-top: 30upx;

			&.current {
				color: #ffffff;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 120upx;
					transform: translateX(-50%);
					width: 30upx;
					height: 0;
					border-bottom: 6upx solid #ffffff;
				}
			}
		}
	}

	.yaoqing_btn {
		width: 90%;
		line-height: 80upx;
		// margin-top: 30upx;
		height: 85upx;
		color: #FFFFFF;
		background: #ffc705;
		// background-image: url(../../static/img/zysc/yaoqingbtn.png);
		// background-size: 100%;
		position: fixed;
		bottom: 40upx;
		left: 0;
		right: 0;
		z-index: 9999;
		margin: auto;
		border-radius: 42upx;

	}
</style>