完成大乱斗流程调试
This commit is contained in:
kron
@@ -4,6 +4,7 @@ import { onLoad } from "@dcloudio/uni-app";
|
||||
import { getGameAPI } from "@/apis";
|
||||
import TeamResult from "@/components/TeamResult.vue";
|
||||
import MeleeResult from "@/components/MeleeResult.vue";
|
||||
import Avatar from "@/components/Avatar.vue";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
const store = useStore();
|
||||
@@ -18,14 +19,15 @@ const show = ref(false);
|
||||
onLoad(async (options) => {
|
||||
battleId.value = options.battleId;
|
||||
const result = await getGameAPI(
|
||||
options.battleId || "BATTLE-1749386862250435325-854"
|
||||
// options.battleId || "BATTLE-1749386862250435325-854"
|
||||
options.battleId || "BATTLE-1749397329251504706-197"
|
||||
);
|
||||
data.value = result;
|
||||
if (result.redPlayers[user.value.id]) {
|
||||
if (result.mode === 1 && result.redPlayers[user.value.id]) {
|
||||
totalPoints.value = result.redTotal;
|
||||
ifWin.value = result.winner === 0;
|
||||
}
|
||||
if (result.bluePlayers[user.value.id]) {
|
||||
if (result.mode === 1 && result.bluePlayers[user.value.id]) {
|
||||
totalPoints.value = result.redTotal;
|
||||
ifWin.value = result.winner === 1;
|
||||
}
|
||||
@@ -44,26 +46,98 @@ onMounted(async () => {});
|
||||
src="../static/winner-yellow.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view>
|
||||
<image src="../static/battle-result.png" mode="widthFix" />
|
||||
</view>
|
||||
<view>
|
||||
<image src="../static/shining-bg.png" mode="widthFix" />
|
||||
<image src="../static/throphy.png" mode="widthFix" />
|
||||
<text>{{ ifWin && data.winner === 1 ? "蓝队" : "红队" }}获胜</text>
|
||||
<text>强势登顶，荣耀加冕</text>
|
||||
</view>
|
||||
<view>
|
||||
<block v-if="data.mode === 1">
|
||||
<view class="header-team">
|
||||
<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">
|
||||
<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="../static/avatar.png" :size="36" />
|
||||
<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>经验 +{{ totalPoints }}</text>
|
||||
</view>
|
||||
<text>你是朋友中的佼佼者哦</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="() => (show = true)">查看靶纸</view>
|
||||
<view @click="exit">退出</view>
|
||||
</view>
|
||||
<TeamResult :show="show" :onClose="() => (show = false)" :data="data" />
|
||||
<!-- <MeleeResult :show="show" :onClose="() => (show = false)" /> -->
|
||||
<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"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -77,6 +151,7 @@ onMounted(async () => {});
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* z-index: -1; */
|
||||
}
|
||||
.tag {
|
||||
position: absolute;
|
||||
@@ -87,14 +162,14 @@ onMounted(async () => {});
|
||||
.container > view {
|
||||
position: relative;
|
||||
}
|
||||
.container > view:nth-child(2) {
|
||||
.header-team {
|
||||
width: 80%;
|
||||
margin: 10px;
|
||||
}
|
||||
.container > view:nth-child(2) > image {
|
||||
.header-team > image {
|
||||
width: 20vw;
|
||||
}
|
||||
.container > view:nth-child(3) {
|
||||
.battle-winner {
|
||||
width: 100%;
|
||||
height: 38%;
|
||||
display: flex;
|
||||
@@ -104,32 +179,32 @@ onMounted(async () => {});
|
||||
color: #fff9;
|
||||
font-size: 14px;
|
||||
}
|
||||
.container > view:nth-child(3) > image {
|
||||
.battle-winner > image {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.container > view:nth-child(3) > image:nth-child(2) {
|
||||
.battle-winner > image:nth-child(2) {
|
||||
top: 6vw;
|
||||
}
|
||||
.container > view:nth-child(3) > text:nth-child(3) {
|
||||
.battle-winner > text:nth-child(3) {
|
||||
font-size: 30px;
|
||||
margin: 10px;
|
||||
font-weight: bold;
|
||||
color: #fed847;
|
||||
}
|
||||
.container > view:nth-child(4) {
|
||||
.battle-e {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.container > view:nth-child(4) > image {
|
||||
.battle-e > image {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
top: 45%;
|
||||
}
|
||||
.container > view:nth-child(4) > text {
|
||||
.battle-e > text {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
font-size: 30px;
|
||||
@@ -137,19 +212,19 @@ onMounted(async () => {});
|
||||
text-align: center;
|
||||
top: 54%;
|
||||
}
|
||||
.container > text:nth-child(5) {
|
||||
.description {
|
||||
margin: 50px 0;
|
||||
font-size: 14px;
|
||||
color: #fed847;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.container > view:nth-child(6) {
|
||||
.op-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.container > view:nth-child(6) > view {
|
||||
.op-btn > view {
|
||||
width: 36%;
|
||||
margin: 0 10px;
|
||||
background-color: #fed847;
|
||||
@@ -157,8 +232,85 @@ onMounted(async () => {});
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.container > view:nth-child(6) > view:last-child {
|
||||
.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;
|
||||
}
|
||||
.header-melee > view {
|
||||
height: 1px;
|
||||
background-color: #fff3;
|
||||
width: 18%;
|
||||
}
|
||||
.header-melee > image {
|
||||
width: 27%;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.players {
|
||||
color: #fff3;
|
||||
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;
|
||||
}
|
||||
.player-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.player-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.player-crown {
|
||||
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;
|
||||
}
|
||||
.player-title {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user