bawangcan-shop/pages/my/ranking.vue

<template>
	<view class="content">
		<view class="view1"
			style="box-shadow: rgba(183, 183, 183, 0.3) 1px 1px 10px 1px;border-radius: 20upx;display: flex;flex-direction: row;">
			<view style="margin: 60upx 0 0 60upx;height: 100upx; width: 60%;">
				<view style="font-size: 16px;color: #333;font-weight: 600;margin-top: 20upx;">邀请收益</view>
				<view style="font-size: 28px;color: #333;font-weight: 600;">{{ money }}</view>
			</view>
			<view style="margin: 60upx 0 0 75upx;height: 100upx; width: 40%;text-align: center;    margin-right: 5%;">
				<view
					style="font-size: 14px;color: #000000;margin-top: 40upx;height: 70upx;line-height: 70upx;background: #FFEDE5;color: #FF4701;font-weight: 600;border-radius: 60upx;"
					@click="duihuan">立即兑换</view>
			</view>
		</view>

		<view class="view2" style="box-shadow: rgba(183, 183, 183, 0.3) 1px 1px 10px 1px;border-radius: 20upx;">
			<view style="display: flex;flex-direction: row;padding: 20upx;">
				<view style="font-size: 16px;color: #333;font-weight: 600;margin-top: 20upx;">我的邀请</view>
			</view>
			<view style="display: flex;flex-direction: row;padding: 20upx;align-items: center;" v-for="(item, index) in rankingList"
				:key="index">
				<view style="width: 40%;display: flex;flex-direction: row;align-items: center;">
					<image :src="item.imageUrl" style="border-radius: 100upx;width: 50upx; height: 50upx;"></image>
					<view style="font-size: 14px; color: #333333;margin-left: 20upx;">{{ item.nickName }}</view>
				</view>
				<view style="width: 30%;">
					<view style="font-size: 14px; color: #999999; margin-left: 15upx;">成功注册</view>
				</view>
				<view style="width: 30%;text-align: right;">
					<view style="font-size: 16px;color: #FF580B;">赚{{ item.money }}积分</view>
				</view>
			</view>
		</view>
		<!-- 加载更多提示 -->
		<view v-if="rankingList.length > 0 ">
			<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankingList: [],
				imageUrl: 'https://download.cyjyyjy.com/fq-logo.jpg',
				money: 0,
				page: 1,
				limit: 20,
				nickName: '游客',
				rankNum: 0,
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
			};
		},
		onLoad() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getRankingList(userId);
			}
		},
		methods: {
			getRankingList(userId) {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...',
				});
				this.$Request.getT('/invite/selectInviteByUserIdLists?userId=' + userId + '&page=' + this.page +
					'&limit=' + this.limit).then(res => {
					if (res.code === 0) {

						if (this.page === 1) {
							this.rankingList = [];
						}
						this.money = res.data.money ? res.data.money : 0;
						res.data.pageUtils.list.forEach(d => {
							this.rankingList.push(d);
						});
						if (res.data.pageUtils.list.length === this.limit) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
				});
			},
			duihuan() {
				uni.navigateTo({
					url: '/pages/member/chongzhi'
				});
			}
		}
	};
</script>

<style scoped>
	page {
		background: #FFFFFF;
	}

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

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