guanmao-wxapp/pages/mine/ranking/list.vue

<template>
	<view class="app-container">
		<custom :bgColor="'bg-them'" :backColor="'#FFFFFF'" :isBack="true" v-show="isCustom">
			<text slot="content" style="color: #FFFFFF; font-size: 36rpx;">收益排行榜</text>
		</custom>
		
		<view class="menu-container" :style="cuStyle">
			<image @tap="toBack" src="@/static/icon/back.png"></image>
		</view>
		
		<view class="top-container">
			<image src="@/static/mine/ranking/bg.png" mode="widthFix" class="bg"></image>
			
			<view class="content">
				<view class="list">
					<block v-for="(item, index) in top_ranking" :key='index'>
						<view class="item" :class="'no_' + item.ranking">
							<view class="top">
								<block v-if="!item.nodata">
									<image :src="item.avatar" class="head" v-if="item.avatar.indexOf('http') >= 0"></image>
									<image :src="imageUrl + item.avatar" class="head" v-else></image>
								</block>
								<image :src="configInfo.minLogo3" class="head" v-else></image>
								<image :src="'/static/mine/ranking/No_' + item.ranking + '.png'" class="rank"></image>
							</view>
							<block v-if="!item.nodata">
								<view class="money">¥{{item.total}}</view>
								<view class="name">{{item.workUserName}}</view>
								<view class="text">{{item.websitName}}</view>
							</block>
							<block v-if="item.nodata">
								<view class="nodata">{{item.nodata}}</view>
							</block>
						</view>
					</block>
				</view>
			</view>
		</view>
		
		<view class="list-container">
			<view class="mine">
				<view class="left">
					<view class="rank">
						<view class="row1" :class="mine_ranking.ranking ? 'big':''">{{mine_ranking.ranking || '未入榜'}}</view>
						<view class="row2">我的排名</view>
					</view>
					<block v-if="mine_ranking.avatar">
						<image :src="mine_ranking.avatar" v-if="mine_ranking.avatar.indexOf('http') >= 0"></image>
						<image :src="imageUrl + mine_ranking.avatar" v-else></image>
					</block>
					<view class="info">
						<view class="name">{{mine_ranking.workUserName}}</view>
						<view class="text ellipsis-2">{{mine_ranking.websitName || ''}}</view>
					</view>
				</view>
				<view class="right">
					<view class="money">{{mine_ranking.total | numToFixed}}</view>
					<view class="report" @tap="toMyReport">查看我的月报></view>
				</view>
			</view>
			<view class="list" v-if="bottom_ranking && bottom_ranking.length > 0">
				<block v-for="(item, index) in bottom_ranking" :key='index'>
					<view class="item">
						<view class="rank">{{index+4}}</view>
						<block v-if="item.avatar">
							<image :src="item.avatar" v-if="item.avatar.indexOf('http') >= 0"></image>
							<image :src="imageUrl + item.avatar" v-else></image>
						</block>
						<view class="main">
							<view class="top">
								<view class="name">{{item.workUserName}}</view>
								<view class="money">{{item.total | numToFixed}}</view>
							</view>
							<view class="text ellipsis">{{item.websitName}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<view class="bottom-container" v-if="statisticalDate.start">统计时间：{{statisticalDate.start}} 至 {{statisticalDate.end}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: this.$imageUrl,
				configInfo: uni.getStorageSync('configInfo'),
				scrollTop: 0, // 滚动高度（用于控制自定义导航）
				isCustom: false, // 是否显示自定义导航
				top_ranking: [],
				bottom_ranking: [],
				mine_ranking: {},
				statisticalDate: {},
			}
		},
		watch: {
			scrollTop() {
				if(this.scrollTop > 100) {
					this.isCustom = true;
				}else {
					this.isCustom = false;
				}
			}
		},
		computed:{
			cuStyle(){
				return `height:${this.CustomBar-this.StatusBar}px;padding-top:${this.StatusBar}px;`
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		onLoad() {
			this.getData();
		},
		methods: {
			// 获取数据
			getData() {
				this.$axios({
					url: '/user/rank',
					method: 'get',
					params: {},
					isLoading: 1
				}).then(res => {
					let rankList = res.data.rankList || [];
					let top_ranking = rankList.slice(0, 3);
					for (let i = 0; i < 3; i++) {
						if(!top_ranking[i]) {
							top_ranking.push({nodata: '虚位以待', ranking: i+1});
						}
					}
					
					let bottom_ranking = rankList;
					bottom_ranking.splice(0, 3);
					
					this.top_ranking = top_ranking;
					this.bottom_ranking = bottom_ranking;
					this.mine_ranking = res.data.myRank;
					this.statisticalDate = {
						start: res.data.startPeriod,
						end: res.data.endPeriod,
					};
				})
			},
			
			// 去我的月报
			toMyReport() {
				uni.navigateTo({
					url: '/pages/mine/ranking/report'
				})
			},
			
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #ffffff;
		box-sizing: border-box;
	}
	.menu-container {
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		display: flex;
		align-items: center;
		image {
			width: 32rpx;
			height: 32rpx;
			display: block;
			margin-left: 30rpx;
		}
	}
	.top-container {
		position: relative;
		height: 900rpx;
		.bg {
			display: block;
			width: 750rpx;
			height: 900rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}
		.content {
			position: relative;
			z-index: 1;
			.list {
				display: flex;
				padding-top: 350rpx;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 33.33%;
					padding: 0 20rpx;
					box-sizing: border-box;
					.top {
						position: relative;
						.head {
							border-radius: 50%;
							display: block;
						}
						.rank {
							position: absolute;
							display: block;
						}
					}
					.nodata {
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						margin-top: 16rpx;
					}
					.money {
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						margin-top: 16rpx;
					}
					.name {
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 32rpx;
						margin-top: 16rpx;
					}
					.text {
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 28rpx;
						text-align: center;
						margin-top: 10rpx;
						opacity: .6;
					}
				}
				.item.no_1 {
					order: 2;
					.head {
						width: 160rpx;
						height: 160rpx;
						border: 2px solid #FFB103;
					}
					.rank {
						width: 80rpx;
						height: 58rpx;
						top: -50rpx;
						left: 50%;
						margin-left: -40rpx;
					}
				}
				.item.no_2 {
					order: 1;
					margin-top: 100rpx;
					.head {
						width: 140rpx;
						height: 140rpx;
						border: 2px solid #CCCCCC;
					}
					.rank {
						width: 72rpx;
						height: 52rpx;
						top: -44rpx;
						left: 50%;
						margin-left: -36rpx;
					}
				}
				.item.no_3 {
					order: 3;
					margin-top: 140rpx;
					.head {
						width: 140rpx;
						height: 140rpx;
						border: 2px solid #F59234;
					}
					.rank {
						width: 72rpx;
						height: 52rpx;
						top: -44rpx;
						left: 50%;
						margin-left: -36rpx;
					}
				}
			}
		}
	}
	.list-container {
		padding: 0 20rpx;
		margin-top: -40rpx;
		position: relative;
		z-index: 2;
		.mine {
			border-radius: 10rpx;
			padding: 25rpx 20rpx;
			display: flex;
			justify-content: space-between;
			box-shadow: 0 0 6px 0 rgba(84,84,84,0.23); 
			background: #FFFFFF;
			.left {
				display: flex;
				align-items: center;
				.rank {
					flex-shrink: 0;
					text-align: center;
					.row1 {
						font-size: 24rpx;
						color: #FE781F;
						line-height: 24rpx;
						font-weight: 500;
						&.big {
							font-size: 32rpx;
						}
					}
					.row2 {
						font-size: 22rpx;
						color: #666666;
						line-height: 24rpx;
						margin-top: 10rpx;
					}
				}
				image {
					width: 100rpx;
					height: 100rpx;
					display: block;
					border-radius: 50%;
					flex-shrink: 0;
					margin-left: 10rpx;
				}
				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					height: 100rpx;
					.name {
						font-size: 28rpx;
						color: #333333;
						line-height: 32rpx;
					}
					.text {
						font-size: 24rpx;
						color: #666666;
						line-height: 28rpx;
					}
				}
			}
			.right {
				flex-shrink: 0;
				text-align: right;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 40rpx;
				.money {
					font-size: 32rpx;
					color: #FE781F;
					line-height: 32rpx;
					font-weight: 500;
				}
				.report {
					font-size: 24rpx;
					color: #3F9EFF;
					line-height: 28rpx;
				}
			}
		}
		.list {
			margin-top: 20rpx;
			.item {
				border-bottom: 1px solid #eaeaea;
				display: flex;
				align-items: center;
				padding: 12rpx 0;
				.rank {
					width: 90rpx;
					text-align: center;
					font-size: 36rpx;
					font-weight: 500;
					flex-shrink: 0;
				}
				image {
					width: 100rpx;
					height: 100rpx;
					display: block;
					border-radius: 50%;
					flex-shrink: 0;
					margin-left: 10rpx;
				}
				.main {
					margin-left: 20rpx;
					width: 100%;
					height: 80rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.name {
							font-size: 28rpx;
							color: #333333;
							line-height: 32rpx;
						}
						.money {
							font-size: 32rpx;
							color: #FE781F;
							line-height: 32rpx;
							font-weight: 500;
						}
					}
					.text {
						font-size: 24rpx;
						color: #666666;
						line-height: 28rpx;
						width: 490rpx;
					}
				}
			}
		}
	}
	.bottom-container {
		text-align: center;
		font-size: 24rpx;
		line-height: 28rpx;
		color: #999999;
		padding-top: 30rpx;
		padding-bottom: 60rpx;
	}
</style>