添加排行榜数据

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 {