jp-railway/pages/mine/points/rankingList.vue

<template>
	<view>
		<u-navbar title="积分排行榜">	
		</u-navbar>
		<view class="background">
			积分排行榜
			
		</view>
		<view class="self" v-if="top" >
			<view class="rank">
				 
				<img v-if="top.rank==1" src="../../../assets/img/Gold Medal@1x.png" alt="">
				<img v-else-if="top.rank==2" src="../../../assets/img/Silver Medal Copy@1x.png" alt="">
				<img v-else-if="top.rank==3" src="../../../assets/img/Bronze Medal Copy@1x.png" alt="">
				<span v-else>{{top.rank}}</span>
			</view>
			<view class="photo">
				<img v-if="top.userImg" :src="top.userImg" alt="">
				<u-avatar  v-else  size="80" ></u-avatar>
			</view>
			<view class="name">
				{{top.userName}}
			</view>
			<view class="points">
				{{top.userScore}}积分
			</view>
		</view>
		
		<view class="else" v-if="list.length" >
			<view class="item" v-for="(item,i) in  list"  :key="i" >
				<view class="rank">
					<img v-if="i==0" src="../../../assets/img/Gold Medal@1x.png" alt="">
					<img v-else-if="i==1" src="../../../assets/img/Silver Medal Copy@1x.png" alt="">
					<img v-else-if="i==2" src="../../../assets/img/Bronze Medal Copy@1x.png" alt="">
					<span v-else>{{i+1}}</span>
					
				</view>
				<view class="photo">
					<img v-if="item.userImg" :src="item.userImg" alt="">
					<u-avatar  v-else  size="80" ></u-avatar>
					
				</view>
				<view class="name">
					{{item.userName}}
				</view>
				<view class="points " :class="{
					points1:i==0,
					points2:i==1,
					points3:i==2
				}">
					{{item.userScore}}积分
				</view>
			</view>
			
		</view>
		<u-divider   :isnone="!list.length" nonetext="统计中,敬请期待"  bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/user.js'
	export default {
		data() {
			return {
				list:[],
				listForm:{
					pageIndex:1,
					typeId:"",
					title:"",
					pageSize:20,
				},
				recordsTotal:0,
				top:null,
				
			}
		},
		onLoad() {
			this.listForm.year=new Date().getFullYear()
			this.getList();
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.pointsNotes(this.listForm).then((res) => {
						
						this.list = [
							...this.list,
							...res.data.pointsList.data
						];
						this.recordsTotal = res.data.pointsList.recordsTotal;
						
 						if(res.data.myPoint){
							this.top=res.data.myPoint
							if(res.data.myPoint.userSortNo){
								this.top.rank=parseInt(res.data.myPoint.userSortNo)
								
							}
						}
						
					uni.hideLoading();
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		height: 224rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 24px;
		padding: 44rpx 32rpx;
		display: flex;
		background:url("../../../assets/img/Group Copy@1x.png" ),url("../../../assets/img/Group@1x.png"),
		linear-gradient(180deg, rgba(255,150,0,1) 0%,rgba(255,61,0,1) 100%) ;
		background-repeat: no-repeat,no-repeat;
		background-position: 85% 50%,105% 40%;
		font-family: 'SemiBold';
	}
	.self{
		background-color: #fff;
		 margin: 0 32rpx 24rpx;
		 margin-top: -90rpx;
		 height: 64px;
		 z-index: 999;
		 overflow: hidden;
		 position: relative;
		 border-radius: 8px;
		 padding: 36rpx 42rpx;
		 display: flex;
		 align-items: center;
		 .rank{
			 color: rgba(31, 74, 153, 1);
			 font-size: 16px;
		 }
		 .photo{
			 width: 80rpx;
			 height: 80rpx;
			 border-radius: 8px;
			 overflow: hidden;
			 margin-left: 24rpx;
			 img{
				 width: 100%;
				 height: 100%;
			 }
		 }
		 .name{
			 color: rgba(51, 51, 51, 1);
			 font-size: 16px;
			 margin-left: 24rpx;
			 font-family: 'Medium';
		 }
		 .points{
			 color: rgba(31, 74, 153, 1);
			 font-size: 16px;
            margin-left: auto;
			font-family: 'Regular';
		 }
	}
   .else{
	   background: #fff;
	   border-radius: 8px;
	   padding: 24rpx 48rpx;
	   margin: 20rpx 32rpx 24rpx;
	   .item{
		   display: flex;
		   align-items: center;
		   height: 128rpx;
	   }
	   .rank{
	   			 color: rgba(31, 74, 153, 1);
	   			 font-size: 16px;
				 width: 48rpx;
				 height: 48rpx;
				 img{
					 width: 100%;
					 height: 100%;
				 }
	   }
	   .photo{
	   			 width: 80rpx;
	   			 height: 80rpx;
	   			 border-radius: 8px;
	   			 overflow: hidden;
	   			 margin-left: 24rpx;
	   			 img{
	   				 width: 100%;
	   				 height: 100%;
	   			 }
	   }
	   .name{
	   			 color: rgba(51, 51, 51, 1);
	   			 font-size: 16px;
	   			 margin-left: 24rpx;
				 font-family: 'Medium';
	   }
	   .points{
	   			 color: rgba(31, 74, 153, 1);
	   			 font-size: 16px;
	           margin-left: auto;
			   font-family: 'Regular';
			   
	   }
	   .points1{
		   color: rgba(226, 14, 22, 1);
	   }
	   .points2{
		   color: rgba(255, 94, 0, 1);
	   }
	   .points3{
		   color: rgba(255, 150, 0, 1);
	   }
   }
</style>