shoot-miniprograms/src/pages/match-detail.vue

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import Avatar from "@/components/Avatar.vue";
// import TeamResult from "@/components/TeamResult.vue";
// import MeleeResult from "@/components/MeleeResult.vue";
import PlayerScore2 from "@/components/PlayerScore2.vue";
import { getGameAPI } from "@/apis";

const blueTeam = ref([]);
const redTeam = ref([]);
const roundsData = ref([]);
const goldenRoundsData = ref([]);
const battleId = ref("");
const data = ref({
  players: [],
});
// const show = ref(false);

onLoad(async (options) => {
  if (options.id) {
    battleId.value = options.id || "BATTLE-1755484626207409508-955";
    const result = await getGameAPI(battleId.value);
    data.value = result;
    if (result.mode === 1) {
      blueTeam.value = Object.values(result.bluePlayers || {});
      redTeam.value = Object.values(result.redPlayers || {});
      Object.values(result.roundsData).forEach((item) => {
        let bluePoint = 1;
        let redPoint = 1;
        let blueTotalRings = 0;
        let redTotalRings = 0;
        let blueArrows = [];
        let redArrows = [];
        blueTeam.value.forEach((p) => {
          if (!item[p.playerId]) return;
          blueTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
          blueArrows = [...blueArrows, ...item[p.playerId]];
        });
        redTeam.value.forEach((p) => {
          if (!item[p.playerId]) return;
          redTotalRings += item[p.playerId].reduce((a, b) => a + b.ring, 0);
          redArrows = [...redArrows, ...item[p.playerId]];
        });
        if (blueTotalRings > redTotalRings) {
          bluePoint = 2;
          redPoint = 0;
        } else if (blueTotalRings < redTotalRings) {
          bluePoint = 0;
          redPoint = 2;
        }
        roundsData.value.push({
          blue: {
            avatars: blueTeam.value.map((p) => p.avatar),
            arrows: blueArrows,
            totalRing: blueTotalRings,
            totalScore: bluePoint,
          },
          red: {
            avatars: redTeam.value.map((p) => p.avatar),
            arrows: redArrows,
            totalRing: redTotalRings,
            totalScore: redPoint,
          },
        });
      });
      result.goldenRounds.forEach((round) => {
        goldenRoundsData.value.push({
          blue: {
            avatars: blueTeam.value.map((p) => p.avatar),
            arrows: round.arrowHistory.filter((a) => a.team === 1),
          },
          red: {
            avatars: redTeam.value.map((p) => p.avatar),
            arrows: round.arrowHistory.filter((a) => a.team === 0),
          },
          winner: round.winner,
        });
      });
    }
  }
});

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}`,
    });
  }
};
</script>

<template>
  <Container title="详情">
    <view class="container">
      <BattleHeader
        :winner="data.winner"
        :blueTeam="blueTeam"
        :redTeam="redTeam"
        :players="data.players"
      />
      <view
        v-if="data.players && data.players.length"
        class="score-header"
        :style="{ border: 'none', padding: '5px 15px' }"
      >
        <text>大乱斗</text>
        <view @click="checkBowData">
          <text>查看靶纸</text>
          <image src="../static/back.png" mode="widthFix" />
        </view>
      </view>
      <PlayerScore2
        v-if="data.players && data.players.length"
        v-for="(player, index) in data.players"
        :key="index"
        :name="player.name"
        :avatar="player.avatar"
        :scores="player.arrowHistory"
        :totalScore="player.totalScore"
        :totalRing="player.totalRings"
        :rank="index + 1"
      />
      <block v-for="(round, index) in goldenRoundsData" :key="index">
        <view class="score-header">
          <text>决金箭轮（环数）</text>
          <view @click="checkBowData">
            <text>查看靶纸</text>
            <image src="../static/back.png" mode="widthFix" />
          </view>
        </view>
        <view class="score-row">
          <view>
            <view>
              <image
                v-for="(src, index) in round.blue.avatars"
                :style="{
                  borderColor: '#64BAFF',
                  transform: `translateX(-${index * 15}px)`,
                }"
                :src="src"
                :key="index"
                mode="widthFix"
              />
            </view>
            <text v-for="(arrow, index) in round.blue.arrows" :key="index">
              {{ arrow.ring }}环
            </text>
          </view>
          <image
            v-if="round.winner === 1"
            src="../static/winner-badge.png"
            mode="widthFix"
          />
        </view>
        <view class="score-row" :style="{ marginBottom: '5px' }">
          <view>
            <view>
              <image
                v-for="(src, index) in round.red.avatars"
                :style="{
                  borderColor: '#FF6767',
                  transform: `translateX(-${index * 15}px)`,
                }"
                :src="src"
                :key="index"
                mode="widthFix"
              />
            </view>
            <text v-for="(arrow, index) in round.red.arrows" :key="index">
              {{ arrow.ring }}环
            </text>
          </view>
          <image
            v-if="round.winner === 0"
            src="../static/winner-badge.png"
            mode="widthFix"
          />
        </view>
      </block>
      <view
        v-for="(round, index) in roundsData"
        :key="index"
        :style="{ marginBottom: '5px' }"
      >
        <block
          v-if="
            index < Object.keys(roundsData).length - goldenRoundsData.length
          "
        >
          <view class="score-header">
            <text>第{{ index + 1 }}轮</text>
            <view @click="checkBowData">
              <text>查看靶纸</text>
              <image src="../static/back.png" mode="widthFix" />
            </view>
          </view>
          <view class="score-row">
            <view>
              <view>
                <image
                  v-for="(src, index) in round.blue.avatars"
                  :style="{
                    borderColor: '#64BAFF',
                    transform: `translateX(-${index * 15}px)`,
                  }"
                  :src="src"
                  :key="index"
                  mode="widthFix"
                />
              </view>
              <text v-for="(arrow, index2) in round.blue.arrows" :key="index2">
                {{ arrow.ring }}环
              </text>
            </view>
            <view>
              <text :style="{ color: '#64BAFF' }">
                {{ round.blue.totalRing }}环
              </text>
              <text>得分 {{ round.blue.totalScore }}</text>
            </view>
          </view>
          <view class="score-row">
            <view>
              <view>
                <image
                  v-for="(src, index) in round.red.avatars"
                  :style="{
                    borderColor: '#FF6767',
                    transform: `translateX(-${index * 15}px)`,
                  }"
                  :src="src"
                  :key="index"
                  mode="widthFix"
                />
              </view>
              <text v-for="(arrow, index2) in round.red.arrows" :key="index2">
                {{ arrow.ring }}环
              </text>
            </view>
            <view>
              <text :style="{ color: '#FF6767' }">
                {{ round.red.totalRing }}环
              </text>
              <text>得分 {{ round.red.totalScore }}</text>
            </view>
          </view>
        </block>
      </view>
      <view :style="{ height: '20px' }"></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"
    /> -->
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.score-header,
.score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  color: #fff9;
  font-size: 15px;
  border-bottom: 1px solid #fff3;
}
.score-header > text:first-child {
  color: #fed847;
}
.score-header > view:last-child {
  display: flex;
  align-items: center;
}
.score-header > view:last-child > image {
  margin-left: 5px;
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
  margin-top: -2px;
}
.score-row > view {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.score-row > view:first-child > view:first-child {
  display: flex;
  align-items: center;
  width: 70px;
}
.score-row > view:first-child > view:first-child > image {
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  border: 1px solid;
  border-radius: 50%;
}
.score-row > view:first-child > text {
  color: #fff;
  display: block;
  width: 35px;
}
.score-row > image:last-child {
  width: 40px;
}
.score-row > view:nth-child(2) {
  padding-right: 5px;
}
.score-row > view:nth-child(2) > text:last-child {
  margin-left: 20px;
}
</style>