显示头像相框

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',