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

update:vip完成

Browse Source
This commit is contained in:
zhangyi
2026-06-18 16:18:55 +08:00
parent 68f13910a3
commit 8d8ede5397
41 changed files with 1054 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/team-battle/components/BackToGame.vue
View File

@@ -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, "");
}

4
src/pages/team-battle/components/BattleFooter.vue
View File

@@ -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>

48
src/pages/team-battle/components/BattleHeader.vue
View File

@@ -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;

83
src/pages/team-battle/components/BowTarget.vue
View File

@@ -35,6 +35,14 @@ const props = defineProps({
type: Array,
default: () => [],
},
redTeam: {
type: Array,
default: () => [],
},
blueTeam: {
type: Array,
default: () => [],
},
latestShotFlash: {
type: Object,
default: null,
@@ -92,8 +100,17 @@ function buildShotEffectKey(team, shot, fallbackKey = "") {
);
}
function shouldPlayShotEffect(shot) {
return !!shot && Number(shot.ring) > 0;
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() {
@@ -204,7 +221,7 @@ function showShotFlash(flash) {
}
const team = flash.team === "red" ? "red" : "blue";
if (shouldPlayShotEffect(shootData)) {
if (shouldPlayShotEffect(shootData, team)) {
triggerShotEffect(team, shootData, flash.key);
return;
}
@@ -310,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(
@@ -445,6 +471,18 @@ 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 && !shouldHideRedHit(index)"
:class="`hit ${pMode ? 'b' : 's'}-point ${
@@ -458,6 +496,18 @@ 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 && !shouldHideBlueHit(index)"
:class="`hit ${pMode ? 'b' : 's'}-point ${
@@ -572,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: 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;
@@ -598,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);

40
src/pages/team-battle/components/TeamAvatars.vue
View File

@@ -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;

20
src/pages/team-battle/index.vue
View File

@@ -473,13 +473,17 @@ function updateTeams(battleInfo) {
}
function updateGoldenRound(battleInfo) {
if (!battleInfo?.current?.goldRound) {
goldenRound.value = 0;
return;
}
const rounds = Array.isArray(battleInfo.rounds) ? battleInfo.rounds : [];
const finishedGoldCount = rounds.filter((round) => !!round?.ifGold).length;
goldenRound.value = Math.max(1, finishedGoldCount + (battleInfo.current?.playerId ? 1 : 0));
const rounds = Array.isArray(battleInfo?.rounds) ? battleInfo.rounds : [];
const currentRoundNo = Number(battleInfo?.current?.round || 0);
const currentRoundInfo = rounds.find((round) => Number(round?.round) === currentRoundNo);
const activeGoldRoundInfo = rounds.find(
(round) => Number(round?.goldRound || 0) > 0 && round?.status === 1
);
const roundGoldRound = Number(currentRoundInfo?.goldRound || 0);
const activeGoldRound = Number(activeGoldRoundInfo?.goldRound || 0);
const currentGoldRound = Number(battleInfo?.current?.goldRound || 0);
const nextGoldRound = roundGoldRound || activeGoldRound || currentGoldRound;
goldenRound.value = nextGoldRound > 0 ? nextGoldRound : 0;
}
// Restore an info snapshot whose eventType points at the NewRound phase.
@@ -1214,6 +1218,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
View 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>