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 PlayerScore2 from "@/components/PlayerScore2.vue";
import { getBattleAPI } from "@/apis";

const battleId = ref("");
const data = ref({
  teams: [],
  rounds: [],
});
const players = ref([]);

onLoad(async (options) => {
  if (!options.battleId) return;
  battleId.value = options.battleId || "60510101693403136";
  const result = await getBattleAPI(battleId.value);
  data.value = result;
  if (result.mode > 3) {
    players.value = result.resultList.map((item, index) => {
      const plist = result.teams[0] ? result.teams[0].players : [];
      const p = plist.find((p) => p.id === item.userId);
      const arrows = new Array(12);
      result.rounds.forEach((r, index) => {
        if (r.shoots[item.userId]) {
          r.shoots[item.userId].forEach((s, index2) => {
            arrows[index2 + index * 6] = s;
          });
        }
      });
      return {
        ...item,
        rank: index + 1,
        name: p.name,
        avatar: p.avatar || "",
        arrows,
      };
    });
  }
});

const checkBowData = (selected) => {
  if (data.value.mode <= 3) {
    uni.navigateTo({
      url: `/pages/team-bow-data?battleId=${battleId.value}&selected=${selected}`,
    });
  } else {
    uni.navigateTo({
      url: `/pages/melee-bow-data?battleId=${battleId.value}`,
    });
  }
};
</script>

<template>
  <Container title="详情">
    <view class="container">
      <BattleHeader
        :winner="data.winTeam"
        :blueTeam="data.teams[1] ? data.teams[1].players : []"
        :redTeam="data.teams[2] ? data.teams[2].players : []"
        :players="players"
      />
      <view
        v-if="data.mode >= 3"
        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.mode >= 3"
        v-for="(player, index) in players"
        :key="index"
        :name="player.name"
        :avatar="player.avatar"
        :arrows="player.arrows"
        :totalScore="player.totalScore"
        :rank="index + 1"
      />
      <view
        v-if="data.mode <= 3"
        v-for="(round, index) in data.rounds"
        :key="index"
        :style="{ marginBottom: '5px' }"
      >
        <view class="score-header">
          <text>{{ round.ifGold ? "决金箭" : `第${index + 1}轮` }}</text>
          <view @click="() => checkBowData(index)">
            <text>查看靶纸</text>
            <image src="../static/back.png" mode="widthFix" />
          </view>
        </view>
        <view
          class="score-row"
          v-for="team in Object.keys(round.shoots)"
          :key="team"
        >
          <view>
            <view>
              <image
                v-for="(p, index) in data.teams[team].players"
                :style="{
                  borderColor: '#64BAFF',
                  transform: `translateX(-${index * 15}px)`,
                }"
                :src="p.avatar || '../static/user-icon.png'"
                :key="index"
                mode="widthFix"
              />
            </view>
            <text
              v-for="(arrow, index2) in round.shoots[team]"
              :key="index2"
              :style="{ color: arrow.ringX ? '#fed847' : '#ccc' }"
            >
              {{ arrow.ringX ? "X" : `${arrow.ring}环` }}
            </text>
          </view>
          <view>
            <text :style="{ color: team == 1 ? '#64BAFF' : '#FF6767' }">
              {{ round.shoots[team].reduce((acc, cur) => acc + cur.ring, 0) }}环
            </text>
            <text>得分 {{ round.scores[team].score }}</text>
          </view>
        </view>
      </view>
      <view :style="{ height: '20px' }"></view>
    </view>
  </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>