首页接入数据

src/components/MyRank.vue

@@ -1,19 +1,41 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, watch } from "vue";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
-const { user } = storeToRefs(useStore());
+const store = useStore();
+const { getLvlName } = store;
+const { config, user } = storeToRefs(store);
 
 const props = defineProps({});
 
-onMounted(async () => {});
+const nextLvlPoints = ref(0);
+
+watch(
+  () => [config.value, user.value],
+  ([n_config, n_user]) => {
+    const rankInfos = n_config.randInfos || [];
+    if (n_user.id && rankInfos.length) {
+      rankInfos.some((r, index) => {
+        if (r.upgrade_scores && r.upgrade_scores > n_user.scores) {
+          nextLvlPoints.value = r.upgrade_scores;
+          return true;
+        }
+        return false;
+      });
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
 </script>
 
 <template>
   <view class="my-rank">
     <view>
-      <image src="../static/user-icon.png" mode="widthFix" />
+      <image :src="user.avatar || '../static/user-icon.png'" mode="widthFix" />
       <view>
         <text class="score color1">积分榜：分</text>
         <text class="score color2">Mvp榜：次</text>
@@ -25,24 +47,30 @@ onMounted(async () => {});
       <image class="user-name-image" src="../static/vip1.png" mode="widthFix" />
     </view>
     <view>
-      <text>lv50</text>
+      <text>lv{{ user.lvl }}</text>
       <view>
-        <view :style="{ width: '50%' }"></view>
-        <text>12000/120000</text>
+        <view
+          :style="{
+            width: `${(Math.max(user.scores, 0) / nextLvlPoints) * 100}%`,
+          }"
+        ></view>
+        <text>{{ Math.max(user.scores, 0) }}/{{ nextLvlPoints }}</text>
       </view>
     </view>
     <view>
       <view>
         <text>段位</text>
-        <text>段位</text>
+        <text>{{ user.rankLvl ? getLvlName(user.rankLvl) : "暂无" }}</text>
       </view>
       <view>
         <text>平均环数</text>
-        <text>平均环数</text>
+        <text>{{ user.avg_ring ? user.avg_ring + "环" : "暂无" }}</text>
       </view>
       <view>
         <text>胜率</text>
-        <text>胜率</text>
+        <text>{{
+          user.avg_win ? Number((user.avg_win * 100).toFixed(2)) + "%" : "暂无"
+        }}</text>
       </view>
     </view>
   </view>

src/components/TopRank.vue

@@ -1,7 +1,12 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
 
-const props = defineProps({});
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
 
 const titles = ["积分榜", "MVP榜", "十环榜"];
 const selected = ref(0);
@@ -42,66 +47,25 @@ onBeforeUnmount(() => {
       @change="(e) => (selected = e.detail.current)"
       :style="{ width: '100%' }"
     >
-      <swiper-item>
-        <view class="rank-item">
+      <swiper-item v-for="(list, index1) in data" :key="index1">
+        <view v-for="(item, index2) in list" :key="index2" class="rank-item">
           <view>
-            <text>1</text>
-            <image src="../static/user-icon.png" mode="widthFix" />
+            <text>{{ index2 + 1 }}</text>
+            <image
+              :src="item.avatar || '../static/user-icon-dark.png'"
+              mode="widthFix"
+            />
           </view>
           <view>
-            <text>某某某</text>
-            <text>积分：300</text>
-          </view>
-        </view>
-        <view class="rank-item">
-          <view>
-            <text>1</text>
-            <image src="../static/user-icon.png" mode="widthFix" />
-          </view>
-          <view>
-            <text>某某某</text>
-            <text>积分：300</text>
-          </view>
-        </view>
-        <view class="rank-item">
-          <view>
-            <text>1</text>
-            <image src="../static/user-icon.png" mode="widthFix" />
-          </view>
-          <view>
-            <text>某某某</text>
-            <text>积分：300</text>
-          </view>
-        </view>
-      </swiper-item>
-      <swiper-item>
-        <view class="rank-item">
-          <view>
-            <text>1</text>
-            <image src="../static/user-icon.png" mode="widthFix" />
-          </view>
-          <view>
-            <text>某某某</text>
-            <text>积分：300</text>
-          </view>
-        </view>
-      </swiper-item>
-      <swiper-item>
-        <view class="rank-item">
-          <view>
-            <text>1</text>
-            <image src="../static/user-icon.png" mode="widthFix" />
-          </view>
-          <view>
-            <text>某某某</text>
-            <text>积分：300</text>
+            <text>{{ item.name }}</text>
+            <text>积分：{{ item.totalScore }}</text>
           </view>
         </view>
       </swiper-item>
     </swiper>
     <view>
       <view
-        v-for="(item, index) in titles"
+        v-for="(item, index) in data"
         :key="index"
         :style="{
           width: selected === index ? '20rpx' : '6rpx',

src/pages/index.vue

@@ -15,25 +15,16 @@ import {
   getMyDevicesAPI,
   getDeviceBatteryAPI,
 } from "@/apis";
-import { topThreeColors } from "@/constants";
 import { canEenter, capsuleHeight } from "@/util";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const {
-  updateConfig,
-  updateUser,
-  updateDevice,
-  updateRank,
-  getLvlName,
-  updateOnline,
-} = store;
+const { updateConfig, updateUser, updateDevice, updateRank, updateOnline } =
+  store;
 const { user, device, rankData, online, game } = storeToRefs(store);
 
-const isIOS = uni.getDeviceInfo().osName === "ios";
 const showModal = ref(false);
-const showGuide = ref(false);
 const selected = ref(0);
 const liveType = ref(0);
 const liveTypes = {
@@ -41,6 +32,7 @@ const liveTypes = {
   新人王: "../static/xinren.png",
   女神赛: "../static/nvshen.png",
 };
+const ranks = ref([]);
 
 const toPage = async (path) => {
   if (!user.value.id) {
@@ -76,25 +68,22 @@ onShow(async () => {
   const [rankList, homeData] = await Promise.all(promises);
 
   console.log("排行数据", rankList);
+  ranks.value = [];
+  ranks.value.push((rankList.rank || []).slice(0, 3));
+  ranks.value.push((rankList.mvpRank || []).slice(0, 3));
+  ranks.value.push((rankList.ringRank || []).slice(0, 3));
   updateRank(rankList);
 
   if (homeData) {
     console.log("首页数据：", homeData);
     if (homeData.user) {
       updateUser(homeData.user);
-      if ("823,209,293,257".indexOf(homeData.user.id) !== -1) {
-        const show = uni.getStorageSync("show-the-user");
-        if (!show) {
-          showTheUser.value = true;
-          uni.setStorageSync("show-the-user", true);
-        }
-      }
-      if (homeData.user.trio <= 0) {
-        showGuide.value = true;
-        setTimeout(() => {
-          showGuide.value = false;
-        }, 3000);
-      }
+      // if (homeData.user.trio <= 0) {
+      //   showGuide.value = true;
+      //   setTimeout(() => {
+      //     showGuide.value = false;
+      //   }, 3000);
+      // }
       const devices = await getMyDevicesAPI();
       if (devices.bindings && devices.bindings.length) {
         updateDevice(
@@ -116,18 +105,18 @@ onMounted(async () => {
 
 onShareAppMessage(() => {
   return {
-    title: "智能真弓：实时捕捉+毫秒级同步，弓箭选手全球竞技！", // 分享卡片的标题
-    path: "/pages/index", // 用户点击分享卡片后跳转的页面路径
+    title: "智能真弓：实时捕捉+毫秒级同步，弓箭选手全球竞技！",
+    path: "/pages/index",
     imageUrl:
-      "https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享卡片的配图，可以是本地或网络图片
+      "https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png",
   };
 });
 onShareTimeline(() => {
   return {
-    title: "智能真弓：实时捕捉+毫秒级同步，弓箭选手全球竞技！", // 分享到朋友圈的标题
-    query: "from=timeline", // 用户通过朋友圈点击后，在页面 onShow 的 options 中可以获取到的参数
+    title: "智能真弓：实时捕捉+毫秒级同步，弓箭选手全球竞技！",
+    query: "from=timeline",
     imageUrl:
-      "https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png", // 分享到朋友圈的配图
+      "https://static.shelingxingqiu.com/attachment/2025-09-12/dcqoz26q0268wxmzjg.png",
   };
 });
 </script>
@@ -200,7 +189,7 @@ onShareTimeline(() => {
             />
           </view>
         </view>
-        <NoticeBar />
+        <!-- <NoticeBar /> -->
         <view class="rank-info">
           <image
             src="../static/trophy-bg.png"
@@ -212,21 +201,21 @@ onShareTimeline(() => {
               <image src="../static/rank-title.png" mode="widthFix" />
               <text>星球榜</text>
             </view>
-            <button hover-class="none">
+            <button hover-class="none" @click="toRankListPage">
               <text>更多榜单</text>
               <image src="../static/enter.png" mode="widthFix" />
             </button>
           </view>
           <view class="rank-info-body">
             <view :style="{ width: '45%' }">
-              <TopRank />
+              <TopRank :data="ranks" />
             </view>
             <view :style="{ width: '55%' }">
               <MyRank />
             </view>
           </view>
         </view>
-        <view class="live-bar">
+        <!-- <view class="live-bar">
           <button
             hover-class="none"
             v-for="(item, index) in Object.keys(liveTypes)"
@@ -257,7 +246,7 @@ onShareTimeline(() => {
           <swiper-item>
             <LiveItem />
           </swiper-item>
-        </swiper>
+        </swiper> -->
       </scroll-view>
       <Signin :show="showModal" :onClose="() => (showModal = false)" />
     </view>
@@ -266,121 +255,6 @@ onShareTimeline(() => {
       :onChange="(index) => (selected = index)"
       :onSignin="() => (showModal = true)"
     />
-    <!-- <view class="top-theme">
-        <image
-          src="https://static.shelingxingqiu.com/attachment/2025-12-31/dfc9dxrq4xn7e6y2pp.png"
-          mode="widthFix"
-        />
-      </view>
-      <view :style="{ padding: '12px 10px' }">
-        <view class="feature-grid">
-          <view class="bow-card">
-            <image
-              v-if="online"
-              src="https://static.shelingxingqiu.com/attachment/2025-08-07/dbvt1o6dvhr2rop3kn.webp"
-              mode="widthFix"
-              @click="() => toPage('/pages/my-device')"
-            />
-            <image
-              v-else
-              src="https://static.shelingxingqiu.com/attachment/2026-01-04/dffohwtk1gwh0xfa6h.png"
-              mode="widthFix"
-              @click="() => toPage('/pages/my-device')"
-            />
-            <block v-if="user.id">
-              <text v-if="!device.deviceId">绑定我的智能弓</text>
-              <text v-else-if="!online">设备离线</text>
-              <text v-else-if="online">设备在线</text>
-            </block>
-            <image
-              src="../static/first-try.png"
-              mode="widthFix"
-              @click="() => toPage('/pages/first-try')"
-            />
-            <BubbleTip v-if="showGuide" :location="{ top: '60%', left: '47%' }">
-              <text>新人必刷！</text>
-              <text>快来报到吧~</text>
-            </BubbleTip>
-          </view>
-          <view class="play-card">
-            <view @click="() => toPage('/pages/practise')">
-              <image src="../static/my-practise.png" mode="widthFix" />
-            </view>
-            <view @click="() => toPage('/pages/friend-battle')">
-              <image src="../static/friend-battle.png" mode="widthFix" />
-            </view>
-          </view>
-        </view>
-        <view class="ranking-section">
-          <image
-            src="https://static.shelingxingqiu.com/attachment/2025-09-25/dd1p9ci9v7frcrsxhj.png"
-            mode="widthFix"
-          />
-          <button
-            class="into-btn"
-            @click="() => toPage('/pages/ranking')"
-            hover-class="none"
-          ></button>
-          <view class="ranking-players" @click="toRankListPage">
-            <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: rankData.rank[i - 1]
-                    ? topThreeColors[i - 1] || '#000'
-                    : '#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 - 1]
-                      ? rankData.rank[i - 1].avatar
-                      : '../static/user-icon-dark.png'
-                  "
-                  mode="aspectFill"
-                />
-              </view>
-              <view class="more-players">
-                <text>{{ rankData.rank.length }}</text>
-              </view>
-            </view>
-          </view>
-          <view class="my-data">
-            <view @click="() => toPage('/pages/my-growth')">
-              <image src="../static/my-growth.png" mode="widthFix" />
-            </view>
-            <view @click="() => toPage('/pages/ranking')">
-              <view>
-                <text>段位</text>
-                <text>{{
-                  user.rankLvl ? getLvlName(user.rankLvl) : "暂无"
-                }}</text>
-              </view>
-              <view>
-                <text>赛季平均环数</text>
-                <text>{{ user.avg_ring ? user.avg_ring + "环" : "暂无" }}</text>
-              </view>
-              <view>
-                <text>赛季胜率</text>
-                <text>{{
-                  user.avg_win
-                    ? Number((user.avg_win * 100).toFixed(2)) + "%"
-                    : "暂无"
-                }}</text>
-              </view>
-            </view>
-          </view>
-        </view>
-      </view> -->
   </view>
 </template>
 
@@ -520,192 +394,4 @@ onShareTimeline(() => {
   height: 40rpx;
   margin-right: 15rpx;
 }
-/* .feature-grid {
-  width: 100%;
-  display: flex;
-  margin-bottom: 5px;
-}
-
-.feature-grid > view {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.bow-card {
-  width: 50%;
-  border-radius: 25rpx;
-  overflow: hidden;
-}
-
-.feature-grid > view > image {
-  width: 100%;
-}
-
-.bow-card > text {
-  position: absolute;
-  top: 66%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  white-space: nowrap;
-  font-size: 13px;
-  color: #b3b3b3;
-}
-
-.bow-card > image:nth-child(3) {
-  transform: translateY(-1px);
-}
-
-.play-card {
-  width: 48%;
-  margin-left: 2%;
-}
-
-.play-card > view > image {
-  width: 100%;
-}
-
-.ranking-section {
-  border-radius: 15px;
-  padding: 15px;
-  position: relative;
-}
-
-.ranking-section > image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: -1;
-}
-
-.into-btn {
-  position: absolute;
-  top: 40px;
-  left: calc(50% - 100px);
-  width: 200px;
-  height: 100px;
-}
-
-.ranking-players {
-  display: flex;
-  align-items: center;
-  padding-bottom: 20px;
-  margin-top: 42%;
-  border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
-}
-
-.ranking-players > image:first-child {
-  width: 28%;
-  transform: translateX(-10px) translateY(-8px);
-}
-
-.player-avatars {
-  display: flex;
-  align-items: center;
-}
-
-.divide-line {
-  width: 1px;
-  height: 35px;
-  background-color: #80808033;
-  margin-right: 8px;
-}
-
-.player-avatar,
-.more-players {
-  width: 82rpx;
-  height: 82rpx;
-  border-radius: 50%;
-  margin-right: -20rpx;
-  border: 1rpx solid #312f35;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.player-avatar > image:first-child,
-.player-avatar > view:first-child {
-  position: absolute;
-  top: -24rpx;
-  left: 22rpx;
-  width: 32rpx;
-  height: 32rpx;
-}
-.player-avatar > view:first-child {
-  border-radius: 50%;
-  background: #777777;
-  text-align: center;
-  font-size: 10px;
-  line-height: 18px;
-  width: 18px;
-  height: 18px;
-  color: #fff;
-}
-.player-avatar > image:last-child {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-}
-
-.more-players {
-  background: #3c445a;
-  font-size: 9px;
-  line-height: 80rpx;
-  text-align: center;
-  z-index: 1;
-}
-
-.more-players > text {
-  margin-left: 2px;
-  color: #fff;
-}
-.my-data {
-  display: flex;
-  margin-top: 20px;
-  justify-content: space-between;
-}
-.my-data > view:first-child {
-  width: 28%;
-}
-.my-data > view:first-child > image {
-  width: 100%;
-  transform: translateX(-8px);
-}
-.my-data > view:nth-child(2) {
-  width: 68%;
-  font-size: 12px;
-  color: #fff6;
-  display: flex;
-  justify-content: space-between;
-}
-.my-data > view:nth-child(2) > view:nth-child(2) {
-  width: 38%;
-}
-.my-data > view:nth-child(2) > view {
-  width: 28%;
-  border-radius: 10px;
-  background: linear-gradient(180deg, #303b4c 30%, #2c384a 100%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.my-data > view:nth-child(2) > view > text:last-child {
-  color: #fff;
-  line-height: 25px;
-  font-weight: 500;
-}
-.top-theme {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 60px;
-  z-index: -1;
-}
-.top-theme > image {
-  width: 300rpx;
-  transform: translate(-4%, -14%);
-} */
 </style>