细节完善

src/components/UserHeader.vue

@@ -1,16 +1,18 @@
 <script setup>
-import { computed } from "vue";
+import { ref, onMounted, computed } from "vue";
 import Avatar from "@/components/Avatar.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { user } = storeToRefs(store);
+const { user, config } = storeToRefs(store);
 const props = defineProps({
   showRank: {
     type: Boolean,
     default: false,
   },
 });
+const lvlName = ref("");
+const nextLvlPoints = ref("");
 const containerWidth = computed(() => (props.showRank ? "72vw" : "100vw"));
 const toUserPage = () => {
   // 获取当前页面路径
@@ -24,16 +26,25 @@ const toUserPage = () => {
     });
   }
 };
+onMounted(() => {
+  const rankInfos = config.value.randInfos || [];
+  rankInfos.some((r, index) => {
+    lvlName.value = rankInfos[index].name;
+    if (r.upgrade_scores > user.value.scores) {
+      nextLvlPoints.value = r.upgrade_scores;
+      if (rankInfos[index - 1]) {
+        lvlName.value = rankInfos[index - 1].name;
+      }
+      return true;
+    }
+    return false;
+  });
+});
 </script>
 
 <template>
   <view class="container" :style="{ width: containerWidth }">
-    <Avatar
-      :frame="true"
-      :src="user.avatar"
-      :onClick="toUserPage"
-      :size="42"
-    />
+    <Avatar :frame="true" :src="user.avatar" :onClick="toUserPage" :size="42" />
     <view class="user-details">
       <view class="user-name">
         <text>{{ user.nickName }}</text>
@@ -44,11 +55,13 @@ const toUserPage = () => {
         />
       </view>
       <view class="user-stats">
-        <text class="level-tag level-tag-first">钻石1级</text>
-        <text class="level-tag level-tag-second">{{ user.lvl }}</text>
+        <text class="level-tag level-tag-first">{{ lvlName }}</text>
+        <text class="level-tag level-tag-second">L{{ user.lvl }}</text>
         <view class="rank-tag">
           <view class="rank-tag-progress" :style="{ width: '40%' }" />
-          <text class="rank-tag-text">{{ user.lvl }}/{{ user.lvlPoints }}</text>
+          <text class="rank-tag-text"
+            >{{ user.scores }}/{{ user.nextLvlPoints }}</text
+          >
         </view>
       </view>
     </view>