细节优化

src/App.vue

@@ -114,4 +114,27 @@ button::after {
   animation: scaleOut 0.3s ease-out forwards;
   transform-origin: center center;
 }
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pumpIn {
+  from {
+    transform: scale(2);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+.pump-in {
+  animation: pumpIn 0.3s ease-out forwards;
+  transform-origin: center center;
+}
 </style>

src/components/AppFooter.vue

@@ -19,6 +19,11 @@ const tabs = [
 
 function handleTabClick(index) {
   if (!user.value.id) return props.signin();
+  if (index === 0) {
+    uni.navigateTo({
+      url: "/pages/be-vip",
+    });
+  }
   if (index === 1) {
     uni.navigateTo({
       url: "/pages/my-growth",

src/components/BowData.vue

@@ -53,7 +53,6 @@ const props = defineProps({
       :total="arrows.length"
       :scores="arrows.map((a) => a.ring)"
     />
-    <text>长按保存本次靶纸</text>
   </view>
 </template>
 
@@ -70,11 +69,6 @@ const props = defineProps({
   align-items: center;
   z-index: 10;
 }
-.container > text:last-child {
-  font-size: 14px;
-  color: #fff9;
-  margin-top: 20px;
-}
 .header {
   display: flex;
   justify-content: space-between;

src/components/BowTarget.vue

@@ -173,18 +173,6 @@ function calcRealY(num) {
 .target > image:last-child {
   width: 100%;
 }
-@keyframes pumpIn {
-  from {
-    transform: scale(2);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-.pump-in {
-  animation: pumpIn 0.3s ease-out forwards;
-  transform-origin: center center;
-}
 .hit {
   position: absolute;
   width: 20px;

src/components/SButton.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref } from "vue";
 const props = defineProps({
   width: {
     type: String,
@@ -10,7 +11,7 @@ const props = defineProps({
   },
   onClick: {
     type: Function,
-    default: () => {},
+    default: async () => {},
   },
   disabled: {
     type: Boolean,
@@ -25,6 +26,17 @@ const props = defineProps({
     default: "#000",
   },
 });
+
+const loading = ref(false);
+const onBtnClick = async () => {
+  if (props.disabled || loading.value) return;
+  loading.value = true;
+  try {
+    await props.onClick();
+  } finally {
+    loading.value = false;
+  }
+};
 </script>
 
 <template>
@@ -38,13 +50,14 @@ const props = defineProps({
       color,
     }"
     open-type="getUserInfo"
-    @click="
+    @click="onBtnClick"
-      () => {
-        if (!disabled) onClick();
-      }
-    "
   >
+    <block v-if="!loading">
       <slot />
+    </block>
+    <block v-else>
+      <image src="../static/btn-loading.png" mode="widthFix" class="loading" />
+    </block>
   </button>
 </template>
 
@@ -55,9 +68,15 @@ const props = defineProps({
   line-height: 44px;
   font-weight: bold;
   font-size: 15px;
-  text-align: center;
   display: flex;
+  text-align: center;
   justify-content: center;
   align-items: center;
 }
+.loading {
+  width: 25px;
+  height: 25px;
+  background-blend-mode: darken;
+  animation: rotate 1s linear infinite;
+}
 </style>

src/components/ScoreResult.vue

@@ -131,7 +131,7 @@ setTimeout(() => {
 .container-header > text:last-child {
   color: #fff;
   text-align: center;
-  margin-top: -100px;
+  margin-top: -85px;
 }
 .container-content {
   width: calc(100vw - 20px);

src/components/ShootProgress.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onUnmounted } from "vue";
 const props = defineProps({
   start: {
     type: Boolean,
@@ -17,6 +17,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  onTimeIsUp: {
+    type: Function,
+    default: () => {},
+  },
 });
 
 const barColor = ref("#fed847");
@@ -40,6 +44,8 @@ watch(
     timer.value = setInterval(() => {
       if (remain.value > 0) {
         remain.value--;
+      } else {
+        props.onTimeIsUp();
       }
     }, 1000);
   }
@@ -48,11 +54,16 @@ watch(
 watch(
   () => props.start,
   (newVal, oldVal) => {
+    if (newVal === false) {
+      if (timer.value) clearInterval(timer.value);
+    }
     if (oldVal === false && newVal === true) {
       remain.value = props.total;
       timer.value = setInterval(() => {
         if (remain.value > 0) {
           remain.value--;
+        } else {
+          props.onTimeIsUp();
         }
       }, 1000);
     } else {
@@ -60,6 +71,10 @@ watch(
     }
   }
 );
+
+onUnmounted(() => {
+  if (timer.value) clearInterval(timer.value);
+});
 </script>
 
 <template>
@@ -74,7 +89,7 @@ watch(
     <view>
       <view
         :style="{
-          width: `${((total - remain) / total) * 100}%`,
+          width: `${(remain / total) * 100}%`,
           backgroundColor: barColor,
           right: tips.includes('红队') ? 0 : 'unset',
         }"
@@ -116,7 +131,6 @@ watch(
   height: 20px;
   line-height: 20px;
   position: relative;
-  transition: all 0.5s linear;
   overflow: hidden;
 }
 .container > view:last-child > view {
@@ -124,7 +138,7 @@ watch(
   height: 20px;
   border-radius: 20px;
   z-index: -1;
-  transition: all 0.3s linear;
+  transition: all 1s linear;
 }
 .container > view:last-child > text {
   z-index: 1;

src/components/StartCountdown.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref, watch, onUnmounted } from "vue";
+const props = defineProps({
+  start: {
+    type: Boolean,
+    default: false,
+  },
+  onFinish: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const count = ref(4);
+const timer = ref(null);
+watch(
+  () => props.start,
+  (newVal) => {
+    if (newVal) {
+      if (timer.value) clearInterval(timer.value);
+      timer.value = setInterval(() => {
+        if (count.value <= 1) {
+          props.onFinish();
+          clearInterval(timer.value);
+        }
+        count.value -= 1;
+      }, 1000);
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+onUnmounted(() => {
+  if (timer.value) clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="container">
+    <view class="number pump-in" v-if="count === 3">3</view>
+    <view class="number pump-in" v-if="count === 2">2</view>
+    <view class="number pump-in" v-if="count === 1">1</view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  position: fixed;
+  top: 120px;
+  left: calc(50% - 30px);
+}
+.number {
+  color: #fff9;
+  font-size: 88px;
+  width: 60px;
+  text-align: center;
+}
+</style>

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(() => {
+    startCount.value = true;
-      start.value = true;
-    }, 500);
   } 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 @click="() => (showTip = true)">找不到我的弓箭？</view>
-        <view>我还没有弓箭</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>

src/store.js

@@ -43,8 +43,8 @@ export default defineStore("store", {
           }
           return false;
         });
-      }
         this.user.lvlName = lvlName;
+      }
     },
     updateDevice(deviceId, deviceName) {
       this.device.deviceId = deviceId;
@@ -65,8 +65,8 @@ export default defineStore("store", {
           }
           return false;
         });
-      }
         this.user.lvlName = lvlName;
+      }
     },
   },