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

<script setup>
import { ref, onMounted, onUnmounted } from "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";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import TestDistance from "@/components/TestDistance.vue";
import BubbleTip from "@/components/BubbleTip.vue";
import { createPractiseAPI } from "@/apis";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const { updateUser } = store;
const scores = ref([]);
const step = ref(0);
const total = 12;
const stepButtonTexts = [
  "开始",
  "进入下一个任务",
  "进入下一个任务",
  "我准备好了，开始",
  "",
  "退出新手试炼",
];
const title = ref("新手试炼场");
const start = ref(false);
const practiseResult = ref({});
const power = ref(0);
const btnDisabled = ref(false);
const practiseId = ref("");
const showGuide = ref(false);

const guideImages = [
  "https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68bs7z5elwvw7.png",
  "https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68qmi7grgreen.png",
  "https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68hgrw1ip4wae.png",
  "https://api.shelingxingqiu.com/attachment/2025-07-09/db77x684x8zmfrmbla.png",
  "https://api.shelingxingqiu.com/attachment/2025-07-09/db77x67sding7fodnk.png",
  "https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68mpug7cac4yt.png",
  "https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68my783mlmgxv.png",
  "https://api.shelingxingqiu.com/attachment/2025-07-09/db77x68p48ylzirtb0.png",
];

const onSwiperIndexChange = (index) => {
  if (index + 1 === guideImages.length) {
    showGuide.value = true;
  }
};

const createPractise = async (arrows) => {
  const result = await createPractiseAPI(arrows);
  if (result) practiseId.value = result.id;
};

async function onReceiveMessage(messages = []) {
  messages.forEach((msg) => {
    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
      if (scores.value.length < total) {
        scores.value.push(msg.target);
      }
      power.value = msg.target.battery;
      // if (step.value === 2 && msg.target.dst / 100 >= 5) {
      btnDisabled.value = false;
      showGuide.value = true;
      // }
    }
    if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
      if (practiseId.value && practiseId.value === msg.practice.id) {
        setTimeout(() => {
          start.value = false;
          practiseResult.value = {
            ...msg.practice,
            arrows: JSON.parse(msg.practice.arrows),
          };
          generateCanvasImage(
            "shareCanvas",
            1,
            user.value,
            practiseResult.value
          );
        }, 2000);
      }
    }
  });
}

onMounted(() => {
  uni.setKeepScreenOn({
    keepScreenOn: true,
  });
  uni.$on("socket-inbox", onReceiveMessage);
});

onUnmounted(() => {
  uni.setKeepScreenOn({
    keepScreenOn: false,
  });
  uni.$off("socket-inbox", onReceiveMessage);
});

const nextStep = async () => {
  if (step.value === 0) {
    step.value = 1;
    title.value = "-凹造型";
  } else if (step.value === 1) {
    showGuide.value = false;
    btnDisabled.value = true;
    step.value = 2;
    title.value = "-感知距离";
  } else if (step.value === 2) {
    showGuide.value = false;
    step.value = 3;
    title.value = "-小试牛刀";
  } else if (step.value === 3) {
    title.value = "小试牛刀";
    await createPractise(total);
    scores.value = [];
    step.value = 4;
    start.value = true;
  } else if (step.value === 5) {
    uni.navigateBack({
      delta: 1,
    });
  }
};

const onClose = () => {
  if (
    practiseResult.value.arrows &&
    practiseResult.value.arrows.length === total
  ) {
    setTimeout(() => {
      practiseResult.value = {};
      step.value = 5;
    }, 500);
  } else {
    practiseResult.value = {};
    start.value = false;
    scores.value = [];
    step.value = 3;
  }
};
</script>

<template>
  <Container :bgType="1" :title="title">
    <view class="container">
      <Guide
        v-if="step !== 4"
        :type="
          step === 2
            ? 2
            : step === 5 || (step === 0 && user.nickName.length > 6)
            ? 1
            : 0
        "
      >
        <text v-if="step === 0">
          hi，<text :style="{ color: '#fed847' }">{{ user.nickName }}</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="https://api.shelingxingqiu.com/attachment/2025-07-01/db0ehhek5yutxsetyi.png"
        class="try-tip"
        mode="widthFix"
        v-if="step === 0"
      />
      <image
        src="https://api.shelingxingqiu.com/attachment/2025-07-01/db0ehpzl8hfzeswfrf.png"
        class="try-tip"
        mode="widthFix"
        v-if="step === 3"
      />
      <image
        src="https://api.shelingxingqiu.com/attachment/2025-07-01/db0ehpz9lav58g5drl.png"
        class="try-tip"
        mode="widthFix"
        v-if="step === 5"
      />
      <view style="height: 570px" v-if="step === 1">
        <Swiper :onChange="onSwiperIndexChange" :data="guideImages" />
      </view>
      <ShootProgress
        v-if="step === 4"
        tips="请开始连续射箭"
        :total="100"
        :start="start"
      />
      <TestDistance v-if="step === 2" :guide="false" />
      <view
        class="user-row"
        v-if="step === 4"
        :style="{ marginBottom: step === 2 ? '40px' : '0' }"
      >
        <Avatar :src="user.avatar" :size="35" />
        <BowPower :power="power" />
      </view>
      <BowTarget
        v-if="step === 4"
        :start="start"
        :currentRound="step === 4 ? scores.length : 0"
        :totalRound="step === 4 ? total : 0"
        :scores="scores"
      />
      <ScorePanel
        v-if="step === 4"
        :total="total"
        :rowCount="6"
        :scores="scores.map((s) => s.ring)"
      />
      <ScoreResult
        v-if="practiseResult.arrows"
        :rowCount="6"
        :total="total"
        :onClose="onClose"
        :result="practiseResult"
        :tipSrc="`../static/${
          practiseResult.arrows.length < total ? 'un' : ''
        }finish-tip.png`"
      />
      <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
    </view>
    <view :style="{ marginBottom: '20px' }">
      <SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">
        <BubbleTip v-if="showGuide" :type="step === 1 ? 'long' : 'short'">
          <text :style="{ transform: 'translateY(-18rpx)' }">{{
            step === 1 ? "学会了，我摆得比教练还帅" : "我找到合适的点位了"
          }}</text>
        </BubbleTip>
        {{ stepButtonTexts[step] }}
      </SButton>
    </view>
  </Container>
</template>

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