添加排行榜数据

src/apis.js

@@ -236,3 +236,7 @@ export const getBattleListAPI = async (page, battleType) => {
   });
   return data;
 };
+
+export const getRankListAPI = () => {
+  return request("GET", "/index/ranklist");
+};

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>

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) {

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>

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,9 +130,9 @@ const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
           <img src="../static/juezhanbang.png" mode="widthFix" />
           <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]">
                 <view
-              v-for="i in 6"
-              :key="i"
                   class="player-avatar"
                   :style="{
                     zIndex: 8 - i,
@@ -134,8 +143,10 @@ const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];
                   <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" />
+                  <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 {

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;
 };

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"
+        >
+          <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" />
+              <image
-          <image v-if="index === 1" src="../static/champ2.png" />
+                v-if="index === 0"
-          <image v-if="index === 2" src="../static/champ3.png" />
+                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" />
+              <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;