UI流程完善

2025-05-10 16:57:36 +08:00
parent a8834ad899
commit 0ce3b77f0a
32 changed files with 896 additions and 68 deletions
--- a/src/pages/equipment-debug.vue
+++ b/src/pages/equipment-debug.vue
@@ -3,7 +3,7 @@ import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
 import BowTarget from "@/components/BowTarget.vue";
-import Button from "@/components/Button.vue";
+import Button from "@/components/SButton.vue";
 </script>

 <template>
@@ -16,7 +16,7 @@ import Button from "@/components/Button.vue";
        <text>确保射击距离有5米</text>
      </view>
    </Guide>
-    <BowTarget />
+    <BowTarget avatar="../static/avatar.png" power="45" />
    <view>
      <text>本次射程5.2米，已达距离要求</text>
      <Button>准备好了直接开始</Button>
--- a/src/pages/first-try.vue
+++ b/src/pages/first-try.vue
@@ -1,19 +1,120 @@
 <script setup>
+import { ref } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
-import Button from "@/components/Button.vue";
+import SButton from "@/components/SButton.vue";
+import Swiper from "@/components/Swiper.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import ScoreResult from "@/components/ScoreResult.vue";
+import ScorePanel from "@/components/ScorePanel.vue";
+const scores = ref(new Array(10).fill(9));
+const step = ref(0);
+const stepButtonTexts = [
+  "开始",
+  "进入下一个任务",
+  "进入下一个任务",
+  "我准备好了，开始",
+  "",
+  "退出新手试炼",
+];
+const nextStep = () => {
+  if (step.value === 0) {
+    step.value = 1;
+  } else if (step.value === 1) {
+    step.value = 2;
+  } else if (step.value === 2) {
+    step.value = 3;
+  } else if (step.value === 3) {
+    step.value = 4;
+  } else if (step.value === 5) {
+    uni.navigateBack({
+      delta: 1,
+    });
+  }
+};
+const showScore = ref(false);
+setTimeout(() => {
+  showScore.value = true;
+}, 1000);
+const onClose = () => {
+  showScore.value = false;
+  setTimeout(() => {
+    step.value = 5;
+  }, 500);
+};
 </script>

 <template>
  <view>
    <AppBackground />
    <Header title="新手试炼场" />
-    <Guide>
-      hi，Rocker，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）</Guide
-    >
-    <image src="../static/first-try-tip.png" class="try-tip" mode="widthFix" />
-    <Button>开始</Button>
+    <Guide v-if="step !== 4" :tall="step === 2 || step === 5">
+      <text v-if="step === 0">
+        hi，<text :style="{ color: '#fed847' }">Rocker</text>
+        ，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）
+      </text>
+      <text v-if="step === 1"
+        >这是我们人帅技高的高教练。首先，请按教练示范，尝试自己去做这些动作和手势吧。</text
+      >
+      <view v-if="step === 2">
+        <text :style="{ color: '#fed847' }">你知道5米射程有多远吗？</text>
+        <text>
+          在我们的排位赛中，射程小于5米的成绩无效、哦！建议平时练习距离至少5米。现在，来边射箭边调整你的站位点吧！
+        </text>
+      </view>
+      <view v-if="step === 3">
+        <text :style="{ color: '#fed847' }">一切准备就绪</text>
+        <text>试着完成一个真正的弓箭手任务吧！</text>
+      </view>
+      <view v-if="step === 5">
+        <text :style="{ color: '#fed847' }">新手试炼场通关啦，优秀！</text>
+        <text
+          >反曲弓运动基本知识和射灵世界系统规则你已Get，是不是挺容易呀：）</text
+        >
+      </view>
+    </Guide>
+    <image
+      src="../static/first-try-tip.png"
+      class="try-tip"
+      mode="widthFix"
+      v-if="step === 0 || step === 5"
+    />
+    <view style="height: 450px" v-if="step === 1">
+      <Swiper
+        :data="[
+          '../static/first-try-tip.png',
+          '../static/first-try-tip.png',
+          '../static/first-try-tip.png',
+        ]"
+      />
+    </view>
+    <ShootProgress v-if="step === 4" tips="请开始连续射箭" total="10" />
+    <BowTarget
+      avatar="../static/avatar.png"
+      power="45"
+      :debug="step === 2"
+      v-if="step === 2 || step === 4"
+      :tips="step === 4 ? '' : '本次射程5.2米，已达到距离要求'"
+    />
+    <ScorePanel v-if="step === 4" :scores="scores" :total="12" :rowCount="6" />
+    <ScoreResult
+      :total="12"
+      :rowCount="6"
+      :show="showScore"
+      v-if="step === 4"
+      :onClose="onClose"
+    />
+    <image
+      src="../static/first-try-tip.png"
+      class="try-tip"
+      mode="widthFix"
+      v-if="step === 3"
+    />
+    <SButton v-if="step !== 4" :onClick="nextStep">{{
+      stepButtonTexts[step]
+    }}</SButton>
  </view>
 </template>

--- a/src/pages/friend-battle.vue
+++ b/src/pages/friend-battle.vue
@@ -2,6 +2,7 @@
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
+import SButton from "@/components/SButton.vue";
 </script>

 <template>
@@ -30,7 +31,9 @@ import Guide from "@/components/Guide.vue";
          <image src="../static/question-mark.png" mode="widthFix" />
        </view>
      </view>
-      <button>创建约战房</button>
+      <view>
+        <SButton width="70%" :rounded="30">创建约战房</SButton>
+      </view>
    </view>
  </view>
 </template>
@@ -74,6 +77,7 @@ import Guide from "@/components/Guide.vue";
  font-size: 14px;
  padding: 3px 0;
  font-weight: bold;
+  color: #000;
 }
 .create-room {
  position: relative;
@@ -111,13 +115,7 @@ import Guide from "@/components/Guide.vue";
 .create-room > view > view:nth-child(3) > image {
  width: 40%;
 }
-.create-room > button {
-  background-color: #fed847;
-  border-radius: 30px;
-  margin: 0 auto;
-  width: 70%;
-  font-size: 15px;
+.create-room > view:last-child {
  transform: translateY(-110%);
-  padding: 15px 0;
 }
 </style>
--- a/src/pages/practise-one.vue
+++ b/src/pages/practise-one.vue
@@ -1,13 +1,34 @@
 <script setup>
+import { ref } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScorePanel2 from "@/components/ScorePanel2.vue";
+const showScore = ref(false);
+
+setTimeout(() => {
+  showScore.value = true;
+}, 2000);
 </script>

 <template>
-  <view>
-    <AppBackground />
+  <view class="container">
+    <AppBackground type="1" />
    <Header title="个人单组练习" />
+    <ShootProgress tips="请连续射箭36支" total="120" />
+    <BowTarget
+      totalRound="10"
+      currentRound="4"
+      avatar="../static/avatar.png"
+      power="45"
+    />
+    <ScorePanel2 :scores="[1, 2, 3, 4, 5, 6]" />
  </view>
 </template>

-<style scoped></style>
+<style scoped>
+.container {
+  position: relative;
+}
+</style>
--- a/src/pages/practise-two.vue
+++ b/src/pages/practise-two.vue
@@ -1,13 +1,42 @@
 <script setup>
+import { ref } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
+import ShootProgress from "@/components/ShootProgress.vue";
+import BowTarget from "@/components/BowTarget.vue";
+import ScorePanel from "@/components/ScorePanel.vue";
+import ScoreResult from "@/components/ScoreResult.vue";
+const scores = ref(new Array(32).fill(9));
+const showScore = ref(false);
+
+setTimeout(() => {
+  showScore.value = true;
+}, 2000);
 </script>

 <template>
-  <view>
+  <view class="container">
    <AppBackground />
    <Header title="个人耐力挑战" />
+    <ShootProgress tips="请连续射箭36支" total="120" />
+    <BowTarget
+      totalRound="10"
+      currentRound="4"
+      avatar="../static/avatar.png"
+      power="45"
+    />
+    <ScorePanel :scores="scores" :total="36" :rowCount="9" />
+    <ScoreResult
+      :total="36"
+      :rowCount="9"
+      :show="showScore"
+      :onClose="() => (showScore = false)"
+    />
  </view>
 </template>

-<style scoped></style>
+<style scoped>
+.container {
+  position: relative;
+}
+</style>
--- a/src/pages/practise.vue
+++ b/src/pages/practise.vue
@@ -23,12 +23,12 @@ const toPractiseTwo = () => {
    <Guide>
      师傅领进门，修行靠自身，赶紧练起来吧。坚持练习就能你快速升级，早日加入全国排位赛！</Guide
    >
-    <button class="practise1" @click="toPractiseOne">
+    <view class="practise1" @click="toPractiseOne">
      <image src="../static/practise1.png" class="practise1" mode="widthFix" />
-    </button>
-    <button class="practise2" @click="toPractiseTwo">
+    </view>
+    <view class="practise2" @click="toPractiseTwo">
      <image src="../static/practise2.png" class="practise2" mode="widthFix" />
-    </button>
+    </view>
  </view>
 </template>