排行榜数据显示

src/components/UserHeader.vue

@@ -4,7 +4,7 @@ import Avatar from "@/components/Avatar.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { user, config } = storeToRefs(store);
+const { user, config, rankData } = storeToRefs(store);
 const props = defineProps({
   showRank: {
     type: Boolean,
@@ -89,13 +89,18 @@ watch(
           src="../static/global-rank.png"
           mode="widthFix"
         />
-        <text>本赛季</text>
-        <text>暂未上榜</text>
-        <!-- <text class="rank-number"
-        >第<text :style="{ color: '#ffd700' }"
-          >{{ user.points }}/{{ user.rankLvl }}</text
-        >名</text
-      > -->
+        <block v-if="user.ranking > 0 && rankData.rank.length">
+          <text>本赛季全国</text>
+          <text class="rank-number"
+            >第<text :style="{ color: '#ffd700' }"
+              >{{ user.ranking }}/{{ rankData.rank.length }}</text
+            >名</text
+          >
+        </block>
+        <block v-else>
+          <text>本赛季</text>
+          <text>暂未上榜</text>
+        </block>
       </view>
     </block>
     <block v-else>

src/pages/index.vue

@@ -15,12 +15,11 @@ import { topThreeColors } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { updateConfig, updateUser, updateDevice } = store;
+const { updateConfig, updateUser, updateDevice, updateRank } = store;
 // 使用storeToRefs，用于UI里显示，保持响应性
-const { user, device, remoteConnect } = storeToRefs(store);
+const { user, device, remoteConnect, rankData } = storeToRefs(store);
 const showModal = ref(false);
 const isIos = ref(true);
-const rankData = ref({});
 
 const toPage = (path) => {
   if (!user.value.id) {
@@ -53,11 +52,11 @@ onMounted(async () => {
     const deviceInfo = uni.getDeviceInfo();
     isIos.value = deviceInfo.osName === "ios";
     const config = await getAppConfig();
+    updateConfig(config);
     console.log("全局配置：", config);
     const rankList = await getRankListAPI();
-    if (rankList) rankData.value = rankList;
     console.log("排位赛数据：", rankList);
-    updateConfig(config);
+    updateRank(rankList);
     const token = uni.getStorageSync("token");
     if (token) {
       const result = await getHomeData();
@@ -148,7 +147,7 @@ const comingSoon = () => {
               </block>
             </block>
             <view class="more-players" @click="toRankListPage">
-              <text>456{{ remoteConnect ? 1 : 0 }}</text>
+              <text>{{ rankData.rank.length }}</text>
             </view>
           </view>
         </view>

src/store.js

@@ -19,6 +19,10 @@ export default defineStore("store", {
       deviceName: "",
     },
     config: {},
+    rankData: {
+      rank: [],
+      ringRank: [],
+    },
   }),
 
   // 计算属性
@@ -30,6 +34,9 @@ export default defineStore("store", {
 
   // 方法
   actions: {
+    updateRank(data = {}) {
+      this.rankData = { rank: data.rank || [], ringRank: data.ringRank || [] };
+    },
     updateConnect(connect) {
       this.remoteConnect = connect;
     },