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 { getGameAPI } from "@/apis";

const blueTeam = ref([]);
const redTeam = ref([]);
const players = ref([]);
const roundsData = ref([]);
const data = ref({});
const show = ref(false);

onLoad(async (options) => {
  if (options.id) {
    const result = await getGameAPI(options.id);
    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 blueId = Object.keys(item)[0];
        let redId = Object.keys(item)[1];
        if (!result.bluePlayers[blueId]) {
          blueId = Object.keys(item)[1];
          redId = Object.keys(item)[0];
        }
        roundsData.value.push({
          blue: {
            name: result.bluePlayers[blueId].name,
            avatar: result.bluePlayers[blueId].avatar,
            arrows: item[blueId],
            totalRing: item[blueId].reduce((a, b) => a + b.ring, 0),
            totalScore: item[blueId].reduce((a, b) => a + b.ringScore, 0),
          },
          red: {
            name: result.redPlayers[redId].name,
            avatar: result.redPlayers[redId].avatar,
            arrows: item[redId],
            totalRing: item[redId].reduce((a, b) => a + b.ring, 0),
            totalScore: item[redId].reduce((a, b) => a + b.ringScore, 0),
          },
        });
      });
    } else if (result.mode === 2) {
      players.value = result.players;
    }
  }
});
</script>

<template>
  <Container title="详情">
    <view class="container">
      <BattleHeader
        :blueTeam="blueTeam"
        :redTeam="redTeam"
        :players="players"
      />
      <!-- <view class="score-header">
        <text>决金箭轮（环数）</text>
        <view>
          <text>查看靶纸</text>
          <image src="../static/back.png" mode="widthFix" />
        </view>
      </view>
      <view class="score-row">
        <view>
          <Avatar src="../static/avatar.png" :size="25" :borderColor="1" />
          <text>9环</text>
          <text>10环</text>
          <text>7环</text>
        </view>
        <image src="../static/winner-badge.png" mode="widthFix" />
      </view>
      <view class="score-row" :style="{ marginBottom: '5px' }">
        <view>
          <Avatar src="../static/avatar.png" :size="25" :borderColor="2" />
          <text>9环</text>
          <text>10环</text>
          <text>7环</text>
        </view>
      </view> -->
      <view v-if="players.length" @click="() => (show = true)">查看靶纸</view>
      <view
        v-for="(round, index) in roundsData"
        :key="index"
        :style="{ marginBottom: '5px' }"
      >
        <view class="score-header">
          <text>第{{ index + 1 }}轮</text>
          <view @click="() => (show = true)">
            <text>查看靶纸</text>
            <image src="../static/back.png" mode="widthFix" />
          </view>
        </view>
        <view class="score-row">
          <view>
            <Avatar :src="round.blue.avatar" :size="25" :borderColor="1" />
            <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>
            <Avatar :src="round.red.avatar" :size="25" :borderColor="2" />
            <text v-for="(arrow, index2) in round.red.arrows" :key="index2">
              {{ arrow.ring }}环
            </text>
          </view>
          <view>
            <text :style="{ color: '#FF6767' }">
              {{ round.blue.totalRing }}环
            </text>
            <text>得分 {{ round.blue.totalScore }}</text>
          </view>
        </view>
      </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;
}
.score-row > view:first-child > text {
  margin-left: 20px;
  color: #fff;
  display: block;
  width: 30px;
}
.score-row > image:last-child {
  width: 40px;
}
.score-row > view:last-child {
  padding-right: 5px;
}
.score-row > view:last-child > text:last-child {
  margin-left: 20px;
}
</style>