前端

rank.vue

@@ -0,0 +1,181 @@
+<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>
+
+