shoot-miniprograms/src/pages/battle-result.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");
  console.log("----battleInfo", battleInfo);
  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("lastest-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 v-if="data.mode === 1" :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>