fanyunAi/pages/user/commission/rankings.vue

<!-- 分销排行 -->
<template>
	<view>
		<view style="color: #000000;">
			<tn-nav-bar backgroundColor="#ffffff" :bottomShadow="false">分销排行榜</tn-nav-bar>
			<!-- <view :style="{height: tobheight+'px'}"></view> -->
		</view>
		<z-paging ref="paging" refresher-complete-delay="200" v-model="rankingsList" @query="queryList"
			:loading-more-enabled="false">
			<view slot="top" class="z_tabs" :style="{ marginTop: tobheight + 'px' }"></view>
			<view style="background: #F6F7FB;">
				<view class="rankings-wrap" style="padding-left: 30rpx;padding-right: 30rpx;">
					<!-- 标题栏 -->
					<!-- <shopro-navbar back-icon-color="#fff" :background="{}" :backTextStyle="{ color: '#fff', fontSize: '40rpx', fontWeight: '500' }" backText="分销排行榜"></shopro-navbar> -->

					<!-- 排行榜 -->

					<view class="rankings-list-box">
						<!-- <scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box"> -->
						<view class="ranking-list u-flex u-row-between" v-for="(item, index) in rankingsList"
							:key="index">
							<view class="list-left u-flex">
								<view class="tag-box u-flex u-row-center u-col-center">
									<text class="tag-text" v-if="index >= 3">{{ index + 1 }}</text>
									<image v-else class="tag-icon" :src="rankingsIcon[index]" mode=""></image>
								</view>
								<image class="user-avatar" :src="item.avatar?item.avatar:'/static/images/head.jpg'"
									mode=""></image>
								<view class="user-info">
									<view class="name u-m-b-10">{{ item.nickname?item.nickname : '默认用户' }}</view>
									<view class="date">{{ item.create_time }}</view>
								</view>
							</view>
							<view class="list-right y-end">
								<view class="num u-m-b-10">{{ item.income_sum?item.income_sum:'0.00' }}</view>
								<view class="des">累计收益</view>
							</view>
						</view>
						<!-- 更多 -->
						<!-- <u-loadmore v-if="rankingsList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
						
					<!-- </scroll-view> -->
					</view>
				</view>
			</view>


		</z-paging>

		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {

		data() {
			return {
				isLoading: true,
				tobheight: 45,
				platform: this.$platform.get(),
				rankingsIcon: {
					0: 'https://file.shopro.top/imgs/commission/01.png',
					1: 'https://file.shopro.top/imgs/commission/02.png',
					2: 'https://file.shopro.top/imgs/commission/03.png'
				},
				rankingsList: [], //排行榜
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1
			};
		},
		computed: {
			...mapGetters(['appInfo', 'isLogin', 'userInfo'])
		},
		onLoad() {
			const that = this;
			if (this.platform == 'wxMiniProgram') {
				var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight
				var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop
				this.tobheight = (menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height)
			}
			// this.getRankings();
		},
		methods: {
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				const params = {
					page: pageNo,
					limit: pageSize
				};
				this.$http('commission.ranking', params).then(res => {
					if (res.code == 0) {
						this.$refs.paging.complete(res.data.data);
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});
						this.isLoading = false;
					}
				});

			},
			// getRankings() {
			// 	let that = this;
			// 	that.loadStatus = 'loading';
			// 	that.$http('commission.ranking', {

			// 	}).then(res => {
			// 		if (res.code === 0) {
			// 			uni.setNavigationBarTitle({
			// 				title: this.appInfo.site_name
			// 			});
			// 			that.rankingsList = [...that.rankingsList, ...res.data.data];
			// 			that.lastPage = res.data.last_page;
			// 			that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
			// 			that.isLoading = false
			// 		}
			// 	});
			// },

			// 加载更多
			// loadMore() {
			// 	if (this.currentPage < this.lastPage) {
			// 		this.currentPage += 1;
			// 		this.getRankings();
			// 	}
			// }
		}
	};
</script>

<style lang="scss">
	.rankings-wrap {
		background: url('http://file.shopro.top/imgs/commission/rankings_bg.png') no-repeat;
		background-size: 100% auto;
		// height: 100%;
		overflow: hidden;
	}

	// 排行榜列表
	.rankings-list-box {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0px 0px;
		// width: 690rpx;
		height: 100%;
		margin: 60rpx auto 0;

		.scroll-box {
			height: 100%;
		}

		.ranking-list {
			height: 140rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #e5e5e5;

			.list-left {
				.tag-box {
					width: 50rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #beb4b3;
					margin-right: 20rpx;

					.tag-icon {
						width: 40rpx;
						height: 60rpx;
					}
				}

				.user-avatar {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
					margin-right: 30rpx;
				}

				.user-info {
					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}

					.date {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.list-right {
				.num {
					font-size: 30rpx;
					font-weight: 500;
					color: #5e4ddf;
				}

				.des {
					font-size: 24rpx;
					font-weight: 500;
					color: #a09a98;
				}
			}
		}
	}
</style>