shoot-miniprograms/src/pages/practise-two.vue

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Container from "@/components/Container.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";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import TestDistance from "@/components/TestDistance.vue";
import { createPractiseAPI, getHomeData } 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 start = ref(false);
const scores = ref([]);
const total = 36;
const currentRound = ref(0);
const practiseResult = ref({});
const power = ref(0);
const practiseId = ref("");

const onReady = async () => {
  const result = await createPractiseAPI(total);
  if (result) practiseId.value = result.id;
  currentRound.value = 0;
  scores.value = [];
  start.value = true;
};

async function onReceiveMessage(messages = []) {
  messages.forEach((msg) => {
    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
      scores.value.push(msg.target);
      power.value = msg.target.battery;
      currentRound.value += 1;
    }
    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",
            3,
            user.value,
            practiseResult.value
          );
        }, 2000);
      }
    }
  });
}

async function onComplete() {
  if (
    practiseResult.value.arrows &&
    practiseResult.value.arrows.length === total
  ) {
    uni.navigateBack();
  } else {
    practiseResult.value = {};
    start.value = false;
    scores.value = [];
    currentRound.value = 0;
  }
}

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

onUnmounted(() => {
  uni.$off("socket-inbox", onReceiveMessage);
});
</script>

<template>
  <Container :bgType="1" title="日常耐力挑战">
    <view>
      <TestDistance v-if="!start && !practiseResult.arrows" />
      <block v-if="start || practiseResult.arrows">
        <ShootProgress
          :start="start"
          :tips="`请连续射箭${total}支`"
          :total="120"
        />
        <view class="infos">
          <Avatar :src="user.avatar" :size="35" />
          <BowPower :power="power" />
        </view>
        <BowTarget
          :start="start"
          :totalRound="start ? total : 0"
          :currentRound="currentRound"
          :scores="scores"
        />
        <ScorePanel
          v-if="start"
          :scores="scores.map((s) => s.ring)"
          :total="total"
          :rowCount="total / 4"
          :margin="1.5"
          :font-size="20"
        />
        <ScoreResult
          v-if="practiseResult.arrows"
          :total="total"
          :rowCount="9"
          :onClose="onComplete"
          :result="practiseResult"
          :tipSrc="`../static/${
            practiseResult.arrows.length < total ? '2un' : ''
          }finish-tip.png`"
        />
        <canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
      </block>
    </view>
    <view :style="{ marginBottom: '20px' }">
      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
    </view>
  </Container>
</template>

<style scoped>
.infos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  padding-top: 15px;
}
</style>