feat(排行榜): 对接我的排名接口

src/api/ranking.js

@@ -37,9 +37,9 @@ export const getRoomRanking = async () => {
 }
 
 // 获取我的排名
-export const getMyRanking = async () => {
+export const getMyRanking = async (type, dateType) => {
   try {
-    const response = await get(`/activity/leaderboard/my-rank`)
+    const response = await get(`/activity/leaderboard/my-rank?type=${type}&dateType=${dateType}`)
     return response
   } catch (error) {
     console.error('Failed to fetch get my ranking:', error)

src/views/Ranking/Ranking.vue

@@ -23,7 +23,7 @@
         <div style="display: flex; justify-content: space-around; position: relative">
           <div
             class="tab"
-            @click="rankingType = 'Wealth'"
+            @click="changeType('Wealth')"
             style=""
             :style="{ color: rankingType == 'Wealth' ? '#FFB760' : '#fff' }"
           >
@@ -31,7 +31,7 @@
           </div>
           <div
             class="tab"
-            @click="rankingType = 'Charm'"
+            @click="changeType('Charm')"
             style=""
             :style="{ color: rankingType == 'Charm' ? '#60FF83' : '#fff' }"
           >
@@ -39,7 +39,7 @@
           </div>
           <div
             class="tab"
-            @click="rankingType = 'Room'"
+            @click="changeType('Room')"
             style=""
             :style="{ color: rankingType == 'Room' ? '#9B60FF' : '#fff' }"
           >
@@ -73,28 +73,28 @@
         <div
           class="tag"
           :class="{ tagActive: selectedTimeTab == 'Hourly' }"
-          @click="selectedTimeTab = 'Hourly'"
+          @click="changeDateType('Hourly')"
         >
           Hourly
         </div>
         <div
           class="tag"
           :class="{ tagActive: selectedTimeTab == 'Daily' }"
-          @click="selectedTimeTab = 'Daily'"
+          @click="changeDateType('Daily')"
         >
           Daily
         </div>
         <div
           class="tag"
           :class="{ tagActive: selectedTimeTab == 'Weekly' }"
-          @click="selectedTimeTab = 'Weekly'"
+          @click="changeDateType('Weekly')"
         >
           Weekly
         </div>
         <div
           class="tag"
           :class="{ tagActive: selectedTimeTab == 'Monthly' }"
-          @click="selectedTimeTab = 'Monthly'"
+          @click="changeDateType('Monthly')"
         >
           Monthly
         </div>
@@ -157,7 +157,7 @@
           <div style="display: flex; align-items: center; width: 70%">
             <div style="font-weight: 700">{{ index + 4 }}</div>
             <img
-              :src="userInfo.avatar"
+              :src="userInfo.avatar || ''"
               alt=""
               width="20%"
               style="
@@ -230,18 +230,19 @@
       }"
     >
       <div style="display: flex; align-items: center; width: 70%">
-        <div style="font-weight: 700">999</div>
+        <div style="font-weight: 700">{{ myRanking.rank || 0 }}</div>
         <img
-          src=""
+          :src="myRanking.avatar || ''"
           alt=""
           width="20%"
           style="display: block; aspect-ratio: 1/1; margin: 0 4px"
+          :style="{ borderRadius: rankingType === 'Room' ? '0' : '50%' }"
           @error="defaultAvatarUrl"
         />
         <div
           style="font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
         >
-          aaaaaaaaaaaa
+          {{ myRanking.nickname || '' }}
         </div>
       </div>
       <div style="display: flex; align-items: center; width: 30%">
@@ -260,7 +261,7 @@
             text-overflow: ellipsis;
           "
         >
-          123456789
+          {{ myRanking.quantityFormat || 0 }}
         </div>
       </div>
     </div>
@@ -287,6 +288,10 @@ const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 const rankingType = ref('Wealth') //榜单类型
 const selectedTimeTab = ref('Hourly') //时间标签
 
+// 接口参数
+const params_type = ref('GIFTS_SEND') //排行榜类型
+const params_dateType = ref('HOUR') //时间类型
+
 const totalRanking = ref({})
 const showRanking = ref([])
 const myRanking = ref({}) //我的排名
@@ -306,25 +311,48 @@ const updateTimeRanking = () => {
   }
 }
 
-watch(
+// 改变排行榜类型
-  () => rankingType.value,
+const changeType = (type) => {
-  () => {
+  if (rankingType.value != type) {
-    console.log('监听到rankingType.value变化')
+    console.log('改变rankingType')
+    rankingType.value = type
+    selectedTimeTab.value = 'Hourly'
+    params_dateType.value = 'HOUR'
+    if (type == 'Wealth') {
+      params_type.value = 'GIFTS_SEND'
+    } else if (type == 'Charm') {
+      params_type.value = 'GIFTS_RECEIVED'
+    } else if (type == 'Room') {
+      params_type.value = 'ROOM_GIFTS'
+    }
     totalRanking.value = {}
     showRanking.value = []
-    // 获取榜单
+    myRanking.value = {}
-    getRanking()
+    getRanking() // 获取榜单
+    getMyRankingInfo() //获取我的排名
   }
-)
+}
 
-watch(
+// 改变时间类型
-  () => selectedTimeTab.value,
+const changeDateType = (dateType) => {
-  () => {
+  if (selectedTimeTab.value != dateType) {
-    console.log('监听到selectedTimeTab.value变化')
+    console.log('改变rankingType')
+    selectedTimeTab.value = dateType
+    if (dateType == 'Hourly') {
+      params_dateType.value = 'HOUR'
+    } else if (dateType == 'Daily') {
+      params_dateType.value = 'DAY'
+    } else if (dateType == 'Weekly') {
+      params_dateType.value = 'WEEK'
+    } else if (dateType == 'Monthly') {
+      params_dateType.value = 'MONTH'
+    }
     showRanking.value = []
+    myRanking.value = {}
     updateTimeRanking() //刷新展示榜单
+    getMyRankingInfo() //获取我的排名
   }
-)
+}
 
 // 前三名榜单
 const RankingTop3 = computed(() => {
@@ -348,15 +376,17 @@ const RankingFromTop4 = computed(() => {
 })
 
 // 动态样式
-const backgroundColor = ref('') //页面
+const backgroundColor = ref('') //页面样式
-const backgroundImage = ref('') //页面
+const backgroundImage = ref('') //页面样式
+const border = ref('') //时间标签样式
+const background = ref('') //时间标签样式
+const rankItemBackground = ref('') //排名项背景
+const rankItemBorder = ref('') //排名项边框
+
 const topBorderBg = ref('') //top1头像框
 const top2BorderBg = ref('') //top2头像框
 const top3BorderBg = ref('') //top3头像框
-const border = ref('') //时间标签
+
-const background = ref('') //时间标签
-const rankItemBackground = ref('') //排名项背景
-const rankItemBorder = ref('') //排名项边框
 const sentinel = ref(null)
 const stickyHeader = ref(null)
 
@@ -422,6 +452,7 @@ const observer = new IntersectionObserver((entries) => {
   })
 })
 
+// 获取榜单
 const getRanking = async () => {
   console.log('获取榜单')
 
@@ -439,13 +470,24 @@ const getRanking = async () => {
   }
 }
 
+//获取我的排名
+const getMyRankingInfo = async () => {
+  console.log('获取我的排名')
+  const resMyRanking = await getMyRanking(params_type.value, params_dateType.value)
+  if (resMyRanking.status && resMyRanking.body) {
+    myRanking.value = resMyRanking.body
+  } else {
+    myRanking.value = {}
+  }
+}
+
 onMounted(() => {
   isInAppEnvironment.value = isInApp()
 
   observer.observe(sentinel.value)
 
   getRanking() // 获取榜单
-  getMyRanking() //获取我的排名
+  getMyRankingInfo() //获取我的排名
 })
 </script>