Merge branch 'feat-vip' into test
This commit is contained in:
@@ -18,12 +18,14 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const loading = ref(false);
|
||||
const navigating = ref(false);
|
||||
|
||||
/** 统一获取当前环境 token，用于守卫：无有效 token 时不发起接口请求 */
|
||||
const getToken = () =>
|
||||
uni.getStorageSync(`${uni.getAccountInfoSync().miniProgram.envVersion}_token`);
|
||||
|
||||
onShow(async () => {
|
||||
navigating.value = false;
|
||||
if (user.value.id && getToken()) {
|
||||
setTimeout(async () => {
|
||||
const state = await getUserGameState();
|
||||
@@ -45,28 +47,35 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
const navigateOnce = (url) =>
|
||||
new Promise((resolve, reject) => {
|
||||
navigating.value = true;
|
||||
uni.navigateTo({
|
||||
url,
|
||||
success: resolve,
|
||||
fail: (error) => {
|
||||
navigating.value = false;
|
||||
reject(error);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const onClick = debounce(async () => {
|
||||
if (loading.value) return;
|
||||
if (loading.value || navigating.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}`,
|
||||
});
|
||||
await navigateOnce(`/pages/team-battle/index?battleId=${result.matchId}`);
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/melee-battle?battleId=${result.matchId}`,
|
||||
});
|
||||
await navigateOnce(`/pages/melee-battle?battleId=${result.matchId}`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (game.value.roomID) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/battle-room?roomNumber=" + game.value.roomID,
|
||||
});
|
||||
await navigateOnce("/pages/battle-room?roomNumber=" + game.value.roomID);
|
||||
} else {
|
||||
updateGame(false, "");
|
||||
}
|
||||
|
||||
@@ -51,7 +51,7 @@ const normalRounds = computed(() => {
|
||||
<view v-for="(result, index) in roundResults" :key="index">
|
||||
<block v-if="index + 1 > normalRounds">
|
||||
<image
|
||||
:src="RoundImages[`gold${index + 1 - normalRounds}`]"
|
||||
:src="RoundImages[`gold${result.goldRound || index + 1 - normalRounds}`]"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</block>
|
||||
@@ -86,7 +86,7 @@ const normalRounds = computed(() => {
|
||||
<view v-for="(result, index) in roundResults" :key="index">
|
||||
<block v-if="index + 1 > normalRounds">
|
||||
<image
|
||||
:src="RoundImages[`gold${index + 1 - normalRounds}`]"
|
||||
:src="RoundImages[`gold${result.goldRound || index + 1 - normalRounds}`]"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</block>
|
||||
|
||||
@@ -27,6 +27,14 @@ defineProps({
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const getMemberNicknameClass = (player = {}) => [
|
||||
"member-nickname",
|
||||
player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
|
||||
player.sVip === true ? "member-nickname--svip" : "",
|
||||
];
|
||||
|
||||
const isMember = (player = {}) => player.vip === true || player.sVip === true;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -51,7 +59,16 @@ defineProps({
|
||||
}"
|
||||
>
|
||||
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
<view
|
||||
v-if="isMember(player)"
|
||||
:class="['player-name', ...getMemberNicknameClass(player)]"
|
||||
>
|
||||
<text class="member-nickname__text">{{ player.name }}</text>
|
||||
<text v-if="player.sVip === true" class="member-nickname__shine">
|
||||
{{ player.name }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-else class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
<image
|
||||
v-if="winner === 1"
|
||||
@@ -70,7 +87,16 @@ defineProps({
|
||||
}"
|
||||
>
|
||||
<Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
<view
|
||||
v-if="isMember(player)"
|
||||
:class="['player-name', ...getMemberNicknameClass(player)]"
|
||||
>
|
||||
<text class="member-nickname__text">{{ player.name }}</text>
|
||||
<text v-if="player.sVip === true" class="member-nickname__shine">
|
||||
{{ player.name }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-else class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
<image
|
||||
v-if="winner === 2"
|
||||
@@ -105,7 +131,16 @@ defineProps({
|
||||
:size="40"
|
||||
:rank="showRank ? index + 1 : 0"
|
||||
/>
|
||||
<text class="player-name">{{ player.name }}</text>
|
||||
<view
|
||||
v-if="isMember(player)"
|
||||
:class="['player-name', ...getMemberNicknameClass(player)]"
|
||||
>
|
||||
<text class="member-nickname__text">{{ player.name }}</text>
|
||||
<text v-if="player.sVip === true" class="member-nickname__shine">
|
||||
{{ player.name }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-else class="player-name">{{ player.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -183,6 +218,13 @@ defineProps({
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
view.player-name {
|
||||
justify-content: center;
|
||||
}
|
||||
.player-name .member-nickname__text,
|
||||
.player-name .member-nickname__shine {
|
||||
font-size: 12px;
|
||||
}
|
||||
.left-winner-badge {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
|
||||
@@ -1,6 +1,15 @@
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
computed,
|
||||
nextTick,
|
||||
getCurrentInstance,
|
||||
} from "vue";
|
||||
import PointSwitcher from "./PointSwitcher.vue";
|
||||
import BowShotEffect from "@/components/BowShotEffect.vue";
|
||||
|
||||
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
|
||||
import { simulShootAPI } from "@/apis";
|
||||
@@ -26,6 +35,14 @@ const props = defineProps({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
redTeam: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
blueTeam: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
latestShotFlash: {
|
||||
type: Object,
|
||||
default: null,
|
||||
@@ -59,18 +76,56 @@ const timer = ref(null);
|
||||
const dirTimer = ref(null);
|
||||
const angle = ref(null);
|
||||
const circleColor = ref("");
|
||||
const shotEffect = ref(null);
|
||||
const hiddenRedLatestKey = ref("");
|
||||
const hiddenBlueLatestKey = ref("");
|
||||
const targetShaking = ref(false);
|
||||
const targetSize = ref({ width: 0, height: 0 });
|
||||
const shakeTimer = ref(null);
|
||||
const instance = getCurrentInstance();
|
||||
const ROUND_TIP_OFFSET_Y = -32;
|
||||
const EXPERIENCE_TIP_OFFSET_Y = -68;
|
||||
|
||||
function showShotFlash(flash) {
|
||||
const shootData = flash?.shootData;
|
||||
if (!shootData) return;
|
||||
if (timer.value) clearTimeout(timer.value);
|
||||
function buildShotEffectKey(team, shot, fallbackKey = "") {
|
||||
return (
|
||||
fallbackKey ||
|
||||
[
|
||||
team,
|
||||
shot?.playerId ?? "",
|
||||
shot?.x ?? "",
|
||||
shot?.y ?? "",
|
||||
shot?.ring ?? "",
|
||||
shot?.ringX ? 1 : 0,
|
||||
].join("-")
|
||||
);
|
||||
}
|
||||
|
||||
if (flash.team === "red") {
|
||||
function findShotPlayer(shot, team) {
|
||||
const players = team === "red" ? props.redTeam : props.blueTeam;
|
||||
return players.find((player) => String(player?.id) === String(shot?.playerId));
|
||||
}
|
||||
|
||||
function isSvipShot(shot, team) {
|
||||
return findShotPlayer(shot, team)?.sVip === true;
|
||||
}
|
||||
|
||||
function shouldPlayShotEffect(shot, team) {
|
||||
return !!shot && Number(shot.ring) > 0 && isSvipShot(shot, team);
|
||||
}
|
||||
|
||||
function clearTipTimer() {
|
||||
if (timer.value) clearTimeout(timer.value);
|
||||
timer.value = null;
|
||||
}
|
||||
|
||||
function showShotTip(team, shootData) {
|
||||
clearTipTimer();
|
||||
|
||||
if (team === "red") {
|
||||
latestOne.value = shootData;
|
||||
timer.value = setTimeout(() => {
|
||||
latestOne.value = null;
|
||||
timer.value = null;
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
@@ -78,9 +133,102 @@ function showShotFlash(flash) {
|
||||
bluelatestOne.value = shootData;
|
||||
timer.value = setTimeout(() => {
|
||||
bluelatestOne.value = null;
|
||||
timer.value = null;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function triggerShotEffect(team, shot, fallbackKey = "") {
|
||||
const key = buildShotEffectKey(team, shot, fallbackKey);
|
||||
|
||||
if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
|
||||
if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
|
||||
|
||||
if (team === "red") {
|
||||
latestOne.value = null;
|
||||
hiddenRedLatestKey.value = key;
|
||||
} else {
|
||||
bluelatestOne.value = null;
|
||||
hiddenBlueLatestKey.value = key;
|
||||
}
|
||||
|
||||
shotEffect.value = { key, team, shot };
|
||||
}
|
||||
|
||||
function completeShotEffect(key) {
|
||||
if (!shotEffect.value || shotEffect.value.key !== key) return;
|
||||
|
||||
const { team, shot } = shotEffect.value;
|
||||
if (team === "red") hiddenRedLatestKey.value = "";
|
||||
if (team === "blue") hiddenBlueLatestKey.value = "";
|
||||
shotEffect.value = null;
|
||||
showShotTip(team, shot);
|
||||
}
|
||||
|
||||
function shakeTarget() {
|
||||
targetShaking.value = false;
|
||||
if (shakeTimer.value) {
|
||||
clearTimeout(shakeTimer.value);
|
||||
shakeTimer.value = null;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
targetShaking.value = true;
|
||||
shakeTimer.value = setTimeout(() => {
|
||||
targetShaking.value = false;
|
||||
shakeTimer.value = null;
|
||||
}, 260);
|
||||
});
|
||||
}
|
||||
|
||||
function updateTargetSize() {
|
||||
nextTick(() => {
|
||||
const query = instance?.proxy
|
||||
? uni.createSelectorQuery().in(instance.proxy)
|
||||
: uni.createSelectorQuery();
|
||||
|
||||
query
|
||||
.select(".target")
|
||||
.boundingClientRect((rect) => {
|
||||
const width = Number(rect?.width);
|
||||
const height = Number(rect?.height);
|
||||
if (!Number.isFinite(width) || !Number.isFinite(height)) return;
|
||||
if (width <= 0 || height <= 0) return;
|
||||
targetSize.value = { width, height };
|
||||
})
|
||||
.exec();
|
||||
});
|
||||
}
|
||||
|
||||
function handleWindowResize() {
|
||||
updateTargetSize();
|
||||
}
|
||||
|
||||
function shouldHideRedHit(index) {
|
||||
return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
|
||||
}
|
||||
|
||||
function shouldHideBlueHit(index) {
|
||||
return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
|
||||
}
|
||||
|
||||
function showShotFlash(flash) {
|
||||
const shootData = flash?.shootData;
|
||||
if (!shootData) {
|
||||
hiddenRedLatestKey.value = "";
|
||||
hiddenBlueLatestKey.value = "";
|
||||
shotEffect.value = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const team = flash.team === "red" ? "red" : "blue";
|
||||
if (shouldPlayShotEffect(shootData, team)) {
|
||||
triggerShotEffect(team, shootData, flash.key);
|
||||
return;
|
||||
}
|
||||
|
||||
showShotTip(team, shootData);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.latestShotFlash,
|
||||
(newVal) => {
|
||||
@@ -89,6 +237,26 @@ watch(
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.scores.length,
|
||||
(newLen, oldLen) => {
|
||||
if (newLen > oldLen) return;
|
||||
latestOne.value = null;
|
||||
hiddenRedLatestKey.value = "";
|
||||
if (shotEffect.value?.team === "red") shotEffect.value = null;
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.blueScores.length,
|
||||
(newLen, oldLen) => {
|
||||
if (newLen > oldLen) return;
|
||||
bluelatestOne.value = null;
|
||||
hiddenBlueLatestKey.value = "";
|
||||
if (shotEffect.value?.team === "blue") shotEffect.value = null;
|
||||
}
|
||||
);
|
||||
|
||||
const safeTargetRadius = computed(() => {
|
||||
const radius = Number(props.targetRadius);
|
||||
return Number.isFinite(radius) && radius > 0 ? radius : 20;
|
||||
@@ -159,6 +327,15 @@ function getHitStyle(shot) {
|
||||
};
|
||||
}
|
||||
|
||||
function getSvipHitBgStyle(shot) {
|
||||
const radius = currentHitRadiusPx.value;
|
||||
const point = getShotPoint(shot);
|
||||
|
||||
return {
|
||||
...getTargetPositionStyle(point, radius),
|
||||
};
|
||||
}
|
||||
|
||||
function getRoundTipStyle(shot) {
|
||||
const point = getShotPoint(shot, true);
|
||||
return getTargetPositionStyle(
|
||||
@@ -223,6 +400,8 @@ async function onReceiveMessage(message) {
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
updateTargetSize();
|
||||
if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
@@ -234,12 +413,17 @@ onBeforeUnmount(() => {
|
||||
clearTimeout(dirTimer.value);
|
||||
dirTimer.value = null;
|
||||
}
|
||||
if (shakeTimer.value) {
|
||||
clearTimeout(shakeTimer.value);
|
||||
shakeTimer.value = null;
|
||||
}
|
||||
uni.$off("socket-inbox", onReceiveMessage);
|
||||
if (uni.offWindowResize) uni.offWindowResize(handleWindowResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<view :class="['container', { 'container--effecting': shotEffect }]">
|
||||
<view class="header" v-if="totalRound > 0">
|
||||
<text v-if="totalRound > 0" class="round-count">{{
|
||||
(currentRound > totalRound ? totalRound : currentRound) +
|
||||
@@ -247,7 +431,7 @@ onBeforeUnmount(() => {
|
||||
totalRound
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="target">
|
||||
<view :class="['target', { 'target--shake': targetShaking }]">
|
||||
<view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
|
||||
<view :style="{ background: circleColor }">
|
||||
<image src="../../../static/dot-circle.png" mode="widthFix" />
|
||||
@@ -287,8 +471,20 @@ onBeforeUnmount(() => {
|
||||
}}<text v-if="bluelatestOne.ring">环</text></view
|
||||
>
|
||||
<block v-for="(bow, index) in scores" :key="index">
|
||||
<image
|
||||
v-if="
|
||||
pMode &&
|
||||
bow.ring > 0 &&
|
||||
isSvipShot(bow, 'red') &&
|
||||
!shouldHideRedHit(index)
|
||||
"
|
||||
class="svip-hit-bg"
|
||||
src="../../../static/vip/svip-xuan.png"
|
||||
:style="getSvipHitBgStyle(bow)"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view
|
||||
v-if="bow.ring > 0"
|
||||
v-if="bow.ring > 0 && !shouldHideRedHit(index)"
|
||||
:class="`hit ${pMode ? 'b' : 's'}-point ${
|
||||
index === scores.length - 1 && latestOne ? 'pump-in' : ''
|
||||
}`"
|
||||
@@ -300,8 +496,20 @@ onBeforeUnmount(() => {
|
||||
>
|
||||
</block>
|
||||
<block v-for="(bow, index) in blueScores" :key="index">
|
||||
<image
|
||||
v-if="
|
||||
pMode &&
|
||||
bow.ring > 0 &&
|
||||
isSvipShot(bow, 'blue') &&
|
||||
!shouldHideBlueHit(index)
|
||||
"
|
||||
class="svip-hit-bg"
|
||||
src="../../../static/vip/svip-xuan.png"
|
||||
:style="getSvipHitBgStyle(bow)"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<view
|
||||
v-if="bow.ring > 0"
|
||||
v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
|
||||
:class="`hit ${pMode ? 'b' : 's'}-point ${
|
||||
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
|
||||
}`"
|
||||
@@ -313,6 +521,16 @@ onBeforeUnmount(() => {
|
||||
<text v-if="pMode">{{ index + 1 }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<BowShotEffect
|
||||
:shot="shotEffect && shotEffect.shot"
|
||||
:playKey="shotEffect ? shotEffect.key : ''"
|
||||
:targetRadius="safeTargetRadius"
|
||||
:targetWidth="targetSize.width"
|
||||
:targetHeight="targetSize.height"
|
||||
:hitOffsetPx="currentHitRadiusPx"
|
||||
@impact="shakeTarget"
|
||||
@complete="completeShotEffect"
|
||||
/>
|
||||
<image src="../../../static/bow-target.png" mode="widthFix" />
|
||||
</view>
|
||||
<view class="footer">
|
||||
@@ -334,13 +552,22 @@ onBeforeUnmount(() => {
|
||||
height: calc(100vw - 30px);
|
||||
padding: 0px 15px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.container--effecting {
|
||||
z-index: 10000;
|
||||
}
|
||||
.target {
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
z-index: -1;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
transform-origin: center center;
|
||||
}
|
||||
.target--shake {
|
||||
animation: target-shake 0.26s ease-out;
|
||||
}
|
||||
.e-value {
|
||||
position: absolute;
|
||||
@@ -395,17 +622,26 @@ onBeforeUnmount(() => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.svip-hit-bg {
|
||||
position: absolute;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
transform-origin: center center;
|
||||
animation: svip-hit-xuan 1.2s linear infinite;
|
||||
}
|
||||
.hit {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
transition: all 0.3s ease;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.b-point {
|
||||
border: 1px solid #fff;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -421,6 +657,20 @@ onBeforeUnmount(() => {
|
||||
transform: translate(-50%, -50%);*/
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
@keyframes svip-hit-xuan {
|
||||
0% {
|
||||
opacity: 0.9;
|
||||
transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.9;
|
||||
transform: translate(-50%, -50%) rotate(360deg) scale(0.92);
|
||||
}
|
||||
}
|
||||
@keyframes target-pump-in {
|
||||
from {
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
@@ -430,6 +680,29 @@ onBeforeUnmount(() => {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes target-shake {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
14% {
|
||||
transform: translate(-20rpx, 8rpx);
|
||||
}
|
||||
28% {
|
||||
transform: translate(16rpx, -8rpx);
|
||||
}
|
||||
44% {
|
||||
transform: translate(-12rpx, 6rpx);
|
||||
}
|
||||
64% {
|
||||
transform: translate(8rpx, -4rpx);
|
||||
}
|
||||
82% {
|
||||
transform: translate(-4rpx, 2rpx);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
.hit.pump-in {
|
||||
animation: target-pump-in 0.3s ease-out forwards;
|
||||
transform-origin: center center;
|
||||
@@ -457,6 +730,8 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
margin-top: -40px;
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
.footer > image {
|
||||
width: 40px;
|
||||
|
||||
@@ -316,7 +316,7 @@ onBeforeUnmount(() => {
|
||||
width: 156rpx;
|
||||
height: 28rpx;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 28rpx;
|
||||
|
||||
@@ -17,6 +17,7 @@ const props = defineProps({
|
||||
const players = ref({});
|
||||
const currentTeam = ref(false);
|
||||
const firstName = ref("");
|
||||
const currentPlayer = ref(null);
|
||||
|
||||
// 抽出判断：当前队伍且该玩家排序为 0（队伍首位）
|
||||
const isFirst = (id) =>
|
||||
@@ -30,6 +31,18 @@ const getPos = (id) => {
|
||||
return sort * 40;
|
||||
};
|
||||
|
||||
const getMemberNicknameClass = () => [
|
||||
"current-shooter-name",
|
||||
"member-nickname",
|
||||
currentPlayer.value?.vip === true && currentPlayer.value?.sVip !== true
|
||||
? "member-nickname--vip"
|
||||
: "",
|
||||
currentPlayer.value?.sVip === true ? "member-nickname--svip" : "",
|
||||
];
|
||||
|
||||
const isCurrentPlayerMember = () =>
|
||||
currentPlayer.value?.vip === true || currentPlayer.value?.sVip === true;
|
||||
|
||||
const syncPlayers = () => {
|
||||
const nextPlayers = {};
|
||||
const shooterId = props.currentShooterId;
|
||||
@@ -40,12 +53,14 @@ const syncPlayers = () => {
|
||||
|
||||
currentTeam.value = !!shooterId && shooterIndex >= 0;
|
||||
firstName.value = "";
|
||||
currentPlayer.value = null;
|
||||
|
||||
if (currentTeam.value) {
|
||||
const target = nextTeam.splice(shooterIndex, 1)[0];
|
||||
if (target) {
|
||||
nextTeam.unshift(target);
|
||||
firstName.value = target.name || "";
|
||||
currentPlayer.value = target;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,8 +108,20 @@ watch(
|
||||
>{{ isRed ? "红队" : "蓝队" }}</text
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
v-if="currentTeam && isCurrentPlayerMember()"
|
||||
:class="getMemberNicknameClass()"
|
||||
:style="{
|
||||
[isRed ? 'left' : 'right']: '-4rpx',
|
||||
}"
|
||||
>
|
||||
<text class="member-nickname__text">{{ firstName }}</text>
|
||||
<text v-if="currentPlayer?.sVip === true" class="member-nickname__shine">
|
||||
{{ firstName }}
|
||||
</text>
|
||||
</view>
|
||||
<text
|
||||
v-if="currentTeam"
|
||||
v-else-if="currentTeam"
|
||||
class="truncate"
|
||||
:style="{
|
||||
color: isRed ? '#ff6060' : '#5fadff',
|
||||
@@ -114,6 +141,17 @@ watch(
|
||||
height: 10rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
.current-shooter-name {
|
||||
position: absolute;
|
||||
width: 80rpx;
|
||||
bottom: -100rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
.current-shooter-name .member-nickname__text,
|
||||
.current-shooter-name .member-nickname__shine {
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.container > text {
|
||||
position: absolute;
|
||||
font-size: 20rpx;
|
||||
|
||||
@@ -1222,6 +1222,8 @@ onShow(() => {
|
||||
:scores="scores"
|
||||
:blueScores="blueScores"
|
||||
:latestShotFlash="latestShotFlash"
|
||||
:redTeam="redTeam"
|
||||
:blueTeam="blueTeam"
|
||||
/>
|
||||
<BattleFooter
|
||||
v-if="start"
|
||||
|
||||
171
src/pages/team-battle/team-bow-data.vue
Normal file
171
src/pages/team-battle/team-bow-data.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import Container from "./components/Container.vue";
|
||||
import BowTarget from "./components/BowTarget.vue";
|
||||
import Avatar from "./components/Avatar.vue";
|
||||
import { roundsName } from "@/constants";
|
||||
import { getBattleAPI } from "@/apis";
|
||||
const selected = ref(0);
|
||||
const redScores = ref([]);
|
||||
const blueScores = ref([]);
|
||||
const redTeam = ref([]);
|
||||
const blueTeam = ref([]);
|
||||
const tabs = ref([]);
|
||||
const players = ref([]);
|
||||
const data = ref({});
|
||||
|
||||
const loadArrows = (round) => {
|
||||
round.shoots[1].forEach((arrow) => {
|
||||
blueScores.value.push(arrow);
|
||||
});
|
||||
round.shoots[2].forEach((arrow) => {
|
||||
redScores.value.push(arrow);
|
||||
});
|
||||
};
|
||||
onLoad(async (options) => {
|
||||
if (!options.battleId) return;
|
||||
const result = await getBattleAPI(options.battleId || "57943107462893568");
|
||||
data.value = result;
|
||||
blueTeam.value = data.value.teams?.[1]?.players || [];
|
||||
redTeam.value = data.value.teams?.[2]?.players || [];
|
||||
blueTeam.value.forEach((p, index) => {
|
||||
players.value.push(p);
|
||||
players.value.push(redTeam.value[index]);
|
||||
});
|
||||
Object.values(data.value.rounds).forEach((round, index) => {
|
||||
if (round.ifGold) tabs.value.push(`决金箭`);
|
||||
else tabs.value.push(`第${roundsName[index + 1]}轮`);
|
||||
});
|
||||
selected.value = Number(options.selected || 0);
|
||||
onClickTab(selected.value);
|
||||
});
|
||||
const onClickTab = (index) => {
|
||||
selected.value = index;
|
||||
redScores.value = [];
|
||||
blueScores.value = [];
|
||||
loadArrows(data.value.rounds[index]);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container title="靶纸">
|
||||
<view class="container">
|
||||
<view>
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
@click="() => onClickTab(index)"
|
||||
:class="selected === index ? 'selected-tab' : ''"
|
||||
>
|
||||
{{ tab }}
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{ margin: '20px 0' }">
|
||||
<BowTarget
|
||||
:scores="redScores"
|
||||
:blueScores="blueScores"
|
||||
:redTeam="redTeam"
|
||||
:blueTeam="blueTeam"
|
||||
mode="team"
|
||||
/>
|
||||
</view>
|
||||
<view class="score-container">
|
||||
<view
|
||||
class="score-row"
|
||||
v-for="(player, index) in players"
|
||||
:key="index"
|
||||
:style="{
|
||||
justifyContent: index % 2 === 0 ? 'flex-end' : 'flex-start',
|
||||
}"
|
||||
>
|
||||
<Avatar
|
||||
:src="player.avatar"
|
||||
:borderColor="index % 2 === 0 ? '#64BAFF' : '#FF6767'"
|
||||
:size="36"
|
||||
/>
|
||||
<view>
|
||||
<view
|
||||
v-for="(score, index) in data.rounds[selected].shoots[
|
||||
index % 2 === 0 ? 1 : 2
|
||||
]"
|
||||
:key="index"
|
||||
class="score-item"
|
||||
>
|
||||
{{ score.ringX ? "X" : score.ring }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.container > view:nth-child(1) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: calc(100% - 20px);
|
||||
color: #fff9;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.container > view:nth-child(1)::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
.container > view:nth-child(1) > view {
|
||||
border: 1px solid #fff9;
|
||||
border-radius: 20px;
|
||||
padding: 7px 10px;
|
||||
margin: 0 5px;
|
||||
font-size: 14px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.selected-tab {
|
||||
background-color: #fed847;
|
||||
border-color: #fed847 !important;
|
||||
color: #000;
|
||||
}
|
||||
.score-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 5px;
|
||||
width: calc(50% - 5px);
|
||||
padding-left: 5px;
|
||||
}
|
||||
.score-row > view:last-child {
|
||||
margin-left: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
gap: 5px;
|
||||
margin-right: 5px;
|
||||
min-width: 26%;
|
||||
}
|
||||
.score-item {
|
||||
background-image: url("../../static/score-bg.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
color: #fed847;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
}
|
||||
.score-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user