259 lines
7.3 KiB
Vue
259 lines
7.3 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 battleId = ref("");
|
||
const data = ref({
|
||
players: [],
|
||
});
|
||
// const show = ref(false);
|
||
|
||
onLoad(async (options) => {
|
||
if (options.id) {
|
||
battleId.value = options.id || "BATTLE-1751732742024840058-732";
|
||
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 blueId = Object.keys(item)[0];
|
||
let redId = Object.keys(item)[1];
|
||
if (!result.bluePlayers[blueId]) {
|
||
blueId = Object.keys(item)[1];
|
||
redId = Object.keys(item)[0];
|
||
}
|
||
roundsData.value.push({
|
||
blue: {
|
||
name: result.bluePlayers[blueId].name,
|
||
avatar: result.bluePlayers[blueId].avatar,
|
||
arrows: item[blueId],
|
||
totalRing: item[blueId].reduce((a, b) => a + b.ring, 0),
|
||
totalScore: item[blueId].reduce((a, b) => a + b.ringScore, 0),
|
||
},
|
||
red: {
|
||
name: result.redPlayers[redId].name,
|
||
avatar: result.redPlayers[redId].avatar,
|
||
arrows: item[redId],
|
||
totalRing: item[redId].reduce((a, b) => a + b.ring, 0),
|
||
totalScore: item[redId].reduce((a, b) => a + b.ringScore, 0),
|
||
},
|
||
});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
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"
|
||
/>
|
||
<block v-if="data.goldenRound">
|
||
<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>
|
||
<Avatar
|
||
:src="blueTeam[0].avatar"
|
||
:size="25"
|
||
borderColor="#64BAFF"
|
||
/>
|
||
<text
|
||
v-if="data.goldenRound.blueTotal"
|
||
v-for="(arrow, index) in data.goldenRound.arrowHistory.filter(
|
||
(a) => a.playerId === blueTeam[0].playerId
|
||
)"
|
||
:key="index"
|
||
>
|
||
{{ arrow.ring }}环
|
||
</text>
|
||
</view>
|
||
<image
|
||
v-if="data.goldenRound.winner === 1"
|
||
src="../static/winner-badge.png"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<view class="score-row" :style="{ marginBottom: '5px' }">
|
||
<view>
|
||
<Avatar :src="redTeam[0].avatar" :size="25" borderColor="#FF6767" />
|
||
<text
|
||
v-if="data.goldenRound.redTotal"
|
||
v-for="(arrow, index) in data.goldenRound.arrowHistory.filter(
|
||
(a) => a.playerId === redTeam[0].playerId
|
||
)"
|
||
:key="index"
|
||
>
|
||
{{ arrow.ring }}环
|
||
</text>
|
||
</view>
|
||
<image
|
||
v-if="data.goldenRound.winner === 0"
|
||
src="../static/winner-badge.png"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
</block>
|
||
<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"
|
||
/>
|
||
<view
|
||
v-for="(round, index) in roundsData"
|
||
:key="index"
|
||
:style="{ marginBottom: '5px' }"
|
||
>
|
||
<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>
|
||
<Avatar :src="round.blue.avatar" :size="25" borderColor="#64BAFF" />
|
||
<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>
|
||
<Avatar :src="round.red.avatar" :size="25" borderColor="#FF6767" />
|
||
<text v-for="(arrow, index2) in round.red.arrows" :key="index2">
|
||
{{ arrow.ring }}环
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text :style="{ color: '#FF6767' }">
|
||
{{ round.blue.totalRing }}环
|
||
</text>
|
||
<text>得分 {{ round.blue.totalScore }}</text>
|
||
</view>
|
||
</view>
|
||
</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;
|
||
}
|
||
.score-row > view:first-child > text {
|
||
margin-left: 20px;
|
||
color: #fff;
|
||
display: block;
|
||
width: 30px;
|
||
}
|
||
.score-row > image:last-child {
|
||
width: 40px;
|
||
}
|
||
.score-row > view:last-child {
|
||
padding-right: 5px;
|
||
}
|
||
.score-row > view:last-child > text:last-child {
|
||
margin-left: 20px;
|
||
}
|
||
</style>
|