281 lines
8.7 KiB
Vue
281 lines
8.7 KiB
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 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),
|
||
lvl: msg.lvl,
|
||
};
|
||
generateCanvasImage(
|
||
"shareCanvas",
|
||
1,
|
||
user.value,
|
||
practiseResult.value
|
||
);
|
||
}, 1500);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
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;
|
||
setTimeout(() => {
|
||
uni.$emit("play-sound", "请开始射击");
|
||
}, 300);
|
||
} else if (step.value === 5) {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}
|
||
};
|
||
|
||
const onClose = () => {
|
||
if (
|
||
practiseResult.value.arrows &&
|
||
practiseResult.value.arrows.length === total
|
||
) {
|
||
setTimeout(() => {
|
||
practiseResult.value = {};
|
||
showGuide.value = false;
|
||
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="请开始连续射箭" :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"
|
||
: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>
|