335 lines
9.5 KiB
Vue
335 lines
9.5 KiB
Vue
<script setup>
|
||
import { ref } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import Container from "@/components/Container.vue";
|
||
import BattleHeader from "@/components/BattleHeader.vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
// import TeamResult from "@/components/TeamResult.vue";
|
||
// import MeleeResult from "@/components/MeleeResult.vue";
|
||
import PlayerScore2 from "@/components/PlayerScore2.vue";
|
||
import { getGameAPI } from "@/apis";
|
||
|
||
const blueTeam = ref([]);
|
||
const redTeam = ref([]);
|
||
const roundsData = ref([]);
|
||
const goldenRoundsData = ref([]);
|
||
const battleId = ref("");
|
||
const data = ref({
|
||
players: [],
|
||
});
|
||
// const show = ref(false);
|
||
|
||
onLoad(async (options) => {
|
||
if (options.id) {
|
||
battleId.value = options.id || "BATTLE-1755484626207409508-955";
|
||
const result = await getGameAPI(battleId.value);
|
||
data.value = result;
|
||
if (result.mode === 1) {
|
||
blueTeam.value = Object.values(result.bluePlayers || {});
|
||
redTeam.value = Object.values(result.redPlayers || {});
|
||
Object.values(result.roundsData).forEach((item) => {
|
||
let bluePoint = 1;
|
||
let redPoint = 1;
|
||
let blueTotalRings = 0;
|
||
let redTotalRings = 0;
|
||
let blueArrows = [];
|
||
let redArrows = [];
|
||
blueTeam.value.forEach((p) => {
|
||
if (!item[p.playerId]) return;
|
||
blueTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
|
||
blueArrows = [...blueArrows, ...item[p.playerId]];
|
||
});
|
||
redTeam.value.forEach((p) => {
|
||
if (!item[p.playerId]) return;
|
||
redTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
|
||
redArrows = [...redArrows, ...item[p.playerId]];
|
||
});
|
||
if (blueTotalRings > redTotalRings) {
|
||
bluePoint = 2;
|
||
redPoint = 0;
|
||
} else if (blueTotalRings < redTotalRings) {
|
||
bluePoint = 0;
|
||
redPoint = 2;
|
||
}
|
||
roundsData.value.push({
|
||
blue: {
|
||
avatars: blueTeam.value.map((p) => p.avatar),
|
||
arrows: blueArrows,
|
||
totalRing: blueTotalRings,
|
||
totalScore: bluePoint,
|
||
},
|
||
red: {
|
||
avatars: redTeam.value.map((p) => p.avatar),
|
||
arrows: redArrows,
|
||
totalRing: redTotalRings,
|
||
totalScore: redPoint,
|
||
},
|
||
});
|
||
});
|
||
result.goldenRounds.forEach((round) => {
|
||
goldenRoundsData.value.push({
|
||
blue: {
|
||
avatars: blueTeam.value.map((p) => p.avatar),
|
||
arrows: round.arrowHistory.filter((a) => a.team === 1),
|
||
},
|
||
red: {
|
||
avatars: redTeam.value.map((p) => p.avatar),
|
||
arrows: round.arrowHistory.filter((a) => a.team === 0),
|
||
},
|
||
winner: round.winner,
|
||
});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
const checkBowData = () => {
|
||
if (data.value.mode === 1) {
|
||
uni.navigateTo({
|
||
url: `/pages/team-bow-data?battleId=${battleId.value}`,
|
||
});
|
||
} else if (data.value.mode === 2) {
|
||
uni.navigateTo({
|
||
url: `/pages/melee-bow-data?battleId=${battleId.value}`,
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Container title="详情">
|
||
<view class="container">
|
||
<BattleHeader
|
||
:winner="data.winner"
|
||
:blueTeam="blueTeam"
|
||
:redTeam="redTeam"
|
||
:players="data.players"
|
||
/>
|
||
<view
|
||
v-if="data.players && data.players.length"
|
||
class="score-header"
|
||
:style="{ border: 'none', padding: '5px 15px' }"
|
||
>
|
||
<text>大乱斗</text>
|
||
<view @click="checkBowData">
|
||
<text>查看靶纸</text>
|
||
<image src="../static/back.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<PlayerScore2
|
||
v-if="data.players && data.players.length"
|
||
v-for="(player, index) in data.players"
|
||
:key="index"
|
||
:name="player.name"
|
||
:avatar="player.avatar"
|
||
:scores="player.arrowHistory"
|
||
:totalScore="player.totalScore"
|
||
:totalRing="player.totalRings"
|
||
:rank="index + 1"
|
||
/>
|
||
<block v-for="(round, index) in goldenRoundsData" :key="index">
|
||
<view class="score-header">
|
||
<text>决金箭轮（环数）</text>
|
||
<view @click="checkBowData">
|
||
<text>查看靶纸</text>
|
||
<image src="../static/back.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<view class="score-row">
|
||
<view>
|
||
<view>
|
||
<image
|
||
v-for="(src, index) in round.blue.avatars"
|
||
:style="{
|
||
borderColor: '#64BAFF',
|
||
transform: `translateX(-${index * 15}px)`,
|
||
}"
|
||
:src="src"
|
||
:key="index"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<text v-for="(arrow, index) in round.blue.arrows" :key="index">
|
||
{{ arrow.ring }}环
|
||
</text>
|
||
</view>
|
||
<image
|
||
v-if="round.winner === 1"
|
||
src="../static/winner-badge.png"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<view class="score-row" :style="{ marginBottom: '5px' }">
|
||
<view>
|
||
<view>
|
||
<image
|
||
v-for="(src, index) in round.red.avatars"
|
||
:style="{
|
||
borderColor: '#FF6767',
|
||
transform: `translateX(-${index * 15}px)`,
|
||
}"
|
||
:src="src || '../static/user-icon.png'"
|
||
:key="index"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<text v-for="(arrow, index) in round.red.arrows" :key="index">
|
||
{{ arrow.ring }}环
|
||
</text>
|
||
</view>
|
||
<image
|
||
v-if="round.winner === 0"
|
||
src="../static/winner-badge.png"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
</block>
|
||
<view
|
||
v-for="(round, index) in roundsData"
|
||
:key="index"
|
||
:style="{ marginBottom: '5px' }"
|
||
>
|
||
<block
|
||
v-if="
|
||
index < Object.keys(roundsData).length - goldenRoundsData.length
|
||
"
|
||
>
|
||
<view class="score-header">
|
||
<text>第{{ index + 1 }}轮</text>
|
||
<view @click="checkBowData">
|
||
<text>查看靶纸</text>
|
||
<image src="../static/back.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<view class="score-row">
|
||
<view>
|
||
<view>
|
||
<image
|
||
v-for="(src, index) in round.blue.avatars"
|
||
:style="{
|
||
borderColor: '#64BAFF',
|
||
transform: `translateX(-${index * 15}px)`,
|
||
}"
|
||
:src="src || '../static/user-icon.png'"
|
||
:key="index"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<text v-for="(arrow, index2) in round.blue.arrows" :key="index2">
|
||
{{ arrow.ring }}环
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text :style="{ color: '#64BAFF' }">
|
||
{{ round.blue.totalRing }}环
|
||
</text>
|
||
<text>得分 {{ round.blue.totalScore }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="score-row">
|
||
<view>
|
||
<view>
|
||
<image
|
||
v-for="(src, index) in round.red.avatars"
|
||
:style="{
|
||
borderColor: '#FF6767',
|
||
transform: `translateX(-${index * 15}px)`,
|
||
}"
|
||
:src="src"
|
||
:key="index"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<text v-for="(arrow, index2) in round.red.arrows" :key="index2">
|
||
{{ arrow.ring }}环
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text :style="{ color: '#FF6767' }">
|
||
{{ round.red.totalRing }}环
|
||
</text>
|
||
<text>得分 {{ round.red.totalScore }}</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view :style="{ height: '20px' }"></view>
|
||
</view>
|
||
<!-- <TeamResult
|
||
v-if="data.mode === 1"
|
||
:show="show"
|
||
:onClose="() => (show = false)"
|
||
:data="data"
|
||
/>
|
||
<MeleeResult
|
||
v-if="data.mode === 2"
|
||
:show="show"
|
||
:onClose="() => (show = false)"
|
||
:data="data"
|
||
/> -->
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.score-header,
|
||
.score-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px;
|
||
color: #fff9;
|
||
font-size: 15px;
|
||
border-bottom: 1px solid #fff3;
|
||
}
|
||
.score-header > text:first-child {
|
||
color: #fed847;
|
||
}
|
||
.score-header > view:last-child {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.score-header > view:last-child > image {
|
||
margin-left: 5px;
|
||
width: 15px;
|
||
height: 15px;
|
||
transform: rotate(180deg);
|
||
margin-top: -2px;
|
||
}
|
||
.score-row > view {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
}
|
||
.score-row > view:first-child > view:first-child {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 70px;
|
||
}
|
||
.score-row > view:first-child > view:first-child > image {
|
||
width: 25px;
|
||
height: 25px;
|
||
min-width: 25px;
|
||
min-height: 25px;
|
||
border: 1px solid;
|
||
border-radius: 50%;
|
||
}
|
||
.score-row > view:first-child > text {
|
||
color: #fff;
|
||
display: block;
|
||
width: 35px;
|
||
}
|
||
.score-row > image:last-child {
|
||
width: 40px;
|
||
}
|
||
.score-row > view:nth-child(2) {
|
||
padding-right: 5px;
|
||
}
|
||
.score-row > view:nth-child(2) > text:last-child {
|
||
margin-left: 20px;
|
||
}
|
||
</style>
|