347 lines
7.8 KiB
Vue
347 lines
7.8 KiB
Vue
<script setup>
|
||
import { ref, onMounted, onUnmounted } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import UserUpgrade from "@/components/UserUpgrade.vue";
|
||
import { getGameAPI } from "@/apis";
|
||
import { topThreeColors, getBattleResultTips } from "@/constants";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user } = storeToRefs(store);
|
||
const { getLvlName } = store;
|
||
|
||
const ifWin = ref(false);
|
||
const data = ref({});
|
||
const totalPoints = ref(0);
|
||
const rank = ref(0);
|
||
const showUpgrade = ref(false);
|
||
const timer = ref(null);
|
||
const latestLvl = ref(0);
|
||
|
||
function exit() {
|
||
uni.navigateBack();
|
||
}
|
||
|
||
const checkBowData = () => {
|
||
uni.navigateTo({
|
||
url: `/pages/match-detail?id=${data.value.id}`,
|
||
});
|
||
};
|
||
onMounted(async () => {
|
||
const battleInfo = uni.getStorageSync("last-battle");
|
||
data.value = battleInfo;
|
||
const mine = battleInfo.playerStats.find((p) => p.id === user.value.id);
|
||
rank.value =
|
||
battleInfo.playerStats.findIndex((p) => p.id === user.value.id) + 1;
|
||
if (mine) {
|
||
totalPoints.value = mine.totalScore;
|
||
ifWin.value = battleInfo.mode === 1 && mine.team === battleInfo.winner;
|
||
}
|
||
timer.value = setTimeout(() => {
|
||
const lastLvl = uni.getStorageSync("latest-lvl");
|
||
if (parseInt(lastLvl) > user.value.lvl) {
|
||
latestLvl.value = parseInt(lastLvl);
|
||
}
|
||
}, 1000);
|
||
});
|
||
onUnmounted(() => {
|
||
if (timer.value) clearTimeout(timer.value);
|
||
});
|
||
</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>{{ 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"
|
||
:style="{
|
||
height: `${Math.max(data.playerStats.length > 5 ? '330' : '300')}px`,
|
||
}"
|
||
>
|
||
<view
|
||
v-for="(player, index) in data.playerStats"
|
||
:key="index"
|
||
:style="{
|
||
border: player.id === 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 class="truncate">{{ player.name }}</text>
|
||
<text>{{ getLvlName(player.totalScore) }}</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" />
|
||
<Avatar :src="user.avatar" :size="40" />
|
||
<text v-if="data.battleMode === 1">
|
||
经验 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
|
||
</text>
|
||
<text v-if="data.battleMode === 2">
|
||
积分 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
|
||
</text>
|
||
</view>
|
||
<text class="description">
|
||
{{
|
||
getBattleResultTips(data.battleMode, data.mode, {
|
||
win: ifWin,
|
||
score: totalPoints,
|
||
rank,
|
||
})
|
||
}}
|
||
</text>
|
||
<view class="op-btn">
|
||
<view @click="checkBowData">查看成绩</view>
|
||
<view @click="exit">退出</view>
|
||
</view>
|
||
<UserUpgrade
|
||
:show="showUpgrade"
|
||
:onClose="() => (showUpgrade = false)"
|
||
:lvl="latestLvl"
|
||
/>
|
||
</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;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
.battle-e > image {
|
||
position: absolute;
|
||
width: 100vw;
|
||
}
|
||
.battle-e > text {
|
||
position: relative;
|
||
font-size: 30px;
|
||
color: #fff;
|
||
margin-left: 10px;
|
||
}
|
||
.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 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: auto;
|
||
width: calc(100% - 60px);
|
||
color: #fff6;
|
||
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;
|
||
width: 40vw;
|
||
}
|
||
.player-title > text:last-child {
|
||
font-size: 13px;
|
||
}
|
||
</style>
|