数据完善

src/pages/be-vip.vue

@@ -6,6 +6,7 @@ import SButton from "@/components/SButton.vue";
 import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
 import { createOrderAPI } from "@/apis";
+import { formatTimestamp } from "@/util";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -38,7 +39,9 @@ const onPay = async () => {
         <Avatar :src="user.avatar" :size="35" />
         <text class="truncate">{{ user.nickName }}</text>
       </view>
-      <text>5月5号到期</text>
+      <text v-if="user.expiredAt"
+        >{{ formatTimestamp(user.expiredAt) }}到期</text
+      >
     </view>
     <view class="container">
       <view class="content">

src/pages/rank-list.vue

@@ -5,17 +5,27 @@ import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, rankData } = storeToRefs(store);
+const { getLvlName } = store;
 
 const isIos = ref(true);
 const selectedIndex = ref(0);
+const currentList = ref([]);
 
 onMounted(async () => {
   const deviceInfo = uni.getDeviceInfo();
   isIos.value = deviceInfo.osName === "ios";
+  currentList.value = rankData.value.rank;
 });
 
 const handleSelect = (index) => {
   selectedIndex.value = index;
+  if (index === 0) {
+    currentList.value = rankData.value.rank;
+  } else if (index === 2) {
+    currentList.value = rankData.value.ringRank;
+  } else {
+    currentList.value = [];
+  }
 };
 
 const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
@@ -52,7 +62,7 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
         <text>{{ subTitles[selectedIndex] }}</text>
       </view>
       <view
-        v-for="(_, index) in new Array(100).fill(1)"
+        v-for="(item, index) in currentList"
         :key="index"
         class="rank-list-item"
         :style="{
@@ -96,15 +106,17 @@ const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
           mode="widthFix"
         />
         <view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
-        <Avatar src="../static/avatar.png" />
+        <Avatar :src="item.avatar" />
         <view class="rank-item-content">
-          <text>打酱油大声路过</text>
+          <text>{{ item.name }}</text>
-          <text>钻石3级，20场</text>
+          <text
+            >{{ getLvlName(item.totalScore) }}，{{ item.TotalGames }}场</text
+          >
         </view>
         <text class="rank-item-integral"
           ><text
             :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
-            >9999</text
+            >{{ item.totalScore }}</text
           >分</text
         >
       </view>

src/pages/ranking.vue

@@ -7,19 +7,25 @@ import { topThreeColors } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { user, device } = storeToRefs(store);
+const { user, device, rankData } = storeToRefs(store);
+const { getLvlName } = store;
 
-const rankData = ref({});
 const selectedIndex = ref(0);
+const currentList = ref([]);
 
 const handleSelect = (index) => {
   selectedIndex.value = index;
+  if (index === 0) {
+    currentList.value = rankData.value.rank.slice(0, 10);
+  } else if (index === 2) {
+    currentList.value = rankData.value.ringRank.slice(0, 10);
+  } else {
+    currentList.value = [];
+  }
 };
 
 onMounted(async () => {
-  const rankList = await getRankListAPI();
+  currentList.value = rankData.value.rank;
-  console.log("排位赛数据：", rankList);
-  rankData.value = rankList;
 });
 
 const toTeamMatchPage = (gameType, teamSize) => {
@@ -142,128 +148,43 @@ const toRankListPage = () => {
             {{ rankType }}
           </view>
         </view>
-        <block
+        <view
-          v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+          v-for="(item, index) in currentList"
           :key="index"
+          :style="{
+            backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
+          }"
+          class="rank-item"
         >
-          <block
+          <image
-            v-if="selectedIndex === 0 && rankData.rank && rankData.rank[index]"
+            v-if="index === 0"
-          >
+            src="../static/champ1.png"
-            <view
+            mode="widthFix"
-              :style="{
+          />
-                backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
+          <image
-              }"
+            v-if="index === 1"
-              class="rank-item"
+            src="../static/champ2.png"
+            mode="widthFix"
+          />
+          <image
+            v-if="index === 2"
+            src="../static/champ3.png"
+            mode="widthFix"
+          />
+          <view v-if="index > 2">{{ index + 1 }}</view>
+          <image
+            :src="item.avatar"
+            mode="widthFix"
+            :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
+          />
+          <view>
+            <text class="truncate">{{ item.name }}</text>
+            <text
+              >{{ getLvlName(item.totalScore) }}，{{ item.TotalGames }}场</text
             >
-              <image
+          </view>
-                v-if="index === 0"
+          <text>{{ item.totalScore }}<text>分</text></text>
-                src="../static/champ1.png"
+        </view>
-                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.rank[index].avatar"
-                mode="widthFix"
-                :style="{ borderColor: index < 3 ? topThreeColors[index] : '' }"
-              />
-              <view>
-                <text class="truncate">{{ 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 class="truncate">{{
-                  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 class="see-more" @click="toRankListPage">点击查看更多</view>
       </view>
     </view>

src/store.js

@@ -33,6 +33,21 @@ export default defineStore("store", {
 
   // 方法
   actions: {
+    getLvlName(score) {
+      let lvlName = "";
+      const rankInfos = this.config.randInfos || [];
+      rankInfos.some((r, index) => {
+        lvlName = rankInfos[index].name;
+        if (r.upgrade_scores > score) {
+          if (rankInfos[index - 1]) {
+            lvlName = rankInfos[index - 1].name;
+          }
+          return true;
+        }
+        return false;
+      });
+      return lvlName;
+    },
     updateRank(data = {}) {
       this.rankData = { rank: data.rank || [], ringRank: data.ringRank || [] };
     },

src/util.js

@@ -1,5 +1,14 @@
 import websocket from "@/websocket";
 
+export const formatTimestamp = (timestamp) => {
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+
+  return `${year}.${month}.${day}`;
+};
+
 export const checkConnection = () => {
   uni.sendSocketMessage({
     data: JSON.stringify({ event: "ping", data: {} }),