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([]);

function getRingTotal(arrows = []) {
  return arrows.reduce((last, next) => last + (Number(next?.ring) || 0), 0);
}

function getScoreLabel(score) {
  if (!score) return "";
  return score.ringX ? "X" : score.ring || "";
}

const isMember = (player = {}) => player.vip === true || player.sVip === true;

const getMemberNicknameClass = (player = {}) => [
  "player-name",
  "member-nickname",
  player.vip === true && player.sVip !== true ? "member-nickname--vip" : "",
  player.sVip === true ? "member-nickname--svip" : "",
];

onLoad(async (options) => {
  if (!options.battleId) return;
  const result = await getBattleAPI(options.battleId || "59348111700660224");
  const plist = result.teams?.[0]?.players || [];
  players.value = result.resultList.map((item, index) => {
    const p = plist.find((p) => String(p.id) === String(item.userId));
    const arrows = Array.from({ length: 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,
      ...p,
      userId: item.userId,
      rank: index + 1,
      name: p?.name || item.name,
      avatar: p?.avatar || item.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" />
          <view v-if="isMember(player)" :class="getMemberNicknameClass(player)">
            <text class="member-nickname__text">{{ player.name }}</text>
            <text v-if="player.sVip === true" class="member-nickname__shine">
              {{ player.name }}
            </text>
          </view>
          <text v-else>{{ player.name }}</text>
        </view>
      </view>
      <view :style="{ marginTop: '10px' }">
        <BowTarget
          :scores="currentUser.arrows"
          :isSvip="currentUser.sVip === true"
        />
      </view>
      <view class="score-text"
        ><text :style="{ color: '#fed847' }">{{
          currentUser.arrows.length
        }}</text
        >支箭，共<text :style="{ color: '#fed847' }">{{
          getRingTotal(currentUser.arrows)
        }}</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' }"
        >
          {{ getScoreLabel(score) }}
        </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;
}
.players > view > .player-name {
  margin: 5px 0;
  width: 80%;
  position: relative;
  justify-content: center;
}
.player-name .member-nickname__text,
.player-name .member-nickname__shine {
  font-size: 12px;
}
.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>