页面完善

src/pages/ranking.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, onMounted } from "vue";
+import { onHide } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import { getRankListAPI, isGamingAPI } from "@/apis";
@@ -8,24 +9,28 @@ import { getHomeData } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { user, device, rankData } = storeToRefs(store);
+const { user, device } = storeToRefs(store);
 const { getLvlName } = store;
 
+const defaultSeasonData = {
+  "1v1": { totalGames: 0, winCount: 0, winRate: 0 },
+  "5m": { totalGames: 0, winCount: 0, winRate: 0 },
+  "10m": { totalGames: 0, winCount: 0, winRate: 0 },
+};
+
 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 rankData = ref({ user: {} });
+const showSeasonList = ref(false);
+const currentSeasonData = ref(defaultSeasonData);
 
 const handleSelect = (index) => {
   selectedIndex.value = index;
-  if (index === 0) {
+  if (index === 0 && rankData.value.rank) {
     currentList.value = rankData.value.rank.slice(0, 10);
-  } else if (index === 2) {
+  } else if (index === 2 && rankData.value.ringRank) {
     currentList.value = rankData.value.ringRank.slice(0, 10);
   } else {
     currentList.value = [];
@@ -33,37 +38,12 @@ const handleSelect = (index) => {
 };
 
 onMounted(async () => {
-  currentList.value = rankData.value.rank;
-  const { userGameStats, seasonList } = await getHomeData();
+  const result = await getHomeData();
+  currentList.value = result.rank;
+  rankData.value = result;
+  const { userGameStats, seasonList } = result;
   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[keyName] = {
-          totalGames: item.totalGames,
-          winCount: item.winCount,
-          winRate: Number(((item.winCount / item.totalGames) * 100).toFixed(2)),
-        };
-      }
-    });
-  }
+  updateData();
 });
 
 const toTeamMatchPage = async (gameType, teamSize) => {
@@ -115,41 +95,112 @@ const toRankListPage = () => {
     url: "/pages/rank-list",
   });
 };
+const onChangeSeason = async (seasonId, name) => {
+  if (name !== seasonName.value) {
+    const result = await getHomeData(seasonId);
+    rankData.value = result;
+    seasonName.value = name;
+    handleSelect(selectedIndex.value);
+    updateData();
+  }
+  showSeasonList.value = false;
+};
+const updateData = () => {
+  const { userGameStats, seasonList } = rankData.value;
+  currentSeasonData.value = { ...defaultSeasonData };
+  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[keyName] = {
+          totalGames: item.totalGames,
+          winCount: item.winCount,
+          winRate: Number(((item.winCount / item.totalGames) * 100).toFixed(2)),
+        };
+      }
+    });
+  }
+};
+onHide(() => {
+  showSeasonList.value = false;
+});
 </script>
 
 <template>
   <Container title="排行赛">
-    <view class="container">
+    <view class="container" @click="() => (showSeasonList = false)">
       <view class="ranking-my-data" v-if="user.id">
         <view>
           <view class="user-info">
-            <Avatar :src="user.avatar" :score="user.scores" :size="30" />
+            <Avatar
+              :src="user.avatar"
+              :score="rankData.user.scores"
+              :size="30"
+            />
             <text>{{ user.nickName }}</text>
           </view>
-          <view class="ranking-season" v-if="seasonData.length">
+          <view
+            class="ranking-season"
+            v-if="seasonData.length"
+            @click.stop="() => (showSeasonList = true)"
+          >
             <text>{{ seasonName }}</text>
             <image
               v-if="seasonData.length > 1"
               src="../static/triangle.png"
               mode="widthFix"
             />
+            <view class="season-list" v-if="showSeasonList">
+              <view
+                v-for="(item, index) in seasonData"
+                :key="index"
+                @click.stop="
+                  () => onChangeSeason(item.seasonId, item.seasonName)
+                "
+              >
+                <text>{{ item.seasonName }}</text>
+                <image
+                  v-if="item.seasonName === seasonName"
+                  src="../static/triangle.png"
+                  mode="widthFix"
+                />
+              </view>
+            </view>
           </view>
         </view>
         <view class="my-data">
           <view>
             <text>段位</text>
-            <text :style="{ color: '#83CDFF' }">{{ user.lvlName || "-" }}</text>
+            <text :style="{ color: '#83CDFF' }">{{
+              getLvlName(rankData.user.scores) || "-"
+            }}</text>
           </view>
           <view>
             <text>赛季平均环数</text>
             <text :style="{ color: '#FFD947' }">{{
-              user.avg_ring ? user.avg_ring + "环" : "-"
+              rankData.user.avg_ring ? rankData.user.avg_ring + "环" : "-"
             }}</text>
           </view>
           <view>
             <text>赛季胜率</text>
             <text :style="{ color: '#FF507E' }">{{
-              user.avg_win ? user.avg_win + "%" : "-"
+              rankData.user.avg_win ? rankData.user.avg_win + "%" : "-"
             }}</text>
           </view>
         </view>
@@ -157,17 +208,17 @@ const toRankListPage = () => {
           <image
             src="../static/battle1v1.png"
             mode="widthFix"
-            @click="() => toTeamMatchPage(1, 2)"
+            @click.stop="() => toTeamMatchPage(1, 2)"
           />
           <image
             src="../static/battle5.png"
             mode="widthFix"
-            @click="() => toMeleeMatchPage(2, 5)"
+            @click.stop="() => toMeleeMatchPage(2, 5)"
           />
           <image
             src="../static/battle10.png"
             mode="widthFix"
-            @click="() => toMeleeMatchPage(2, 10)"
+            @click.stop="() => toMeleeMatchPage(2, 10)"
           />
         </view>
         <view class="data-progress">
@@ -215,7 +266,7 @@ const toRankListPage = () => {
             />
           </view>
         </view>
-        <view @click="toMyGrowthPage">查看我的比赛记录</view>
+        <view @click.stop="toMyGrowthPage">查看我的比赛记录</view>
       </view>
       <view class="ranking-data">
         <view>
@@ -277,7 +328,7 @@ const toRankListPage = () => {
         <view v-if="!currentList.length" class="no-data">
           <text>筹备中...</text>
         </view>
-        <view class="see-more" @click="toRankListPage">点击查看更多</view>
+        <view class="see-more" @click.stop="toRankListPage">点击查看更多</view>
       </view>
     </view>
   </Container>
@@ -328,6 +379,7 @@ const toRankListPage = () => {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 }
 .ranking-season > image {
   width: 12px;
@@ -479,4 +531,28 @@ const toRankListPage = () => {
   align-items: center;
   color: #fff9;
 }
+.season-list {
+  background-color: #000c;
+  border-radius: 15px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: 12px;
+  padding: 5px 0;
+  position: absolute;
+  width: 220rpx;
+  top: -44rpx;
+  right: -30rpx;
+  letter-spacing: 2px;
+}
+.season-list > view {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+}
+.season-list > view > image {
+  width: 12px;
+  margin-left: 10px;
+}
 </style>