You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
llll/rank.vue

182 lines
4.3 KiB

1 month ago
<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>