shoot-miniprograms/src/pages/practise-one.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 ScorePanel2 from "@/components/ScorePanel2.vue";
import ScoreResult from "@/components/ScoreResult.vue";
import SButton from "@/components/SButton.vue";
import { createPractiseAPI } from "@/apis";
import { MESSAGETYPES, roundsName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const start = ref(false);
const showScore = ref(false);
const scores = ref([]);
const total = 12;
const practiseResult = ref({});
const power = ref(0);

const onReady = async () => {
  await createPractiseAPI(total);
  start.value = true;
  scores.value = [];
};

async function onReceiveMessage(content) {
  const messages = JSON.parse(content).data.updates || [];
  messages.forEach((msg) => {
    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
      scores.value.push(msg.target);
      power.value = msg.target.battery;
      if (scores.value.length === total) {
        showScore.value = true;
      }
    }
    if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
      practiseResult.value = {
        ...msg.practice,
        arrows: JSON.parse(msg.practice.arrows),
      };
    }
  });
}

function onComplete() {
  uni.navigateBack();
  showScore.value = false;
}

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

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

<template>
  <Container :bgType="1" title="个人单组练习">
    <view>
      <ShootProgress
        :tips="`${
          scores.length === 12
            ? ''
            : `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 4)]}轮`
        }`"
        :start="start"
        :total="120"
      />
      <BowTarget
        :totalRound="total"
        :currentRound="start ? scores.length + 1 : 0"
        :avatar="user.avatarUrl"
        :power="power"
        :scores="scores"
      />
      <ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
      <ScoreResult
        :total="total"
        :rowCount="6"
        :show="showScore"
        :onClose="onComplete"
        :result="practiseResult"
      />
    </view>
    <view :style="{ marginBottom: '10px' }">
      <SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>
    </view>
  </Container>
</template>

<style scoped></style>