shoot-miniprograms/src/pages/first-try.vue

<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 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 type="1" />
    <Header title="新手试炼场" />
    <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">
        <view :style="{ display: 'flex', flexDirection: 'column' }">
          <text :style="{ color: '#fed847' }">你知道5米射程有多远吗？</text>
          <text>
            在我们的排位赛中，射程小于5米的成绩无效、哦！建议平时练习距离至少5米。现在，来边射箭边调整你的站位点吧！
          </text>
        </view>
      </view>
      <view v-if="step === 3">
        <view :style="{ display: 'flex', flexDirection: 'column' }">
          <text :style="{ color: '#fed847' }">一切准备就绪</text>
          <text>试着完成一个真正的弓箭手任务吧！</text>
        </view>
      </view>
      <view v-if="step === 5">
        <view
          :style="{ display: 'flex', flexDirection: 'column', marginTop: 20 }"
        >
          <text :style="{ color: '#fed847' }">新手试炼场通关啦，优秀！</text>
          <text
            >反曲弓运动基本知识和射灵世界系统规则你已Get，是不是挺容易呀：）</text
          >
          <!-- 这行是占位用的 -->
          <text :style="{ opacity: 0 }">新手试炼场通关啦，优秀！</text>
        </view>
      </view>
    </Guide>
    <image
      src="../static/first-try-tip.png"
      class="try-tip"
      mode="widthFix"
      v-if="step === 0"
    />
    <image
      src="../static/first-try-tip2.png"
      class="try-tip"
      mode="widthFix"
      v-if="step === 3"
    />
    <image
      src="../static/first-try-tip3.png"
      class="try-tip"
      mode="widthFix"
      v-if="step === 5"
    />
    <view style="height: 570px" 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"
    />
    <SButton v-if="step !== 4" :onClick="nextStep">{{
      stepButtonTexts[step]
    }}</SButton>
  </view>
</template>

<style scoped>
.try-tip {
  width: calc(100% - 20px);
  margin: 10px 10px;
}
</style>