refactor(排行榜): 优化步数格式化逻辑并添加刷新功能
重构步数格式化函数,使用toLocaleString方法替代原有逻辑 在RankingCard组件中添加refreshData方法并暴露给父组件 移除crown样式中不必要的margin-bottom属性
Showing
3 changed files
with
24 additions
and
9 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-01-09 00:00:00 | 2 | * @Date: 2025-01-09 00:00:00 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-09 15:26:25 | 4 | + * @LastEditTime: 2025-09-09 15:54:03 |
| 5 | * @FilePath: /lls_program/src/components/RankingCard.vue | 5 | * @FilePath: /lls_program/src/components/RankingCard.vue |
| 6 | * @Description: 排行榜卡片组件 | 6 | * @Description: 排行榜卡片组件 |
| 7 | --> | 7 | --> |
| ... | @@ -307,12 +307,24 @@ const myRank = computed(() => { | ... | @@ -307,12 +307,24 @@ const myRank = computed(() => { |
| 307 | }) | 307 | }) |
| 308 | 308 | ||
| 309 | /** | 309 | /** |
| 310 | + * 刷新排行榜数据 | ||
| 311 | + */ | ||
| 312 | +const refreshData = async () => { | ||
| 313 | + await loadLeaderboardData(true) | ||
| 314 | +} | ||
| 315 | + | ||
| 316 | +/** | ||
| 310 | * 页面初始化 | 317 | * 页面初始化 |
| 311 | */ | 318 | */ |
| 312 | onMounted(async () => { | 319 | onMounted(async () => { |
| 313 | // 直接加载排行榜数据,使用current_county参数获取当前家庭所在区县信息 | 320 | // 直接加载排行榜数据,使用current_county参数获取当前家庭所在区县信息 |
| 314 | await loadLeaderboardData(true) | 321 | await loadLeaderboardData(true) |
| 315 | }) | 322 | }) |
| 323 | + | ||
| 324 | +// 暴露刷新方法给父组件 | ||
| 325 | +defineExpose({ | ||
| 326 | + refreshData | ||
| 327 | +}) | ||
| 316 | </script> | 328 | </script> |
| 317 | 329 | ||
| 318 | <style lang="less"> | 330 | <style lang="less"> |
| ... | @@ -441,7 +453,7 @@ onMounted(async () => { | ... | @@ -441,7 +453,7 @@ onMounted(async () => { |
| 441 | 453 | ||
| 442 | .crown { | 454 | .crown { |
| 443 | font-size: 30rpx; | 455 | font-size: 30rpx; |
| 444 | - margin-bottom: 8rpx; | 456 | + // margin-bottom: 8rpx; |
| 445 | 457 | ||
| 446 | &.crown-gold { | 458 | &.crown-gold { |
| 447 | filter: grayscale(0.3) brightness(1.1); | 459 | filter: grayscale(0.3) brightness(1.1); | ... | ... |
| ... | @@ -133,7 +133,7 @@ | ... | @@ -133,7 +133,7 @@ |
| 133 | </WeRunAuth> | 133 | </WeRunAuth> |
| 134 | 134 | ||
| 135 | <!-- 排行榜卡片 --> | 135 | <!-- 排行榜卡片 --> |
| 136 | - <RankingCard :onViewMore="openFamilyRank" /> | 136 | + <RankingCard ref="rankingCardRef" :onViewMore="openFamilyRank" /> |
| 137 | 137 | ||
| 138 | <!-- Family album --> | 138 | <!-- Family album --> |
| 139 | <view class="p-5 mt-4 mb-6 bg-white rounded-xl shadow-md mx-4"> | 139 | <view class="p-5 mt-4 mb-6 bg-white rounded-xl shadow-md mx-4"> |
| ... | @@ -248,6 +248,7 @@ const todaySteps = ref(0); | ... | @@ -248,6 +248,7 @@ const todaySteps = ref(0); |
| 248 | const isWeRunAuthorized = ref(false); | 248 | const isWeRunAuthorized = ref(false); |
| 249 | const pointsCollectorRef = ref(null) | 249 | const pointsCollectorRef = ref(null) |
| 250 | const weRunAuthRef = ref(null) | 250 | const weRunAuthRef = ref(null) |
| 251 | +const rankingCardRef = ref(null) | ||
| 251 | const showTotalPointsOnly = ref(false) | 252 | const showTotalPointsOnly = ref(false) |
| 252 | const finalTotalPoints = ref(0) | 253 | const finalTotalPoints = ref(0) |
| 253 | const pendingPoints = ref([]) // 待收集的积分数据 | 254 | const pendingPoints = ref([]) // 待收集的积分数据 |
| ... | @@ -436,6 +437,11 @@ useDidShow(async () => { | ... | @@ -436,6 +437,11 @@ useDidShow(async () => { |
| 436 | if (weRunAuthRef.value) { | 437 | if (weRunAuthRef.value) { |
| 437 | weRunAuthRef.value.checkAuthStatus(true); | 438 | weRunAuthRef.value.checkAuthStatus(true); |
| 438 | } | 439 | } |
| 440 | + | ||
| 441 | + // 刷新排行榜数据 | ||
| 442 | + if (rankingCardRef.value) { | ||
| 443 | + rankingCardRef.value.refreshData(); | ||
| 444 | + } | ||
| 439 | } else { | 445 | } else { |
| 440 | // 如果没有加入家庭(code为0),跳转到欢迎页面 | 446 | // 如果没有加入家庭(code为0),跳转到欢迎页面 |
| 441 | Taro.redirectTo({ url: '/pages/Welcome/index' }); | 447 | Taro.redirectTo({ url: '/pages/Welcome/index' }); | ... | ... |
| 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:16:08 | 4 | + * @LastEditTime: 2025-09-09 15:56:24 |
| 5 | * @FilePath: /lls_program/src/pages/FamilyRank/index.vue | 5 | * @FilePath: /lls_program/src/pages/FamilyRank/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -203,10 +203,7 @@ const switchTab = async (tab) => { | ... | @@ -203,10 +203,7 @@ const switchTab = async (tab) => { |
| 203 | * @returns {string} 格式化后的步数 | 203 | * @returns {string} 格式化后的步数 |
| 204 | */ | 204 | */ |
| 205 | const formatSteps = (steps) => { | 205 | const formatSteps = (steps) => { |
| 206 | - if (steps >= 10000) { | 206 | + return steps ? steps.toLocaleString() : '0' |
| 207 | - return (steps / 10000).toFixed(1) + '万' | ||
| 208 | - } | ||
| 209 | - return steps?.toString() | ||
| 210 | } | 207 | } |
| 211 | 208 | ||
| 212 | /** | 209 | /** |
| ... | @@ -450,7 +447,7 @@ onMounted(async () => { | ... | @@ -450,7 +447,7 @@ onMounted(async () => { |
| 450 | 447 | ||
| 451 | .crown { | 448 | .crown { |
| 452 | font-size: 40rpx; | 449 | font-size: 40rpx; |
| 453 | - margin-bottom: 10rpx; | 450 | + // margin-bottom: 10rpx; |
| 454 | 451 | ||
| 455 | &.crown-gold { | 452 | &.crown-gold { |
| 456 | filter: grayscale(0.3) brightness(1.1); | 453 | filter: grayscale(0.3) brightness(1.1); | ... | ... |
-
Please register or login to post a comment