shoot-miniprograms/src/pages/battle-result.vue

<script setup>
import { ref, onMounted } from "vue";
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 { 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);
const show = ref(false);

onLoad(async (options) => {
  battleId.value = options.battleId;
  const result = await getGameAPI(
    // options.battleId || "BATTLE-1749386862250435325-854"
    options.battleId || "BATTLE-1750142722977234017-746"
  );
  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);
});
</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">
        <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 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="() => (show = true)">查看靶纸</view>
      <view @click="exit">退出</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"
    />
  </view>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.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: 10px;
  font-weight: bold;
  color: #fed847;
}
.battle-e {
  width: 100%;
  height: 60px;
  margin: 20px 0;
}
.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;
}
.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;
}
.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>