显示头像相框

src/components/Avatar.vue

@@ -1,21 +1,23 @@
 <script setup>
-defineProps({
+import { ref, onMounted, watch } from "vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { getLvlImage } = store;
+const { config } = storeToRefs(store);
+const props = defineProps({
   src: {
     type: String,
     default: "",
   },
-  frameSrc: {
-    type: String,
-    default: "",
+  score: {
+    type: Number,
+    default: undefined,
   },
   onClick: {
     type: Function,
     default: () => {},
   },
-  frame: {
-    type: Boolean,
-    default: false,
-  },
   rank: {
     type: Number,
     default: 0,
@@ -29,13 +31,25 @@ defineProps({
     default: "",
   },
 });
+const avatarFrame = ref("");
+watch(
+  () => config.value,
+  () => {
+    if (props.score !== undefined) {
+      avatarFrame.value = getLvlImage(props.score);
+    }
+  },
+  {
+    immediate: true,
+  }
+);
 </script>
 
 <template>
   <view class="avatar" @click="onClick">
     <image
-      v-if="frameSrc || frame"
-      :src="frameSrc || '../static/avatar-frame.png'"
+      v-if="avatarFrame"
+      :src="avatarFrame"
       mode="widthFix"
       :style="{
         width: Number(size) + 10 + 'px',

src/components/BattleHeader.vue

@@ -50,7 +50,7 @@ defineProps({
     </view>
     <view v-if="blueTeam.length && redTeam.length" class="players">
       <view>
-        <Avatar :src="blueTeam[0].avatar" frame />
+        <Avatar :src="blueTeam[0].avatar" :score="blueTeam[0].totalScore" />
         <text class="player-name">{{ blueTeam[0].name }}</text>
         <image
           v-if="winner === 1"
@@ -59,7 +59,11 @@ defineProps({
         />
       </view>
       <view>
-        <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
+        <Avatar
+          v-if="redTeam[0]"
+          :src="redTeam[0].avatar"
+          :score="redTeam[0].totalScore"
+        />
         <text class="player-name">{{ redTeam[0].name }}</text>
         <image
           v-if="winner === 0"

src/components/BowData.vue

@@ -29,7 +29,7 @@ const props = defineProps({
     <AppBackground :type="1" />
     <view class="header">
       <view>
-        <Avatar :src="user.avatar" frame :size="50" />
+        <Avatar :src="user.avatar" :score="user.scores" :size="50" />
         <view>
           <text>{{ user.nickName }}</text>
           <text>{{ user.lvlName }}</text>
@@ -93,7 +93,6 @@ const props = defineProps({
 }
 .header > view:first-child > view:last-child > text:last-child {
   font-size: 10px;
-  color: #fff9;
   background-color: #5f51ff;
   padding: 2px 5px;
   border-radius: 10px;

src/components/TestDistance.vue

@@ -104,7 +104,7 @@ onUnmounted(() => {
   top: 30%;
 }
 .warnning-text > text {
-  width: 54vw;
+  width: 60vw;
   text-align: center;
 }
 .container > view:last-child {

src/components/UserHeader.vue

@@ -53,7 +53,7 @@ watch(
   <view class="container" :style="{ width: containerWidth }">
     <block v-if="user.id">
       <Avatar
-        :frameSrc="user.lvlImage"
+        :score="user.scores"
         :src="user.avatar"
         :onClick="toUserPage"
         :size="42"