显示头像相框

src/apis.js

@@ -170,7 +170,7 @@ export const getGameAPI = async (battleId) => {
     data.roundsData = {};
     data.redPlayers = {};
     data.bluePlayers = {};
-    data.goldenRound = goldenRoundRecords.length ? goldenRoundRecords[0] : null;
+    data.goldenRound = goldenRoundRecords && goldenRoundRecords.length ? goldenRoundRecords[0] : null;
     playerStats.forEach((item) => {
       const { playerBattleStats = {}, roundRecords = [] } = item;
       if (playerBattleStats.team === 0) {

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: {
+  score: {
-    type: String,
+    type: Number,
-    default: "",
+    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"
+      v-if="avatarFrame"
-      :src="frameSrc || '../static/avatar-frame.png'"
+      :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"

src/pages/battle-room.vue

@@ -241,11 +241,8 @@ async function onReceiveMessage(messages = []) {
       if (msg.constructor === MESSAGETYPES.ShootResult) {
         if (room.value.battleType === 1) {
           const isRed = redTeam.value.find((item) => item.id === msg.userId);
-          if (isRed) {
+          if (isRed) scores.value = [msg.target];
-            scores.value = [msg.target];
+          else blueScores.value = [msg.target];
-          } else {
-            blueScores.value = [msg.target];
-          }
         }
         if (room.value.battleType === 2) {
           scores.value.push(msg.target);

src/pages/index.vue

@@ -55,6 +55,7 @@ onMounted(async () => {
     const token = uni.getStorageSync("token");
     if (token) {
       const result = await getHomeData();
+      console.log("首页数据：", result);
       if (result.user) {
         updateUser(result.user);
         const devices = await getMyDevicesAPI();

src/pages/my-growth.vue

@@ -85,7 +85,10 @@ const onPractiseLoading = async (page) => {
           <view v-if="item.mode === 1" class="contest-team">
             <block v-if="item.bluePlayers[0]">
               <view class="player">
-                <Avatar frame :src="item.bluePlayers[0].avatar" />
+                <Avatar
+                  :score="item.bluePlayers[0].totalScore"
+                  :src="item.bluePlayers[0].avatar"
+                />
                 <text>{{ item.bluePlayers[0].name }}</text>
                 <image
                   v-if="item.winner === 1"
@@ -96,7 +99,10 @@ const onPractiseLoading = async (page) => {
             </block>
             <block v-if="item.redPlayers[0]">
               <view class="player">
-                <Avatar frame :src="item.redPlayers[0].avatar" />
+                <Avatar
+                  :score="item.redPlayers[0].totalScore"
+                  :src="item.redPlayers[0].avatar"
+                />
                 <text>{{ item.redPlayers[0].name }}</text>
                 <image
                   v-if="item.winner === 0"
@@ -136,7 +142,10 @@ const onPractiseLoading = async (page) => {
           <view v-if="item.mode === 1" class="contest-team">
             <block v-if="item.bluePlayers[0]">
               <view class="player">
-                <Avatar frame :src="item.bluePlayers[0].avatar" />
+                <Avatar
+                  :score="item.bluePlayers[0].totalScore"
+                  :src="item.bluePlayers[0].avatar"
+                />
                 <text>{{ item.bluePlayers[0].name }}</text>
                 <image
                   v-if="item.winner === 1"
@@ -147,7 +156,10 @@ const onPractiseLoading = async (page) => {
             </block>
             <block v-if="item.redPlayers[0]">
               <view class="player">
-                <Avatar frame :src="item.redPlayers[0].avatar" />
+                <Avatar
+                  :score="item.redPlayers[0].totalScore"
+                  :src="item.redPlayers[0].avatar"
+                />
                 <text>{{ item.redPlayers[0].name }}</text>
                 <image
                   v-if="item.winner === 0"

src/pages/ranking.vue

@@ -117,7 +117,7 @@ const toRankListPage = () => {
       <view class="ranking-my-data" v-if="user.id">
         <view>
           <view class="user-info">
-            <Avatar :src="user.avatar" frame :size="30" />
+            <Avatar :src="user.avatar" :score="user.scores" :size="30" />
             <text>{{ user.nickName }}</text>
           </view>
           <view class="ranking-season" v-if="seasonData.length">

src/pages/team-match.vue

@@ -140,11 +140,8 @@ async function onReceiveMessage(messages = []) {
     }
     if (msg.constructor === MESSAGETYPES.ShootResult) {
       const isRed = redTeam.value.find((item) => item.id === msg.userId);
-      if (isRed) {
+      if (isRed) scores.value = [msg.target];
-        scores.value = [msg.target];
+      else blueScores.value = [msg.target];
-      } else {
-        blueScores.value = [msg.target];
-      }
     }
     if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
       const result = msg.preRoundResult;

src/store.js

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