community-front/pages/components/index/VolunteerRanking.vue

<template>
	<view class="volunteer-ranking">
		<view class="ranking-header">
			<image class="ranking-title-img" src="/static/积分排行榜.png" mode="aspectFit"></image>
			<view class="more" @click="goToRankingList">
				<text class="more-text">更多</text>
				<uv-icon name="arrow-right" color="#999" size="12"></uv-icon>
			</view>
		</view>
		<view class="ranking-scroll-container">
			<scroll-view class="ranking-list" scroll-x show-scrollbar="false" enhanced="true" enable-flex="true" scroll-with-animation="true" @scroll="onScrollChange">
				<view class="ranking-content">
					<view class="ranking-item" v-for="(item, index) in rankingList" :key="index" @click="viewVolunteerDetail">
						<view class="avatar-container">
							<view class="avatar-with-border">
								<image :src="item.headImage || '/static/默认头像.png'" class="avatar-image" mode="aspectFill"></image>
							</view>
						</view>
						<view class="points-container">
							<image class="points-icon" src="/static/积分图标.png" mode="aspectFit"></image>
							<text class="volunteer-points">{{item.score}}</text>
						</view>
						<text class="volunteer-name">{{item.nickName}}</text>
					</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'VolunteerRanking',
		data() {
			return {
				rankingList: [
					
				],
				currentScrollIndex: 0
			}
		},
		methods: {
			goToRankingList() {
				// 跳转到排行榜详情页
				uni.navigateTo({
					url: '/subPages/index/ranking'
				})
			},
			viewVolunteerDetail() {
				uni.navigateTo({
					url: '/subPages/index/ranking'
				})
			},
			onScrollChange(e) {
				// 根据滚动位置更新指示器
				const scrollLeft = e.detail.scrollLeft;
				const scrollWidth = e.detail.scrollWidth;
				const clientWidth = e.detail.scrollWidth / this.rankingList.length * 3;
				
				// 计算当前滚动索引（每3个为一组）
				if (scrollLeft < clientWidth / 3) {
					this.currentScrollIndex = 0;
				} else if (scrollLeft < clientWidth * 2 / 3) {
					this.currentScrollIndex = 1;
				} else {
					this.currentScrollIndex = 2;
				}
			},

			// 获取志愿者积分排名
			async getVolunteerRanking() {
				const res = await this.$api.score.queryScoreRank({
					pageNo: 1,
					pageSize: 10
				})
				
				if (res.code === 200) {
					this.rankingList = res.result.scoreList.records
				}
			}
		},
		// async mounted() {
		// 	await this.getVolunteerRanking()
		// }
	}
</script>

<style lang="scss" scoped>
.volunteer-ranking {
	background-color: #fff;
	margin: 20rpx;
	border-radius: 10rpx;
	padding: 20rpx;
	
	.ranking-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.ranking-title-img {
			height: 60rpx;
			width: 200rpx;
		}
		
		.more {
			display: flex;
			align-items: center;
			
			.more-text {
				font-size: 24rpx;
				color: $uni-text-color-grey;
				margin-right: 4rpx;
			}
		}
	}
	
	.ranking-scroll-container {
		position: relative;
		width: 100%;
	}
	
	.ranking-list {
		white-space: nowrap;
		padding: 15rpx 0;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		
		.ranking-content {
			display: flex;
			padding: 0 20rpx;
			min-width: max-content;
		}
		
		.ranking-item {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;
				flex-shrink: 0;
				min-width: 100rpx;
				transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				
				&:hover, &:active {
					transform: scale(1.08);
				}
				
				&:last-child {
					margin-right: 20rpx;
				}
			
			.avatar-container {
				position: relative;
				width: 110rpx;
				height: 110rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.avatar-with-border {
					width: 110rpx;
					height: 110rpx;
					border: 3rpx solid #1f8bdc;
					border-radius: 50%;
					// box-shadow: 0 4rpx 12rpx rgba(33, 140, 221, 0.2);
					transition: all 0.3s ease;
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.avatar-image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
			
			.points-container {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: -10rpx;
				background-color: #1f8bdc;
				border-radius: 7rpx;
				// padding: 4rpx 12rpx;
				width: 80rpx;
				height: 25rpx;
				// box-shadow: 0 2rpx 8rpx rgba(33, 140, 221, 0.3);
				z-index: 2;
				.points-icon {
					width: 20rpx;
					height: 20rpx;
					margin-right: 4rpx;
					filter: brightness(0) invert(1);
				}
				
				.volunteer-points {
					font-size: 18rpx;
					color: #fff;
					// font-weight: bold;
					margin: 0;
				}
			}
			
			.volunteer-name {
				font-size: 24rpx;
				color: $uni-text-color;
				margin-top: 10rpx;
				max-width: 100rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
			}
		}
	}
	

}
</style>