From f2c71c1597abe843c0d79f1c7532e76093427a88 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Mon, 29 Sep 2025 20:56:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E6=8E=92?=
 =?UTF-8?q?=E8=A1=8C=E6=A6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ranking.js            |  37 ++++++
 src/views/Ranking/Ranking.vue | 230 +++++++++++++++++++++++-----------
 2 files changed, 197 insertions(+), 70 deletions(-)
 create mode 100644 src/api/ranking.js

diff --git a/src/api/ranking.js b/src/api/ranking.js
new file mode 100644
index 0000000..125d931
--- /dev/null
+++ b/src/api/ranking.js
@@ -0,0 +1,37 @@
+import { get, post } from '../utils/http.js'
+
+// 获取财富榜
+export const getWealthRanking = async () => {
+  try {
+    const response = await get(`/activity/leaderboard/gifts-send`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get wealth ranking:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取魅力榜
+export const getCharmRanking = async () => {
+  try {
+    const response = await get(`/activity/leaderboard/gifts-received`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get charm ranking:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取房间榜
+export const getRoomRanking = async () => {
+  try {
+    const response = await get(`/activity/leaderboard/room-gifts`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get room ranking:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
diff --git a/src/views/Ranking/Ranking.vue b/src/views/Ranking/Ranking.vue
index e553924..c40ab4e 100644
--- a/src/views/Ranking/Ranking.vue
+++ b/src/views/Ranking/Ranking.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="fullPage" :style="{ backgroundColor, backgroundImage }">
-    <div ref="sentinel"></div>
     <!-- 哨兵元素 -->
+    <div ref="sentinel"></div>
 
     <!-- 粘性布局贴顶部 -->
     <div
@@ -102,7 +102,7 @@
     </div>
 
     <!-- 排行榜模块 -->
-    <div>
+    <div style="padding: 10px 0">
       <!-- 前3名 -->
       <div style="margin: 3% 10px 0">
         <!-- 第一 -->
@@ -111,9 +111,9 @@
             :isRoom="rankingType === 'Room'"
             :isTopOne="true"
             :BorderImgUrl="topBorderBg"
-            avatarUrl=""
-            name="aaaa"
-            distributionValue="11111"
+            :avatarUrl="RankingTop3[0].avatar || ''"
+            :name="RankingTop3[0].nickname || ''"
+            :distributionValue="RankingTop3[0].quantityFormat || ''"
             style="width: 40%"
           />
         </div>
@@ -122,17 +122,17 @@
           <TopUser
             :isRoom="rankingType === 'Room'"
             :BorderImgUrl="top2BorderBg"
-            avatarUrl=""
-            name="aaaa"
-            distributionValue="11111"
+            :avatarUrl="RankingTop3[1].avatar || ''"
+            :name="RankingTop3[1].nickname || ''"
+            :distributionValue="RankingTop3[1].quantityFormat || ''"
             style="width: 30%"
           />
           <TopUser
             :isRoom="rankingType === 'Room'"
             :BorderImgUrl="top3BorderBg"
-            avatarUrl=""
-            name="aaaa"
-            distributionValue="11111"
+            :avatarUrl="RankingTop3[2].avatar || ''"
+            :name="RankingTop3[2].nickname || ''"
+            :distributionValue="RankingTop3[2].quantityFormat || ''"
             style="width: 30%"
           />
         </div>
@@ -141,7 +141,8 @@
       <!-- 第四名开始 -->
       <div style="margin: 3% 10px 0">
         <div
-          v-for="value in 9"
+          v-for="(userInfo, index) in RankingFromTop4"
+          :key="userInfo.id"
           style="
             border-radius: 12px;
             backdrop-filter: blur(32px);
@@ -154,12 +155,18 @@
           :style="{ background: rankItemBackground, border: '1px ' + rankItemBorder }"
         >
           <div style="display: flex; align-items: center; width: 70%">
-            <div style="font-weight: 700">999</div>
+            <div style="font-weight: 700">{{ index + 4 }}</div>
             <img
-              src=""
+              :src="userInfo.avatar"
               alt=""
               width="20%"
-              style="display: block; aspect-ratio: 1/1; margin: 0 4px"
+              style="
+                display: block;
+                border-radius: 50%;
+                object-fit: cover;
+                aspect-ratio: 1/1;
+                margin: 0 4px;
+              "
               :style="{ borderRadius: rankingType === 'Room' ? '0' : '50%' }"
               @error="defaultAvatarUrl"
             />
@@ -171,7 +178,7 @@
                 text-overflow: ellipsis;
               "
             >
-              aaaaaaaaaaaa
+              {{ userInfo.nickname }}
             </div>
           </div>
           <div style="display: flex; align-items: center; width: 30%">
@@ -190,67 +197,70 @@
                 text-overflow: ellipsis;
               "
             >
-              123456789
+              {{ userInfo.quantityFormat }}
             </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
 
-    <!-- 我的排名 -->
-    <div style="position: sticky; bottom: 0; z-index: 999; padding: 0 1px; width: 100%">
-      <div
-        style="
-          border-radius: 12px 12px 0 0;
-          border-top: 2px solid #ffa166;
-          border-right: 1px solid #ffa166;
-          border-left: 1px solid #ffa166;
-          backdrop-filter: blur(32px);
-          padding: 12px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        "
-        :style="{
-          background: rankItemBackground,
-          borderTop: '2px ' + rankItemBorder,
-          borderLeft: '1px ' + rankItemBorder,
-          borderRight: '1px ' + rankItemBorder,
-        }"
-      >
-        <div style="display: flex; align-items: center; width: 70%">
-          <div style="font-weight: 700">999</div>
-          <img
-            src=""
-            alt=""
-            width="20%"
-            style="display: block; aspect-ratio: 1/1; margin: 0 4px"
-            @error="defaultAvatarUrl"
-          />
-          <div
-            style="font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
-          >
-            aaaaaaaaaaaa
-          </div>
+  <!-- 我的排名 -->
+  <div
+    style="position: sticky; bottom: 0; z-index: 999; padding: 0 1px; width: 100%"
+    :style="{ backgroundColor }"
+  >
+    <div
+      style="
+        border-radius: 12px 12px 0 0;
+        border-top: 2px solid #ffa166;
+        border-right: 1px solid #ffa166;
+        border-left: 1px solid #ffa166;
+        backdrop-filter: blur(32px);
+        padding: 12px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      "
+      :style="{
+        background: rankItemBackground,
+        borderTop: '2px ' + rankItemBorder,
+        borderLeft: '1px ' + rankItemBorder,
+        borderRight: '1px ' + rankItemBorder,
+      }"
+    >
+      <div style="display: flex; align-items: center; width: 70%">
+        <div style="font-weight: 700">999</div>
+        <img
+          src=""
+          alt=""
+          width="20%"
+          style="display: block; aspect-ratio: 1/1; margin: 0 4px"
+          @error="defaultAvatarUrl"
+        />
+        <div
+          style="font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
+        >
+          aaaaaaaaaaaa
         </div>
-        <div style="display: flex; align-items: center; width: 30%">
-          <img
-            src="/src/assets/icon/coin.png"
-            alt=""
-            width="20%"
-            style="display: block; aspect-ratio: 1/1"
-          />
-          <div
-            style="
-              font-weight: 500;
-              color: rgba(248, 182, 45, 1);
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-            "
-          >
-            123456789
-          </div>
+      </div>
+      <div style="display: flex; align-items: center; width: 30%">
+        <img
+          src="/src/assets/icon/coin.png"
+          alt=""
+          width="20%"
+          style="display: block; aspect-ratio: 1/1"
+        />
+        <div
+          style="
+            font-weight: 500;
+            color: rgba(248, 182, 45, 1);
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          "
+        >
+          123456789
         </div>
       </div>
     </div>
@@ -261,6 +271,7 @@
 import { isInApp, closePage } from '@/utils/appBridge.js'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 import TopUser from '@/components/Ranking/topUser.vue'
+import { getWealthRanking, getCharmRanking, getRoomRanking } from '@/api/ranking'
 
 //vite动态批量导入图片
 const imageModules = import.meta.glob('@/assets/images/Ranking/*.{png,jpg,svg}', { eager: true })
@@ -276,6 +287,65 @@ const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 const rankingType = ref('Wealth') //榜单类型
 const selectedTimeTab = ref('Hourly') //时间标签
 
+const totalRanking = ref({})
+const showRanking = ref([])
+
+const updateTimeRanking = () => {
+  console.log('updateTimeRanking()')
+
+  if (selectedTimeTab.value == 'Hourly' && totalRanking.value.hourly) {
+    showRanking.value = totalRanking.value.hourly
+    console.log('showRanking.value:', showRanking.value)
+  } else if (selectedTimeTab.value == 'Daily' && totalRanking.value.daily) {
+    showRanking.value = totalRanking.value.daily
+  } else if (selectedTimeTab.value == 'Weekly' && totalRanking.value.weekly) {
+    showRanking.value = totalRanking.value.weekly
+  } else if (selectedTimeTab.value == 'Monthly' && totalRanking.value.monthly) {
+    showRanking.value = totalRanking.value.monthly
+  }
+}
+
+watch(
+  () => rankingType.value,
+  () => {
+    console.log('监听到rankingType.value变化')
+    totalRanking.value = {}
+    showRanking.value = []
+    // 获取榜单
+    getRanking()
+  }
+)
+
+watch(
+  () => selectedTimeTab.value,
+  () => {
+    console.log('监听到selectedTimeTab.value变化')
+    showRanking.value = []
+    updateTimeRanking() //刷新展示榜单
+  }
+)
+
+// 前三名榜单
+const RankingTop3 = computed(() => {
+  console.log('刷新RankingTop3')
+
+  let RankingShow = [...showRanking.value]
+  if (showRanking.value.length < 3) {
+    let addNullUser = Array.from({ length: 3 - showRanking.value.length }, () => ({
+      avatar: '',
+      nickname: '',
+      quantityFormat: '',
+    }))
+    RankingShow.push(...addNullUser)
+  }
+  return RankingShow
+})
+
+// 从第四名开始榜单
+const RankingFromTop4 = computed(() => {
+  return showRanking.value.filter((_, index) => index >= 3)
+})
+
 // 动态样式
 const backgroundColor = ref('') //页面
 const backgroundImage = ref('') //页面
@@ -351,10 +421,30 @@ const observer = new IntersectionObserver((entries) => {
   })
 })
 
+const getRanking = async () => {
+  console.log('获取榜单')
+
+  let resRanking = {}
+  if (rankingType.value == 'Wealth') {
+    resRanking = await getWealthRanking()
+  } else if (rankingType.value == 'Charm') {
+    resRanking = await getCharmRanking()
+  } else if (rankingType.value == 'Room') {
+    resRanking = await getRoomRanking()
+  }
+  if (resRanking.status && resRanking.body) {
+    totalRanking.value = resRanking.body
+    updateTimeRanking()
+  }
+}
+
 onMounted(() => {
   isInAppEnvironment.value = isInApp()
 
   observer.observe(sentinel.value)
+
+  // 获取榜单
+  getRanking()
 })
 </script>