197 lines
4.4 KiB
Vue
197 lines
4.4 KiB
Vue
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||
import Guide from "@/components/Guide.vue";
|
||
import BowPower from "@/components/BowPower.vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import audioManager from "@/audioManager";
|
||
import { simulShootAPI } from "@/apis";
|
||
import { MESSAGETYPESV2 } from "@/constants";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user, device } = storeToRefs(store);
|
||
const props = defineProps({
|
||
guide: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
isBattle: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
count: {
|
||
type: Number,
|
||
default: 15,
|
||
},
|
||
});
|
||
const arrow = ref({});
|
||
const distance = ref(0);
|
||
const showsimul = ref(false);
|
||
const count = ref(props.count);
|
||
const timer = ref(null);
|
||
|
||
const updateTimer = (value) => {
|
||
count.value = Math.round(value);
|
||
};
|
||
onMounted(() => {
|
||
audioManager.play("请射箭测试距离");
|
||
if (props.isBattle) {
|
||
timer.value = setInterval(() => {
|
||
count.value -= 1;
|
||
if (count.value < 0) clearInterval(timer.value);
|
||
}, 1000);
|
||
}
|
||
uni.$on("update-timer", updateTimer);
|
||
});
|
||
onBeforeUnmount(() => {
|
||
if (timer.value) clearInterval(timer.value);
|
||
uni.$off("update-timer", updateTimer);
|
||
});
|
||
|
||
async function onReceiveMessage(msg) {
|
||
if (Array.isArray(msg)) return;
|
||
if (msg.type === MESSAGETYPESV2.TestDistance) {
|
||
distance.value = Number((msg.shootData.distance / 100).toFixed(2));
|
||
if (distance.value >= 5) audioManager.play("距离合格");
|
||
else audioManager.play("距离不足");
|
||
}
|
||
}
|
||
|
||
const simulShoot = async () => {
|
||
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
|
||
};
|
||
|
||
onMounted(() => {
|
||
uni.$on("socket-inbox", onReceiveMessage);
|
||
const accountInfo = uni.getAccountInfoSync();
|
||
const envVersion = accountInfo.miniProgram.envVersion;
|
||
if (envVersion !== "release") showsimul.value = true;
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
uni.$off("socket-inbox", onReceiveMessage);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view class="container">
|
||
<view class="test-area">
|
||
<image
|
||
class="text-bg"
|
||
src="../../../static/training-difficulty-design/par-bg.png"
|
||
mode="widthFix"
|
||
/>
|
||
<button
|
||
class="simul"
|
||
@click="simulShoot"
|
||
hover-class="none"
|
||
v-if="showsimul"
|
||
>
|
||
模拟射箭
|
||
</button>
|
||
<view class="warnning-text">
|
||
<view class="target-tip">当前靶子为<text class="text-yellow">20cm</text>全环靶,请更换靶子</view>
|
||
<block v-if="distance > 0">
|
||
<text>当前距离<text class="text-yellow">{{ distance }}</text>米</text>
|
||
<text v-if="distance >= 5">已达到距离要求</text>
|
||
<text v-else>请调整站位</text>
|
||
</block>
|
||
<block v-else>
|
||
<text>请射箭，测试站距</text>
|
||
</block>
|
||
</view>
|
||
<view class="user-row">
|
||
<Avatar :src="user.avatar" :size="35" />
|
||
<BowPower />
|
||
</view>
|
||
</view>
|
||
<view v-if="isBattle" class="ready-timer">
|
||
<image src="../../../static/test-tip.png" mode="widthFix" />
|
||
<view v-if="count >= 0">
|
||
<text>具体正式比赛还有</text>
|
||
<text>{{ count }}</text>
|
||
<text>秒</text>
|
||
</view>
|
||
<view v-else> 进入中... </view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100vw;
|
||
max-height: 70vh;
|
||
}
|
||
.ready-timer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
transform: translateY(-10vw);
|
||
}
|
||
.ready-timer > image:first-child {
|
||
width: 40%;
|
||
}
|
||
.ready-timer > view {
|
||
width: 80%;
|
||
height: 45px;
|
||
background-color: #545454;
|
||
border-radius: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transform: translateY(-8vw);
|
||
color: #bebebe;
|
||
font-size: 15px;
|
||
}
|
||
.ready-timer > view > text:nth-child(2) {
|
||
color: #fed847;
|
||
font-size: 20px;
|
||
width: 22px;
|
||
text-align: center;
|
||
}
|
||
.test-area {
|
||
width: 100%;
|
||
height: auto;
|
||
position: relative;
|
||
}
|
||
|
||
.text-bg {
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
.warnning-text {
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 200rpx;
|
||
position: absolute;
|
||
top: 142rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
font-size: 36rpx;
|
||
text-align: center;
|
||
}
|
||
.target-tip{
|
||
margin-bottom: 28rpx;
|
||
}
|
||
.text-yellow{
|
||
color: #FED847;
|
||
}
|
||
.simul {
|
||
position: absolute;
|
||
color: #fff;
|
||
right: 10px;
|
||
top: 30rpx;
|
||
}
|
||
.user-row{
|
||
position: absolute;
|
||
bottom: 34rpx;
|
||
left: 0rpx;
|
||
width: 100%;
|
||
padding: 0 34rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
</style>
|