334 lines
7.6 KiB
Vue
334 lines
7.6 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import { getGameAPI } from "@/apis";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import { getHomeData } from "@/apis";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user } = storeToRefs(store);
|
||
const { updateUser } = store;
|
||
|
||
const battleId = ref("");
|
||
const ifWin = ref(false);
|
||
const data = ref({});
|
||
const totalPoints = ref(0);
|
||
|
||
onLoad(async (options) => {
|
||
battleId.value = options.battleId;
|
||
const result = await getGameAPI(
|
||
// options.battleId || "BATTLE-1750688685843436271-553"
|
||
options.battleId || "BATTLE-1750688536849458226-518"
|
||
);
|
||
data.value = result;
|
||
if (result.mode === 1 && result.redPlayers[user.value.id]) {
|
||
totalPoints.value = result.redTotal;
|
||
ifWin.value = result.winner === 0;
|
||
}
|
||
if (result.mode === 1 && result.bluePlayers[user.value.id]) {
|
||
totalPoints.value = result.redTotal;
|
||
ifWin.value = result.winner === 1;
|
||
}
|
||
if (result.mode === 2) {
|
||
const mine = result.players.find((p) => p.playerId === user.value.id);
|
||
if (mine) totalPoints.value = mine.totalScore;
|
||
}
|
||
});
|
||
function exit() {
|
||
uni.navigateBack();
|
||
}
|
||
onMounted(async () => {
|
||
const result = await getHomeData();
|
||
if (result.user) updateUser(result.user);
|
||
});
|
||
|
||
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}`,
|
||
});
|
||
}
|
||
};
|
||
const topThreeColors = ["#FFD947 ", "#D2D2D2", "#FFA515"];
|
||
</script>
|
||
|
||
<template>
|
||
<view class="container">
|
||
<image
|
||
:style="{ opacity: ifWin ? '1' : '0' }"
|
||
class="tag"
|
||
src="../static/winner-yellow.png"
|
||
mode="widthFix"
|
||
/>
|
||
<block v-if="data.mode === 1">
|
||
<view class="header-team" :style="{ marginTop: '25%' }">
|
||
<image src="../static/battle-result.png" mode="widthFix" />
|
||
</view>
|
||
<view class="battle-winner">
|
||
<image src="../static/shining-bg.png" mode="widthFix" />
|
||
<image src="../static/throphy.png" mode="widthFix" />
|
||
<text>{{ ifWin && data.winner === 1 ? "蓝队" : "红队" }}获胜</text>
|
||
<text>强势登顶，荣耀加冕</text>
|
||
</view>
|
||
</block>
|
||
<block v-if="data.mode === 2">
|
||
<view class="header-melee">
|
||
<view />
|
||
<image src="../static/battle-result.png" mode="widthFix" />
|
||
<view />
|
||
</view>
|
||
<view class="players">
|
||
<view
|
||
v-for="(player, index) in data.players"
|
||
:key="index"
|
||
:style="{
|
||
border: player.playerId === user.id ? '1px solid #B04630' : 'none',
|
||
}"
|
||
>
|
||
<image
|
||
v-if="index === 0"
|
||
class="player-bg"
|
||
src="../static/melee-player-bg1.png"
|
||
mode="aspectFill"
|
||
/>
|
||
<image
|
||
v-if="index === 1"
|
||
class="player-bg"
|
||
src="../static/melee-player-bg2.png"
|
||
mode="aspectFill"
|
||
/>
|
||
<image
|
||
v-if="index === 2"
|
||
class="player-bg"
|
||
src="../static/melee-player-bg3.png"
|
||
mode="aspectFill"
|
||
/>
|
||
<image
|
||
v-if="index === 0"
|
||
class="player-crown"
|
||
src="../static/champ1.png"
|
||
mode="widthFix"
|
||
/>
|
||
<image
|
||
v-if="index === 1"
|
||
class="player-crown"
|
||
src="../static/champ2.png"
|
||
mode="widthFix"
|
||
/>
|
||
<image
|
||
v-if="index === 2"
|
||
class="player-crown"
|
||
src="../static/champ3.png"
|
||
mode="widthFix"
|
||
/>
|
||
<view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
|
||
<Avatar
|
||
:src="player.avatar"
|
||
:size="36"
|
||
:borderColor="topThreeColors[index] || ''"
|
||
/>
|
||
<view class="player-title">
|
||
<text>{{ player.name }}</text>
|
||
<text>钻石三级</text>
|
||
</view>
|
||
<text
|
||
><text :style="{ color: '#fff' }">{{ player.totalRings }}</text>
|
||
环</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view class="battle-e">
|
||
<image src="../static/row-yellow-bg.png" mode="widthFix" />
|
||
<text v-if="data.gameMode === 1">经验 +{{ totalPoints }}</text>
|
||
<text v-if="data.gameMode === 2">积分 +{{ totalPoints }}</text>
|
||
</view>
|
||
<text v-if="data.mode === 1" class="description">你是朋友中的佼佼者哦</text>
|
||
<text v-if="data.mode === 2" class="description"
|
||
>好成绩！全国排位赛等着你！</text
|
||
>
|
||
<view class="op-btn">
|
||
<view @click="checkBowData">查看靶纸</view>
|
||
<view @click="exit">退出</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #292929;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
.tag {
|
||
position: absolute;
|
||
width: 32vw;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
.container > view {
|
||
position: relative;
|
||
}
|
||
.header-team {
|
||
width: 80%;
|
||
margin: 10px;
|
||
}
|
||
.header-team > image {
|
||
width: 20vw;
|
||
}
|
||
.battle-winner {
|
||
width: 100%;
|
||
height: 38%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
color: #fff9;
|
||
font-size: 14px;
|
||
}
|
||
.battle-winner > image {
|
||
position: absolute;
|
||
width: 100vw;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.battle-winner > image:nth-child(2) {
|
||
top: 6vw;
|
||
}
|
||
.battle-winner > text:nth-child(3) {
|
||
font-size: 30px;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
color: #fed847;
|
||
}
|
||
.battle-winner > text:nth-child(4) {
|
||
margin-bottom: 10px;
|
||
}
|
||
.battle-e {
|
||
width: 100%;
|
||
height: 60px;
|
||
}
|
||
.battle-e > image {
|
||
position: absolute;
|
||
width: 100vw;
|
||
top: 45%;
|
||
}
|
||
.battle-e > text {
|
||
position: absolute;
|
||
width: 100%;
|
||
font-size: 30px;
|
||
color: #fff;
|
||
text-align: center;
|
||
top: 54%;
|
||
}
|
||
.description {
|
||
margin: 50px 0;
|
||
font-size: 14px;
|
||
color: #fed847;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.op-btn {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.op-btn > view {
|
||
width: 36%;
|
||
margin: 0 10px;
|
||
background-color: #fed847;
|
||
border-radius: 20px;
|
||
padding: 10px 0;
|
||
text-align: center;
|
||
}
|
||
.op-btn > view:last-child {
|
||
color: #fff;
|
||
background-color: #757575;
|
||
}
|
||
.header-melee {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
margin-bottom: 30px;
|
||
margin-top: 25%;
|
||
}
|
||
.header-melee > view {
|
||
height: 1px;
|
||
background-color: #fff3;
|
||
width: 18%;
|
||
}
|
||
.header-melee > image {
|
||
width: 27%;
|
||
margin: 0 20px;
|
||
}
|
||
.players {
|
||
color: #fff6;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: calc(100% - 60px);
|
||
height: 300px;
|
||
margin: 0 30px;
|
||
}
|
||
.players > view {
|
||
width: 100%;
|
||
height: 60px;
|
||
flex: 0 0 auto;
|
||
overflow: hidden;
|
||
position: relative;
|
||
background-color: #ffffff1a;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
}
|
||
.player-bg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.player-crown {
|
||
position: relative;
|
||
width: 27px;
|
||
margin: 0 15px;
|
||
}
|
||
.view-crown {
|
||
width: 27px;
|
||
height: 27px;
|
||
line-height: 27px;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
margin: 0 15px;
|
||
color: #fff;
|
||
background-color: #676767;
|
||
position: relative;
|
||
}
|
||
.player-title {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 15px;
|
||
width: calc(100% - 160px);
|
||
}
|
||
.player-title > text:first-child {
|
||
color: #fff;
|
||
margin-bottom: 3px;
|
||
}
|
||
.player-title > text:last-child {
|
||
font-size: 13px;
|
||
}
|
||
</style>
|