完善排位赛数据显示

src/pages/index.vue

@@ -130,7 +130,7 @@ const comingSoon = () => {
           <view class="divide-line"></view>
           <view class="player-avatars">
             <block v-for="i in 6" :key="i">
-              <block v-if="rankData.rank && rankData.rank[i]">
+              <block v-if="rankData.rank && rankData.rank[i - 1]">
                 <view
                   class="player-avatar"
                   :style="{
@@ -142,7 +142,7 @@ const comingSoon = () => {
                   <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" />
+                  <image :src="rankData.rank[i - 1].avatar" mode="aspectFill" />
                 </view>
               </block>
             </block>

src/pages/rank-list.vue

@@ -121,7 +121,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
         >
       </view>
     </view>
-    <view class="my-rank-data">
+    <view class="my-rank-data" v-if="user.id">
       <image src="../static/modal-content-bg.png" mode="widthFix" />
       <text>{{ user.ranking }}</text>
       <Avatar :src="user.avatar" />

src/pages/ranking.vue

@@ -4,6 +4,7 @@ import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import { getRankListAPI } from "@/apis";
 import { topThreeColors } from "@/constants";
+import { getHomeData } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -12,6 +13,13 @@ const { getLvlName } = store;
 
 const selectedIndex = ref(0);
 const currentList = ref([]);
+const seasonName = ref("");
+const seasonData = ref([]);
+const currentSeasonData = ref({
+  "1v1": { totalGames: 0, winCount: 0, winRate: 0 },
+  "5m": { totalGames: 0, winCount: 0, winRate: 0 },
+  "10m": { totalGames: 0, winCount: 0, winRate: 0 },
+});
 
 const handleSelect = (index) => {
   selectedIndex.value = index;
@@ -26,6 +34,36 @@ const handleSelect = (index) => {
 
 onMounted(async () => {
   currentList.value = rankData.value.rank;
+  const { userGameStats, seasonList } = await getHomeData();
+  seasonData.value = seasonList;
+  if (
+    userGameStats &&
+    userGameStats.stats_list &&
+    userGameStats.stats_list.length
+  ) {
+    userGameStats.stats_list.forEach((item) => {
+      if (seasonList.length) {
+        seasonList.some((s) => {
+          if (s.seasonId === item.seasonId) {
+            seasonName.value = s.seasonName;
+            return true;
+          }
+          return false;
+        });
+      }
+      let keyName = "";
+      if (item.gameType === 1 && item.teamSize === 2) keyName = "1v1";
+      if (item.gameType === 2 && item.teamSize === 5) keyName = "5m";
+      if (item.gameType === 2 && item.teamSize === 10) keyName = "10m";
+      if (keyName) {
+        currentSeasonData.value["1v1"] = {
+          totalGames: item.totalGames,
+          winCount: item.winCount,
+          winRate: (item.winCount / item.totalGames) * 100,
+        };
+      }
+    });
+  }
 });
 
 const toTeamMatchPage = (gameType, teamSize) => {
@@ -72,9 +110,13 @@ const toRankListPage = () => {
             <Avatar :src="user.avatar" frame :size="30" />
             <text>{{ user.nickName }}</text>
           </view>
-          <view class="ranking-season">
-            <text>第14赛季</text>
-            <image src="../static/triangle.png" mode="widthFix" />
+          <view class="ranking-season" v-if="seasonData.length">
+            <text>{{ seasonName }}</text>
+            <image
+              v-if="seasonData.length > 1"
+              src="../static/triangle.png"
+              mode="widthFix"
+            />
           </view>
         </view>
         <view class="my-data">
@@ -84,7 +126,7 @@ const toRankListPage = () => {
           </view>
           <view>
             <text>赛季平均环数</text>
-            <text :style="{ color: '#FFD947' }">9.7环</text>
+            <text :style="{ color: '#FFD947' }">{{ user.avg_ring }}环</text>
           </view>
           <view>
             <text>赛季胜率</text>
@@ -109,21 +151,48 @@ const toRankListPage = () => {
           />
         </view>
         <view class="data-progress">
-          <text>【1 V 1】 163 场 胜率 51%</text>
+          <text>
+            {{
+              `【1 V 1】${currentSeasonData["1v1"].totalGames}场 胜率 ${currentSeasonData["1v1"].winRate}%`
+            }}
+          </text>
           <view>
-            <view :style="{ width: '50%', backgroundColor: '#FF507E' }" />
+            <view
+              :style="{
+                width: `${currentSeasonData['1v1'].winRate}%`,
+                backgroundColor: '#FF507E',
+              }"
+            />
           </view>
         </view>
         <view class="data-progress">
-          <text>【5人大乱斗】 12 场 得分率 56%</text>
+          <text>
+            {{
+              `【5人大乱斗】${currentSeasonData["5m"].totalGames}场 胜率 ${currentSeasonData["5m"].winRate}%`
+            }}
+          </text>
           <view>
-            <view :style="{ width: '60%', backgroundColor: '#FFD947' }" />
+            <view
+              :style="{
+                width: `${currentSeasonData['5m'].winRate}%`,
+                backgroundColor: '#FFD947',
+              }"
+            />
           </view>
         </view>
         <view class="data-progress">
-          <text>【10 人大乱斗】 12 场 得分率 5</text>
+          <text>
+            {{
+              `【10人大乱斗】${currentSeasonData["5m"].totalGames}场 胜率 ${currentSeasonData["10m"].winRate}%`
+            }}
+          </text>
           <view>
-            <view :style="{ width: '45%', backgroundColor: '#FFD947' }" />
+            <view
+              :style="{
+                width: `${currentSeasonData['10m'].winRate}%`,
+                backgroundColor: '#FFD947',
+              }"
+            />
           </view>
         </view>
         <view @click="toMyGrowthPage">查看我的比赛记录</view>