feat：比赛优化
This commit is contained in:
@@ -1,3 +1,6 @@
|
|||||||
|
export const AUDIO_INTERRUPTION_BEGIN_EVENT = "audio-interruption-begin";
|
||||||
|
export const AUDIO_INTERRUPTION_END_EVENT = "audio-interruption-end";
|
||||||
|
|
||||||
export const audioFils = {
|
export const audioFils = {
|
||||||
tententen: "https://static.shelingxingqiu.com/shootmini/static/audio/tententen.mp3",
|
tententen: "https://static.shelingxingqiu.com/shootmini/static/audio/tententen.mp3",
|
||||||
点击按钮: "https://static.shelingxingqiu.com/shootmini/static/audio/%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE.mp3",
|
点击按钮: "https://static.shelingxingqiu.com/shootmini/static/audio/%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE.mp3",
|
||||||
@@ -97,7 +100,7 @@ function debugLog(...args) {
|
|||||||
const envVersion = accountInfo.miniProgram.envVersion;
|
const envVersion = accountInfo.miniProgram.envVersion;
|
||||||
|
|
||||||
// 只在体验版打印日志，正式版(release)和开发版(develop)不打印
|
// 只在体验版打印日志，正式版(release)和开发版(develop)不打印
|
||||||
if (envVersion === "trial") {
|
if (envVersion === "trial" || envVersion === "develop") {
|
||||||
console.log(...args);
|
console.log(...args);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -127,6 +130,7 @@ class AudioManager {
|
|||||||
// 防重复播放保护
|
// 防重复播放保护
|
||||||
this.lastPlayKey = null;
|
this.lastPlayKey = null;
|
||||||
this.lastPlayAt = 0;
|
this.lastPlayAt = 0;
|
||||||
|
this.isInterrupted = false;
|
||||||
|
|
||||||
// 静音开关
|
// 静音开关
|
||||||
this.isMuted = false;
|
this.isMuted = false;
|
||||||
@@ -141,10 +145,41 @@ class AudioManager {
|
|||||||
this.localFileCache = uni.getStorageSync("audio_local_files") || {};
|
this.localFileCache = uni.getStorageSync("audio_local_files") || {};
|
||||||
// 启动时自动清理过期的缓存文件（URL 已不在 audioFils 中的文件）
|
// 启动时自动清理过期的缓存文件（URL 已不在 audioFils 中的文件）
|
||||||
this.cleanObsoleteCache();
|
this.cleanObsoleteCache();
|
||||||
|
this.bindAudioInterruptionEvents();
|
||||||
|
|
||||||
this.initAudios();
|
this.initAudios();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bindAudioInterruptionEvents() {
|
||||||
|
if (this._audioInterruptionBound) return;
|
||||||
|
this._audioInterruptionBound = true;
|
||||||
|
|
||||||
|
const begin = () => {
|
||||||
|
if (this.isInterrupted) return;
|
||||||
|
this.isInterrupted = true;
|
||||||
|
this.stopAll();
|
||||||
|
this.isSequenceRunning = false;
|
||||||
|
this.sequenceQueue = [];
|
||||||
|
this.sequenceIndex = 0;
|
||||||
|
this.pendingPlayKey = null;
|
||||||
|
uni.$emit(AUDIO_INTERRUPTION_BEGIN_EVENT);
|
||||||
|
};
|
||||||
|
|
||||||
|
const end = () => {
|
||||||
|
if (!this.isInterrupted) return;
|
||||||
|
this.isInterrupted = false;
|
||||||
|
uni.$emit(AUDIO_INTERRUPTION_END_EVENT);
|
||||||
|
void this.reloadAll();
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof uni?.onAudioInterruptionBegin === "function") {
|
||||||
|
uni.onAudioInterruptionBegin(begin);
|
||||||
|
}
|
||||||
|
if (typeof uni?.onAudioInterruptionEnd === "function") {
|
||||||
|
uni.onAudioInterruptionEnd(end);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 清理不再使用的缓存文件
|
// 清理不再使用的缓存文件
|
||||||
cleanObsoleteCache() {
|
cleanObsoleteCache() {
|
||||||
const activeUrls = new Set(Object.values(audioFils));
|
const activeUrls = new Set(Object.values(audioFils));
|
||||||
@@ -461,6 +496,10 @@ class AudioManager {
|
|||||||
|
|
||||||
// 播放指定音频或音频数组（数组则按顺序连续播放）
|
// 播放指定音频或音频数组（数组则按顺序连续播放）
|
||||||
play(input, interrupt = true) {
|
play(input, interrupt = true) {
|
||||||
|
if (this.isInterrupted) {
|
||||||
|
debugLog("音频处理中断状态，忽略播放请求");
|
||||||
|
return;
|
||||||
|
}
|
||||||
// 统一规范化为队列
|
// 统一规范化为队列
|
||||||
let queue = [];
|
let queue = [];
|
||||||
if (Array.isArray(input)) {
|
if (Array.isArray(input)) {
|
||||||
@@ -514,6 +553,10 @@ class AudioManager {
|
|||||||
|
|
||||||
// 内部方法：播放单个 key
|
// 内部方法：播放单个 key
|
||||||
_playSingle(key, forceStopAll = false) {
|
_playSingle(key, forceStopAll = false) {
|
||||||
|
if (this.isInterrupted) {
|
||||||
|
debugLog(`音频处理中断状态，跳过播放: ${key}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
// 200ms 内的同 key 重复播放直接忽略，避免“比比赛开始”这类重复首音
|
// 200ms 内的同 key 重复播放直接忽略，避免“比比赛开始”这类重复首音
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
if (this.lastPlayKey === key && now - this.lastPlayAt < 250) {
|
if (this.lastPlayKey === key && now - this.lastPlayAt < 250) {
|
||||||
@@ -557,7 +600,13 @@ class AudioManager {
|
|||||||
// 显式授权播放并立即播放
|
// 显式授权播放并立即播放
|
||||||
this.allowPlayMap.set(key, true);
|
this.allowPlayMap.set(key, true);
|
||||||
|
|
||||||
audio.play();
|
try {
|
||||||
|
audio.play();
|
||||||
|
} catch (err) {
|
||||||
|
this.allowPlayMap.set(key, false);
|
||||||
|
debugLog(`音频 ${key} 播放调用失败`, err?.errMsg || err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.currentPlayingKey = key;
|
this.currentPlayingKey = key;
|
||||||
this.lastPlayKey = key;
|
this.lastPlayKey = key;
|
||||||
this.lastPlayAt = Date.now();
|
this.lastPlayAt = Date.now();
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ const onClick = debounce(async () => {
|
|||||||
await uni.$checkAudio();
|
await uni.$checkAudio();
|
||||||
if (result.mode <= 3) {
|
if (result.mode <= 3) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/team-battle?battleId=${result.matchId}`,
|
url: `/pages/team-battle/index?battleId=${result.matchId}`,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ const backToGame = debounce(async () => {
|
|||||||
await checkAudioProgress();
|
await checkAudioProgress();
|
||||||
if (result.mode <= 3) {
|
if (result.mode <= 3) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/team-battle?battleId=${result.matchId}`,
|
url: `/pages/team-battle/index?battleId=${result.matchId}`,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
|
|||||||
@@ -185,7 +185,13 @@ onBeforeUnmount(() => {
|
|||||||
}}</text
|
}}</text
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="currentPage === 'pages/team-battle'" class="battle-progress">
|
<view
|
||||||
|
v-if="
|
||||||
|
currentPage === 'pages/team-battle' ||
|
||||||
|
currentPage === 'pages/team-battle/index'
|
||||||
|
"
|
||||||
|
class="battle-progress"
|
||||||
|
>
|
||||||
<HeaderProgress />
|
<HeaderProgress />
|
||||||
</view>
|
</view>
|
||||||
<!-- 对战房间：整个胶囊为分享按钮，房号从 Store 读取；fixed 定位紧靠系统胶囊左侧 -->
|
<!-- 对战房间：整个胶囊为分享按钮，房号从 Store 读取；fixed 定位紧靠系统胶囊左侧 -->
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch, onMounted, computed } from "vue";
|
import { ref, watch } from "vue";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
isRed: {
|
isRed: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -10,7 +10,7 @@ const props = defineProps({
|
|||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
},
|
||||||
currentShooterId: {
|
currentShooterId: {
|
||||||
type: Number,
|
type: [Number, String],
|
||||||
default: "",
|
default: "",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -30,31 +30,35 @@ const getPos = (id) => {
|
|||||||
return sort * 40;
|
return sort * 40;
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
const syncPlayers = () => {
|
||||||
props.team.forEach((p, index) => {
|
const nextPlayers = {};
|
||||||
players.value[p.id] = { sort: index, ...p };
|
const shooterId = props.currentShooterId;
|
||||||
|
const shooterIndex = props.team.findIndex(
|
||||||
|
(p) => String(p?.id) === String(shooterId)
|
||||||
|
);
|
||||||
|
const nextTeam = [...props.team];
|
||||||
|
|
||||||
|
currentTeam.value = !!shooterId && shooterIndex >= 0;
|
||||||
|
firstName.value = "";
|
||||||
|
|
||||||
|
if (currentTeam.value) {
|
||||||
|
const target = nextTeam.splice(shooterIndex, 1)[0];
|
||||||
|
if (target) {
|
||||||
|
nextTeam.unshift(target);
|
||||||
|
firstName.value = target.name || "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextTeam.forEach((p, index) => {
|
||||||
|
if (p?.id) nextPlayers[p.id] = { sort: index, ...p };
|
||||||
});
|
});
|
||||||
});
|
players.value = nextPlayers;
|
||||||
|
};
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.currentShooterId,
|
[() => props.team, () => props.currentShooterId],
|
||||||
(newVal) => {
|
syncPlayers,
|
||||||
if (!newVal) return;
|
{ immediate: true, deep: true }
|
||||||
const index = props.team.findIndex((p) => p.id === newVal);
|
|
||||||
currentTeam.value = index >= 0;
|
|
||||||
if (index >= 0) {
|
|
||||||
const newPlayers = [...props.team];
|
|
||||||
const target = newPlayers.splice(index, 1)[0];
|
|
||||||
if (target) {
|
|
||||||
newPlayers.unshift(target);
|
|
||||||
firstName.value = target.name;
|
|
||||||
newPlayers.forEach((p, index) => {
|
|
||||||
players.value[p.id] = { sort: index, ...p };
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -70,7 +74,7 @@ watch(
|
|||||||
/>
|
/>
|
||||||
<view
|
<view
|
||||||
v-for="(item, index) in team"
|
v-for="(item, index) in team"
|
||||||
:key="index"
|
:key="item.id || index"
|
||||||
class="player"
|
class="player"
|
||||||
:style="{
|
:style="{
|
||||||
width: (isFirst(item.id) ? 80 : 60) + 'rpx',
|
width: (isFirst(item.id) ? 80 : 60) + 'rpx',
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/team-battle"
|
"path": "pages/team-battle/index"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/melee-battle"
|
"path": "pages/melee-battle"
|
||||||
|
|||||||
@@ -195,7 +195,7 @@ async function onReceiveMessage(message) {
|
|||||||
uni.setStorageSync("blue-team", message.teams[1].players || []);
|
uni.setStorageSync("blue-team", message.teams[1].players || []);
|
||||||
uni.setStorageSync("red-team", message.teams[2].players || []);
|
uni.setStorageSync("red-team", message.teams[2].players || []);
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: "/pages/team-battle?battleId=" + message.matchId,
|
url: "/pages/team-battle/index?battleId=" + message.matchId,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
|
|||||||
@@ -278,9 +278,7 @@ async function exit() {
|
|||||||
url: `/pages/battle-room?roomNumber=${data.value.roomId}&fromResult=1`,
|
url: `/pages/battle-room?roomNumber=${data.value.roomId}&fromResult=1`,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.redirectTo({
|
uni.navigateBack();
|
||||||
url: '/pages/ranking',
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ const handleMatchTimeout = async () => {
|
|||||||
if (battle && battle.matchId) {
|
if (battle && battle.matchId) {
|
||||||
uni.showToast({ title: "匹配成功，正在进入...", icon: "none" });
|
uni.showToast({ title: "匹配成功，正在进入...", icon: "none" });
|
||||||
if (battle.mode <= 3) {
|
if (battle.mode <= 3) {
|
||||||
uni.redirectTo({ url: `/pages/team-battle?battleId=${battle.matchId}` });
|
uni.redirectTo({ url: `/pages/team-battle/index?battleId=${battle.matchId}` });
|
||||||
} else {
|
} else {
|
||||||
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
|
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
|
||||||
}
|
}
|
||||||
@@ -76,7 +76,7 @@ async function cancelMatch() {
|
|||||||
const battle = await getBattleAPI();
|
const battle = await getBattleAPI();
|
||||||
if (battle && battle.matchId) {
|
if (battle && battle.matchId) {
|
||||||
if (battle.mode <= 3) {
|
if (battle.mode <= 3) {
|
||||||
uni.redirectTo({ url: `/pages/team-battle?battleId=${battle.matchId}` });
|
uni.redirectTo({ url: `/pages/team-battle/index?battleId=${battle.matchId}` });
|
||||||
} else {
|
} else {
|
||||||
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
|
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
|
||||||
}
|
}
|
||||||
@@ -100,7 +100,7 @@ async function onReceiveMessage(msg) {
|
|||||||
// mode <= 3 为团队对抗，mode > 3 为大乱斗，覆盖全部 gameType（1~5），不再遗漏
|
// mode <= 3 为团队对抗，mode > 3 为大乱斗，覆盖全部 gameType（1~5），不再遗漏
|
||||||
if (msg.mode <= 3) {
|
if (msg.mode <= 3) {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
url: `/pages/team-battle?battleId=${msg.id}`,
|
url: `/pages/team-battle/index?battleId=${msg.id}`,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.redirectTo({
|
uni.redirectTo({
|
||||||
|
|||||||
91
src/pages/team-battle/components/AppBackground.vue
Normal file
91
src/pages/team-battle/components/AppBackground.vue
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<script setup>
|
||||||
|
import { capsuleHeight } from "@/util";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#050b19",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="background" :style="{ backgroundColor: bgColor }">
|
||||||
|
<image
|
||||||
|
class="bg-image"
|
||||||
|
v-if="type === 0"
|
||||||
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
class="bg-image"
|
||||||
|
v-if="type === 1"
|
||||||
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg2.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
class="bg-image"
|
||||||
|
v-if="type === 2"
|
||||||
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg3.png"
|
||||||
|
:style="{ height: capsuleHeight + 50 + 'px' }"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
class="bg-image"
|
||||||
|
v-if="type === 3"
|
||||||
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg4.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
class="bg-image"
|
||||||
|
v-if="type === 4"
|
||||||
|
src="https://static.shelingxingqiu.com/shootmini/static/app-bg5.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
class="bg-image"
|
||||||
|
v-if="type === 5"
|
||||||
|
src="https://static.shelingxingqiu.com/attachment/2026-01-05/dfgf3b5kp459tfyn0f.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
class="bg-image"
|
||||||
|
v-if="type === 6"
|
||||||
|
src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<view class="bg-overlay" v-if="type === 0"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.background {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-image {
|
||||||
|
width: 100%;
|
||||||
|
/* height: 100%; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-overlay {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(26, 26, 26, 0.2),
|
||||||
|
rgba(0, 0, 0, 0.2)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
123
src/pages/team-battle/components/Avatar.vue
Normal file
123
src/pages/team-battle/components/Avatar.vue
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, watch } from "vue";
|
||||||
|
import useStore from "@/store";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
const store = useStore();
|
||||||
|
const { getLvlImage } = store;
|
||||||
|
const { config } = storeToRefs(store);
|
||||||
|
const props = defineProps({
|
||||||
|
src: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
rankLvl: {
|
||||||
|
type: Number,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
onClick: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
rank: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 45,
|
||||||
|
},
|
||||||
|
borderColor: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const avatarFrame = ref("");
|
||||||
|
watch(
|
||||||
|
() => [config.value, props.rankLvl],
|
||||||
|
() => {
|
||||||
|
if (props.rankLvl !== undefined) {
|
||||||
|
avatarFrame.value = getLvlImage(props.rankLvl);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="avatar" @click="onClick">
|
||||||
|
<image
|
||||||
|
v-if="avatarFrame"
|
||||||
|
:src="avatarFrame"
|
||||||
|
mode="widthFix"
|
||||||
|
:style="{
|
||||||
|
width: Number(size) + 10 + 'px',
|
||||||
|
height: Number(size) + 10 + 'px',
|
||||||
|
}"
|
||||||
|
class="avatar-frame"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="rank === 1"
|
||||||
|
src="../../../static/champ1.png"
|
||||||
|
mode="widthFix"
|
||||||
|
class="avatar-rank"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="rank === 2"
|
||||||
|
src="../../../static/champ2.png"
|
||||||
|
mode="widthFix"
|
||||||
|
class="avatar-rank"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="rank === 3"
|
||||||
|
src="../../../static/champ3.png"
|
||||||
|
mode="widthFix"
|
||||||
|
class="avatar-rank"
|
||||||
|
/>
|
||||||
|
<view v-if="rank > 3" class="rank-view">{{ rank }}</view>
|
||||||
|
<image
|
||||||
|
:src="src || '../../../static/user-icon.png'"
|
||||||
|
mode="widthFix"
|
||||||
|
:style="{
|
||||||
|
width: size + 'px',
|
||||||
|
height: size + 'px',
|
||||||
|
minHeight: size + 'px',
|
||||||
|
borderColor: borderColor || '#fff',
|
||||||
|
}"
|
||||||
|
class="avatar-image"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.avatar {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.avatar-frame {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.avatar-rank,
|
||||||
|
.rank-view {
|
||||||
|
position: absolute;
|
||||||
|
width: 20px;
|
||||||
|
height: 15px;
|
||||||
|
top: -6px;
|
||||||
|
right: -4px;
|
||||||
|
}
|
||||||
|
.rank-view {
|
||||||
|
background-color: #6d6d6d;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
border-top-left-radius: 50%;
|
||||||
|
border-bottom-right-radius: 50%;
|
||||||
|
}
|
||||||
|
.avatar-image {
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
138
src/pages/team-battle/components/BackToGame.vue
Normal file
138
src/pages/team-battle/components/BackToGame.vue
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
||||||
|
import { onShow } from "@dcloudio/uni-app";
|
||||||
|
|
||||||
|
import { getBattleAPI, getUserGameState } from "@/apis";
|
||||||
|
import { debounce } from "@/util";
|
||||||
|
|
||||||
|
import useStore from "@/store";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
const store = useStore();
|
||||||
|
const { user, game } = storeToRefs(store);
|
||||||
|
const { updateGame } = store;
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
signin: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
/** 统一获取当前环境 token，用于守卫：无有效 token 时不发起接口请求 */
|
||||||
|
const getToken = () =>
|
||||||
|
uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
|
||||||
|
|
||||||
|
onShow(async () => {
|
||||||
|
if (user.value.id && getToken()) {
|
||||||
|
setTimeout(async () => {
|
||||||
|
const state = await getUserGameState();
|
||||||
|
updateGame(state.gaming, state.roomId);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => user.value,
|
||||||
|
async (value) => {
|
||||||
|
if (!value.id) {
|
||||||
|
updateGame(false, "");
|
||||||
|
} else if (getToken()) {
|
||||||
|
// 有有效 token 时才查询在局状态，避免 token 失效时反复发起无效请求
|
||||||
|
const state = await getUserGameState();
|
||||||
|
updateGame(state.gaming, state.roomId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const onClick = debounce(async () => {
|
||||||
|
if (loading.value) return;
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const result = await getBattleAPI();
|
||||||
|
if (result && result.matchId) {
|
||||||
|
await uni.$checkAudio();
|
||||||
|
if (result.mode <= 3) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/team-battle/index?battleId=${result.matchId}`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/melee-battle?battleId=${result.matchId}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (game.value.roomID) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/battle-room?roomNumber=" + game.value.roomID,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
updateGame(false, "");
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const gameOver = () => {
|
||||||
|
updateGame(false, "");
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
uni.$on("game-over", gameOver);
|
||||||
|
});
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
uni.$off("game-over", gameOver);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view
|
||||||
|
v-if="game.inBattle || game.roomID"
|
||||||
|
class="back-to-game"
|
||||||
|
@click="onClick"
|
||||||
|
>
|
||||||
|
<image src="../../../static/back-to-game-bg.png" mode="widthFix" />
|
||||||
|
<block v-if="game.inBattle">
|
||||||
|
<image src="../../../static/pk-icon.png" mode="widthFix" />
|
||||||
|
<text>返回进行中的对局</text>
|
||||||
|
</block>
|
||||||
|
<block v-else-if="game.roomID">
|
||||||
|
<text>返回房间</text>
|
||||||
|
</block>
|
||||||
|
<image src="../../../static/back.png" mode="widthFix" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.back-to-game {
|
||||||
|
position: fixed;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
width: 56vw;
|
||||||
|
left: calc(50% - 28vw);
|
||||||
|
top: 12%;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.back-to-game > image:first-child {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100rpx;
|
||||||
|
}
|
||||||
|
.back-to-game > image:nth-child(2) {
|
||||||
|
position: relative;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
.back-to-game > text {
|
||||||
|
position: relative;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.back-to-game > image:last-child {
|
||||||
|
position: relative;
|
||||||
|
width: 15px;
|
||||||
|
margin-left: 5px;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
203
src/pages/team-battle/components/BattleFooter.vue
Normal file
203
src/pages/team-battle/components/BattleFooter.vue
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
=
|
||||||
|
<script setup>
|
||||||
|
import { computed } from "vue";
|
||||||
|
import BowPower from "./BowPower.vue";
|
||||||
|
import { RoundImages } from "@/constants";
|
||||||
|
const props = defineProps({
|
||||||
|
roundResults: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
bluePoints: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
redPoints: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
goldenRound: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const normalRounds = computed(() => {
|
||||||
|
const count = props.roundResults.findIndex((item) => !!item.ifGold);
|
||||||
|
return count > 0 ? count : props.roundResults.length;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="guide-row">
|
||||||
|
<image src="../../../static/shooter.png" mode="widthFix" />
|
||||||
|
<view
|
||||||
|
:style="{
|
||||||
|
marginBottom: '10px',
|
||||||
|
transform: 'scale(0.8) translateX(10px)',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<BowPower />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<image src="../../../static/battle-header-melee.png" mode="widthFix" />
|
||||||
|
<text>蓝队({{ bluePoints }})</text>
|
||||||
|
<text>红队({{ redPoints }})</text>
|
||||||
|
</view>
|
||||||
|
<view class="players">
|
||||||
|
<view>
|
||||||
|
<view v-for="(result, index) in roundResults" :key="index">
|
||||||
|
<block v-if="index + 1 > normalRounds">
|
||||||
|
<image
|
||||||
|
:src="RoundImages[`gold${index + 1 - normalRounds}`]"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<image :src="RoundImages[`round${index + 1}`]" mode="widthFix" />
|
||||||
|
</block>
|
||||||
|
<view>
|
||||||
|
<text>{{
|
||||||
|
result.shoots[1] && result.shoots[1].length
|
||||||
|
? result.shoots[1]
|
||||||
|
.map((item) => item.ring)
|
||||||
|
.reduce((last, next) => last + next, 0)
|
||||||
|
: ""
|
||||||
|
}}</text>
|
||||||
|
<text>环</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<block v-if="roundResults.length < 3">
|
||||||
|
<view v-for="i in 3 - roundResults.length" :key="i">
|
||||||
|
<image
|
||||||
|
:src="RoundImages[`round${i + roundResults.length}`]"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<view>
|
||||||
|
<text></text>
|
||||||
|
<text>环</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view v-for="(result, index) in roundResults" :key="index">
|
||||||
|
<block v-if="index + 1 > normalRounds">
|
||||||
|
<image
|
||||||
|
:src="RoundImages[`gold${index + 1 - normalRounds}`]"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<image :src="RoundImages[`round${index + 1}`]" mode="widthFix" />
|
||||||
|
</block>
|
||||||
|
<view>
|
||||||
|
<text>{{
|
||||||
|
result.shoots[2] && result.shoots[2].length
|
||||||
|
? result.shoots[2]
|
||||||
|
.map((item) => item.ring)
|
||||||
|
.reduce((last, next) => last + next, 0)
|
||||||
|
: ""
|
||||||
|
}}</text>
|
||||||
|
<text>环</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<block v-if="roundResults.length < 3">
|
||||||
|
<view v-for="i in 3 - roundResults.length" :key="i">
|
||||||
|
<image
|
||||||
|
:src="RoundImages[`round${i + roundResults.length}`]"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<view>
|
||||||
|
<text></text>
|
||||||
|
<text>环</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: -100rpx;
|
||||||
|
}
|
||||||
|
.container > view:nth-child(2) {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.container > view:nth-child(2) > image:first-child {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: -6px;
|
||||||
|
}
|
||||||
|
.container > view:nth-child(2) > text {
|
||||||
|
z-index: 1;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: #8a323e;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.container > view:nth-child(2) > text:nth-child(2) {
|
||||||
|
color: #004ac1;
|
||||||
|
}
|
||||||
|
.players {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.players > view {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
.players > view:first-child > view {
|
||||||
|
background: linear-gradient(270deg, #172a86 0%, #0000 100%);
|
||||||
|
}
|
||||||
|
.players > view:last-child > view {
|
||||||
|
background: linear-gradient(270deg, #0000 0%, #6a1212 100%);
|
||||||
|
}
|
||||||
|
.players > view > view {
|
||||||
|
min-height: 52rpx;
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
padding: 2px 20px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.players > view > view > image:first-child {
|
||||||
|
width: 135rpx;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.players > view > view > view:last-child {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.players > view > view > view:last-child > text:first-child {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fed847;
|
||||||
|
margin-right: 5px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.guide-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding: 0 5vw;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.guide-row > image {
|
||||||
|
width: 140rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
200
src/pages/team-battle/components/BattleHeader.vue
Normal file
200
src/pages/team-battle/components/BattleHeader.vue
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<script setup>
|
||||||
|
import Avatar from "./Avatar.vue";
|
||||||
|
import { meleeAvatarColors } from "@/constants";
|
||||||
|
defineProps({
|
||||||
|
players: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
blueTeam: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
redTeam: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
showRank: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
winner: {
|
||||||
|
type: Number,
|
||||||
|
default: 2,
|
||||||
|
},
|
||||||
|
showHeader: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container" :style="{ paddingTop: showHeader ? '5px' : '0' }">
|
||||||
|
<image
|
||||||
|
v-if="showHeader"
|
||||||
|
:src="`../../../static/battle-header${players.length ? '-melee' : ''}.png`"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<view
|
||||||
|
v-if="!players.length && blueTeam.length && redTeam.length"
|
||||||
|
class="players"
|
||||||
|
:style="{ paddingTop: showHeader ? '15px' : '0' }"
|
||||||
|
>
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
v-for="(player, index) in blueTeam"
|
||||||
|
:key="index"
|
||||||
|
:style="{
|
||||||
|
margin: blueTeam.length === 2 ? '0 -5px' : '0 6px',
|
||||||
|
width: `${100 / blueTeam.length - blueTeam.length * 3}%`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
|
||||||
|
<text class="player-name">{{ player.name }}</text>
|
||||||
|
</view>
|
||||||
|
<image
|
||||||
|
v-if="winner === 1"
|
||||||
|
src="../../../static/winner-badge.png"
|
||||||
|
mode="widthFix"
|
||||||
|
class="left-winner-badge"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
v-for="(player, index) in redTeam"
|
||||||
|
:key="index"
|
||||||
|
:style="{
|
||||||
|
margin: redTeam.length === 2 ? '0 -5px' : '0 6px',
|
||||||
|
width: `${100 / redTeam.length - redTeam.length * 3}%`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
|
||||||
|
<text class="player-name">{{ player.name }}</text>
|
||||||
|
</view>
|
||||||
|
<image
|
||||||
|
v-if="winner === 2"
|
||||||
|
src="../../../static/winner-badge.png"
|
||||||
|
mode="widthFix"
|
||||||
|
class="right-winner-badge"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 大乱斗玩家列表：scroll-view 作为横向滚动容器 -->
|
||||||
|
<!-- 小程序中 scroll-view 不支持直接 display:flex，需内部 wrapper view 承载 flex 布局 -->
|
||||||
|
<!-- 仅当玩家 >5 人（内容溢出宽度）时才阻止冒泡，防止与外层 swiper 切换 tab 的手势冲突 -->
|
||||||
|
<scroll-view
|
||||||
|
v-if="players.length"
|
||||||
|
class="players-melee"
|
||||||
|
scroll-x
|
||||||
|
@touchmove="(e) => players.length > 5 && e.stopPropagation()"
|
||||||
|
:style="{ paddingTop: showHeader ? '15px' : '0' }"
|
||||||
|
>
|
||||||
|
<view class="players-melee-inner">
|
||||||
|
<view
|
||||||
|
v-for="(player, index) in players"
|
||||||
|
:key="index"
|
||||||
|
:style="{
|
||||||
|
backgroundColor: meleeAvatarColors[index],
|
||||||
|
width: `${Math.max(100 / players.length, 18)}vw`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
:src="player.avatar"
|
||||||
|
:rankLvl="showRank ? undefined : player.rankLvl"
|
||||||
|
:size="40"
|
||||||
|
:rank="showRank ? index + 1 : 0"
|
||||||
|
/>
|
||||||
|
<text class="player-name">{{ player.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.container > image:first-child {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: -5px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.players {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.players > view {
|
||||||
|
width: 50%;
|
||||||
|
height: 75px;
|
||||||
|
color: #fff9;
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.players > view:first-child {
|
||||||
|
background-color: #364469;
|
||||||
|
}
|
||||||
|
.players > view:last-child {
|
||||||
|
background-color: #692735;
|
||||||
|
}
|
||||||
|
.players > view > view {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.players-melee {
|
||||||
|
height: 80px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.players-melee::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
/* 小程序 scroll-view 不支持直接 flex，通过内层 wrapper 承载横向排列 */
|
||||||
|
.players-melee-inner {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
.players-melee-inner > view {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff9;
|
||||||
|
font-size: 12px;
|
||||||
|
padding-top: 7px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
.player-name {
|
||||||
|
margin-top: 3px;
|
||||||
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.left-winner-badge {
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
top: -12%;
|
||||||
|
left: -5%;
|
||||||
|
transform: rotate(-12deg);
|
||||||
|
}
|
||||||
|
.right-winner-badge {
|
||||||
|
position: absolute;
|
||||||
|
width: 50px;
|
||||||
|
top: -12%;
|
||||||
|
right: -5%;
|
||||||
|
transform: rotate(36deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
40
src/pages/team-battle/components/BowPower.vue
Normal file
40
src/pages/team-battle/components/BowPower.vue
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||||
|
import { getDeviceBatteryAPI } from "@/apis";
|
||||||
|
|
||||||
|
const power = ref(0);
|
||||||
|
const timer = ref(null);
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const data = await getDeviceBatteryAPI();
|
||||||
|
power.value = data.battery;
|
||||||
|
timer.value = setInterval(async () => {
|
||||||
|
const data = await getDeviceBatteryAPI();
|
||||||
|
power.value = data.battery;
|
||||||
|
}, 1000 * 10);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
clearInterval(timer.value);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<image src="../../../static/b-power.png" mode="widthFix" />
|
||||||
|
<view>电量{{ power || 1 }}%</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #ffffffa8;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.container > image {
|
||||||
|
width: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
451
src/pages/team-battle/components/BowTarget.vue
Normal file
451
src/pages/team-battle/components/BowTarget.vue
Normal file
@@ -0,0 +1,451 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
|
||||||
|
import PointSwitcher from "./PointSwitcher.vue";
|
||||||
|
|
||||||
|
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
|
||||||
|
import { simulShootAPI } from "@/apis";
|
||||||
|
import useStore from "@/store";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
const store = useStore();
|
||||||
|
const { user, device } = storeToRefs(store);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
currentRound: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
totalRound: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
scores: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
blueScores: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
latestShotFlash: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: "solo", // solo 单排，team 双排
|
||||||
|
},
|
||||||
|
stop: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const pMode = ref(true);
|
||||||
|
const latestOne = ref(null);
|
||||||
|
const bluelatestOne = ref(null);
|
||||||
|
const timer = ref(null);
|
||||||
|
const dirTimer = ref(null);
|
||||||
|
const angle = ref(null);
|
||||||
|
const circleColor = ref("");
|
||||||
|
|
||||||
|
function showShotFlash(flash) {
|
||||||
|
const shootData = flash?.shootData;
|
||||||
|
if (!shootData) return;
|
||||||
|
if (timer.value) clearTimeout(timer.value);
|
||||||
|
|
||||||
|
if (flash.team === "red") {
|
||||||
|
latestOne.value = shootData;
|
||||||
|
timer.value = setTimeout(() => {
|
||||||
|
latestOne.value = null;
|
||||||
|
}, 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
bluelatestOne.value = shootData;
|
||||||
|
timer.value = setTimeout(() => {
|
||||||
|
bluelatestOne.value = null;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.latestShotFlash,
|
||||||
|
(newVal) => {
|
||||||
|
showShotFlash(newVal);
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
function calcRealX(num, offset = 3.4) {
|
||||||
|
const len = 20.4 + num;
|
||||||
|
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
|
||||||
|
}
|
||||||
|
function calcRealY(num, offset = 3.4) {
|
||||||
|
const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
|
||||||
|
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
|
||||||
|
}
|
||||||
|
const simulShoot = async () => {
|
||||||
|
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
|
||||||
|
};
|
||||||
|
const simulShoot2 = async () => {
|
||||||
|
if (device.value.deviceId) {
|
||||||
|
const r1 = Math.random() > 0.5 ? 0.01 : 0.02;
|
||||||
|
await simulShootAPI(device.value.deviceId, r1, r1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const env = computed(() => {
|
||||||
|
const accountInfo = uni.getAccountInfoSync();
|
||||||
|
return accountInfo.miniProgram.envVersion;
|
||||||
|
});
|
||||||
|
|
||||||
|
const arrowStyle = computed(() => {
|
||||||
|
return {
|
||||||
|
transform: `rotateX(180deg) translate(-50%, -50%) rotate(${
|
||||||
|
360 - angle.value
|
||||||
|
}deg) translateY(105%)`,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onReceiveMessage(message) {
|
||||||
|
if (Array.isArray(message)) return;
|
||||||
|
if (message.type === MESSAGETYPESV2.ShootResult && message.shootData) {
|
||||||
|
if (
|
||||||
|
message.shootData.playerId === user.value.id &&
|
||||||
|
!message.shootData.ring &&
|
||||||
|
message.shootData.angle >= 0
|
||||||
|
) {
|
||||||
|
angle.value = null;
|
||||||
|
setTimeout(() => {
|
||||||
|
if (props.scores[0]) {
|
||||||
|
circleColor.value =
|
||||||
|
message.shootData.playerId === props.scores[0].playerId
|
||||||
|
? "#ff4444"
|
||||||
|
: "#1840FF";
|
||||||
|
}
|
||||||
|
angle.value = message.shootData.angle;
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
uni.$on("socket-inbox", onReceiveMessage);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (timer.value) {
|
||||||
|
clearTimeout(timer.value);
|
||||||
|
timer.value = null;
|
||||||
|
}
|
||||||
|
if (dirTimer.value) {
|
||||||
|
clearTimeout(dirTimer.value);
|
||||||
|
dirTimer.value = null;
|
||||||
|
}
|
||||||
|
uni.$off("socket-inbox", onReceiveMessage);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="header" v-if="totalRound > 0">
|
||||||
|
<text v-if="totalRound > 0" class="round-count">{{
|
||||||
|
(currentRound > totalRound ? totalRound : currentRound) +
|
||||||
|
"/" +
|
||||||
|
totalRound
|
||||||
|
}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="target">
|
||||||
|
<view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
|
||||||
|
<view :style="{ background: circleColor }">
|
||||||
|
<image src="../../../static/dot-circle.png" mode="widthFix" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="stop" class="stop-sign">中场休息</view>
|
||||||
|
<view
|
||||||
|
v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
|
||||||
|
class="e-value fade-in-out"
|
||||||
|
:style="{
|
||||||
|
left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
|
||||||
|
top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
经验 +1
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="latestOne"
|
||||||
|
class="round-tip fade-in-out"
|
||||||
|
:style="{
|
||||||
|
left: calcRealX(latestOne.ring ? latestOne.x : 0, 28),
|
||||||
|
top: calcRealY(latestOne.ring ? latestOne.y : 0, 28),
|
||||||
|
}"
|
||||||
|
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
|
||||||
|
}}<text v-if="latestOne.ring">环</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="
|
||||||
|
bluelatestOne &&
|
||||||
|
bluelatestOne.ring &&
|
||||||
|
user.id === bluelatestOne.playerId
|
||||||
|
"
|
||||||
|
class="e-value fade-in-out"
|
||||||
|
:style="{
|
||||||
|
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 20),
|
||||||
|
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 40),
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
经验 +1
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="bluelatestOne"
|
||||||
|
class="round-tip fade-in-out"
|
||||||
|
:style="{
|
||||||
|
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 28),
|
||||||
|
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 28),
|
||||||
|
}"
|
||||||
|
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
|
||||||
|
}}<text v-if="bluelatestOne.ring">环</text></view
|
||||||
|
>
|
||||||
|
<block v-for="(bow, index) in scores" :key="index">
|
||||||
|
<view
|
||||||
|
v-if="bow.ring > 0"
|
||||||
|
:class="`hit ${pMode ? 'b' : 's'}-point ${
|
||||||
|
index === scores.length - 1 && latestOne ? 'pump-in' : ''
|
||||||
|
}`"
|
||||||
|
:style="{
|
||||||
|
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
|
||||||
|
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
|
||||||
|
backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
|
||||||
|
}"
|
||||||
|
><text v-if="pMode">{{ index + 1 }}</text></view
|
||||||
|
>
|
||||||
|
</block>
|
||||||
|
<block v-for="(bow, index) in blueScores" :key="index">
|
||||||
|
<view
|
||||||
|
v-if="bow.ring > 0"
|
||||||
|
:class="`hit ${pMode ? 'b' : 's'}-point ${
|
||||||
|
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
|
||||||
|
}`"
|
||||||
|
:style="{
|
||||||
|
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
|
||||||
|
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
|
||||||
|
backgroundColor: '#1840FF',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<text v-if="pMode">{{ index + 1 }}</text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<image src="../../../static/bow-target.png" mode="widthFix" />
|
||||||
|
</view>
|
||||||
|
<view class="footer">
|
||||||
|
<PointSwitcher
|
||||||
|
:onChange="(val) => (pMode = val)"
|
||||||
|
:style="{ zIndex: 999 }"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="simul" v-if="env !== 'release'">
|
||||||
|
<button @click="simulShoot">模拟</button>
|
||||||
|
<button @click="simulShoot2">射箭</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: calc(100vw - 30px);
|
||||||
|
height: calc(100vw - 30px);
|
||||||
|
padding: 0px 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.target {
|
||||||
|
position: relative;
|
||||||
|
margin: 10px;
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
height: calc(100% - 20px);
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.e-value {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #0006;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 4px 7px;
|
||||||
|
border-radius: 5px;
|
||||||
|
z-index: 2;
|
||||||
|
width: 50px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.round-tip {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.round-tip > text {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.target > image:last-child {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.hit {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 1;
|
||||||
|
color: #fff;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.s-point {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
min-width: 4px;
|
||||||
|
min-height: 4px;
|
||||||
|
}
|
||||||
|
.b-point {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
min-width: 10px;
|
||||||
|
min-height: 10px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
z-index: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.b-point > text {
|
||||||
|
font-size: 16rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "DINCondensed";
|
||||||
|
/* text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);*/
|
||||||
|
margin-top: 2rpx;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: -40px;
|
||||||
|
}
|
||||||
|
.header > image:first-child {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
.round-count {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fed847;
|
||||||
|
top: 75px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
padding: 0 10px;
|
||||||
|
display: flex;
|
||||||
|
margin-top: -40px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.footer > image {
|
||||||
|
width: 40px;
|
||||||
|
min-height: 40px;
|
||||||
|
max-height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
}
|
||||||
|
.simul {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.simul > button {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.stop-sign {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 44px;
|
||||||
|
color: #fff9;
|
||||||
|
text-align: center;
|
||||||
|
width: 200px;
|
||||||
|
height: 60px;
|
||||||
|
left: calc(50% - 100px);
|
||||||
|
top: calc(50% - 30px);
|
||||||
|
z-index: 99;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.arrow-dir {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 52%;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.arrow-dir > view {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.arrow-dir > view > image {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
transform: translate(-30%, -30%);
|
||||||
|
}
|
||||||
|
@keyframes spring-in {
|
||||||
|
0% {
|
||||||
|
transform: scale(2);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
transform: scale(3);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
transform: scale(2);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
45% {
|
||||||
|
transform: scale(3);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
transform: scale(2);
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: scale(3);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes disappear {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.arrow-dir > view {
|
||||||
|
animation: disappear 3s ease forwards;
|
||||||
|
}
|
||||||
|
.arrow-dir > view > image {
|
||||||
|
animation: spring-in 3s ease forwards;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
353
src/pages/team-battle/components/Container.vue
Normal file
353
src/pages/team-battle/components/Container.vue
Normal file
@@ -0,0 +1,353 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
|
||||||
|
import { onShow } from "@dcloudio/uni-app";
|
||||||
|
import AppBackground from "./AppBackground.vue";
|
||||||
|
import Header from "./Header.vue";
|
||||||
|
import ScreenHint from "./ScreenHint.vue";
|
||||||
|
import BackToGame from "./BackToGame.vue";
|
||||||
|
import {laserAimAPI, getBattleAPI, matchGameAPI} from "@/apis";
|
||||||
|
import { capsuleHeight, debounce } from "@/util";
|
||||||
|
import AudioManager from "@/audioManager";
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
bgType: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
onBack: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
scroll: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
isHome: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
showBackToGame: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
bgColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#050b19",
|
||||||
|
},
|
||||||
|
whiteBackArrow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
showBottom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const isIOS = uni.getDeviceInfo().osName === "ios";
|
||||||
|
const showHint = ref(false);
|
||||||
|
const hintType = ref(0);
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const audioInitProgress = ref(1);
|
||||||
|
const audioProgress = ref(0);
|
||||||
|
const audioTimer = ref(null);
|
||||||
|
|
||||||
|
const showGlobalHint = (type) => {
|
||||||
|
hintType.value = type;
|
||||||
|
showHint.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const hideGlobalHint = () => {
|
||||||
|
showHint.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const restart = () => {
|
||||||
|
uni.restartMiniProgram({
|
||||||
|
path: "/pages/index",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkAudioProgress = async () => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
audioInitProgress.value = AudioManager.getLoadProgress();
|
||||||
|
if (audioInitProgress.value === 1) return resolve();
|
||||||
|
audioTimer.value = setInterval(() => {
|
||||||
|
audioProgress.value = AudioManager.getLoadProgress();
|
||||||
|
if (audioProgress.value === 1) {
|
||||||
|
setTimeout(() => {
|
||||||
|
audioInitProgress.value = 1;
|
||||||
|
}, 200);
|
||||||
|
clearInterval(audioTimer.value);
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
} catch (err) {
|
||||||
|
reject(err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const audioFinalProgress = computed(() => {
|
||||||
|
const left = 1 - audioInitProgress.value;
|
||||||
|
if (left <= 0) return 0;
|
||||||
|
return Math.max(0, (audioProgress.value - audioInitProgress.value) / left);
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadingProgress = computed(() => {
|
||||||
|
if (props.loading && audioInitProgress.value >= 1) return 1;
|
||||||
|
return audioFinalProgress.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (audioTimer.value) clearInterval(audioTimer.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
uni.$showHint = showGlobalHint;
|
||||||
|
uni.$hideHint = hideGlobalHint;
|
||||||
|
uni.$checkAudio = checkAudioProgress;
|
||||||
|
showHint.value = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
const backToGame = debounce(async () => {
|
||||||
|
if (isLoading.value) return; // 防止重复点击
|
||||||
|
|
||||||
|
try {
|
||||||
|
isLoading.value = true;
|
||||||
|
const result = await getBattleAPI();
|
||||||
|
if (result && result.matchId) {
|
||||||
|
await checkAudioProgress();
|
||||||
|
if (result.mode <= 3) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/team-battle/index?battleId=${result.matchId}`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/melee-battle?battleId=${result.matchId}`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error("获取当前游戏失败:", error);
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
uni.navigateBack();
|
||||||
|
};
|
||||||
|
|
||||||
|
const cancelMatching = async () => {
|
||||||
|
uni.$emit("cancelMatching");
|
||||||
|
}
|
||||||
|
|
||||||
|
const goCalibration = async () => {
|
||||||
|
await laserAimAPI();
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/calibration",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view :style="{ paddingTop: capsuleHeight + 'px' }">
|
||||||
|
<AppBackground :type="bgType" :bgColor="bgColor" />
|
||||||
|
<Header
|
||||||
|
v-if="!isHome"
|
||||||
|
:title="title"
|
||||||
|
:onBack="onBack"
|
||||||
|
:whiteBackArrow="whiteBackArrow"
|
||||||
|
/>
|
||||||
|
<BackToGame v-if="showBackToGame" />
|
||||||
|
<scroll-view
|
||||||
|
:scroll-y="scroll"
|
||||||
|
:enhanced="true"
|
||||||
|
:bounces="false"
|
||||||
|
:show-scrollbar="false"
|
||||||
|
:style="{
|
||||||
|
height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px - ${
|
||||||
|
$slots.bottom && showBottom ? (isIOS ? '75px' : '65px') : '0px'
|
||||||
|
})`,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</scroll-view>
|
||||||
|
<view
|
||||||
|
class="bottom-part"
|
||||||
|
v-if="$slots.bottom && showBottom"
|
||||||
|
:style="{ height: isIOS ? '65px' : '55px', paddingTop: '10px' }"
|
||||||
|
>
|
||||||
|
<slot name="bottom"></slot>
|
||||||
|
</view>
|
||||||
|
<ScreenHint :show="showHint">
|
||||||
|
<view v-if="hintType === 1" class="tip-content">
|
||||||
|
<text>完成进行中的对局才能开启新的。</text>
|
||||||
|
<text>您有正在进行中的对局，是否进入?</text>
|
||||||
|
<view>
|
||||||
|
<button hover-class="none" @click="() => (showHint = false)">
|
||||||
|
不进入
|
||||||
|
</button>
|
||||||
|
<button hover-class="none" @click="backToGame" :disabled="isLoading">
|
||||||
|
{{ isLoading ? "加载中..." : "进入" }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="hintType === 2" class="tip-content">
|
||||||
|
<text>离开比赛可能会导致比赛失败，</text>
|
||||||
|
<text>确认离开吗？</text>
|
||||||
|
<view>
|
||||||
|
<button hover-class="none" @click="goBack">离开比赛</button>
|
||||||
|
<button hover-class="none" @click="() => (showHint = false)">
|
||||||
|
继续比赛
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="hintType === 3" class="tip-content">
|
||||||
|
<text>今天不玩了吗？</text>
|
||||||
|
<view>
|
||||||
|
<button hover-class="none" @click="() => (showHint = false)">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button hover-class="none" @click="$clickSound(cancelMatching)">确认</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="hintType === 4" class="tip-content">
|
||||||
|
<text>完成智能弓校准，即可解锁全部功能</text>
|
||||||
|
<view>
|
||||||
|
<button hover-class="none" @click="() => (showHint = false)">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button hover-class="none" @click="goCalibration">去校准</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</ScreenHint>
|
||||||
|
<view v-if="loading || audioInitProgress < 1" class="audio-progress">
|
||||||
|
<image
|
||||||
|
src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<view>
|
||||||
|
<view :style="{ width: `${loadingProgress * 100}%` }">
|
||||||
|
<!-- <image
|
||||||
|
src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text>{{ loading ? loadingText || "加载中..." : "若加载时间过长，请" }}</text>
|
||||||
|
<button v-if="!loading" hover-class="none" @click="restart">点击这里重启</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.tip-content {
|
||||||
|
flex-direction: column;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.tip-content > text {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.tip-content > view {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.tip-content > view > button {
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #fff6;
|
||||||
|
color: #fff;
|
||||||
|
width: 45%;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.tip-content > view > button:last-child {
|
||||||
|
background-color: #fed847;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-content > view > button:disabled {
|
||||||
|
background-color: #ccc;
|
||||||
|
color: #666;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
.audio-progress {
|
||||||
|
z-index: 999;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgb(0 0 0 / 0.8);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.audio-progress > image:nth-child(1) {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.audio-progress > view:nth-child(2) {
|
||||||
|
width: 380rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
background: #595959;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.audio-progress > view:nth-child(2) > view {
|
||||||
|
background: #ffe431;
|
||||||
|
min-height: 6rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
transition: width 0.5s ease;
|
||||||
|
}
|
||||||
|
.audio-progress > view:nth-child(2) > view > image {
|
||||||
|
width: 46rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
}
|
||||||
|
.audio-progress > view:nth-child(3) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.audio-progress > view:nth-child(3) > text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #a2a2a2;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
.audio-progress > view:nth-child(3) > button {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #ffe431;
|
||||||
|
line-height: 32rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
60
src/pages/team-battle/components/Guide.vue
Normal file
60
src/pages/team-battle/components/Guide.vue
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
noBg: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const bubbleTypes = [
|
||||||
|
"../../../static/long-bubble.png",
|
||||||
|
"../../../static/long-bubble-middle.png",
|
||||||
|
"../../../static/long-bubble-tall.png",
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<image src="../../../static/shooter.png" mode="widthFix" />
|
||||||
|
<view>
|
||||||
|
<image
|
||||||
|
v-if="!noBg"
|
||||||
|
:src="bubbleTypes[type]"
|
||||||
|
:style="{ top: type === 2 ? '-6%' : '-13%' }"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 15px;
|
||||||
|
width: clac(100% - 30px);
|
||||||
|
}
|
||||||
|
.container > image {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.container > view {
|
||||||
|
position: relative;
|
||||||
|
width: 80%;
|
||||||
|
min-height: 55px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.container > view > image {
|
||||||
|
position: absolute;
|
||||||
|
left: -7%;
|
||||||
|
width: 108%;
|
||||||
|
}
|
||||||
|
.container > view {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
328
src/pages/team-battle/components/Header.vue
Normal file
328
src/pages/team-battle/components/Header.vue
Normal file
@@ -0,0 +1,328 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
|
||||||
|
import HeaderProgress from "./HeaderProgress.vue";
|
||||||
|
import Avatar from "./Avatar.vue";
|
||||||
|
|
||||||
|
import useStore from "@/store";
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
const store = useStore();
|
||||||
|
const { user, game } = storeToRefs(store);
|
||||||
|
|
||||||
|
const currentPage = computed(() => {
|
||||||
|
const pages = getCurrentPages();
|
||||||
|
return pages[pages.length - 1].route;
|
||||||
|
});
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
onBack: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
whiteBackArrow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onClick = () => {
|
||||||
|
if (props.onBack) {
|
||||||
|
props.onBack();
|
||||||
|
} else {
|
||||||
|
const pages = getCurrentPages();
|
||||||
|
if (pages.length > 1) {
|
||||||
|
uni.navigateBack();
|
||||||
|
} else {
|
||||||
|
uni.redirectTo({
|
||||||
|
url: "/pages/index",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toUserPage = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/user",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const signin = () => {
|
||||||
|
if (!user.value.id) {
|
||||||
|
uni.$emit("point-book-signin");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const pointBook = ref(null);
|
||||||
|
const heat = ref(0);
|
||||||
|
/** 房间号按钮动态定位样式（position: fixed，根据胶囊真实位置计算，脱离 flex 流避免挤压标题） */
|
||||||
|
const battleRoomBtnStyle = ref({});
|
||||||
|
|
||||||
|
const updateLoading = (value) => {
|
||||||
|
loading.value = value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateHot = (value) => {
|
||||||
|
heat.value = value;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const pages = getCurrentPages();
|
||||||
|
const currentPage = pages[pages.length - 1];
|
||||||
|
if (
|
||||||
|
currentPage.route === "pages/point-book-edit" ||
|
||||||
|
currentPage.route === "pages/point-book-detail"
|
||||||
|
) {
|
||||||
|
pointBook.value = uni.getStorageSync("point-book");
|
||||||
|
if (!pointBook.value) {
|
||||||
|
pointBook.value = uni.getStorageSync("last-point-book");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 仅在对战房间页获取胶囊位置，按钮用 fixed 定位精确贴靠胶囊左侧（脱离 flex 流，不挤压标题）
|
||||||
|
if (currentPage.route === "pages/battle-room") {
|
||||||
|
try {
|
||||||
|
const menuButtonRect = uni.getMenuButtonBoundingClientRect();
|
||||||
|
const { windowWidth } = uni.getSystemInfoSync();
|
||||||
|
battleRoomBtnStyle.value = {
|
||||||
|
// 按钮右边缘距视口右侧 = 屏幕宽 - 胶囊左边缘 + 4px 安全间隙
|
||||||
|
right: (windowWidth - menuButtonRect.left + 4) + "px",
|
||||||
|
// 垂直位置与胶囊顶部对齐
|
||||||
|
top: menuButtonRect.top + "px",
|
||||||
|
// 高度与胶囊一致，视觉融合
|
||||||
|
height: menuButtonRect.height + "px",
|
||||||
|
};
|
||||||
|
} catch (e) {
|
||||||
|
// 获取失败时使用 CSS 兜底定位（28vw + 4px 作为 right，8px 作为 top）
|
||||||
|
}
|
||||||
|
}
|
||||||
|
uni.$on("update-hot", updateHot);
|
||||||
|
});
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
uni.$off("update-hot", updateHot);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="back-btn" @click="onClick">
|
||||||
|
<image v-if="whiteBackArrow" src="../../../static/back.png" mode="widthFix" />
|
||||||
|
<image
|
||||||
|
v-if="!whiteBackArrow"
|
||||||
|
src="../../../static/back-black.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view :style="{ color: whiteBackArrow ? '#fff' : '#000' }">
|
||||||
|
<view
|
||||||
|
v-if="currentPage === 'pages/point-book'"
|
||||||
|
class="user-header"
|
||||||
|
@click="signin"
|
||||||
|
>
|
||||||
|
<block v-if="user.id">
|
||||||
|
<Avatar
|
||||||
|
:src="user.avatar"
|
||||||
|
:onClick="toUserPage"
|
||||||
|
:size="40"
|
||||||
|
borderColor="#333"
|
||||||
|
/>
|
||||||
|
<text class="truncate">{{ user.nickName }}</text>
|
||||||
|
<image
|
||||||
|
v-if="heat"
|
||||||
|
:src="`../../../static/hot${heat}.png`"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<image src="../../../static/user-icon.png" mode="widthFix" />
|
||||||
|
<text>新来的弓箭手你好呀~</text>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<block
|
||||||
|
v-if="
|
||||||
|
'-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
|
||||||
|
'-凹造型-感知距离-小试牛刀'.indexOf(title) === 10
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<text>{{ title }}</text>
|
||||||
|
</block>
|
||||||
|
<block
|
||||||
|
v-if="
|
||||||
|
title &&
|
||||||
|
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== -1 &&
|
||||||
|
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== 10
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<view class="first-try-steps">
|
||||||
|
<text :class="title === '-凹造型' ? 'current-step' : ''">凹造型</text>
|
||||||
|
<text>-</text>
|
||||||
|
<text :class="title === '-感知距离' ? 'current-step' : ''"
|
||||||
|
>感知距离</text
|
||||||
|
>
|
||||||
|
<text>-</text>
|
||||||
|
<text :class="title === '-小试牛刀' ? 'current-step' : ''"
|
||||||
|
>小试牛刀</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
<view v-if="pointBook" class="point-book-info">
|
||||||
|
<text>{{ pointBook.bowType.name }}</text>
|
||||||
|
<text>{{ pointBook.distance }} 米</text>
|
||||||
|
<text
|
||||||
|
>{{
|
||||||
|
pointBook.bowtargetType.name.substring(
|
||||||
|
0,
|
||||||
|
pointBook.bowtargetType.name.length - 3
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
{{
|
||||||
|
pointBook.bowtargetType.name.substring(
|
||||||
|
pointBook.bowtargetType.name.length - 3
|
||||||
|
)
|
||||||
|
}}</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="
|
||||||
|
currentPage === 'pages/team-battle' ||
|
||||||
|
currentPage === 'pages/team-battle/index'
|
||||||
|
"
|
||||||
|
class="battle-progress"
|
||||||
|
>
|
||||||
|
<HeaderProgress />
|
||||||
|
</view>
|
||||||
|
<!-- 对战房间：整个胶囊为分享按钮，房号从 Store 读取；fixed 定位紧靠系统胶囊左侧 -->
|
||||||
|
<button
|
||||||
|
v-if="currentPage === 'pages/battle-room' && game.roomNumber"
|
||||||
|
open-type="share"
|
||||||
|
hover-class="none"
|
||||||
|
class="battle-room-number"
|
||||||
|
:style="battleRoomBtnStyle"
|
||||||
|
>
|
||||||
|
<text class="battle-room-number__text">房号: {{ game.roomNumber }}</text>
|
||||||
|
<image src="../../../static/share2.png" mode="widthFix" class="battle-room-number__icon" />
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
width: 72vw;
|
||||||
|
height: 50px;
|
||||||
|
/* margin-top: var(--status-bar-height); */
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
.container > view:nth-child(2) {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.back-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.back-btn > image {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.first-try-steps {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff6;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.first-try-steps > text {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.first-try-steps > text:nth-child(2),
|
||||||
|
.first-try-steps > text:nth-child(4) {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
.current-step {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.point-book-info {
|
||||||
|
color: #333;
|
||||||
|
position: fixed;
|
||||||
|
width: 60%;
|
||||||
|
left: 20%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.point-book-info > text {
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
margin: 3px;
|
||||||
|
}
|
||||||
|
.battle-progress {
|
||||||
|
position: fixed;
|
||||||
|
width: 60%;
|
||||||
|
left: 20%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.user-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.user-header > image:first-child {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #333;
|
||||||
|
}
|
||||||
|
.user-header > image:last-child {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
}
|
||||||
|
.user-header > text:nth-child(2) {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
max-width: 300rpx;
|
||||||
|
}
|
||||||
|
/* 对战房间：整个胶囊作为分享按钮，fixed 定位脱离 flex 流，紧贴系统胶囊左侧 */
|
||||||
|
.battle-room-number {
|
||||||
|
position: fixed;
|
||||||
|
/* 兜底定位（JS 获取胶囊位置失败时生效）：约 28vw 对应胶囊区域左边缘 */
|
||||||
|
right: calc(28vw + 4px);
|
||||||
|
top: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 240rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.15);
|
||||||
|
border-radius: 96rpx;
|
||||||
|
border: 1rpx solid #5b5758;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/* 重置 button 默认边框 */
|
||||||
|
.battle-room-number::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.battle-room-number__text {
|
||||||
|
width: 156rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 28rpx;
|
||||||
|
}
|
||||||
|
.battle-room-number__icon {
|
||||||
|
width: 25rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
83
src/pages/team-battle/components/HeaderProgress.vue
Normal file
83
src/pages/team-battle/components/HeaderProgress.vue
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
||||||
|
import audioManager from "@/audioManager";
|
||||||
|
import useStore from "@/store";
|
||||||
|
|
||||||
|
const store = useStore();
|
||||||
|
|
||||||
|
// 私有 HeaderProgress 只负责展示提示/箭数和静音开关。
|
||||||
|
// 报靶、轮到谁射箭、比赛结束等语音统一由 team-battle 页面队列播放，避免重复播报。
|
||||||
|
const tips = ref("");
|
||||||
|
const sound = ref(true);
|
||||||
|
const currentShot = ref(0);
|
||||||
|
const totalShot = ref(0);
|
||||||
|
|
||||||
|
const updateSound = () => {
|
||||||
|
sound.value = !sound.value;
|
||||||
|
audioManager.setMuted(!sound.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onUpdateTips = (newVal) => {
|
||||||
|
// 兼容页面通过 uni.$emit("update-tips") 触发的即时刷新。
|
||||||
|
tips.value = newVal;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 监听 Pinia store 中 totalShot 变化，用于比赛恢复时同步箭数（替代 uni.$emit 避免时序问题）
|
||||||
|
// 使用 immediate: true 确保组件创建时立即读取 store 当前值（解决重入时 totalShot 值不变 watch 不触发的问题）
|
||||||
|
watch(
|
||||||
|
() => [store.game.currentShot, store.game.totalShot],
|
||||||
|
([newCurrentShot, newTotalShot]) => {
|
||||||
|
currentShot.value = newCurrentShot || 0;
|
||||||
|
totalShot.value = newTotalShot || 0;
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
// 监听 Pinia store 中 tips 变化，用于比赛恢复时同步提示文案（替代 uni.$emit 避免时序问题）
|
||||||
|
// 使用 immediate: true 确保组件创建时立即读取 store 当前值（解决 onShow 早于 onMounted 导致 uni.$emit 事件丢失的问题）
|
||||||
|
// 注意：使用 != null 而非 if(newVal)，确保空字符串 "" 也能触发清空（避免重新开赛时旧文案残留）
|
||||||
|
watch(() => store.game.tips, (newVal) => {
|
||||||
|
if (newVal != null) {
|
||||||
|
tips.value = newVal;
|
||||||
|
}
|
||||||
|
}, { immediate: true });
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
uni.$on("update-tips", onUpdateTips);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
uni.$off("update-tips", onUpdateTips);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<text>{{ (tips || "").replace(/你/g, "").replace(/重回/g, "") }}</text>
|
||||||
|
<text v-if="totalShot > 0"> ({{ currentShot }}/{{ totalShot }}) </text>
|
||||||
|
<button v-if="!!tips" hover-class="none" @click="updateSound">
|
||||||
|
<image :src="`../../../static/sound${sound ? '' : '-off'}-yellow.png`" mode="widthFix" />
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: 50vw;
|
||||||
|
color: #fed847;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container>button:last-child {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container>button:last-child>image {
|
||||||
|
width: 36px;
|
||||||
|
min-height: 36px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
39
src/pages/team-battle/components/IconButton.vue
Normal file
39
src/pages/team-battle/components/IconButton.vue
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
src: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
onClick: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: Number,
|
||||||
|
default: 22,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<view class="container" @click="onClick">
|
||||||
|
<image :src="src" mode="widthFix" :style="{ width: width + 'px' }" />
|
||||||
|
<text>{{ name }}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.container > text {
|
||||||
|
color: #666666;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
71
src/pages/team-battle/components/PointSwitcher.vue
Normal file
71
src/pages/team-battle/components/PointSwitcher.vue
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
onChange: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const mode = ref(true);
|
||||||
|
|
||||||
|
const onClick = () => {
|
||||||
|
mode.value = !mode.value;
|
||||||
|
props.onChange(mode.value);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="point-switcher"
|
||||||
|
:style="{ borderColor: mode ? '#D8D8D8' : '#53EF56' }"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
@click="onClick"
|
||||||
|
:style="{ transform: 'translateX(' + (mode ? '-58' : '4') + 'rpx)' }"
|
||||||
|
>
|
||||||
|
<text>放大</text>
|
||||||
|
<view :style="{ background: mode ? '#D8D8D8' : '#53EF56' }"></view>
|
||||||
|
<text>真实</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.point-switcher {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 22rpx;
|
||||||
|
border: 2rpx solid;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.point-switcher > view {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 40rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20rpx;
|
||||||
|
word-break: keep-all;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
transform: translateX(-58rpx);
|
||||||
|
}
|
||||||
|
.point-switcher > view > text:first-child {
|
||||||
|
color: #53ef56;
|
||||||
|
}
|
||||||
|
.point-switcher > view > view {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.point-switcher > view > text:last-child {
|
||||||
|
color: #d8d8d8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
172
src/pages/team-battle/components/RoundEndTip.vue
Normal file
172
src/pages/team-battle/components/RoundEndTip.vue
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||||
|
const props = defineProps({
|
||||||
|
isFinal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
round: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
bluePoint: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
redPoint: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
roundData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
onAutoClose: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const count = ref(props.isFinal ? 10 : 3);
|
||||||
|
const tiemr = ref(null);
|
||||||
|
function startCount() {
|
||||||
|
if (tiemr.value) clearInterval(tiemr.value);
|
||||||
|
tiemr.value = setInterval(() => {
|
||||||
|
if (count.value === 0) {
|
||||||
|
clearInterval(tiemr.value);
|
||||||
|
props.onAutoClose();
|
||||||
|
} else count.value -= 1;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
startCount();
|
||||||
|
});
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
if (tiemr.value) clearInterval(tiemr.value);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="round-end-tip">
|
||||||
|
<text>第{{ round }}轮射箭结束</text>
|
||||||
|
<block v-if="!isFinal">
|
||||||
|
<view class="point-view1" v-if="bluePoint !== 0 || redPoint !== 0">
|
||||||
|
<text>本轮蓝队</text>
|
||||||
|
<text>{{
|
||||||
|
(roundData.shoots[1] || []).reduce(
|
||||||
|
(last, next) => last + next.ring,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
}}</text>
|
||||||
|
<text>环，红队</text>
|
||||||
|
<text>{{
|
||||||
|
(roundData.shoots[2] || []).reduce(
|
||||||
|
(last, next) => last + next.ring,
|
||||||
|
0
|
||||||
|
)
|
||||||
|
}}</text>
|
||||||
|
<text>环</text>
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
v-if="bluePoint === 0 && redPoint === 0"
|
||||||
|
:style="{ marginTop: '20px' }"
|
||||||
|
>
|
||||||
|
连续3个来回双方均无人射箭，比赛取消。
|
||||||
|
</text>
|
||||||
|
<text v-if="bluePoint !== 0 && bluePoint === redPoint">
|
||||||
|
红队、蓝队各得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
|
||||||
|
redPoint
|
||||||
|
}}</text
|
||||||
|
>分
|
||||||
|
</text>
|
||||||
|
<text v-if="bluePoint > redPoint">
|
||||||
|
蓝队获胜，得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
|
||||||
|
bluePoint
|
||||||
|
}}</text
|
||||||
|
>分
|
||||||
|
</text>
|
||||||
|
<text v-if="bluePoint < redPoint">
|
||||||
|
红队获胜，得<text :style="{ color: '#fed847', margin: '0 5px' }">{{
|
||||||
|
redPoint
|
||||||
|
}}</text
|
||||||
|
>分
|
||||||
|
</text>
|
||||||
|
</block>
|
||||||
|
<block v-if="isFinal">
|
||||||
|
<view class="point-view2">
|
||||||
|
<text>蓝队</text>
|
||||||
|
<text>{{ bluePoint }}</text>
|
||||||
|
<text>分，红队</text>
|
||||||
|
<text>{{ redPoint }}</text>
|
||||||
|
<text>分</text>
|
||||||
|
</view>
|
||||||
|
<text>同分僵局！最后一箭定江山</text>
|
||||||
|
<view class="final-shoot">
|
||||||
|
<text>{{ count }}</text>
|
||||||
|
<text>秒后蓝红双方</text>
|
||||||
|
<text>决金箭</text>
|
||||||
|
<text>一箭决胜负</text>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.round-end-tip {
|
||||||
|
width: 100%;
|
||||||
|
color: #fff9;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
.round-end-tip > text:first-child {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.point-view1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
.point-view1 > text:nth-child(2),
|
||||||
|
.point-view1 > text:nth-child(4) {
|
||||||
|
color: #fed847;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
.point-view2 {
|
||||||
|
margin: 12px 0;
|
||||||
|
font-size: 48rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.point-view2 > text:nth-child(2),
|
||||||
|
.point-view2 > text:nth-child(4) {
|
||||||
|
color: #fed847;
|
||||||
|
width: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.final-shoot {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 28rpx;
|
||||||
|
word-break: keep-all;
|
||||||
|
}
|
||||||
|
.final-shoot > text:nth-child(1) {
|
||||||
|
width: 20px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.final-shoot > text:nth-child(1),
|
||||||
|
.final-shoot > text:nth-child(3) {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #fed847;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
96
src/pages/team-battle/components/SButton.vue
Normal file
96
src/pages/team-battle/components/SButton.vue
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { debounce } from "@/util";
|
||||||
|
const props = defineProps({
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: "calc(100vw - 20px)",
|
||||||
|
},
|
||||||
|
rounded: {
|
||||||
|
type: Number,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
onClick: {
|
||||||
|
type: Function,
|
||||||
|
default: async () => {},
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: "#fed847",
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: "#000",
|
||||||
|
},
|
||||||
|
disabledColor:{
|
||||||
|
type: String,
|
||||||
|
default: "#757575",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const timer = ref(null);
|
||||||
|
|
||||||
|
const onBtnClick = debounce(async () => {
|
||||||
|
if (props.disabled || loading.value) return;
|
||||||
|
|
||||||
|
let loadingTimer = null;
|
||||||
|
loadingTimer = setTimeout(() => {
|
||||||
|
loading.value = true;
|
||||||
|
}, 300);
|
||||||
|
|
||||||
|
try {
|
||||||
|
await props.onClick();
|
||||||
|
} finally {
|
||||||
|
clearTimeout(loadingTimer);
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button
|
||||||
|
class="sbtn"
|
||||||
|
hover-class="none"
|
||||||
|
:style="{
|
||||||
|
width: width,
|
||||||
|
borderRadius: rounded + 'px',
|
||||||
|
backgroundColor: disabled ? disabledColor : backgroundColor,
|
||||||
|
color,
|
||||||
|
}"
|
||||||
|
open-type="getUserInfo"
|
||||||
|
@click="onBtnClick"
|
||||||
|
>
|
||||||
|
<block v-if="!loading">
|
||||||
|
<slot />
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<image src="../../../static/btn-loading.png" mode="widthFix" class="loading" />
|
||||||
|
</block>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sbtn {
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 44px;
|
||||||
|
line-height: 44px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 15px;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
overflow: initial;
|
||||||
|
}
|
||||||
|
.loading {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
background-blend-mode: darken;
|
||||||
|
animation: rotate 1s linear infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
108
src/pages/team-battle/components/SModal.vue
Normal file
108
src/pages/team-battle/components/SModal.vue
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
const props = defineProps({
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: "650rpx",
|
||||||
|
},
|
||||||
|
onClose: {
|
||||||
|
type: Function,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
noBg: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const showContainer = ref(false);
|
||||||
|
const showContent = ref(false);
|
||||||
|
watch(
|
||||||
|
() => props.show,
|
||||||
|
(newValue) => {
|
||||||
|
if (newValue) {
|
||||||
|
showContainer.value = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
showContent.value = true;
|
||||||
|
}, 100);
|
||||||
|
} else {
|
||||||
|
showContent.value = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
showContainer.value = false;
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="container"
|
||||||
|
v-if="showContainer"
|
||||||
|
:style="{ opacity: show ? 1 : 0 }"
|
||||||
|
@click="onClose"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="modal-content"
|
||||||
|
:style="{
|
||||||
|
transform: `translateY(${showContent ? '0%' : '100%'})`,
|
||||||
|
height,
|
||||||
|
}"
|
||||||
|
@click.stop=""
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
v-if="!noBg"
|
||||||
|
src="https://static.shelingxingqiu.com/attachment/2025-12-04/dep11770wzxg6o2alo.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<view class="close-btn" @click="onClose" v-if="!noBg">
|
||||||
|
<image src="../../../static/close-yellow.png" mode="widthFix" />
|
||||||
|
</view>
|
||||||
|
<slot></slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: #00000099;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
width: 100%;
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
background-color: #372E1D;
|
||||||
|
}
|
||||||
|
.modal-content > image:first-child {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.close-btn {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.close-btn > image {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
89
src/pages/team-battle/components/ScreenHint.vue
Normal file
89
src/pages/team-battle/components/ScreenHint.vue
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<script setup>
|
||||||
|
import IconButton from "./IconButton.vue";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
onClose: {
|
||||||
|
type: Function,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: "normal",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const getContentHeight = () => {
|
||||||
|
if (props.mode === "tall") return "50vw";
|
||||||
|
if (props.mode === "square") return "74vw";
|
||||||
|
return "36vw";
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
|
||||||
|
<view class="scale-in" :style="{ height: getContentHeight() }">
|
||||||
|
<image
|
||||||
|
v-if="mode === 'normal'"
|
||||||
|
src="../../../static/screen-hint-bg.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="mode === 'tall'"
|
||||||
|
src="../../../static/coach-comment.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="mode === 'square'"
|
||||||
|
src="../../../static/prompt-bg-square.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<image
|
||||||
|
v-if="mode === 'small'"
|
||||||
|
src="../../../static/finish-frame.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
<IconButton
|
||||||
|
v-if="!!onClose"
|
||||||
|
src="../../../static/close-gold-outline.png"
|
||||||
|
:width="30"
|
||||||
|
:onClick="onClose"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.8);
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.container > view:first-child {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
width: 70vw;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.container > view:first-child > image {
|
||||||
|
position: absolute;
|
||||||
|
width: 80vw;
|
||||||
|
left: -7%;
|
||||||
|
bottom: -18vw;
|
||||||
|
z-index: -1;
|
||||||
|
transform: translateY(-75px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
215
src/pages/team-battle/components/ShootProgress2.vue
Normal file
215
src/pages/team-battle/components/ShootProgress2.vue
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
<script setup>
|
||||||
|
import {ref, watch, onMounted, onBeforeUnmount} from "vue";
|
||||||
|
import {RoundGoldImages} from "@/constants";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
tips: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: 12,
|
||||||
|
},
|
||||||
|
currentRound: {
|
||||||
|
type: String,
|
||||||
|
default: "round1",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const barColor = ref("");
|
||||||
|
const remain = ref(12);
|
||||||
|
const timer = ref(null);
|
||||||
|
const loading = ref(true);
|
||||||
|
const transitionStyle = ref("all 1s linear");
|
||||||
|
const currentTeam = ref(null);
|
||||||
|
const MIN_TICK_MS = 1;
|
||||||
|
const ZERO_EVENT = "team-battle-progress-zero";
|
||||||
|
const COUNTDOWN_READY_EVENT = "team-battle-countdown-ready";
|
||||||
|
|
||||||
|
const clearCountdownTimer = () => {
|
||||||
|
if (timer.value) {
|
||||||
|
clearInterval(timer.value);
|
||||||
|
timer.value = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setTransitionByTick = (tickMs) => {
|
||||||
|
transitionStyle.value = `all ${Math.max(MIN_TICK_MS, Math.round(tickMs || 1000))}ms linear`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const emitProgressZero = () => {
|
||||||
|
uni.$emit(ZERO_EVENT);
|
||||||
|
};
|
||||||
|
|
||||||
|
const emitCountdownReady = () => {
|
||||||
|
uni.$emit(COUNTDOWN_READY_EVENT);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateRemain = (value) => {
|
||||||
|
if (value.stop) {
|
||||||
|
clearCountdownTimer();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// zeroThenReset：ToSomeoneShoot 到达时，若进度条仍在倒计时则先瞬间清零（约 150ms 停留）再显示下一玩家满值
|
||||||
|
// 若进度条已到 0（loading 状态），直接切换满值
|
||||||
|
if (value.zeroThenReset) {
|
||||||
|
clearCountdownTimer();
|
||||||
|
const wasNonZero = remain.value > 0;
|
||||||
|
// 更新下一玩家颜色和方向（在清零和满值时均生效）
|
||||||
|
currentTeam.value = value.team;
|
||||||
|
if (value.team === 'red') barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
|
||||||
|
if (value.team === 'blue') barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
|
||||||
|
transitionStyle.value = "none";
|
||||||
|
if (wasNonZero) {
|
||||||
|
// 瞬间清零，停留约 150ms 后切换为满值
|
||||||
|
remain.value = 0;
|
||||||
|
loading.value = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
remain.value = value.value;
|
||||||
|
loading.value = false;
|
||||||
|
setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
|
||||||
|
}, 150);
|
||||||
|
} else {
|
||||||
|
// 已在底部，直接切换满值
|
||||||
|
remain.value = value.value;
|
||||||
|
loading.value = false;
|
||||||
|
setTimeout(() => { transitionStyle.value = "all 1s linear"; }, 50);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
currentTeam.value = value.team
|
||||||
|
if (value.team === 'red')
|
||||||
|
barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
|
||||||
|
if (value.team === 'blue')
|
||||||
|
barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
|
||||||
|
const nextVal = Math.max(0, Math.round(Number(value.value) || 0));
|
||||||
|
const nextTickMs = Math.max(MIN_TICK_MS, Math.round(Number(value.tickMs) || 1000));
|
||||||
|
if (value.reset) {
|
||||||
|
// 重置前先清除旧计时器，防止超时未射箭时旧 interval 残留，导致进度条震荡
|
||||||
|
clearCountdownTimer();
|
||||||
|
// 重置时瞬间跳满格，禁用 CSS 过渡避免从旧值「涨到满」的动画
|
||||||
|
transitionStyle.value = "none";
|
||||||
|
remain.value = nextVal;
|
||||||
|
loading.value = nextVal <= 0;
|
||||||
|
setTimeout(() => {
|
||||||
|
setTransitionByTick(nextTickMs);
|
||||||
|
}, 50);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 如果剩余时间增加（如轮次切换重置），瞬间变化无动画；否则保持动画
|
||||||
|
if (nextVal >= remain.value) {
|
||||||
|
transitionStyle.value = "none";
|
||||||
|
remain.value = nextVal;
|
||||||
|
setTimeout(() => {
|
||||||
|
setTransitionByTick(nextTickMs);
|
||||||
|
}, 50);
|
||||||
|
} else {
|
||||||
|
remain.value = nextVal;
|
||||||
|
setTransitionByTick(nextTickMs);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 启动前先清除旧计时器，防止多次 {stop:false} 事件叠加多个 interval
|
||||||
|
clearCountdownTimer();
|
||||||
|
if (nextVal <= 0) {
|
||||||
|
loading.value = true;
|
||||||
|
emitProgressZero();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
timer.value = setInterval(() => {
|
||||||
|
if (remain.value > 0) remain.value--;
|
||||||
|
if (remain.value <= 0) {
|
||||||
|
remain.value = 0;
|
||||||
|
loading.value = true;
|
||||||
|
clearCountdownTimer();
|
||||||
|
emitProgressZero();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
}, nextTickMs);
|
||||||
|
emitCountdownReady();
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.tips,
|
||||||
|
(newVal) => {
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
uni.$on("update-remain", updateRemain);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
uni.$off("update-remain", updateRemain);
|
||||||
|
clearCountdownTimer();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<image :src="RoundGoldImages[props.currentRound]" mode="widthFix"/>
|
||||||
|
<view
|
||||||
|
:style="{
|
||||||
|
justifyContent: currentTeam==='red' ? 'flex-end' : 'flex-start',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
:style="{
|
||||||
|
width: `${(remain / total) * 100}%`,
|
||||||
|
background: barColor,
|
||||||
|
right: currentTeam==='red' ? 0 : 'unset',
|
||||||
|
transition: transitionStyle,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<text v-if="!loading">剩余{{ remain }}秒</text>
|
||||||
|
<text v-else>···</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
width: 50vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > image {
|
||||||
|
width: 380rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
transform: translateY(18rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > view:last-child {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #444444;
|
||||||
|
border-radius: 20px;
|
||||||
|
height: 24rpx;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > view:last-child > view {
|
||||||
|
height: 24rpx;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > view:last-child > text {
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
150
src/pages/team-battle/components/TeamAvatars.vue
Normal file
150
src/pages/team-battle/components/TeamAvatars.vue
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
const props = defineProps({
|
||||||
|
isRed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
team: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
currentShooterId: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const players = ref({});
|
||||||
|
const currentTeam = ref(false);
|
||||||
|
const firstName = ref("");
|
||||||
|
|
||||||
|
// 抽出判断：当前队伍且该玩家排序为 0（队伍首位）
|
||||||
|
const isFirst = (id) =>
|
||||||
|
currentTeam.value && ((players.value[id] || {}).sort || 0) === 0;
|
||||||
|
|
||||||
|
const getPos = (id) => {
|
||||||
|
const sort = (players.value[id] || {}).sort || 0;
|
||||||
|
if (currentTeam.value) {
|
||||||
|
return 30 * (sort + Math.ceil(sort / 2));
|
||||||
|
}
|
||||||
|
return sort * 40;
|
||||||
|
};
|
||||||
|
|
||||||
|
const syncPlayers = () => {
|
||||||
|
const nextPlayers = {};
|
||||||
|
const shooterId = props.currentShooterId;
|
||||||
|
const shooterIndex = props.team.findIndex(
|
||||||
|
(p) => String(p?.id) === String(shooterId)
|
||||||
|
);
|
||||||
|
const nextTeam = [...props.team];
|
||||||
|
|
||||||
|
currentTeam.value = !!shooterId && shooterIndex >= 0;
|
||||||
|
firstName.value = "";
|
||||||
|
|
||||||
|
if (currentTeam.value) {
|
||||||
|
const target = nextTeam.splice(shooterIndex, 1)[0];
|
||||||
|
if (target) {
|
||||||
|
nextTeam.unshift(target);
|
||||||
|
firstName.value = target.name || "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextTeam.forEach((p, index) => {
|
||||||
|
if (p?.id) nextPlayers[p.id] = { sort: index, ...p };
|
||||||
|
});
|
||||||
|
players.value = nextPlayers;
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
[() => props.team, () => props.currentShooterId],
|
||||||
|
syncPlayers,
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<image
|
||||||
|
:src="isRed ? '../../../static/flag-red.png' : '../../../static/flag-blue.png'"
|
||||||
|
class="flag"
|
||||||
|
:style="{
|
||||||
|
[isRed ? 'left' : 'right']: '10rpx',
|
||||||
|
top: currentTeam ? '-36rpx' : '-24rpx',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in team"
|
||||||
|
:key="item.id || index"
|
||||||
|
class="player"
|
||||||
|
:style="{
|
||||||
|
width: (isFirst(item.id) ? 80 : 60) + 'rpx',
|
||||||
|
height: (isFirst(item.id) ? 80 : 60) + 'rpx',
|
||||||
|
zIndex: team.length - ((players[item.id] || {}).sort || 0),
|
||||||
|
border: isFirst(item.id) ? '3.5rpx solid' : '2rpx solid',
|
||||||
|
borderColor: isRed ? '#ff6060' : '#5fadff',
|
||||||
|
top: isFirst(item.id) ? '0rpx' : '12rpx',
|
||||||
|
[isRed ? 'left' : 'right']: getPos(item.id) + 'rpx',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<image :src="item.avatar || '../../../static/user-icon.png'" mode="widthFix" />
|
||||||
|
<text
|
||||||
|
v-if="isFirst(item.id)"
|
||||||
|
:style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
|
||||||
|
>{{ isRed ? "红队" : "蓝队" }}</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
v-if="currentTeam"
|
||||||
|
class="truncate"
|
||||||
|
:style="{
|
||||||
|
color: isRed ? '#ff6060' : '#5fadff',
|
||||||
|
[isRed ? 'left' : 'right']: '-4rpx',
|
||||||
|
}"
|
||||||
|
>{{ firstName }}</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
width: 20vw;
|
||||||
|
height: 10rpx;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
}
|
||||||
|
.container > text {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
width: 80rpx;
|
||||||
|
bottom: -100rpx;
|
||||||
|
}
|
||||||
|
.player {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.player > image {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
.player > text {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 15rpx;
|
||||||
|
text-align: center;
|
||||||
|
width: 76rpx;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.flag {
|
||||||
|
position: absolute;
|
||||||
|
width: 45rpx;
|
||||||
|
height: 45rpx;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
193
src/pages/team-battle/components/TestDistance.vue
Normal file
193
src/pages/team-battle/components/TestDistance.vue
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||||
|
import Guide from "./Guide.vue";
|
||||||
|
import BowPower from "./BowPower.vue";
|
||||||
|
import Avatar from "./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">
|
||||||
|
<Guide v-show="guide">
|
||||||
|
<view class="guide-tips">
|
||||||
|
<text>请确保站距达到5米</text>
|
||||||
|
<text>低于5米的射箭无效</text>
|
||||||
|
</view>
|
||||||
|
</Guide>
|
||||||
|
<view class="test-area">
|
||||||
|
<image
|
||||||
|
class="text-bg"
|
||||||
|
src="https://static.shelingxingqiu.com/attachment/2025-07-05/db3skuq1n9rj4fmld4.png"
|
||||||
|
mode="widthFix"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
class="simul"
|
||||||
|
@click="simulShoot"
|
||||||
|
hover-class="none"
|
||||||
|
v-if="showsimul"
|
||||||
|
>
|
||||||
|
模拟射箭
|
||||||
|
</button>
|
||||||
|
<view class="warnning-text">
|
||||||
|
<block v-if="distance > 0">
|
||||||
|
<text>当前距离{{ distance }}米</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 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 112vw;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.test-area > view:last-child {
|
||||||
|
padding: 15px;
|
||||||
|
width: calc(100% - 30px);
|
||||||
|
}
|
||||||
|
.text-bg {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: -14.4%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.warnning-text {
|
||||||
|
color: #fed847;
|
||||||
|
font-size: 27px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
height: 40%;
|
||||||
|
}
|
||||||
|
.warnning-text > text {
|
||||||
|
width: 70vw;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.simul {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1277
src/pages/team-battle/index.vue
Normal file
1277
src/pages/team-battle/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user