laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更换测距页面

Browse Source
This commit is contained in:
kron
2025-07-05 14:52:41 +08:00
parent 054bf2ef21
commit 1c70471959
10 changed files with 224 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/BowTarget.vue
View File

@@ -25,10 +25,6 @@ const props = defineProps({
type: Number,
default: 0,
},
tips: {
type: String,
default: "",
},
scores: {
type: Array,
default: () => [],
@@ -183,7 +179,6 @@ const simulShoot = async () => {
<view v-if="avatar" class="footer">
<image :src="avatar" mode="widthFix" />
</view>
<text v-if="tips">{{ tips }}</text>
<view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
模拟射箭
</view>
@@ -263,13 +258,6 @@ const simulShoot = async () => {
border-radius: 50%;
border: 1px solid #fff;
}
.container > text {
width: 100%;
color: #fed847;
text-align: center;
line-height: 40px;
display: block;
}
.simul {
position: absolute;
bottom: 20px;

3
src/components/ShootProgress.vue
View File

@@ -56,11 +56,10 @@ watch(
(newVal, oldVal) => {
if (newVal === false) {
if (timer.value) clearInterval(timer.value);
remain.value = props.total;
}
if (!oldVal && newVal === true) {
setTimeout(() => {
remain.value = props.total;
setTimeout(() => {
timer.value = setInterval(() => {
if (remain.value > 0) {
remain.value--;

2
src/components/StartCountdown.vue
View File

@@ -38,7 +38,7 @@ onUnmounted(() => {
</script>
<template>
<view class="container" :style="{ top: `calc(50% - ${isIos ? 59 : 64}px)` }">
<view class="container" :style="{ top: `calc(50% - ${isIos ? 56 : 64}px)` }">
<view class="number pump-in" v-if="count === 3">3</view>
<view class="number pump-in" v-if="count === 2">2</view>
<view class="number pump-in" v-if="count === 1">1</view>

124
src/components/TestDistance.vue Normal file
View File

@@ -0,0 +1,124 @@
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Guide from "@/components/Guide.vue";
import BowPower from "@/components/BowPower.vue";
import Avatar from "@/components/Avatar.vue";
import { simulShootAPI } from "@/apis";
import { checkConnection } from "@/util";
import { MESSAGETYPES } 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,
},
});
const arrow = ref({});
const power = ref(0);
const distance = ref(0);
const debugInfo = ref("");
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
arrow.value = msg.target;
power.value = msg.target.battery;
distance.value = msg.target.dst / 100;
debugInfo.value = msg.target;
}
});
}
const simulShoot = async () => {
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
};
onMounted(() => {
checkConnection();
uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
uni.$off("socket-inbox", onReceiveMessage);
});
</script>
<template>
<view class="container">
<Guide v-if="guide">
<view
:style="{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
paddingRight: '10px',
}"
>
<view :style="{ display: 'flex', flexDirection: 'column' }">
<text :style="{ color: '#fed847' }">请预先射几箭测试</text>
<text>请确保射击距离只有5米</text>
</view>
<BowPower :power="power" />
</view>
</Guide>
<image
class="text-bg"
src="https://api.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
mode="widthFix"
/>
<view class="warnning-text" v-if="distance > 0">
<text>当前距离{{ distance }}米</text>
<text v-if="distance >= 5">已达到距离要求</text>
<text v-else>请调整站位</text>
</view>
<view class="debug-text">{{ debugInfo }}</view>
<view>
<Avatar :src="user.avatar" :size="35" />
<view class="simul" @click="simulShoot" :style="{ color: '#fff' }">
模拟射箭
</view>
</view>
</view>
</template>
<style scoped>
.container {
width: 100vw;
display: flex;
flex-direction: column;
}
.text-bg {
width: 100%;
}
.warnning-text {
position: fixed;
color: #fed847;
font-size: 30px;
display: flex;
flex-direction: column;
align-items: center;
left: calc(50% - 27vw);
top: 30%;
}
.warnning-text > text {
width: 54vw;
text-align: center;
}
.container > view:last-child {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin-top: -27vw;
}
.debug-text {
position: fixed;
left: calc(50% - 45vw);
top: 66%;
color: #fff;
font-size: 14px;
}
</style>

27
src/pages/battle-room.vue
View File

@@ -15,8 +15,8 @@ import PlayersRow from "@/components/PlayersRow.vue";
import SModal from "@/components/SModal.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import RoundEndTip from "@/components/RoundEndTip.vue";
import TestDistance from "@/components/TestDistance.vue";
import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
import { checkConnection } from "@/util";
import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -127,10 +127,6 @@ async function onReceiveMessage(messages = []) {
) {
console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
}
if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
scores.value.push(msg.target);
power.value = msg.target.battery;
}
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
// 这里会掉多次;
timerSeq.value += 1;
@@ -288,7 +284,6 @@ const exitRoom = async () => {
};
onMounted(() => {
checkConnection();
uni.$on("socket-inbox", onReceiveMessage);
});
@@ -358,25 +353,7 @@ onUnmounted(() => {
:redTeam="redTeam"
:players="players"
/>
<Guide noBg>
<view :style="{ display: 'flex', justifyContent: 'space-between' }">
<view :style="{ display: 'flex', flexDirection: 'column' }">
<text :style="{ color: '#fed847' }">请预先射几箭测试</text>
<text>请确保射击距离只有5米</text>
</view>
<BowPower :power="power" />
</view>
</Guide>
<BowTarget
:scores="scores"
:tips="
!start && scores.length > 0
? `本次射程${scores[scores.length - 1].dst / 100}米，${
scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
}达到距离要求`
: ''
"
/>
<TestDistance :guide="false" />
</view>
<view v-if="step === 3">
<ShootProgress

33
src/pages/first-try.vue
View File

@@ -10,8 +10,9 @@ 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 { createPractiseAPI } from "@/apis";
import { generateCanvasImage, checkConnection } from "@/util";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -33,7 +34,7 @@ const title = ref("新手试炼场");
const start = ref(false);
const practiseResult = ref({});
const power = ref(0);
const btnDisabled = ref(false);
// const btnDisabled = ref(false);
const practiseId = ref("");
const createPractise = async (arrows) => {
@@ -47,9 +48,9 @@ async function onReceiveMessage(messages = []) {
scores.value.push(msg.target);
power.value = msg.target.battery;
// if (step.value === 2 && msg.target.dst / 100 > 5) {
if (step.value === 2 && msg.target.dst > 5) {
btnDisabled.value = false;
}
// if (step.value === 2 && msg.target.dst > 5) {
// btnDisabled.value = false;
// }
}
if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
if (practiseId.value && practiseId.value === msg.practice.id) {
@@ -72,7 +73,6 @@ async function onReceiveMessage(messages = []) {
}
onMounted(() => {
checkConnection();
uni.$on("socket-inbox", onReceiveMessage);
});
@@ -85,7 +85,7 @@ const nextStep = async () => {
step.value = 1;
title.value = "凹造型";
} else if (step.value === 1) {
btnDisabled.value = true;
// btnDisabled.value = true;
step.value = 2;
title.value = "感知距离";
} else if (step.value === 2) {
@@ -201,29 +201,20 @@ const onClose = () => {
:total="100"
:start="start"
/>
<TestDistance v-if="step === 2" :guide="false" />
<view
class="infos"
v-if="step === 2 || step === 4"
v-if="step === 4"
:style="{ marginBottom: step === 2 ? '40px' : '0' }"
>
<text v-if="step === 2">大人，请射箭</text>
<Avatar v-if="step === 4" :src="user.avatar" :size="35" />
<Avatar :src="user.avatar" :size="35" />
<BowPower :power="power" />
</view>
<BowTarget
v-if="step === 4"
:start="start"
:avatar="step === 2 ? user.avatar : ''"
:debug="step === 2"
v-if="step === 2 || step === 4"
:currentRound="step === 4 ? scores.length : 0"
:totalRound="step === 4 ? total : 0"
:tips="
step === 2 && scores.length > 0
? `本次射程${scores[scores.length - 1].dst / 100}米，${
scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
}达到距离要求`
: ''
"
:scores="scores"
/>
<ScorePanel
@@ -245,7 +236,7 @@ const onClose = () => {
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
</view>
<view :style="{ marginBottom: '20px' }">
<SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">{{
<SButton v-if="step !== 4" :onClick="nextStep">{{
stepButtonTexts[step]
}}</SButton>
</view>

19
src/pages/melee-match.vue
View File

@@ -13,6 +13,7 @@ import Avatar from "@/components/Avatar.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import Matching from "@/components/Matching.vue";
import SModal from "@/components/SModal.vue";
import TestDistance from "@/components/TestDistance.vue";
import { matchGameAPI, readyGameAPI } from "@/apis";
import { MESSAGETYPES, getMessageTypeName } from "@/constants";
import useStore from "@/store";
@@ -79,10 +80,6 @@ async function onReceiveMessage(messages = []) {
});
};
}
if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
scores.value.push(msg.target);
power.value = msg.target.battery;
}
if (msg.id !== battleId.value) return;
if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
start.value = true;
@@ -140,16 +137,8 @@ onUnmounted(() => {
>
<view class="container">
<block v-if="battleId">
<BattleHeader v-if="players.length" :players="players" />
<Guide noBg v-if="!start && battleId">
<view :style="{ display: 'flex', justifyContent: 'space-between' }">
<view :style="{ display: 'flex', flexDirection: 'column' }">
<text :style="{ color: '#fed847' }">请预先射几箭测试</text>
<text>请确保射击距离只有5米</text>
</view>
<BowPower :power="45" />
</view>
</Guide>
<BattleHeader :players="players" />
<TestDistance v-if="!start" :guide="false" />
<ShootProgress
v-if="start"
:seq="seq"
@@ -161,7 +150,7 @@ onUnmounted(() => {
<BowPower :power="power" />
</view>
<BowTarget
v-if="battleId"
v-if="start"
:showE="start"
:currentRound="scores.length"
:totalRound="start ? 12 : 0"

20
src/pages/practise-one.vue
View File

@@ -8,8 +8,9 @@ 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, checkConnection } from "@/util";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES, roundsName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -70,7 +71,6 @@ async function onComplete() {
}
onMounted(() => {
checkConnection();
uni.$on("socket-inbox", onReceiveMessage);
});
@@ -82,11 +82,15 @@ onUnmounted(() => {
<template>
<Container :bgType="1" title="个人单组练习">
<view>
<TestDistance v-if="!start && !practiseResult.arrows" />
<block v-if="start || practiseResult.arrows">
<ShootProgress
:tips="`${
!start || scores.length === 12
? ''
: `请开始射箭第${roundsName[Math.ceil((scores.length + 1) / 3)]}轮`
: `请开始射箭第${
roundsName[Math.ceil((scores.length + 1) / 3)]
}轮`
}`"
:start="start"
:total="120"
@@ -100,15 +104,8 @@ onUnmounted(() => {
:totalRound="start ? total / 4 : 0"
:currentRound="currentRound"
:scores="scores"
:tips="
!start && scores.length > 0
? `本次射程${scores[scores.length - 1].dst / 100}米，${
scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
}达到距离要求`
: ''
"
/>
<ScorePanel2 v-if="start" :scores="scores.map((s) => s.ring)" />
<ScorePanel2 :scores="scores.map((s) => s.ring)" />
<ScoreResult
v-if="practiseResult.arrows"
:rowCount="6"
@@ -120,6 +117,7 @@ onUnmounted(() => {
}finish-tip.png`"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
</block>
</view>
<view :style="{ marginBottom: '20px' }">
<SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>

14
src/pages/practise-two.vue
View File

@@ -8,8 +8,9 @@ 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, checkConnection } from "@/util";
import { generateCanvasImage } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -74,7 +75,6 @@ async function onComplete() {
}
onMounted(() => {
checkConnection();
uni.$on("socket-inbox", onReceiveMessage);
});
@@ -86,6 +86,8 @@ onUnmounted(() => {
<template>
<Container :bgType="1" title="个人单组练习">
<view>
<TestDistance v-if="!start && !practiseResult.arrows" />
<block v-if="start || practiseResult.arrows">
<ShootProgress
:start="start"
:tips="`请连续射箭${total}支`"
@@ -100,13 +102,6 @@ onUnmounted(() => {
:totalRound="start ? total : 0"
:currentRound="currentRound"
:scores="scores"
:tips="
!start && scores.length > 0
? `本次射程${scores[scores.length - 1].dst / 100}米，${
scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
}达到距离要求`
: ''
"
/>
<ScorePanel
v-if="start"
@@ -127,6 +122,7 @@ onUnmounted(() => {
}finish-tip.png`"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
</block>
</view>
<view :style="{ marginBottom: '20px' }">
<SButton v-if="!start" :onClick="onReady">准备好了，直接开始</SButton>

23
src/pages/team-match.vue
View File

@@ -14,6 +14,7 @@ import SButton from "@/components/SButton.vue";
import Matching from "@/components/Matching.vue";
import SModal from "@/components/SModal.vue";
import RoundEndTip from "@/components/RoundEndTip.vue";
import TestDistance from "@/components/TestDistance.vue";
import { matchGameAPI, readyGameAPI } from "@/apis";
import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
import useStore from "@/store";
@@ -71,10 +72,6 @@ async function onReceiveMessage(messages = []) {
) {
console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
}
if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
scores.value.push(msg.target);
power.value = msg.target.battery;
}
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
// 这里会掉多次;
onComplete.value = () => {
@@ -167,15 +164,7 @@ onUnmounted(() => {
:redTeam="redTeam"
:blueTeam="blueTeam"
/>
<Guide noBg v-if="!start">
<view :style="{ display: 'flex', justifyContent: 'space-between' }">
<view :style="{ display: 'flex', flexDirection: 'column' }">
<text :style="{ color: '#fed847' }">请预先射几箭测试</text>
<text>请确保射击距离只有5米</text>
</view>
<BowPower :power="45" />
</view>
</Guide>
<TestDistance v-if="!start" :guide="false" />
<ShootProgress v-if="start" :tips="tips" :seq="seq" :total="15" />
<PlayersRow
v-if="start"
@@ -184,6 +173,7 @@ onUnmounted(() => {
:redTeam="redTeam"
/>
<BowTarget
v-if="start"
mode="team"
:showE="start && user.id === currentShooterId"
:power="start ? power : 0"
@@ -191,13 +181,6 @@ onUnmounted(() => {
:totalRound="totalRounds"
:scores="scores"
:blueScores="blueScores"
:tips="
!start && scores.length > 0
? `本次射程${scores[scores.length - 1].dst / 100}米，${
scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
}达到距离要求`
: ''
"
/>
<BattleFooter
v-if="start"