feat(排行榜): 添加排行榜须知提示功能

在排行榜卡片和家庭排行榜页面添加问号图标，点击显示关于步数统计规则的提示对话框

feat(排行榜): 添加排行榜须知提示功能
在排行榜卡片和家庭排行榜页面添加问号图标，点击显示关于步数统计规则的提示对话框
hookehuyr
Commit 5446d5649d538af3351e0c3b2461c93669c141f4 5446d564 1 parent 7611c5c8
Showing 2 changed files with 65 additions and 6 deletions
src/components/RankingCard.vue
src/pages/FamilyRank/index.vue
--- a/src/components/RankingCard.vue
View file @5446d56
+++ b/src/components/RankingCard.vue
View file @5446d56
 <!--
  * @Date: 2025-01-09 00:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-28 14:54:31
+ * @LastEditTime: 2025-10-09 15:57:25
  * @FilePath: /lls_program/src/components/RankingCard.vue
  * @Description: 排行榜卡片组件
 -->
@@ -42,7 +42,7 @@
     <view class="rank-content" :class="{ 'content-switching': isContentSwitching }">
       <!-- 排行榜日期 -->
       <view class="rank-date relative">
-        {{ currentDate }}
+        <view class="flex items-center justify-center">{{ currentDate }} <IconFont name="ask" size="16" class="ml-2" @click="handleRankAskClick"></IconFont></view>
         <view v-if="activeTab === 'support'" class="absolute font-bold text-white bg-orange-500 top-0 rounded-full px-4 py-1" style="right: 30rpx; font-size: 23rpx;" @tap="joinOrganization">助力码</view>
       </view>
@@ -129,6 +129,27 @@
         </view>
       </view>
     </view>
+
+    <!-- 步数排行榜须知对话框 -->
+    <nut-dialog
+        v-model:visible="showRankTipDialog"
+        title="温馨提示"
+    >
+        <template #default>
+            <view class="text-gray-700 leading-loose text-sm text-left">为确保公平，排行榜将根据步数被系统成功记录和收集的日期进行统计，而非用户实际行走的日期。</view>
+        </template>
+        <template #footer>
+            <nut-button
+                @click="showRankTipDialog = false"
+                type="primary"
+                size="normal"
+                :color="THEME_COLORS.PRIMARY"
+                block
+            >
+                我知道了
+            </nut-button>
+        </template>
+    </nut-dialog>
   </view>
 </template>
@@ -142,6 +163,8 @@ const defaultAvatar = 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%A8%E5%AE%B6
 const supportImg = 'https://cdn.ipadbiz.cn/lls_prog/images/support_img_1.png'
 // 导入接口
 import { getStepLeaderboardAPI } from '@/api/points'
+// 导入主题颜色
+import { THEME_COLORS } from '@/utils/config';
 // 区域信息
 import { SHANGHAI_REGION as shanghaiRegion } from '@/utils/config'
@@ -338,7 +361,13 @@ const handleViewMore = () => {
   }
 }
-
+/**
+ * 处理排行榜须知点击事件
+ */
+const showRankTipDialog = ref(false)
+const handleRankAskClick = () => {
+  showRankTipDialog.value = true
+}
 // 计算前三名数据
 const topRanks = computed(() => {
--- a/src/pages/FamilyRank/index.vue
View file @5446d56
+++ b/src/pages/FamilyRank/index.vue
View file @5446d56
 <!--
  * @Date: 2025-09-01 13:07:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-28 16:43:09
+ * @LastEditTime: 2025-10-09 16:00:24
  * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
  * @Description: 文件描述
 -->
@@ -40,7 +40,7 @@
       <!-- 排行榜日期 -->
       <view v-if="!loading" class="rank-date relative">
-        {{ currentDate }}
+        <view class="flex items-center justify-center">{{ currentDate }} <IconFont name="ask" size="14" class="ml-2" @click="handleRankAskClick"></IconFont></view>
         <view v-if="activeTab === 'support'" class="absolute font-bold text-white bg-orange-500 top-0 rounded-full px-4 py-1" style="right: 70rpx; font-size: 23rpx;" @tap="joinOrganization">助力码</view>
       </view>
@@ -160,6 +160,27 @@
       </view>
     </view>
+    <!-- 步数排行榜须知对话框 -->
+    <nut-dialog
+        v-model:visible="showRankTipDialog"
+        title="温馨提示"
+    >
+        <template #default>
+            <view class="text-gray-700 leading-loose text-sm text-left">为确保公平，排行榜将根据步数被系统成功记录和收集的日期进行统计，而非用户实际行走的日期。</view>
+        </template>
+        <template #footer>
+            <nut-button
+                @click="showRankTipDialog = false"
+                type="primary"
+                size="normal"
+                :color="THEME_COLORS.PRIMARY"
+                block
+            >
+                我知道了
+            </nut-button>
+        </template>
+    </nut-dialog>
+
     <!-- 返回顶部组件 -->
     <BackToTop :distance="200" />
   </view>
@@ -168,12 +189,15 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import Taro from '@tarojs/taro'
+import { IconFont } from '@nutui/icons-vue-taro';
 import BackToTop from '@/components/BackToTop.vue'
 // 默认头像
 const defaultAvatar = 'https://cdn.ipadbiz.cn/lls_prog/images/%E5%85%A8%E5%AE%B6%E7%A6%8F3_%E5%89%AF%E6%9C%AC.jpg?imageMogr2/strip/quality/60'
 const supportImg = 'https://cdn.ipadbiz.cn/lls_prog/images/support_img_1.png'
 // 导入接口
 import { getStepLeaderboardAPI } from '@/api/points'
+// 导入主题颜色
+import { THEME_COLORS } from '@/utils/config';
 // 区域信息
 import { SHANGHAI_REGION as shanghaiRegion } from '@/utils/config'
@@ -209,7 +233,13 @@ const loading = ref(false)
 // 当前日期
 const currentDate = ref('')
-
+/**
+ * 处理排行榜须知点击事件
+ */
+const showRankTipDialog = ref(false)
+const handleRankAskClick = () => {
+  showRankTipDialog.value = true
+}
 /**
  * 切换tab