feat(排行榜): 重构排行榜接口和组件以支持多类型数据

修改API接口参数从current_county变为type参数，支持上海家庭榜、区县家庭榜和单位助力榜移除mock数据，统一使用接口返回数据更新组件逻辑以适应新的数据结构

feat(排行榜): 重构排行榜接口和组件以支持多类型数据
修改API接口参数从current_county变为type参数，支持上海家庭榜、区县家庭榜和单位助力榜移除mock数据，统一使用接口返回数据更新组件逻辑以适应新的数据结构
hookehuyr
Commit 6e47b5a455d70a8c0138ac87511a0e80d7dddaef 6e47b5a4 1 parent 63ac39b3
Showing 3 changed files with 84 additions and 225 deletions
src/api/points.js
src/components/RankingCard.vue
src/pages/FamilyRank/index.vue
--- a/src/api/points.js
View file @6e47b5a
+++ b/src/api/points.js
View file @6e47b5a
 /*
  * @Date: 2023-12-22 10:29:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-09 14:56:34
+ * @LastEditTime: 2025-09-18 17:23:51
  * @FilePath: /lls_program/src/api/points.js
  * @Description: 文件描述
  */
@@ -51,24 +51,24 @@ export const getPointListAPI = (params) => fn(fetch.get(Api.POINT_LIST, params))
 /**
  * @description: 查询步数排行榜, 数据长度为10个, 不加上county参数查询的是上海数据, 数据长度是20个, 都是固定长度.
  * @param {Object} params - 请求参数
- * @param {string} params.current_county - 是否只查我的当前家庭所在区县的排行榜。1=是，0=否。默认为否
+ * @param {string} params.type - shanghai_family=上海家庭步数榜，county_family=和我同区县的家庭步数榜，institution=单位助力榜
  * @returns {Object} response - 响应对象
  * @returns {number} response.code - 响应状态码
  * @returns {string} response.msg - 响应消息
  * @returns {Object} response.data - 响应数据
  * @returns {Array} response.data.yesterday - 昨天日期
- * @returns {Array} response.data.families[] - 家庭列表
+ * @returns {Array} response.data.families[] - 家庭列表, 也可以是单位列表
- * @returns {string} response.data.families[].family_id - 家庭ID
+ * @returns {string} response.data.families[].family_id - 家庭ID, 也可以是单位ID
- * @returns {string} response.data.families[].name - 家庭名称
+ * @returns {string} response.data.families[].name - 家庭名称, 也可以是单位名称
- * @returns {string} response.data.families[].avatar_url - 头像URL
+ * @returns {string} response.data.families[].avatar_url - 头像URL, 也可以是单位头像
- * @returns {string} response.data.families[].created_by_nickname - 创建人昵称
+ * @returns {string} response.data.families[].created_by_nickname - 创建人昵称, 也可以是家庭数量
  * @returns {number} response.data.families[].step - 步数
  * @returns {number} response.data.families[].rank - 排名
  * @returns {Array} response.data.current_family[] - 当前家庭列表
- * @returns {string} response.data.current_family[].family_id - 家庭ID
+ * @returns {string} response.data.current_family[].family_id - 家庭ID, 也可以是单位ID
- * @returns {string} response.data.current_family[].name - 家庭名称
+ * @returns {string} response.data.current_family[].name - 家庭名称, 也可以是单位名称
- * @returns {string} response.data.current_family[].avatar_url - 头像URL
+ * @returns {string} response.data.current_family[].avatar_url - 头像URL, 也可以是单位头像
- * @returns {string} response.data.current_family[].created_by_nickname - 创建人昵称
+ * @returns {string} response.data.current_family[].created_by_nickname - 创建人昵称, 也可以是家庭数量
  * @returns {number} response.data.current_family[].step - 步数
  * @returns {number} response.data.current_family[].rank - 排名
  * @returns {number} response.data.current_family[].country - 区县
--- a/src/components/RankingCard.vue
View file @6e47b5a
+++ b/src/components/RankingCard.vue
View file @6e47b5a
 <!--
  * @Date: 2025-01-09 00:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-18 17:09:27
+ * @LastEditTime: 2025-09-18 17:39:14
  * @FilePath: /lls_program/src/components/RankingCard.vue
  * @Description: 排行榜卡片组件
 -->
@@ -56,10 +56,10 @@
             <image :src="activeTab === 'support' ? (topRanks[1]?.logo || defaultAvatar) : (topRanks[1]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
           </view>
           <view class="family-name">{{ activeTab === 'support' ? topRanks[1]?.name : topRanks[1]?.name }}</view>
-          <view class="leader-name">{{ activeTab === 'support' ? `${topRanks[1]?.family_count}个家庭` : `大家长：${topRanks[1]?.created_by_nickname}` }}</view>
+          <view class="leader-name">{{ activeTab === 'support' ? `${topRanks[1]?.created_by_nickname}个家庭` : `大家长：${topRanks[1]?.created_by_nickname}` }}</view>
           <view class="rank-number">
             <view class="rank-num">2</view>
-            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topRanks[1]?.total_steps) : formatSteps(topRanks[1]?.step) }}</view>
+            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topRanks[1]?.step) : formatSteps(topRanks[1]?.step) }}</view>
           </view>
         </view>
@@ -72,10 +72,10 @@
             <image :src="activeTab === 'support' ? (topRanks[0]?.logo || defaultAvatar) : (topRanks[0]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
           </view>
           <view class="family-name">{{ topRanks[0]?.name }}</view>
-          <view class="leader-name">{{ activeTab === 'support' ? `${topRanks[0]?.family_count}个家庭` : `大家长：${topRanks[0]?.created_by_nickname}` }}</view>
+          <view class="leader-name">{{ activeTab === 'support' ? `${topRanks[0]?.created_by_nickname}个家庭` : `大家长：${topRanks[0]?.created_by_nickname}` }}</view>
           <view class="rank-number">
             <view class="rank-num">1</view>
-            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topRanks[0]?.total_steps) : formatSteps(topRanks[0]?.step) }}</view>
+            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topRanks[0]?.step) : formatSteps(topRanks[0]?.step) }}</view>
           </view>
         </view>
@@ -88,10 +88,10 @@
             <image :src="activeTab === 'support' ? (topRanks[2]?.logo || defaultAvatar) : (topRanks[2]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
           </view>
           <view class="family-name">{{ topRanks[2]?.name }}</view>
-          <view class="leader-name">{{ activeTab === 'support' ? `${topRanks[2]?.family_count}个家庭` : `大家长：${topRanks[2]?.created_by_nickname}` }}</view>
+          <view class="leader-name">{{ activeTab === 'support' ? `${topRanks[2]?.created_by_nickname}个家庭` : `大家长：${topRanks[2]?.created_by_nickname}` }}</view>
           <view class="rank-number">
             <view class="rank-num">3</view>
-            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topRanks[2]?.total_steps) : formatSteps(topRanks[2]?.step) }}</view>
+            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topRanks[2]?.step) : formatSteps(topRanks[2]?.step) }}</view>
           </view>
         </view>
       </view>
@@ -157,62 +157,8 @@ const isContentSwitching = ref(false)
 // 排行榜数据
 const leaderboardData = ref(null)
-// 助力榜mock数据
+// 助力榜数据
-const supportData = ref({
+const supportData = ref(null)
-  yesterday: '2024年1月15日',
-  kindergartens: [
-    {
-      id: 1,
-      name: '阳光幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 156,
-      total_steps: 430000
-    },
-    {
-      id: 2,
-      name: '彩虹幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 142,
-      total_steps: 380000
-    },
-    {
-      id: 3,
-      name: '小星星幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 128,
-      total_steps: 320000
-    },
-    {
-      id: 4,
-      name: '快乐幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 115,
-      total_steps: 280000
-    },
-    {
-      id: 5,
-      name: '智慧幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 98,
-      total_steps: 250000
-    },
-    {
-      id: 6,
-      name: '梦想幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 87,
-      total_steps: 220000
-    }
-  ],
-  current_kindergarten: {
-    id: 7,
-    name: '我的幼儿园',
-    logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-    family_count: 45,
-    total_steps: 120000,
-    rank: 8
-  }
-})
 const joinOrganization = () => {
   Taro.navigateTo({
@@ -226,6 +172,8 @@ const loading = ref(false)
 // 排行榜日期
 const currentDate = ref('')
+
+
 /**
  * 切换tab
  * @param {string} tab - tab名称
@@ -233,25 +181,6 @@ const currentDate = ref('')
 const switchTab = async (tab) => {
   if (activeTab.value === tab) return
-  // 助力榜使用mock数据
-  if (tab === 'support') {
-    // 开始切换动画
-    isContentSwitching.value = true
-
-    // 延迟切换内容，让淡出动画先执行
-    setTimeout(() => {
-      activeTab.value = tab
-      // 设置助力榜的日期
-      currentDate.value = supportData.value.yesterday
-
-      // 内容切换后，结束切换状态，开始淡入动画
-      setTimeout(() => {
-        isContentSwitching.value = false
-      }, 50)
-    }, 200)
-    return
-  }
-
   // 开始切换动画
   isContentSwitching.value = true
@@ -278,13 +207,22 @@ const loadLeaderboardData = async (isInitialLoad = false) => {
     loading.value = true
     const params = {}
-    // 添加current_county参数：1=是，0=否，默认为否
+    // 根据activeTab设置type参数
-    // 根据activeTab动态设置：上海榜时为0，区域榜时为1
+    if (activeTab.value === 'shanghai') {
-    params.current_county = activeTab.value === 'shanghai' ? '0' : '1'
+      params.type = 'shanghai_family'
+    } else if (activeTab.value === 'support') {
+      params.type = 'institution'
+    } else {
+      params.type = 'county_family'
+    }
     const response = await getStepLeaderboardAPI(params)
     if (response.code) {
-      leaderboardData.value = response.data
+      if (activeTab.value === 'support') {
+        supportData.value = response.data
+      } else {
+        leaderboardData.value = response.data
+      }
       // 设置当前日期
       currentDate.value = response.data.yesterday
     }
@@ -393,10 +331,10 @@ const handleViewMore = () => {
 const topRanks = computed(() => {
   if (activeTab.value === 'support') {
     // 助力榜数据
-    if (!supportData.value || !supportData.value.kindergartens) {
+    if (!supportData.value || !supportData.value.families) {
       return []
     }
-    return supportData.value.kindergartens.slice(0, 3)
+    return supportData.value.families.slice(0, 3)
   }
   // 家庭排行榜数据
@@ -409,20 +347,18 @@ const topRanks = computed(() => {
 // 计算我的排名信息
 const myRank = computed(() => {
   if (activeTab.value === 'support') {
-    // 助力榜我的幼儿园信息
+    // 助力榜我的单位信息
-    if (!supportData.value || !supportData.value.current_kindergarten) {
+    if (!supportData.value || !supportData.value.current_family) {
       return null
     }
-    const currentKindergarten = supportData.value.current_kindergarten
+    const currentInstitution = supportData.value.current_family
     return {
-      ...currentKindergarten,
+      ...currentInstitution,
-      name: currentKindergarten.name,
+      name: currentInstitution.name,
-      avatar_url: currentKindergarten.logo,
+      avatar_url: currentInstitution.avatar_url,
-      step: currentKindergarten.total_steps,
+      step: currentInstitution.step,
-      created_by_nickname: `${currentKindergarten.family_count}个家庭`,
+      rank: currentInstitution.rank
-      status: currentKindergarten.rank > 100 ? '未上榜' : '已上榜',
-      isNotRanked: !currentKindergarten.rank || currentKindergarten.rank === 0 || currentKindergarten.rank > 100
     }
   }
--- a/src/pages/FamilyRank/index.vue
View file @6e47b5a
+++ b/src/pages/FamilyRank/index.vue
View file @6e47b5a
 <!--
  * @Date: 2025-09-01 13:07:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-18 16:56:23
+ * @LastEditTime: 2025-09-18 17:38:03
  * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
  * @Description: 文件描述
 -->
@@ -56,10 +56,10 @@
             <image :src="activeTab === 'support' ? topThreeData[1]?.logo : (topThreeData[1]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
           </view>
           <view class="family-name">{{ topThreeData[1]?.name }}</view>
-          <view class="leader-name">{{ activeTab === 'support' ? `${topThreeData[1]?.family_count}个家庭` : `大家长：${topThreeData[1]?.created_by_nickname}` }}</view>
+          <view class="leader-name">{{ activeTab === 'support' ? `${topThreeData[1]?.created_by_nickname}个家庭` : `大家长：${topThreeData[1]?.created_by_nickname}` }}</view>
           <view class="rank-number">
             <view class="rank-num">2</view>
-            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topThreeData[1]?.total_steps) : formatSteps(topThreeData[1]?.step) }}</view>
+            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topThreeData[1]?.step) : formatSteps(topThreeData[1]?.step) }}</view>
           </view>
         </view>
@@ -72,10 +72,10 @@
             <image :src="activeTab === 'support' ? topThreeData[0]?.logo : (topThreeData[0]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
           </view>
           <view class="family-name">{{ topThreeData[0]?.name }}</view>
-          <view class="leader-name">{{ activeTab === 'support' ? `${topThreeData[0]?.family_count}个家庭` : `大家长：${topThreeData[0]?.created_by_nickname}` }}</view>
+          <view class="leader-name">{{ activeTab === 'support' ? `${topThreeData[0]?.created_by_nickname}个家庭` : `大家长：${topThreeData[0]?.created_by_nickname}` }}</view>
           <view class="rank-number">
             <view class="rank-num">1</view>
-            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topThreeData[0]?.total_steps) : formatSteps(topThreeData[0]?.step) }}</view>
+            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topThreeData[0]?.step) : formatSteps(topThreeData[0]?.step) }}</view>
           </view>
         </view>
@@ -88,10 +88,10 @@
             <image :src="activeTab === 'support' ? topThreeData[2]?.logo : (topThreeData[2]?.avatar_url || defaultAvatar)" class="avatar-img" mode="aspectFill" />
           </view>
           <view class="family-name">{{ topThreeData[2]?.name }}</view>
-          <view class="leader-name">{{ activeTab === 'support' ? `${topThreeData[2]?.family_count}个家庭` : `大家长：${topThreeData[2]?.created_by_nickname}` }}</view>
+          <view class="leader-name">{{ activeTab === 'support' ? `${topThreeData[2]?.created_by_nickname}个家庭` : `大家长：${topThreeData[2]?.created_by_nickname}` }}</view>
           <view class="rank-number">
             <view class="rank-num">3</view>
-            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topThreeData[2]?.total_steps) : formatSteps(topThreeData[2]?.step) }}</view>
+            <view class="steps-in-rank">{{ activeTab === 'support' ? formatSupportSteps(topThreeData[2]?.step) : formatSteps(topThreeData[2]?.step) }}</view>
           </view>
         </view>
       </view>
@@ -106,15 +106,15 @@
           <view class="rank-info">
             <view class="rank-num">{{ index + 4 }}</view>
             <view class="avatar-small">
-              <image :src="activeTab === 'support' ? item.logo : (item.avatar_url || defaultAvatar)" class="avatar-small-img" mode="aspectFill" />
+              <image :src="activeTab === 'support' ? item.avatar_url : (item.avatar_url || defaultAvatar)" class="avatar-small-img" mode="aspectFill" />
             </view>
             <view class="family-info">
               <view class="family-name-small">{{ item.name }}</view>
-              <view class="leader-name-small">{{ activeTab === 'support' ? `${item.family_count}个家庭` : `大家长：${item.created_by_nickname}` }}</view>
+              <view class="leader-name-small">{{ activeTab === 'support' ? `${item.created_by_nickname}个家庭` : `大家长：${item.created_by_nickname}` }}</view>
             </view>
           </view>
           <view class="steps-info">
-            <view class="steps">{{ activeTab === 'support' ? formatSupportSteps(item.total_steps) : formatStepsForList(item.step) }}</view>
+            <view class="steps">{{ activeTab === 'support' ? formatSupportSteps(item.step) : formatStepsForList(item.step) }}</view>
           </view>
         </view>
       </view>
@@ -180,76 +180,8 @@ const isContentSwitching = ref(false)
 // 排行榜数据
 const leaderboardData = ref(null)
-// 助力榜mock数据
+// 助力榜数据
-const supportData = ref({
+const supportData = ref(null)
-  yesterday: '2024年1月15日',
-  kindergartens: [
-    {
-      id: 1,
-      name: '阳光幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 156,
-      total_steps: 430000
-    },
-    {
-      id: 2,
-      name: '彩虹幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 142,
-      total_steps: 380000
-    },
-    {
-      id: 3,
-      name: '小星星幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 128,
-      total_steps: 320000
-    },
-    {
-      id: 4,
-      name: '快乐幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 115,
-      total_steps: 280000
-    },
-    {
-      id: 5,
-      name: '智慧幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 98,
-      total_steps: 250000
-    },
-    {
-      id: 6,
-      name: '梦想幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 87,
-      total_steps: 220000
-    },
-    {
-      id: 7,
-      name: '未来幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 76,
-      total_steps: 190000
-    },
-    {
-      id: 8,
-      name: '希望幼儿园',
-      logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-      family_count: 65,
-      total_steps: 160000
-    }
-  ],
-  current_kindergarten: {
-    id: 9,
-    name: '我的幼儿园',
-    logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
-    family_count: 45,
-    total_steps: 120000,
-    rank: 10
-  }
-})
 const joinOrganization = () => {
   Taro.navigateTo({
@@ -263,6 +195,8 @@ const loading = ref(false)
 // 当前日期
 const currentDate = ref('')
+
+
 /**
  * 切换tab
  * @param {string} tab - tab名称
@@ -270,25 +204,6 @@ const currentDate = ref('')
 const switchTab = async (tab) => {
   if (activeTab.value === tab) return
-  // 助力榜使用mock数据
-  if (tab === 'support') {
-    // 开始切换动画
-    isContentSwitching.value = true
-
-    // 延迟切换内容，让淡出动画先执行
-    setTimeout(() => {
-      activeTab.value = tab
-      // 设置助力榜的日期
-      currentDate.value = supportData.value.yesterday
-
-      // 内容切换后，结束切换状态，开始淡入动画
-      setTimeout(() => {
-        isContentSwitching.value = false
-      }, 50)
-    }, 200)
-    return
-  }
-
   // 开始切换动画
   isContentSwitching.value = true
@@ -349,13 +264,22 @@ const loadLeaderboardData = async (isInitialLoad = false) => {
     loading.value = true
     const params = {}
-    // 添加current_county参数：1=是，0=否，默认为否
+    // 根据activeTab设置type参数
-    // 根据activeTab动态设置：上海榜时为0，区域榜时为1
+    if (activeTab.value === 'shanghai') {
-    params.current_county = activeTab.value === 'shanghai' ? '0' : '1'
+      params.type = 'shanghai_family'
+    } else if (activeTab.value === 'support') {
+      params.type = 'institution'
+    } else {
+      params.type = 'county_family'
+    }
     const response = await getStepLeaderboardAPI(params)
     if (response.code) {
-      leaderboardData.value = response.data
+      if (activeTab.value === 'support') {
+        supportData.value = response.data
+      } else {
+        leaderboardData.value = response.data
+      }
       currentDate.value = response.data.yesterday
     }
   } catch (error) {
@@ -422,10 +346,10 @@ const getTabDisplayName = (region) => {
 const topThreeData = computed(() => {
   if (activeTab.value === 'support') {
     // 助力榜数据
-    if (!supportData.value || !supportData.value.kindergartens) {
+    if (!supportData.value || !supportData.value.families) {
       return []
     }
-    return supportData.value.kindergartens.slice(0, 3)
+    return supportData.value.families.slice(0, 3)
   }
   // 家庭排行榜数据
@@ -441,10 +365,10 @@ const topThreeData = computed(() => {
 const otherRankData = computed(() => {
   if (activeTab.value === 'support') {
     // 助力榜数据
-    if (!supportData.value || !supportData.value.kindergartens) {
+    if (!supportData.value || !supportData.value.families) {
       return []
     }
-    return supportData.value.kindergartens.slice(3)
+    return supportData.value.families.slice(3)
   }
   // 家庭排行榜数据
@@ -459,19 +383,18 @@ const otherRankData = computed(() => {
  */
 const myRankInfo = computed(() => {
   if (activeTab.value === 'support') {
-    // 助力榜我的幼儿园信息
+    // 助力榜我的单位信息
-    if (!supportData.value || !supportData.value.current_kindergarten) {
+    if (!supportData.value || !supportData.value.current_family) {
       return null
     }
-    const currentKindergarten = supportData.value.current_kindergarten
+    const currentInstitution = supportData.value.current_family
     return {
-      ...currentKindergarten,
+      ...currentInstitution,
-      family_name: currentKindergarten.name,
+      name: currentInstitution.name,
-      avatar_url: currentKindergarten.logo,
+      avatar_url: currentInstitution.avatar_url,
-      step: currentKindergarten.total_steps,
+      step: currentInstitution.step,
-      created_by_nickname: `${currentKindergarten.family_count}个家庭`,
+      rank: currentInstitution.rank
-      isNotRanked: !currentKindergarten.rank || currentKindergarten.rank === 0 || currentKindergarten.rank > 100
     }
   }