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>
			<view class="rank-list">
				<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}}</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">去看看</view>
				</view>
			</view>
		</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 active = ref(null)
	const tabsList = ref([])
	const handleTab = (item) => {
		active.value = item.speciesId
		getRankingList()
	}

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

	const rankList = ref([])
	const getRankingList = () => {
		const params = {
			speciesId: active.value,
			page: 1,
			limit: 20
		}
		TREE.rankingList(params).then(res => {
			rankList.value = res.data || []
		})
	}
</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;
					}
				}
			}
		}
	}
</style>