llll/rank.vue

<template>
    <view class="rrpage">
        <view class="rtop-nav">
            <view class="rtop-left">姓名</view>
            <view class="rtop-scole">积分</view>
            <view class="rtop-rank">名次</view>
        </view>    
        <view class="rrpage-body">
            <view class="rank-list">
                <view class="rank-item" v-for="(item, index) in rankData" :key="index">
                    <view class="rank-info rank-name">
                        <text>{{ item.name }}</text>
                    </view>
                    <view class="rank-info rank-score">
                        <text>{{ item.score }}</text>
                    </view>
                    <view class="rank-info rank-position">
                        <text>{{ index + 1 }}</text>
                    </view>
                </view>
            </view>
        </view>
        <navigator url="mine rank/mine rank" hover-class="navigator-hover">
            <view class="rbtn-area">我的排名</view>
        </navigator>    
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const rankData = ref([]); // 定义 rankData 为响应式数据

const getStudents = async () => {
    try {
        let res = await uni.request({
            url: "http://10.198.140.41:3000/api/upload",
            method: 'GET', // 明确指定请求方法
        });
        
        if (res && res.data) {
            // 假设返回的数据格式正确并赋值给 rankData
            rankData.value = res.data.map(student => ({
                name: student.name,
                score: student.points
            }));
			// 根据 score 进行排序，从高到低
			rankData.value.sort((a, b) => b.score - a.score);
        }
    } catch (error) {
        console.error("获取学生数据失败:", error); // 错误处理
    }
};

onMounted(() => {
    getStudents(); // 组件挂载时调用获取学生数据的函数
});
</script>

<style scoped>
.rrpage {
    display: flex;
    flex-direction: column; /* 垂直方向排列 */
}

.rtop-nav {
    display: flex;
    flex-direction: row;
    position: fixed; /* 固定定位 */
    top: 0; /* 微信小程序处改为0 */
    width: 100%; /* 宽度为100% */
    height: 80rpx;
    background-color: #f9f9f9; /* 背景色 */
    border-bottom: 1px solid #ccc; /* 边框 */
    font-size: 36rpx;
    font-weight: bold;
    justify-content: space-between; /* 两端对齐 */
}

.rtop-left {
    padding-left: 45rpx;
    flex-grow: 1; /* 让这个区域可扩展 */
}

.rtop-scole {
    text-align: center; /* 中间对齐 */
	padding-right: 40px;
    flex-grow: 1;
}

.rtop-rank {
    padding-right: 20px;
}

.rtop-left {
    text-align: left; /* 姓名列靠左 */
}

.rtop-scole,.rtop-rank{
	text-align: right;
}

.rrpage-body {
    width: 100%;
    margin-top: 70rpx;
    margin-bottom: 30rpx;
    flex-direction: column;
}

.rank-list {
	display: flex;
	flex-direction: column;
    overflow-y: auto; /* 允许纵向滚动 */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    background-color: white;
}

.rank-item {
    display: flex;
    flex-direction: row; /* 水平方向排列 */
    padding: 10px;
    border-bottom: 1px solid #eee;
    justify-content: space-between; /* 两端对齐 */	
}

.rank-item:last-child {
    border-bottom: none;
}

.rank-info {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.rank-name {
    font-size: 32rpx;
    overflow: hidden; /* 防止溢出 */
    text-overflow: ellipsis; /* 溢出时显示省略号 */
    white-space: nowrap; /* 不换行 */
    text-align: left; /* 姓名列靠左 */
	flex: 6;
}

.rank-score{
	text-align: center; /* 中间对齐 */
	padding-left: 110px;
	flex: 1;
}

.rank-position{
	text-align: center;
	padding-left: 55px;
	flex:1;
}

.rank-score, .rank-position {
    font-size: 36rpx;
    
}

.rbtn-area {
    position: fixed; /* 固定定位 */
    bottom: 0; /* 微信改为0 */
    left: 0; /* 从左侧开始 */
    width: 100%; /* 宽度为100% */
    height: 36px;
    background-color: dodgerblue;
    text-align: center; /* 文本居中 */
    border-top: 1px solid #ccc; /* 顶部边框 */
    padding: 10px 0; /* 内边距 */
    font-size: 38rpx;
}

.navigator {
    display: inline-block; /* 确保按钮显示正常 */
}
</style>