shoot-miniprograms/src/pages/melee-bow-data.vue

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue";
import Avatar from "@/components/Avatar.vue";
import { getBattleAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { user } = storeToRefs(useStore());
const currentUser = ref({
  arrows: [],
});
const players = ref([]);

onLoad(async (options) => {
  if (!options.battleId) return;
  const result = await getBattleAPI(options.battleId || "59348111700660224");
  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,
    };
  });
  if (players.value[0]) {
    currentUser.value = players.value[0];
  }
});
</script>

<template>
  <Container title="靶纸">
    <view class="container">
      <image
        src="../static/battle-header-melee.png"
        mode="widthFix"
        :style="{ top: '-50rpx' }"
      />
      <view class="players">
        <view
          v-for="(player, index) in players"
          :key="index"
          :style="{
            width: `${Math.max(100 / players.length, 18)}vw`,
            color: player.userId === currentUser.userId ? '#000' : '#fff9',
          }"
          @click="currentUser = player"
        >
          <image
            v-if="player.userId === currentUser.userId"
            src="../static/player-bg2.png"
            :style="{
              width: `${Math.max(100 / players.length, 18)}vw`,
            }"
            class="player-bg"
          />
          <Avatar :src="player.avatar" :rankLvl="player.rankLvl" :size="40" />
          <text>{{ player.name }}</text>
        </view>
      </view>
      <view :style="{ marginTop: '10px' }">
        <BowTarget :scores="currentUser.arrows" />
      </view>
      <view class="score-text"
        ><text :style="{ color: '#fed847' }">{{
          currentUser.arrows.length
        }}</text
        >支箭，共<text :style="{ color: '#fed847' }">{{
          currentUser.arrows.reduce((last, next) => last + next.ring, 0)
        }}</text
        >环</view
      >
      <view class="score-row" v-if="currentUser.arrows">
        <view
          v-for="(score, index) in currentUser.arrows"
          :key="index"
          class="score-item"
          :style="{ width: '13vw', height: '13vw' }"
        >
          {{ score.ringX ? "X" : score.ring }}
        </view>
      </view>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.container > image:first-child {
  position: absolute;
  width: 100%;
  z-index: 1;
}
.players {
  display: flex;
  width: 100%;
  overflow-x: auto;
  margin-top: 50rpx;
}
.players::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.players > view {
  background-color: #fff3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: 0 0 auto;
  position: relative;
  height: 68px;
  margin-bottom: 10px;
  padding-top: 10px;
}
.player-bg {
  position: absolute;
  width: 100%;
  height: 85px;
  top: 0;
}
.players > view > text {
  margin: 5px 0;
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  position: relative;
}
.score-text {
  width: 100%;
  color: #fff;
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}
.score-row {
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.score-item {
  background-image: url("../static/score-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fed847;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin: 3px;
}
</style>