UI流程完善

src/components/AppBackground.vue

@@ -1,7 +1,18 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  type: {
+    type: Number,
+    default: 0,
+  },
+});
+const bgs = ref(["../static/app-bg.png", "../static/app-bg2.png"]);
+</script>
+
 <template>
   <view class="background">
-    <image class="bg-image" src="../static/app-bg.png" mode="aspectFill" />
-    <view class="bg-overlay"></view>
+    <image class="bg-image" :src="bgs[type]" mode="aspectFill" />
+    <view class="bg-overlay" v-if="type === 0"></view>
   </view>
 </template>
 
@@ -29,6 +40,10 @@
   height: 100%;
   left: 0;
   top: 0;
-  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.8), rgba(0, 0, 0, 0.8));
+  background: linear-gradient(
+    to bottom,
+    rgba(26, 26, 26, 0.8),
+    rgba(0, 0, 0, 0.8)
+  );
 }
-</style>
+</style>

src/components/BowTarget.vue

@@ -1,15 +1,50 @@
-<script setup></script>
+<script setup>
+defineProps({
+  totalRound: {
+    type: Number,
+    default: 0,
+  },
+  currentRound: {
+    type: Number,
+    default: 0,
+  },
+  avatar: {
+    type: String,
+    default: "",
+  },
+  power: {
+    type: Number,
+    default: 0,
+  },
+  tips: {
+    type: String,
+    default: "",
+  },
+  debug: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
 
 <template>
   <view class="container">
     <view class="header">
-      <image src="../static/avatar.png" mode="widthFix" />
+      <text v-if="debug" class="header-tips">大人，请射箭</text>
+      <image v-if="!debug" :src="avatar" mode="widthFix" />
       <view>
         <image src="../static/b-power.png" mode="widthFix" />
-        <view>电量50%</view>
+        <view>电量{{ power }}%</view>
       </view>
+      <text v-if="!tips && totalRound > 0">{{
+        currentRound + "/" + totalRound
+      }}</text>
     </view>
     <image src="../static/bow-target.png" mode="widthFix" />
+    <view v-if="debug" class="footer">
+      <image :src="avatar" mode="widthFix" />
+    </view>
+    <text v-if="tips">{{ tips }}</text>
   </view>
 </template>
 
@@ -17,33 +52,60 @@
 .container {
   position: relative;
   width: calc(100% - 30px);
-  padding: 50px 15px;
+  padding: 15px;
 }
 .container > image {
   width: 100%;
+  padding: 10px 0;
 }
 .header {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: calc(100% - 30px);
+  width: calc(100% - 20px);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 15px;
   font-size: 13px;
+  padding: 0 10px;
 }
-.header > image {
+.header > image:first-child {
   width: 40px;
   height: 40px;
 }
-.header > view {
+.header > view:nth-child(2) {
   display: flex;
   align-items: center;
   color: #b9b9b9;
 }
-.header > view > image {
+.header > view:nth-child(2) > image {
   width: 22px;
   margin-right: 5px;
 }
+.header > text:nth-child(3) {
+  position: absolute;
+  font-size: 20px;
+  color: #fed847;
+  top: 75px;
+  font-size: 16px;
+}
+.header-tips {
+  font-size: 20px;
+  color: #fed847;
+}
+.footer {
+  width: calc(100% - 20px);
+  padding: 0 10px;
+  display: flex;
+  margin-top: -40px;
+}
+.footer > image {
+  width: 40px;
+  height: 40px;
+}
+.container > text {
+  width: 100%;
+  color: #fed847;
+  text-align: center;
+  line-height: 40px;
+  display: block;
+  margin-top: 20px;
+}
 </style>

src/components/Button.vue

@@ -1,23 +0,0 @@
-<script setup>
-</script>
-<template>
-  <view class="container">
-    <button><slot /></button>
-  </view>
-</template>
-
-<style scoped>
-.container {
-  width: 100vw;
-}
-.container > button {
-  margin: 0 auto;
-  height: 40px;
-  line-height: 40px;
-  font-weight: bold;
-  width: calc(100% - 20px);
-  background-color: #fed847;
-  font-size: 15px;
-  border-radius: 10px;
-}
-</style>

src/components/CoachComment.vue

@@ -0,0 +1,61 @@
+<script setup>
+import IconButton from "./IconButton.vue";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  content: {
+    type: String,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'flex' : 'none' }">
+    <view class="scale-in">
+      <image src="../static/coach-comment.png" mode="widthFix" />
+      <slot />
+    </view>
+    <IconButton
+      src="../static/close-gold-outline.png"
+      width="30"
+      :onClick="onClose"
+    />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 70vw;
+  color: #fff;
+  margin-bottom: 25vw;
+}
+.container > view:first-child > image {
+  position: absolute;
+  width: 80vw;
+  left: -5vw;
+  bottom: -20vw;
+  z-index: -1;
+}
+</style>

src/components/Guide.vue

@@ -1,8 +1,8 @@
 <script setup>
 defineProps({
-  title: {
-    type: String,
-    default: "",
+  tall: {
+    type: Boolean,
+    default: false,
   },
 });
 </script>
@@ -11,7 +11,12 @@ defineProps({
   <view class="container">
     <image src="../static/shooter.png" mode="widthFix" />
     <view>
-      <image src="../static/long-bubble.png" mode="widthFix" />
+      <image
+        :src="
+          tall ? '../static/long-bubble-tall.png' : '../static/long-bubble.png'
+        "
+        mode="widthFix"
+      />
       <slot />
     </view>
   </view>

src/components/IconButton.vue

@@ -0,0 +1,39 @@
+<script setup>
+const props = defineProps({
+  name: {
+    type: String,
+    default: "",
+  },
+  src: {
+    type: String,
+    default: "",
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+  width: {
+    type: Number,
+    default: "22",
+  },
+});
+</script>
+<template>
+  <view class="container" @click="onClick">
+    <image :src="src" mode="widthFix" :style="{ width: width + 'px' }" />
+    <text>{{ name }}</text>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container > text {
+  color: #666666;
+  font-size: 12px;
+  margin-top: 5px;
+}
+</style>

src/components/SButton.vue

@@ -0,0 +1,38 @@
+<script setup>
+const props = defineProps({
+  width: {
+    type: String,
+    default: "calc(100vw - 20px)",
+  },
+  rounded: {
+    type: Number,
+    default: 10,
+  },
+  onClick: {
+    type: Function,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <view
+    class="container"
+    :style="{ width: width, borderRadius: rounded + 'px' }"
+    @click="onClick"
+  >
+    <slot />
+  </view>
+</template>
+
+<style scoped>
+.container {
+  margin: 0 auto;
+  height: 40px;
+  line-height: 40px;
+  font-weight: bold;
+  background-color: #fed847;
+  font-size: 15px;
+  text-align: center;
+}
+</style>

src/components/ScorePanel.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  rowCount: {
+    type: Number,
+    default: 0,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+  scores: {
+    type: Array,
+    default: () => [],
+  },
+});
+const items = ref(new Array(props.total).fill(9));
+</script>
+<template>
+  <view class="container">
+    <view
+      v-for="(_, index) in items"
+      :key="index"
+      class="score-item"
+      :style="{ width: 90 / rowCount + 'vw', height: 90 / rowCount + 'vw' }"
+    >
+      {{ scores[index] }}
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 90vw;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0 5vw;
+}
+.score-item {
+  background-image: url("../static/score-bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  color: #fed847;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+}
+</style>

src/components/ScorePanel2.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  scores: {
+    type: Array,
+    default: () => [],
+  },
+});
+const getSum = (a, b, c) => {
+  const sum = (Number(a) || 0) + (Number(b) || 0) + (Number(c) || 0);
+  return sum > 0 ? sum + "环" : "-";
+};
+</script>
+<template>
+  <view class="container">
+    <view>
+      <text>总成绩</text>
+      <text>23环</text>
+    </view>
+    <view
+      v-for="(title, index) in ['第一轮', '第二轮', '第三轮']"
+      :key="index"
+      class="score-item"
+    >
+      <text>{{ title }}</text>
+      <text>{{
+        scores[index * 3 + 0] ? scores[index * 3 + 0] + "环" : "-"
+      }}</text>
+      <text>{{
+        scores[index * 3 + 1] ? scores[index * 3 + 1] + "环" : "-"
+      }}</text>
+      <text>{{
+        scores[index * 3 + 2] ? scores[index * 3 + 2] + "环" : "-"
+      }}</text>
+      <text
+        >{{
+          getSum(
+            scores[index * 3 + 0],
+            scores[index * 3 + 1],
+            scores[index * 3 + 2]
+          )
+        }}</text
+      >
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.container > view {
+  width: 100%;
+  color: aliceblue;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #ffffff66;
+  font-size: 14px;
+  color: #fffc;
+}
+.container > view:first-child {
+  color: #fed847;
+  background-color: #ffffff33;
+}
+.container text {
+  display: block;
+  width: 20vw;
+  text-align: center;
+}
+</style>

src/components/ScoreResult.vue

@@ -0,0 +1,155 @@
+<script setup>
+import { ref } from "vue";
+import IconButton from "@/components/IconButton.vue";
+import SButton from "@/components/SButton.vue";
+import CoachComment from "@/components/CoachComment.vue";
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  onClose: {
+    type: Function,
+    default: () => {},
+  },
+  rowCount: {
+    type: Number,
+    default: 0,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+const items = ref(new Array(props.total).fill(9));
+const showPanel = ref(true);
+const showComment = ref(false);
+const closePanel = () => {
+  showPanel.value = false;
+  setTimeout(() => {
+    props.onClose();
+  }, 300);
+};
+setTimeout(() => {
+  showPanel.value = true;
+}, 300);
+</script>
+
+<template>
+  <view class="container" :style="{ display: show ? 'block' : 'none' }">
+    <view :class="['container-header', showPanel ? 'scale-in' : 'scale-out']">
+      <image src="../static/finish-tip.png" mode="widthFix" />
+      <image src="../static/finish-frame.png" mode="widthFix" />
+      <text>完成36箭，获得36点经验</text>
+    </view>
+    <view
+      class="container-content"
+      :style="{ transform: `translateY(${showPanel ? '0%' : '100%'})` }"
+    >
+      <view>
+        <text>本剧成绩（共{{ total }}环）：</text>
+        <button>
+          <text>查看靶纸</text>
+          <image
+            src="../static/enter-arrow-blue.png"
+            mode="widthFix"
+            :style="{ width: '20px' }"
+          />
+        </button>
+      </view>
+      <view :style="{ gridTemplateColumns: `repeat(${rowCount}, 1fr)` }">
+        <view v-for="(score, index) in items" :key="index">
+          {{ score }}<text>环</text>
+        </view>
+      </view>
+      <view>
+        <IconButton name="分享" src="../static/share.png" />
+        <IconButton
+          name="教练点评"
+          src="../static/review.png"
+          :onClick="() => (showComment = true)"
+        />
+        <SButton width="70vw" :rounded="30" :onClick="closePanel"
+          >下一步</SButton
+        >
+      </view>
+    </view>
+    <CoachComment :show="showComment" :onClose="() => (showComment = false)">
+      您本次练习取得了 环的成绩，所有箭支上靶后的平均点间距为 ，成绩优秀。
+      针对您本次的练习，我们建议您将设备的瞄准器向左侧调整。
+    </CoachComment>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.container-header {
+  margin-top: 20vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  opacity: 0;
+}
+.container-header > text:last-child {
+  color: #fff;
+  text-align: center;
+  margin-top: -100px;
+}
+.container-content {
+  width: calc(100vw - 20px);
+  background-color: #fff;
+  position: absolute;
+  bottom: 0;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 15px 10px;
+  transition: all 0.3s ease;
+  transform: translateY(0);
+}
+.container-content > view:first-child {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.container-content > view:first-child > button {
+  display: flex;
+  align-items: center;
+  color: #287fff;
+  font-size: 14px;
+}
+.container-content > view:nth-child(2) {
+  display: grid;
+  row-gap: 10px;
+  column-gap: 5px;
+  justify-content: flex-start;
+  margin: 10px 0;
+}
+.container-content > view:nth-child(2) > view {
+  background: linear-gradient(#fbfbfb, #f5f5f5);
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 27px;
+  color: #333333;
+}
+.container-content > view:nth-child(2) > view > text {
+  font-size: 12px;
+  color: #666666;
+  margin-left: 3px;
+}
+.container-content > view:nth-child(3) {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+</style>

src/components/ShootProgress.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { ref, onMounted } from "vue";
+const props = defineProps({
+  tips: {
+    type: String,
+    default: "",
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+const remain = ref(0);
+onMounted(() => {
+  remain.value = props.total;
+  setInterval(() => {
+    if (remain.value > 0) {
+      remain.value--;
+    }
+  }, 1000);
+});
+</script>
+
+<template>
+  <view class="container">
+    <view>
+      <image src="../static/shooter.png" mode="widthFix" />
+      <text>{{ remain === 0 ? "射箭时间到！" : tips }}</text>
+      <button>
+        <image src="../static/sound-yellow.png" mode="widthFix" />
+      </button>
+    </view>
+    <view>
+      <view :style="{ width: `${((total - remain) / total) * 100}%` }" />
+      <text>剩余{{ remain }}秒</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 100vw;
+}
+.container > view:first-child {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 15px;
+  color: #fed847;
+  z-index: 1;
+}
+.container > view:first-child > image:first-child {
+  width: 80px;
+}
+.container > view:first-child > button:last-child > image {
+  width: 50px;
+}
+.container > view:last-child {
+  z-index: -1;
+  width: clac(100% - 30px);
+  margin: 0 15px;
+  text-align: center;
+  background-color: #ffffff80;
+  border-radius: 20px;
+  margin-top: -14px;
+  font-size: 12px;
+  height: 20px;
+  line-height: 20px;
+  position: relative;
+  transition: all 0.5s linear;
+  overflow: hidden;
+}
+.container > view:last-child > view {
+  position: absolute;
+  height: 20px;
+  background-color: #fed847;
+  border-radius: 20px;
+  z-index: -1;
+}
+.container > view:last-child > text {
+  z-index: 1;
+}
+</style>

src/components/Swiper.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  interval: {
+    type: Number,
+    default: 3000,
+  },
+  autoplay: {
+    type: Boolean,
+    default: false,
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const currentIndex = ref(0);
+
+const handleChange = (e) => {
+  currentIndex.value = e.detail.current;
+};
+</script>
+
+<template>
+  <view>
+    <swiper
+      class="swiper-container"
+      v-if="data.length > 0"
+      :current="currentIndex"
+      @change="handleChange"
+      :autoplay="autoplay"
+      :interval="interval"
+    >
+      <swiper-item v-for="(imgSrc, index) in data" :key="index">
+        <image :src="imgSrc" mode="widthFix" />
+      </swiper-item>
+    </swiper>
+    <view class="dots">
+      <view
+        v-for="index in data.length"
+        :key="index"
+        class="dot"
+        :class="{ active: currentIndex === index - 1 }"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.swiper-container {
+  width: calc(100% - 20px);
+  margin: 10px;
+  height: 440px;
+  position: relative;
+}
+
+.swiper-container > swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-container image {
+  width: 100%;
+}
+
+.dots {
+  position: absolute;
+  bottom: 27%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.dot.active {
+  background-color: #fff;
+}
+</style>