功能完善

src/App.vue

@@ -39,32 +39,12 @@ button {
   line-height: 1;
   outline: none;
   box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent; /* 添加这行，去除点击高亮 */
 }
 
 button::after {
   border: none;
 }
 
-/* 修改点击态样式 */
-button:active {
-  border: none;
-  background: none !important; /* 添加 !important 确保覆盖默认样式 */
-  opacity: 1 !important; /* 防止透明度变化 */
-}
-
-/* 去除按钮的默认边框和点击效果 */
-button[plain] {
-  border: none;
-  background: none !important;
-}
-
-/* 去除点击态的所有效果 */
-button:hover,
-button.hover {
-  background: none !important;
-}
-
 .guide-tips {
   display: flex;
   flex-direction: column;

src/apis.js

@@ -72,6 +72,10 @@ export const createPractiseAPI = (arrows) => {
   });
 };
 
+export const getPractiseAPI = (id) => {
+  return request("GET", `/user/practice/get?id=${id}`);
+};
+
 export const createRoomAPI = (gameType, teamSize) => {
   return request("POST", "/user/createroom", {
     gameType,
@@ -207,6 +211,5 @@ export const getBattleListAPI = async (page, battleType) => {
         .sort((a, b) => b.totalScore - a.totalScore),
     });
   });
-  console.log(1111, result);
   return data;
 };

src/components/AppFooter.vue

@@ -4,6 +4,13 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 
+const props = defineProps({
+  signin: {
+    type: Function,
+    default: () => {},
+  },
+});
+
 const tabs = [
   { image: "../static/tab-vip.png" },
   { image: "../static/tab-grow.png" },
@@ -11,12 +18,7 @@ const tabs = [
 ];
 
 function handleTabClick(index) {
-  if (!user.value.id) {
-    return uni.showToast({
-      title: "还未登录",
-      icon: "none",
-    });
-  }
+  if (!user.value.id) return props.signin();
   if (index === 1) {
     uni.navigateTo({
       url: "/pages/my-growth",

src/components/BowData.vue

@@ -0,0 +1,109 @@
+<script setup>
+import AppBackground from "@/components/AppBackground.vue";
+import Avatar from "@/components/Avatar.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScorePanel from "@/components/ScorePanel.vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  arrows: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <AppBackground :type="1" />
+    <view class="header">
+      <view>
+        <Avatar :src="user.avatarUrl" frame :size="50" />
+        <view>
+          <text>{{ user.nickName }}</text>
+          <text>砖石1级</text>
+        </view>
+      </view>
+      <view @click="onClose">
+        <image src="../static/close-white.png" mode="widthFix" />
+      </view>
+    </view>
+    <view :style="{ width: '100%', marginBottom: '20px' }">
+      <BowTarget :scores="arrows" :showE="false" />
+    </view>
+    <view class="desc">
+      <text>{{ arrows.length }}</text>
+      <text>支箭，共</text>
+      <text>{{ arrows.reduce((a, b) => a + b.ring, 0) }}</text>
+      <text>环</text>
+    </view>
+    <ScorePanel
+      :rowCount="arrows.length === 12 ? 6 : 9"
+      :total="arrows.length"
+      :scores="arrows.map((a) => a.ring)"
+    />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #232323;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 20px);
+  padding: 10px;
+}
+.header > view:first-child {
+  display: flex;
+  align-items: center;
+}
+.header > view:first-child > view:last-child {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 10px;
+  color: #fff;
+}
+.header > view:first-child > view:last-child > text:last-child {
+  font-size: 10px;
+  color: #fff9;
+  background-color: #5f51ff;
+  padding: 2px 5px;
+  border-radius: 10px;
+  margin-top: 5px;
+}
+.header > view:last-child > image {
+  width: 40px;
+}
+.desc {
+  color: #fff;
+  margin-bottom: 40px;
+}
+.desc > text:nth-child(2),
+.desc > text:nth-child(4) {
+  color: #fed847;
+}
+</style>

src/components/BowTarget.vue

@@ -41,16 +41,20 @@ const props = defineProps({
 });
 
 const showRoundTips = ref(false);
+const showLatestArrow = ref(false);
+const prevLength = ref(0);
 
 watch(
   () => props.scores,
   (newVal) => {
-    if (newVal.length > 0) {
+    if (newVal.length - prevLength.value === 1) {
       showRoundTips.value = true;
+      showLatestArrow.value = true;
       setTimeout(() => {
         showRoundTips.value = false;
-      }, 2000);
+      }, 1000);
     }
+    prevLength.value = newVal.length;
   },
   {
     deep: true,
@@ -93,7 +97,7 @@ function calcRealY(num) {
         v-for="(bow, index) in scores"
         :key="index"
         :src="
-          index === scores.length - 1 && !blueScores.length
+          index === scores.length - 1 && !blueScores.length && showLatestArrow
             ? '../static/hit-icon-green.png'
             : '../static/hit-icon.png'
         "

src/components/Container.vue

@@ -26,7 +26,7 @@ defineProps({
 <style scoped>
 .content {
   width: 100vw;
-  height: calc(100vh - 116px);
+  height: calc(100vh - 95px);
   overflow-x: hidden;
   overflow-y: auto;
   display: flex;

src/components/Header.vue

@@ -25,7 +25,7 @@ const simulShoot = async () => {
       <image src="../static/back.png" mode="widthFix" />
     </navigator>
     <text>{{ title }}</text>
-    <view class="simul" @click="simulShoot">S</view>
+    <view class="simul" @click="simulShoot">模拟射箭</view>
   </view>
 </template>
 
@@ -37,7 +37,7 @@ const simulShoot = async () => {
   width: 72vw;
   height: 60px;
   padding-left: 15px;
-  padding-top: 36px;
+  padding-top: 25px;
 }
 .back-btn {
   display: flex;

src/components/SButton.vue

@@ -20,13 +20,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <view
+  <button
     class="sbtn"
+    hover-class="none"
     :style="{
       width: width,
       borderRadius: rounded + 'px',
       backgroundColor: disabled ? '#757575' : '#fed847',
     }"
+    open-type="getUserInfo"
     @click="
       () => {
         if (!disabled) onClick();
@@ -34,7 +36,7 @@ const props = defineProps({
     "
   >
     <slot />
-  </view>
+  </button>
 </template>
 
 <style scoped>

src/components/ScorePanel.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 const props = defineProps({
   rowCount: {
     type: Number,
@@ -15,6 +15,12 @@ const props = defineProps({
   },
 });
 const items = ref(new Array(props.total).fill(9));
+watch(
+  () => props.total,
+  (newValue) => {
+    items.value = new Array(newValue).fill(9);
+  }
+);
 </script>
 <template>
   <view class="container">

src/components/ScoreResult.vue

@@ -4,6 +4,7 @@ import IconButton from "@/components/IconButton.vue";
 import SButton from "@/components/SButton.vue";
 import ImageShare from "@/components/ImageShare.vue";
 import CoachComment from "@/components/CoachComment.vue";
+import BowData from "@/components/BowData.vue";
 const props = defineProps({
   show: {
     type: Boolean,
@@ -29,6 +30,7 @@ const props = defineProps({
 const showPanel = ref(true);
 const showComment = ref(false);
 const showShare = ref(false);
+const showBowData = ref(false);
 const closePanel = () => {
   showPanel.value = false;
   setTimeout(() => {
@@ -71,7 +73,7 @@ setTimeout(() => {
               .reduce((last, next) => last + next, 0)
           }}环）：</text
         >
-        <button>
+        <button @click="() => (showBowData = true)">
           <text>查看靶纸</text>
           <image
             src="../static/enter-arrow-blue.png"
@@ -103,6 +105,11 @@ setTimeout(() => {
     <CoachComment :show="showComment" :onClose="() => (showComment = false)">
       {{ result.adjustmentHint }}
     </CoachComment>
+    <BowData
+      :arrows="result.arrows"
+      :show="showBowData"
+      :onClose="() => (showBowData = false)"
+    />
   </view>
 </template>
 

src/components/Signin.vue

@@ -0,0 +1,185 @@
+<script setup>
+import { ref } from "vue";
+import Avatar from "@/components/Avatar.vue";
+import SButton from "@/components/SButton.vue";
+import { getMyDevicesAPI, loginAPI } from "@/apis";
+import useStore from "@/store";
+const store = useStore();
+const { updateUser, updateDevice } = store;
+const props = defineProps({
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+const agree = ref(false);
+const avatarUrl = ref("");
+const nickName = ref("");
+const handleAgree = () => {
+  agree.value = !agree.value;
+};
+
+function onChooseAvatar(e) {
+  avatarUrl.value = e.detail.avatarUrl;
+}
+
+function onNicknameChange(e) {
+  nickName.value = e.detail.value;
+}
+
+const handleLogin = () => {
+  if (!avatarUrl.value) {
+    return uni.showToast({
+      title: "请选择头像",
+      icon: "none",
+    });
+  }
+  if (!nickName.value) {
+    return uni.showToast({
+      title: "请输入昵称",
+      icon: "none",
+    });
+  }
+  if (!agree.value) {
+    return uni.showToast({
+      title: "请先同意协议",
+      icon: "none",
+    });
+  }
+  uni.login({
+    provider: "weixin",
+    success: async (loginRes) => {
+      const { code } = loginRes;
+      const result = await loginAPI(nickName.value, avatarUrl.value, code);
+      updateUser({
+        ...result.user,
+        nickName: nickName.value,
+        avatarUrl: avatarUrl.value,
+      });
+      const devices = await getMyDevicesAPI();
+      if (devices.bindings.length) {
+        updateDevice(
+          devices.bindings[0].deviceId,
+          devices.bindings[0].deviceName
+        );
+      }
+      props.onClose();
+    },
+    fail: (err) => {
+      uni.showToast({
+        title: "登录失败",
+        icon: "none",
+      });
+      console.error("登录失败：", err);
+    },
+  });
+};
+</script>
+
+<template>
+  <view class="container">
+    <view class="avatar">
+      <text>头像:</text>
+      <button
+        open-type="chooseAvatar"
+        @chooseavatar="onChooseAvatar"
+        class="login-btn"
+        hover-class="none"
+      >
+        <Avatar v-if="avatarUrl" :src="avatarUrl" />
+        <text v-else>点击获取</text>
+      </button>
+    </view>
+    <view class="nickname">
+      <text>昵称:</text>
+      <input
+        type="nickname"
+        class="nickname-input"
+        placeholder="请输入昵称"
+        @change="onNicknameChange"
+        @blur="onNicknameBlur"
+      />
+    </view>
+    <SButton :rounded="20" width="80vw" :onClick="handleLogin">
+      <image
+        src="../static/wechat-icon.png"
+        mode="widthFix"
+        class="wechat-icon"
+      />
+      <text :style="{ color: '#000' }">登录/注册</text>
+    </SButton>
+    <view class="protocol" @click="handleAgree">
+      <view v-if="!agree" />
+      <image v-if="agree" src="../static/checked.png" mode="widthFix" />
+      <text
+        >已同意并阅读<text :style="{ color: '#fff' }">《用户协议》</text>及<text
+          :style="{ color: '#fff' }"
+          >《隐私协议》</text
+        >内容</text
+      >
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.avatar,
+.nickname {
+  width: 80%;
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+}
+.avatar {
+  margin: 0;
+}
+.avatar > text,
+.nickname > text {
+  width: 20%;
+  margin-right: 10px;
+  color: #fff9;
+}
+.nickname > input {
+  flex: 1;
+  background-color: #fff;
+  border-radius: 20px;
+  padding: 7px 15px;
+  font-size: 14px;
+  color: #000;
+}
+.wechat-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 20px;
+}
+.protocol {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  margin-top: 15px;
+  color: #8a8a8a;
+}
+.protocol > image {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+}
+.protocol > view:first-child {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  margin-right: 10px;
+  border: 1px solid #fff;
+}
+.login-btn::after {
+  border: none;
+}
+</style>

src/components/Swiper.vue

@@ -69,7 +69,7 @@ const handleChange = (e) => {
 
 .dots {
   position: absolute;
-  bottom: 12%;
+  bottom: 14%;
   left: 50%;
   transform: translateX(-50%);
   display: flex;

src/components/UserItem.vue

@@ -20,13 +20,13 @@ defineProps({
 </script>
 
 <template>
-  <view class="user-item" :style="customStyle">
+  <view class="user-item" :style="customStyle" @click="onClick">
     <text>{{ title }}</text>
     <view>
       <slot></slot>
-      <button v-if="onClick !== null" @click="onClick">
+      <view v-if="onClick !== null">
         <image src="../static/enter.png" mode="widthFix" />
-      </button>
+      </view>
     </view>
   </view>
 </template>

src/manifest.json

@@ -61,11 +61,7 @@
     "usingComponents": true,
     "darkmode": true,
     "themeLocation": "theme.json",
-    "permission": {
-      "scope.userInfo": {
-        "desc": "用于完善用户资料"
-      }
-    },
+    "permission": {},
     "requiredPrivateInfos": ["getLocation", "chooseLocation"]
   }
 }

src/pages/first-try.vue

@@ -192,9 +192,11 @@ const onClose = () => {
         :result="practiseResult"
       />
     </view>
-    <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{
-      stepButtonTexts[step]
-    }}</SButton>
+    <view :style="{ marginBottom: '10px' }">
+      <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{
+        stepButtonTexts[step]
+      }}</SButton>
+    </view>
   </Container>
 </template>
 

src/pages/index.vue

@@ -4,69 +4,15 @@ import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import SModal from "@/components/SModal.vue";
-import SButton from "@/components/SButton.vue";
-import { getAppConfig, getHomeData, getMyDevicesAPI, loginAPI } from "@/apis";
+import Signin from "@/components/Signin.vue";
+import { getAppConfig, getHomeData, getMyDevicesAPI } from "@/apis";
 import useStore from "@/store";
-
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { updateConfig, updateUser, updateDevice } = store;
 // 使用storeToRefs，用于UI里显示，保持响应性
 const { user } = storeToRefs(store);
 const showModal = ref(false);
-const agree = ref(false);
-
-const getDevice = async () => {
-  const devices = await getMyDevicesAPI();
-  if (devices.bindings.length) {
-    updateDevice(devices.bindings[0].deviceId, devices.bindings[0].deviceName);
-  }
-};
-
-const handleAgree = () => {
-  agree.value = !agree.value;
-};
-const handleLogin = () => {
-  if (!agree.value) {
-    return uni.showToast({
-      title: "请先同意协议",
-      icon: "none",
-    });
-  }
-
-  // 先调用wx.getUserProfile获取用户信息
-  wx.getUserProfile({
-    desc: "用于完善用户资料", // 声明获取用户个人信息后的用途
-    success: (res) => {
-      const { nickName, avatarUrl } = res.userInfo;
-      // 再获取登录凭证
-      uni.login({
-        provider: "weixin",
-        success: async (loginRes) => {
-          const { code } = loginRes;
-          const result = await loginAPI(nickName, avatarUrl, code);
-          updateUser({ ...result.user, nickName, avatarUrl });
-          await getDevice();
-          showModal.value = false;
-        },
-        fail: (err) => {
-          uni.showToast({
-            title: "登录失败",
-            icon: "none",
-          });
-          console.error("登录失败：", err);
-        },
-      });
-    },
-    fail: (err) => {
-      console.log("获取用户信息失败：", err);
-      uni.showToast({
-        title: "获取用户信息失败",
-        icon: "none",
-      });
-    },
-  });
-};
 
 const toPage = (path) => {
   if (!user.value.id) {
@@ -86,7 +32,13 @@ onMounted(async () => {
     const result = await getHomeData();
     if (result.user) {
       updateUser(result.user);
-      await getDevice();
+      const devices = await getMyDevicesAPI();
+      if (devices.bindings.length) {
+        updateDevice(
+          devices.bindings[0].deviceId,
+          devices.bindings[0].deviceName
+        );
+      }
     }
     console.log("首页数据：", result);
   } catch (error) {
@@ -103,14 +55,11 @@ onMounted(async () => {
       <UserHeader :user="user" showRank />
     </block>
     <block v-else>
-      <view
-        @click="() => (showModal = true)"
-        :style="{ marginTop: '20px', paddingLeft: '10px' }"
-      >
-        <text>微信登录</text>
+      <view class="signin-btn" @click="() => (showModal = true)">
+        <text>新来的弓箭手你好呀~</text>
+        <text>微信登录 &gt;</text>
       </view>
     </block>
-
     <view class="container">
       <view class="feature-grid">
         <view class="bow-card">
@@ -204,38 +153,21 @@ onMounted(async () => {
     </view>
     <AppFooter />
     <SModal :show="showModal" :onClose="() => (showModal = false)">
-      <view class="signin">
-        <SButton :rounded="20" width="80vw" :onClick="handleLogin">
-          <image
-            src="../static/wechat-icon.png"
-            mode="widthFix"
-            class="wechat-icon"
-          />
-          <text :style="{ color: '#000' }">登录/注册</text>
-        </SButton>
-        <view class="protocol" @click="handleAgree">
-          <view v-if="!agree" />
-          <image v-if="agree" src="../static/checked.png" mode="widthFix" />
-          <text
-            >已同意并阅读<text :style="{ color: '#fff' }">《用户协议》</text
-            >及<text :style="{ color: '#fff' }">《隐私协议》</text>内容</text
-          >
-        </view>
-      </view>
+      <Signin :onClose="() => (showModal = false)" />
     </SModal>
   </view>
 </template>
 
 <style scoped>
 .root-container {
-  height: calc(100vh - 45px);
+  height: calc(100vh - 40px);
   color: white;
   position: relative;
-  padding-top: 45px;
+  padding-top: 40px;
 }
 
 .container {
-  height: calc(100vh - 220px);
+  height: calc(100vh - 210px);
   padding: 15px 10px;
 }
 
@@ -411,37 +343,16 @@ onMounted(async () => {
   line-height: 20px;
   margin-bottom: 5px;
 }
-.signin {
-  width: 100%;
-  height: 100%;
+.signin-btn {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
+  margin-left: 10px;
+  font-size: 14px;
 }
-.protocol {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 13px;
-  margin-top: 40px;
-  color: #8a8a8a;
-}
-.protocol > image {
-  width: 18px;
-  height: 18px;
-  margin-right: 10px;
-}
-.protocol > view:first-child {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  margin-right: 10px;
-  border: 1px solid #fff;
-}
-.wechat-icon {
-  width: 24px;
-  height: 24px;
-  margin-right: 20px;
+.signin-btn > text:last-child {
+  color: #39a8ff;
+  margin-top: 2px;
 }
 </style>

src/pages/melee-match.vue

@@ -115,7 +115,7 @@ onUnmounted(() => {
 <template>
   <Container title="大乱斗排位赛" :bgType="1">
     <view class="container">
-      <BattleHeader v-if="!start" :players="players" />
+      <BattleHeader v-if="!start && players.length" :players="players" />
       <Guide noBg v-if="!start">
         <view :style="{ display: 'flex', justifyContent: 'space-between' }">
           <view :style="{ display: 'flex', flexDirection: 'column' }">
@@ -143,10 +143,12 @@ onUnmounted(() => {
       />
       <Timer :seq="timerSeq" :callBack="readyToGo" />
     </view>
-    <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
-      matching ? "取消匹配" : "开始匹配"
-    }}</SButton>
-    <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
+    <view :style="{ marginBottom: '10px' }">
+      <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
+        matching ? "取消匹配" : "开始匹配"
+      }}</SButton>
+      <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
+    </view>
   </Container>
 </template>
 

src/pages/my-growth.vue

@@ -2,7 +2,12 @@
 import { onMounted } from "vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
-import { getBattleListAPI, getPractiseResultListAPI } from "@/apis";
+import BowData from "@/components/BowData.vue";
+import {
+  getBattleListAPI,
+  getPractiseResultListAPI,
+  getPractiseAPI,
+} from "@/apis";
 
 import { ref } from "vue";
 
@@ -12,6 +17,8 @@ const matchList = ref([]);
 const battlePage = ref(1);
 const battleList = ref([]);
 const practiseList = ref([]);
+const showBowData = ref(false);
+const arrows = ref([]);
 
 const handleSelect = async (index) => {
   if (index === 0 && matchList.value.length === 0) {
@@ -36,6 +43,11 @@ const toMatchDetail = (id) => {
     url: `/pages/match-detail?id=${id}`,
   });
 };
+const getPractiseDetail = async (id) => {
+  const result = await getPractiseAPI(id);
+  arrows.value = JSON.parse(result.UserPracticeRound.arrows);
+  showBowData.value = true;
+};
 onMounted(async () => {
   const result = await getBattleListAPI(matchPage.value, 2);
   matchList.value = result;
@@ -154,12 +166,18 @@ onMounted(async () => {
             v-for="(item, index) in practiseList"
             :key="index"
             class="practice-record"
+            @click="() => getPractiseDetail(item.id)"
           >
             <text>单组练习 {{ item.createdAt }}</text>
             <image src="../static/back.png" mode="widthFix" />
           </view>
         </view>
       </view>
+      <BowData
+        :arrows="arrows"
+        :show="showBowData"
+        :onClose="() => (showBowData = false)"
+      />
     </view>
   </Container>
 </template>

src/pages/practise-one.vue

@@ -8,6 +8,10 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import { createPractiseAPI } from "@/apis";
 import { MESSAGETYPES, roundsName } from "@/constants";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
@@ -18,12 +22,13 @@ const power = ref(0);
 const onReady = async () => {
   await createPractiseAPI(total);
   start.value = true;
+  scores.value = [];
 };
 
 async function onReceiveMessage(content) {
   const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
-    if (start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
       power.value = msg.target.battery;
       if (scores.value.length === total) {
@@ -67,8 +72,8 @@ onUnmounted(() => {
       />
       <BowTarget
         :totalRound="total"
-        :currentRound="scores.length + 1"
-        avatar="../static/avatar.png"
+        :currentRound="start ? scores.length + 1 : 0"
+        :avatar="user.avatarUrl"
         :power="power"
         :scores="scores"
       />
@@ -81,7 +86,9 @@ onUnmounted(() => {
         :result="practiseResult"
       />
     </view>
-    <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
+    <view :style="{ marginBottom: '10px' }">
+      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
+    </view>
   </Container>
 </template>
 

src/pages/practise-two.vue

@@ -8,6 +8,10 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import { createPractiseAPI } from "@/apis";
 import { MESSAGETYPES } from "@/constants";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
@@ -59,7 +63,7 @@ onUnmounted(() => {
       <BowTarget
         :totalRound="total"
         :currentRound="scores.length + 1"
-        avatar="../static/avatar.png"
+        :avatar="user.avatarUrl"
         :power="power"
         :scores="scores"
       />
@@ -77,7 +81,9 @@ onUnmounted(() => {
         :result="practiseResult"
       />
     </view>
-    <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
+    <view :style="{ marginBottom: '10px' }">
+      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
+    </view>
   </Container>
 </template>
 

src/pages/team-match.vue

@@ -141,7 +141,11 @@ onUnmounted(() => {
 <template>
   <Container title="1V1排位赛" :bgType="1">
     <view class="container">
-      <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
+      <BattleHeader
+        v-if="!start && redTeam.length && blueTeam.length"
+        :redTeam="redTeam"
+        :blueTeam="blueTeam"
+      />
       <Guide noBg v-if="!start">
         <view :style="{ display: 'flex', justifyContent: 'space-between' }">
           <view :style="{ display: 'flex', flexDirection: 'column' }">
@@ -180,10 +184,12 @@ onUnmounted(() => {
       />
       <Timer :seq="timerSeq" :callBack="readyToGo" />
     </view>
-    <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
-      matching ? "取消匹配" : "开始匹配"
-    }}</SButton>
-    <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
+    <view :style="{ marginBottom: '10px' }">
+      <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
+        matching ? "取消匹配" : "开始匹配"
+      }}</SButton>
+      <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
+    </view>
   </Container>
 </template>