细节优化

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="
-      () => {
-        if (!disabled) onClick();
-      }
-    "
+    @click="onBtnClick"
   >
-    <slot />
+    <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>