Mini_Program/pages/reading-rank/reading-rank.vue

<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="top-header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="tabs-primary">
				<view 
					class="tab-item" 
					:class="{ active: currentBookType === 'ebook' }"
					@click="switchBookType('ebook')"
				>
					<text class="tab-text">电子书</text>
				</view>
				<view 
					class="tab-item" 
					:class="{ active: currentBookType === 'audiobook' }"
					@click="switchBookType('audiobook')"
				>
					<text class="tab-text">有声书</text>
				</view>
			</view>
		</view>
		
		<!-- 第二行标签 -->
		<view class="tabs-secondary">
			<view 
				class="tab-item-secondary" 
				:class="{ active: currentPeriod === 'today' }"
				@click="switchPeriod('today')"
			>
				<text class="tab-text-secondary">今天</text>
			</view>
			<view 
				class="tab-item-secondary" 
				:class="{ active: currentPeriod === 'week' }"
				@click="switchPeriod('week')"
			>
				<text class="tab-text-secondary">本周</text>
			</view>
		</view>
		
		<scroll-view class="scroll-content" scroll-y>
			<!-- 前三名 -->
			<view class="top-three-section">
				<view 
					class="top-three-item rank-2"
				>
					<image class="top-avatar" :src="topThree[0].avatar" mode="aspectFill"></image>
					<text class="top-name">{{ topThree[0].name }}</text>
					<text class="top-rank">{{ topThree[0].rank }}</text>
				</view>
				<view 
					class="top-three-item rank-1"
				>
					<image class="top-avatar" :src="topThree[1].avatar" mode="aspectFill"></image>
					<text class="top-name">{{ topThree[1].name }}</text>
					<text class="top-rank">{{ topThree[1].rank }}</text>
				</view>
				<view 
					class="top-three-item rank-3"
				>
					<image class="top-avatar" :src="topThree[2].avatar" mode="aspectFill"></image>
					<text class="top-name">{{ topThree[2].name }}</text>
					<text class="top-rank">{{ topThree[2].rank }}</text>
				</view>
			</view>
			
			<!-- 排名列表4-10 -->
			<view class="rank-list">
				<view 
					class="rank-item" 
					v-for="(user, index) in rankList" 
					:key="index"
				>
					<text class="rank-number">{{ user.rank }}</text>
					<image class="rank-avatar" :src="user.avatar" mode="aspectFill"></image>
					<text class="rank-name">{{ user.name }}</text>
					<text class="rank-duration">{{ user.duration }}</text>
				</view>
			</view>
			
			<!-- 用户自己的排名 -->
			<view class="user-rank-section">
				<text class="user-rank-label">未上榜</text>
				<image class="user-rank-avatar" :src="userRank.avatar" mode="aspectFill"></image>
				<text class="user-rank-name">我</text>
				<text class="user-rank-duration">{{ userRank.duration }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			const getRandomImage = (seed) => {
				return `https://picsum.photos/seed/${seed}/200/200`;
			};
			
			return {
				currentBookType: 'ebook', // ebook, audiobook
				currentPeriod: 'today', // today, week
				topThree: [
					{
						rank: 2,
						name: '郭德纲',
						avatar: getRandomImage('rank2')
					},
					{
						rank: 1,
						name: '郭德纲',
						avatar: getRandomImage('rank1')
					},
					{
						rank: 3,
						name: '郭德纲',
						avatar: getRandomImage('rank3')
					}
				],
				rankList: [
					{
						rank: 4,
						name: '郭德纲',
						avatar: getRandomImage('rank4'),
						duration: '8小时'
					},
					{
						rank: 5,
						name: '郭德纲',
						avatar: getRandomImage('rank5'),
						duration: '8小时'
					},
					{
						rank: 6,
						name: '郭德纲',
						avatar: getRandomImage('rank6'),
						duration: '8小时'
					},
					{
						rank: 7,
						name: '郭德纲',
						avatar: getRandomImage('rank7'),
						duration: '8小时'
					},
					{
						rank: 8,
						name: '郭德纲',
						avatar: getRandomImage('rank8'),
						duration: '8小时'
					},
					{
						rank: 9,
						name: '郭德纲',
						avatar: getRandomImage('rank9'),
						duration: '8小时'
					},
					{
						rank: 10,
						name: '郭德纲',
						avatar: getRandomImage('rank10'),
						duration: '8小时'
					}
				],
				userRank: {
					avatar: getRandomImage('user'),
					duration: '1小时'
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			switchBookType(type) {
				this.currentBookType = type
				// 切换类型时可以重新加载数据
				this.loadRankData()
			},
			switchPeriod(period) {
				this.currentPeriod = period
				// 切换时间段时可以重新加载数据
				this.loadRankData()
			},
			loadRankData() {
				// 根据当前选择的类型和时间段加载排行榜数据
				// 这里可以调用API获取数据
				uni.showToast({
					title: `加载${this.currentBookType === 'ebook' ? '电子书' : '有声书'}${this.currentPeriod === 'today' ? '今天' : '本周'}排行榜`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		padding-top: 30px;
		box-sizing: border-box;
	}
	
	.top-header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #81C784;
		position: relative;
	}
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.back-icon {
		font-size: 40rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	.tabs-primary {
		flex: 1;
		display: flex;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		padding: 4rpx;
	}
	
	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12rpx 0;
		border-radius: 26rpx;
		transition: all 0.3s;
	}
	
	.tab-item.active {
		background-color: #FFFFFF;
	}
	
	.tab-item.active .tab-text {
		color: #333333;
		font-weight: bold;
	}
	
	.tab-text {
		font-size: 28rpx;
		color: #FFFFFF;
	}
	
	.tabs-secondary {
		display: flex;
		background-color: #FFFFFF;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.tab-item-secondary {
		padding: 20rpx 40rpx;
		position: relative;
	}
	
	.tab-item-secondary.active .tab-text-secondary {
		color: #333333;
		font-weight: bold;
	}
	
	.tab-item-secondary.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #81C784;
		border-radius: 2rpx;
	}
	
	.tab-text-secondary {
		font-size: 28rpx;
		color: #999999;
	}
	
	.scroll-content {
		flex: 1;
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.top-three-section {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		padding: 60rpx 30rpx 40rpx;
		background-color: #FFFFFF;
	}
	
	.top-three-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.top-three-item.rank-1 {
		order: 2;
		transform: scale(1.1);
	}
	
	.top-three-item.rank-2 {
		order: 1;
	}
	
	.top-three-item.rank-3 {
		order: 3;
	}
	
	.top-avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
		background-color: #F5F5F5;
		border: 4rpx solid #81C784;
	}
	
	.top-three-item.rank-1 .top-avatar {
		width: 160rpx;
		height: 160rpx;
		border-color: #FFD700;
	}
	
	.top-name {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 10rpx;
		font-weight: bold;
	}
	
	.top-rank {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
	}
	
	.top-three-item.rank-1 .top-rank {
		font-size: 48rpx;
		color: #FFD700;
	}
	
	.rank-list {
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}
	
	.rank-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #F0F0F0;
	}
	
	.rank-item:last-child {
		border-bottom: none;
	}
	
	.rank-number {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		width: 60rpx;
		text-align: center;
	}
	
	.rank-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #F5F5F5;
	}
	
	.rank-name {
		flex: 1;
		font-size: 30rpx;
		color: #333333;
	}
	
	.rank-duration {
		font-size: 26rpx;
		color: #999999;
	}
	
	.user-rank-section {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #F5F5F5;
		margin-top: 20rpx;
	}
	
	.user-rank-label {
		font-size: 28rpx;
		color: #666666;
		width: 120rpx;
	}
	
	.user-rank-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #FFFFFF;
	}
	
	.user-rank-name {
		flex: 1;
		font-size: 30rpx;
		color: #333333;
	}
	
	.user-rank-duration {
		font-size: 26rpx;
		color: #999999;
	}
</style>