142 lines
3.9 KiB
Vue
142 lines
3.9 KiB
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>
|