feiniao-youwei-uniapp/pages/tabBar/tree/subPages/rank.vue

<template>
	<view class="sub-base-container">
		<view class="gradient-reflection" data-text="好友排行榜">好友排行榜</view>
		<view class="rank-card">
			<view class="tabs">
				<view :class="['tab-item',{active:active === item.speciesId}]" v-for="(item,index) in tabsList"
					:key="index" @click="handleTab(item)">{{item.name}}</view>
			</view>
			<scroll-view 
				class="rank-list" 
				v-if="rankList.length"
				scroll-y="true"
				@scrolltolower="loadMore"
				:style="{height: 'calc(100vh - 500rpx)'}"
			>
				<view :class="['rank-item',{bg:(index + 1) <=3}]" v-for="(item,index) in rankList" :key="index">
					<view class="rank-info">
						<text :class="['num',`num-${(index + 1)}`]">{{item.ranking}}</text>
						<up-image class="avatar" :fade="false" :src="item.icon" width="92rpx" height="92rpx"
							shape="circle"></up-image>
						<view class="info">
							<view class="name">
								<text>{{item.treeName || item.nickname.slice(0, 3) + "荔"}}</text>
								<view :class="['level',{levelBlue:item.level.id >3}]">
									V{{item.level.id}}.{{item.level.name}}</view>
							</view>
							<text class="nickname ellipsis-l1">昵称:{{item.nickname}}</text>
						</view>
					</view>
					<view class="button" @click="handlePage">去看看</view>
				</view>
				<!-- 加载更多提示 -->
				<view class="loading-more" v-if="loading">
					<text>下拉加载数据</text>
				</view>
				<view class="no-more" v-if="!hasMore && rankList.length > 0">
					<text>没有更多数据了</text>
				</view>
			</scroll-view>
			<up-empty v-else mode="data" marginTop="50">
			</up-empty>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import TREE from '@/api/tree.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	onLoad(() => {
		getCategoryList()
		getRankingList()
	})
	
	const handlePage = () =>{
		uni.navigateTo({
			url: `/pages/tabBar/tree/subPages/friendTree?`
		});
	}
	
	const active = ref(null)
	const tabsList = ref([])
	const handleTab = (item) => {
		active.value = item.speciesId
		// 切换tab时重置分页
		currentPage.value = 1
		rankList.value = []
		hasMore.value = true
		getRankingList()
	}

	const getCategoryList = () => {
		TREE.categoryList().then(res => {
			tabsList.value = res.data || []
			tabsList.value.unshift({
				name: '总榜',
				speciesId: null
			})
		})
	}

	const rankList = ref([])
	const currentPage = ref(1)
	const loading = ref(false)
	const hasMore = ref(true)
	
	const getRankingList = () => {
		if (loading.value || !hasMore.value) return
		
		loading.value = true
		const params = {
			speciesId: active.value,
			page: currentPage.value,
			limit: 10
		}
		TREE.rankingList(params).then(res => {
			const newData = res.data || []
			if (currentPage.value === 1) {
				rankList.value = newData
			} else {
				rankList.value = [...rankList.value, ...newData]
			}
			
			// 判断是否还有更多数据
			hasMore.value = newData.length === 10
			loading.value = false
		}).catch(() => {
			loading.value = false
		})
	}
	
	const loadMore = () => {
		if (hasMore.value && !loading.value) {
			currentPage.value++
			getRankingList()
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.sub-base-container {
		@include ossBg("subTreePage/rank-bg.png");

		.gradient-reflection {
			width: 100%;
			position: relative;
			font-size: 86rpx;
			color: #fff;
			font-family: "PangMenZhengDao";
			text-align: center;
		}

		.gradient-reflection::after {
			content: attr(data-text);
			position: absolute;
			top: 75%;
			left: calc(50% - 430rpx / 2);
			transform: scaleY(-1);
			background: rgba(255, 255, 255, 0.5);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			opacity: 0.5;
		}

		.rank-card {
			margin-top: 90rpx;
			background: rgba(255, 255, 255, 0.74);
			border-radius: 20rpx 20rpx 0 0;
			padding: 20rpx;

			.tabs {
				display: flex;

				.tab-item {
					flex: 1;
					text-align: center;
					color: rgba(0, 0, 0, 0.5);
					font-size: 28rpx;
					padding: 10rpx 0;

					&.active {
						border-radius: 50rpx;
						color: #000;
						background: #fff;
					}
				}
			}

			.rank-list {
				.rank-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 14rpx 20rpx;
					border-radius: 10rpx;
					margin-top: 20rpx;

					&.bg {
						background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.6), transparent);
					}

					.rank-info {
						display: flex;
						align-items: center;
						font-size: 24rpx;

						.num {
							margin-right: 28rpx;
							color: #724E02;
							font-family: 'SweiSpringCJKtc';

							&-1 {
								background: linear-gradient(to bottom, #724E02 0%, #F3C11D 100%);
								-webkit-background-clip: text;
								background-clip: text;
								color: transparent;
								font-size: 52rpx;
								font-family: 'SMILEYSANS';
							}

							&-2 {
								background: linear-gradient(to bottom, #898989 0%, #fff 100%);
								-webkit-background-clip: text;
								background-clip: text;
								color: transparent;
								font-size: 52rpx;
								font-family: 'SMILEYSANS';
							}

							&-3 {
								background: linear-gradient(to bottom, #F2BF16 0%, #FF8400 100%);
								-webkit-background-clip: text;
								background-clip: text;
								color: transparent;
								font-size: 52rpx;
								font-family: 'SMILEYSANS';
							}
						}

						.info {
							margin-left: 10rpx;

							.name {
								font-size: 28rpx;
								font-weight: 500;
								display: flex;
								align-items: center;
								margin-bottom: 4rpx;
							}

							.level {
								background: rgba(81, 81, 81, 0.1);
								color: #444444;
								border-radius: 4rpx;
								font-size: 24rpx;
								padding: 4rpx 10rpx;
								margin-left: 20rpx;

								&.levelBlue {
									background: #fff;
									color: #2199F8;
								}
							}

							.nickname {
								max-width: 320rpx;
								color: rgba(0, 0, 0, 0.5);
							}
						}
					}

					.button {
						font-size: 24rpx;
						padding: 10rpx 20rpx;
						border-radius: 50rpx;
						border: 2rpx solid rgba(0, 0, 0, 0.3);
						background: #fff;
					}
				}
				
				.loading-more, .no-more {
					text-align: center;
					padding: 20rpx 0;
					color: rgba(0, 0, 0, 0.5);
					font-size: 24rpx;
				}
			}
		}
	}
</style>