hookehuyr

feat(排行榜): 实现动态数据加载并添加日期显示

- 重构排行榜组件,从API动态加载数据
- 添加排行榜日期显示功能
- 优化区域切换逻辑,支持动态区域显示
- 调整返回顶部按钮位置
- 添加默认头像处理逻辑
1 <!-- 1 <!--
2 * @Date: 2025-09-02 13:06:39 2 * @Date: 2025-09-02 13:06:39
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-02 13:12:20 4 + * @LastEditTime: 2025-09-09 14:17:13
5 * @FilePath: /lls_program/src/components/BackToTop.vue 5 * @FilePath: /lls_program/src/components/BackToTop.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -56,7 +56,7 @@ const scrollToTop = () => { ...@@ -56,7 +56,7 @@ const scrollToTop = () => {
56 .back-to-top { 56 .back-to-top {
57 position: fixed; 57 position: fixed;
58 right: 30rpx; 58 right: 30rpx;
59 - bottom: 180rpx; 59 + bottom: 250rpx;
60 width: 80rpx; 60 width: 80rpx;
61 height: 80rpx; 61 height: 80rpx;
62 background: rgba(64, 158, 255, 0.8); 62 background: rgba(64, 158, 255, 0.8);
......
This diff is collapsed. Click to expand it.
1 <!-- 1 <!--
2 * @Date: 2025-09-01 13:07:52 2 * @Date: 2025-09-01 13:07:52
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-09 14:07:23 4 + * @LastEditTime: 2025-09-09 14:16:08
5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue 5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -34,6 +34,11 @@ ...@@ -34,6 +34,11 @@
34 <view class="loading-text">加载中...</view> 34 <view class="loading-text">加载中...</view>
35 </view> 35 </view>
36 36
37 + <!-- 排行榜日期 -->
38 + <view class="rank-date">
39 + {{ currentDate }}
40 + </view>
41 +
37 <!-- 前三名展示 --> 42 <!-- 前三名展示 -->
38 <view v-else-if="topThreeData.length > 0" class="top-three"> 43 <view v-else-if="topThreeData.length > 0" class="top-three">
39 <!-- 第二名 --> 44 <!-- 第二名 -->
...@@ -131,7 +136,7 @@ ...@@ -131,7 +136,7 @@
131 </view> 136 </view>
132 137
133 <!-- 返回顶部组件 --> 138 <!-- 返回顶部组件 -->
134 - <!-- <BackToTop :distance="200" /> --> 139 + <BackToTop :distance="200" />
135 </view> 140 </view>
136 </template> 141 </template>
137 142
...@@ -165,7 +170,8 @@ const leaderboardData = ref(null) ...@@ -165,7 +170,8 @@ const leaderboardData = ref(null)
165 // 加载状态 170 // 加载状态
166 const loading = ref(false) 171 const loading = ref(false)
167 172
168 - 173 +// 当前日期
174 +const currentDate = ref('')
169 175
170 /** 176 /**
171 * 切换tab 177 * 切换tab
...@@ -230,6 +236,7 @@ const loadLeaderboardData = async (isInitialLoad = false) => { ...@@ -230,6 +236,7 @@ const loadLeaderboardData = async (isInitialLoad = false) => {
230 const response = await getStepLeaderboardAPI(params) 236 const response = await getStepLeaderboardAPI(params)
231 if (response.code) { 237 if (response.code) {
232 leaderboardData.value = response.data 238 leaderboardData.value = response.data
239 + currentDate.value = response.data.yesterday
233 240
234 // 只在初始加载时从current_family.county获取区县信息,设置默认tab 241 // 只在初始加载时从current_family.county获取区县信息,设置默认tab
235 if (isInitialLoad && response.data.current_family) { 242 if (isInitialLoad && response.data.current_family) {
...@@ -411,6 +418,14 @@ onMounted(async () => { ...@@ -411,6 +418,14 @@ onMounted(async () => {
411 opacity: 0.3; 418 opacity: 0.3;
412 transform: translateY(-20rpx); 419 transform: translateY(-20rpx);
413 } 420 }
421 +
422 + .rank-date {
423 + font-size: 28rpx;
424 + color: rgba(255, 255, 255, 0.8);
425 + text-align: center;
426 + margin-top: 40rpx;
427 + margin-bottom: 40rpx;
428 + }
414 } 429 }
415 430
416 .top-three { 431 .top-three {
......