From 6a3fb2af6dd86b5a9941e7a4502e952a540018ea Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Thu, 26 Jun 2025 23:41:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8E=92=E8=A1=8C=E6=A6=9C?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis.js                     |   4 +
 src/components/PlayerScore2.vue |   2 +-
 src/constants.js                |   2 +
 src/pages/battle-result.vue     |   2 +-
 src/pages/index.vue             |  47 ++++++----
 src/pages/rank-list.vue         |  12 ++-
 src/pages/ranking.vue           | 149 ++++++++++++++++++++++++++++----
 7 files changed, 176 insertions(+), 42 deletions(-)

diff --git a/src/apis.js b/src/apis.js
index 849e1ea..63058f9 100644
--- a/src/apis.js
+++ b/src/apis.js
@@ -236,3 +236,7 @@ export const getBattleListAPI = async (page, battleType) => {
   });
   return data;
 };
+
+export const getRankListAPI = () => {
+  return request("GET", "/index/ranklist");
+};
diff --git a/src/components/PlayerScore2.vue b/src/components/PlayerScore2.vue
index c185b30..2a5ad1c 100644
--- a/src/components/PlayerScore2.vue
+++ b/src/components/PlayerScore2.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { topThreeColors } from "@/constants";
 defineProps({
   avatar: {
     type: String,
@@ -26,7 +27,6 @@ defineProps({
   },
 });
 const rowCount = new Array(6).fill(0);
-const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
 </script>
 
 <template>
diff --git a/src/constants.js b/src/constants.js
index 8e79a5e..36d7199 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -19,6 +19,8 @@ export const MESSAGETYPES = {
   HalfTimeOver: 388606440,
 };
 
+export const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
+
 export const getMessageTypeName = (id) => {
   for (let key in MESSAGETYPES) {
     if (MESSAGETYPES[key] === id) {
diff --git a/src/pages/battle-result.vue b/src/pages/battle-result.vue
index ae9e79c..e6b6fe9 100644
--- a/src/pages/battle-result.vue
+++ b/src/pages/battle-result.vue
@@ -4,6 +4,7 @@ import { onLoad } from "@dcloudio/uni-app";
 import { getGameAPI } from "@/apis";
 import Avatar from "@/components/Avatar.vue";
 import { getHomeData } from "@/apis";
+import { topThreeColors } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -54,7 +55,6 @@ const checkBowData = () => {
     });
   }
 };
-const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
 </script>
 
 <template>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 61fd3f0..52dbb5f 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -5,7 +5,13 @@ import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
-import { getAppConfig, getHomeData, getMyDevicesAPI } from "@/apis";
+import {
+  getAppConfig,
+  getHomeData,
+  getMyDevicesAPI,
+  getRankListAPI,
+} from "@/apis";
+import { topThreeColors } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -14,6 +20,7 @@ const { updateConfig, updateUser, updateDevice } = store;
 const { user, device, remoteConnect } = storeToRefs(store);
 const showModal = ref(false);
 const isIos = ref(true);
+const rankData = ref({});
 
 const toPage = (path) => {
   if (!user.value.id) {
@@ -47,6 +54,9 @@ onMounted(async () => {
     isIos.value = deviceInfo.osName === "ios";
     const config = await getAppConfig();
     console.log("全局配置：", config);
+    const rankList = await getRankListAPI();
+    if (rankList) rankData.value = rankList;
+    console.log("排位赛数据：", rankList);
     updateConfig(config);
     const token = uni.getStorageSync("token");
     if (token) {
@@ -74,7 +84,6 @@ const comingSoon = () => {
     icon: "none",
   });
 };
-const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
 </script>
 
 <template>
@@ -121,21 +130,23 @@ const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
           <img src="../static/juezhanbang.png" mode="widthFix" />
           <view class="divide-line"></view>
           <view class="player-avatars">
-            <view
-              v-for="i in 6"
-              :key="i"
-              class="player-avatar"
-              :style="{
-                zIndex: 8 - i,
-                borderColor: topThreeColors[i - 1] || '#000',
-              }"
-            >
-              <image v-if="i === 1" src="../static/champ1.png" />
-              <image v-if="i === 2" src="../static/champ2.png" />
-              <image v-if="i === 3" src="../static/champ3.png" />
-              <view v-if="i > 3">{{ i }}</view>
-              <image src="../static/avatar.png" mode="aspectFill" />
-            </view>
+            <block v-for="i in 6" :key="i">
+              <block v-if="rankData.rank && rankData.rank[i]">
+                <view
+                  class="player-avatar"
+                  :style="{
+                    zIndex: 8 - i,
+                    borderColor: topThreeColors[i - 1] || '#000',
+                  }"
+                >
+                  <image v-if="i === 1" src="../static/champ1.png" />
+                  <image v-if="i === 2" src="../static/champ2.png" />
+                  <image v-if="i === 3" src="../static/champ3.png" />
+                  <view v-if="i > 3">{{ i }}</view>
+                  <image :src="rankData.rank[i].avatar" mode="aspectFill" />
+                </view>
+              </block>
+            </block>
             <view class="more-players" @click="toRankListPage">
               <text>456{{ remoteConnect ? 1 : 0 }}</text>
             </view>
@@ -284,7 +295,7 @@ const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
 
 .ranking-players > image:first-child {
   width: 28%;
-  transform: translateX(-10px);
+  transform: translateX(-10px) translateY(-8px);
 }
 
 .player-avatars {
diff --git a/src/pages/rank-list.vue b/src/pages/rank-list.vue
index 1d0cc38..edc5aea 100644
--- a/src/pages/rank-list.vue
+++ b/src/pages/rank-list.vue
@@ -1,15 +1,19 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import Avatar from "@/components/Avatar.vue";
-const isIos = ref(true);
+import { getRankListAPI } from "@/apis";
 
-onMounted(() => {
+const isIos = ref(true);
+const selectedIndex = ref(0);
+const rankData = ref({});
+
+onMounted(async () => {
   const deviceInfo = uni.getDeviceInfo();
   isIos.value = deviceInfo.osName === "ios";
+  const rankList = await getRankListAPI();
+  rankData.value = rankList;
 });
 
-const selectedIndex = ref(0);
-
 const handleSelect = (index) => {
   selectedIndex.value = index;
 };
diff --git a/src/pages/ranking.vue b/src/pages/ranking.vue
index 259a756..3f76045 100644
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -1,18 +1,27 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
-import { ref } from "vue";
+import { getRankListAPI } from "@/apis";
+import { topThreeColors } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, device } = storeToRefs(store);
 
+const rankData = ref({});
 const selectedIndex = ref(0);
 
 const handleSelect = (index) => {
   selectedIndex.value = index;
 };
 
+onMounted(async () => {
+  const rankList = await getRankListAPI();
+  console.log("排位赛数据：", rankList);
+  rankData.value = rankList;
+});
+
 const toTeamMatchPage = (gameType, teamSize) => {
   if (!device.value.deviceId) {
     return uni.showToast({
@@ -133,25 +142,126 @@ const toRankListPage = () => {
             {{ rankType }}
           </view>
         </view>
-        <view
+        <block
           v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
           :key="index"
-          :style="{
-            backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
-          }"
-          class="rank-item"
         >
-          <image v-if="index === 0" src="../static/champ1.png" />
-          <image v-if="index === 1" src="../static/champ2.png" />
-          <image v-if="index === 2" src="../static/champ3.png" />
-          <view v-if="index > 2">{{ rankType }}</view>
-          <image src="../static/avatar.png" mode="widthFix" />
-          <view>
-            <text>打酱油大声路过</text>
-            <text>钻石三级，20场</text>
-          </view>
-          <text>8850<text>分</text></text>
-        </view>
+          <block
+            v-if="selectedIndex === 0 && rankData.rank && rankData.rank[index]"
+          >
+            <view
+              :style="{
+                backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
+              }"
+              class="rank-item"
+            >
+              <image
+                v-if="index === 0"
+                src="../static/champ1.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 1"
+                src="../static/champ2.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 2"
+                src="../static/champ3.png"
+                mode="widthFix"
+              />
+              <view v-if="index > 2">{{ rankType }}</view>
+              <image
+                :src="rankData.rank[index].avatar"
+                mode="widthFix"
+                :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
+              />
+              <view>
+                <text>{{ rankData.rank[index].name }}</text>
+                <text>钻石三级，20场</text>
+              </view>
+              <text>{{ rankData.rank[index].totalScore }}<text>分</text></text>
+            </view>
+          </block>
+          <block
+            v-else-if="
+              selectedIndex === 2 &&
+              rankData.ringRank &&
+              rankData.ringRank[index]
+            "
+          >
+            <view
+              :style="{
+                backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
+              }"
+              class="rank-item"
+            >
+              <image
+                v-if="index === 0"
+                src="../static/champ1.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 1"
+                src="../static/champ2.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 2"
+                src="../static/champ3.png"
+                mode="widthFix"
+              />
+              <view v-if="index > 2">{{ rankType }}</view>
+              <image
+                :src="rankData.ringRank[index].avatar"
+                mode="widthFix"
+                :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
+              />
+              <view>
+                <text>{{ rankData.ringRank[index].name }}</text>
+                <text>钻石三级，20场</text>
+              </view>
+              <text
+                >{{ rankData.ringRank[index].totalScore }}<text>分</text></text
+              >
+            </view>
+          </block>
+          <block v-else>
+            <view
+              :style="{
+                backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
+              }"
+              class="rank-item"
+            >
+              <image
+                v-if="index === 0"
+                src="../static/champ1.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 1"
+                src="../static/champ2.png"
+                mode="widthFix"
+              />
+              <image
+                v-if="index === 2"
+                src="../static/champ3.png"
+                mode="widthFix"
+              />
+              <view v-if="index > 2">{{ rankType }}</view>
+              <image
+                src="../static/avatar.png"
+                mode="widthFix"
+                :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
+              />
+              <view>
+                <text>打酱油大声路过</text>
+                <text>钻石三级，20场</text>
+              </view>
+              <text>8850<text>分</text></text>
+            </view>
+          </block>
+        </block>
       </view>
       <view class="see-more" @click="toRankListPage">点击查看更多</view>
     </view>
@@ -308,7 +418,10 @@ const toRankListPage = () => {
 }
 .rank-item > image:nth-child(2) {
   width: 35px;
-  height: 35px;
+  min-height: 35px;
+  max-height: 35px;
+  border-radius: 50%;
+  border: 1px solid transparent;
 }
 .rank-item > view:nth-child(3) {
   display: flex;