细节优化

src/pages/be-vip.vue

@@ -15,11 +15,20 @@ const vips = [1, 3, 6, 12];
 const chooseVip = (index) => {
   vipChoosen.value = index;
 };
+
+const onPay = () => {
+  if (!user.value.id) {
+    return uni.showToast({
+      title: "请先登录",
+      icon: "none",
+    });
+  }
+};
 </script>
 
 <template>
   <Container title="会员说明">
-    <view class="header">
+    <view v-if="user.id" class="header">
       <view>
         <Avatar :src="user.avatar" :size="35" :border="true" />
         <text>{{ user.nickName }}</text>
@@ -68,7 +77,7 @@ const chooseVip = (index) => {
           </view>
         </view>
       </view>
-      <SButton>支付</SButton>
+      <SButton :onClick="onPay">支付</SButton>
     </view>
   </Container>
 </template>

src/pages/first-try.vue

@@ -10,6 +10,7 @@ import ScorePanel from "@/components/ScorePanel.vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
+import StartCountdown from "@/components/StartCountdown.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
@@ -30,6 +31,7 @@ const stepButtonTexts = [
   "退出新手试炼",
 ];
 const title = ref("新手试炼场");
+const startCount = ref(false);
 const start = ref(false);
 const practiseResult = ref({});
 const power = ref(0);
@@ -39,6 +41,11 @@ const createPractise = async (arrows) => {
   const result = await createPractiseAPI(arrows);
 };
 
+const onStart = () => {
+  start.value = true;
+  scores.value = [];
+};
+
 async function onReceiveMessage(content) {
   const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
@@ -54,6 +61,7 @@ async function onReceiveMessage(content) {
       }
     }
     if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
+      start.value = false;
       practiseResult.value = {
         ...msg.practice,
         arrows: JSON.parse(msg.practice.arrows),
@@ -86,9 +94,7 @@ const nextStep = async () => {
     scores.value = [];
     await createPractise(total);
     step.value = 4;
-    setTimeout(() => {
-      start.value = true;
-    }, 500);
+    startCount.value = true;
   } else if (step.value === 5) {
     const result = await getHomeData();
     if (result.user) updateUser(result.user);
@@ -216,6 +222,7 @@ const onClose = () => {
         :onClose="onClose"
         :result="practiseResult"
       />
+      <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{

src/pages/index.vue

@@ -106,8 +106,13 @@ onMounted(async () => {
         </view>
       </view>
 
-      <view class="ranking-section" @click="() => toPage('/pages/ranking')">
+      <view class="ranking-section">
         <image src="../static/a4@2x.png" mode="widthFix" />
+        <button
+          class="into-btn"
+          @click="() => toPage('/pages/ranking')"
+          hover-class="none"
+        ></button>
         <view class="ranking-players">
           <img src="../static/juezhanbang.png" mode="widthFix" />
           <view class="player-avatars">
@@ -252,6 +257,14 @@ onMounted(async () => {
   z-index: -1;
 }
 
+.into-btn {
+  position: absolute;
+  top: 40px;
+  left: calc(50% - 100px);
+  width: 200px;
+  height: 100px;
+}
+
 .ranking-players {
   display: flex;
   align-items: center;

src/pages/my-device.vue

@@ -87,9 +87,9 @@ const backToHome = () => {
         <image src="../static/scan.png" mode="widthFix" />
         <text>扫码绑定弓箭</text>
       </view>
-      <view @click="() => (showTip = true)">
-        <view>找不到我的弓箭？</view>
-        <view>我还没有弓箭</view>
+      <view>
+        <view @click="() => (showTip = true)">找不到我的弓箭？</view>
+        <view @click="toDeviceIntroPage">我还没有弓箭</view>
       </view>
       <CoachComment
         mode="square"

src/pages/practise-one.vue

@@ -8,6 +8,7 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
+import StartCountdown from "@/components/StartCountdown.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
 import { MESSAGETYPES, roundsName } from "@/constants";
 import useStore from "@/store";
@@ -15,6 +16,7 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 const { updateUser } = store;
+const startCount = ref(false);
 const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
@@ -25,9 +27,15 @@ const power = ref(0);
 
 const onReady = async () => {
   await createPractiseAPI(total);
-  start.value = true;
   currentRound.value = 0;
   scores.value = [];
+  startCount.value = true;
+};
+
+const onStart = () => {
+  start.value = true;
+  scores.value = [];
+  currentRound.value = 0;
 };
 
 async function onReceiveMessage(content) {
@@ -45,6 +53,7 @@ async function onReceiveMessage(content) {
       }
     }
     if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
+      start.value = false;
       practiseResult.value = {
         ...msg.practice,
         arrows: JSON.parse(msg.practice.arrows),
@@ -104,9 +113,12 @@ onUnmounted(() => {
         :onClose="onComplete"
         :result="practiseResult"
       />
+      <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
     <view :style="{ marginBottom: '20px' }">
-      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
+      <SButton v-if="!startCount" :onClick="onReady">
+        准备好了，直接开始
+      </SButton>
     </view>
   </Container>
 </template>

src/pages/practise-two.vue

@@ -8,6 +8,7 @@ import ScoreResult from "@/components/ScoreResult.vue";
 import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import BowPower from "@/components/BowPower.vue";
+import StartCountdown from "@/components/StartCountdown.vue";
 import { createPractiseAPI, getHomeData } from "@/apis";
 import { MESSAGETYPES } from "@/constants";
 import useStore from "@/store";
@@ -15,6 +16,7 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 const { updateUser } = store;
+const startCount = ref(false);
 const start = ref(false);
 const showScore = ref(false);
 const scores = ref([]);
@@ -25,9 +27,15 @@ const power = ref(0);
 
 const onReady = async () => {
   await createPractiseAPI(total);
-  start.value = true;
   currentRound.value = 0;
   scores.value = [];
+  startCount.value = true;
+};
+
+const onStart = () => {
+  start.value = true;
+  scores.value = [];
+  currentRound.value = 0;
 };
 
 async function onReceiveMessage(content) {
@@ -42,6 +50,7 @@ async function onReceiveMessage(content) {
       }
     }
     if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
+      start.value = false;
       practiseResult.value = {
         ...msg.practice,
         arrows: JSON.parse(msg.practice.arrows),
@@ -104,9 +113,12 @@ onUnmounted(() => {
         :onClose="onComplete"
         :result="practiseResult"
       />
+      <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>
     <view :style="{ marginBottom: '20px' }">
-      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
+      <SButton v-if="!startCount" :onClick="onReady"
+        >准备好了，直接开始</SButton
+      >
     </view>
   </Container>
 </template>