shoot-miniprograms/src/components/TeamAvatars.vue

<script setup>
import { ref, watch, onMounted, computed } from "vue";
const props = defineProps({
  isRed: {
    type: Boolean,
    default: true,
  },
  team: {
    type: Array,
    default: () => [],
  },
  currentShooterId: {
    type: Number,
    default: "",
  },
});
const players = ref({});
const currentTeam = ref(false);
const firstName = ref("");

// 抽出判断：当前队伍且该玩家排序为 0（队伍首位）
const isFirst = (id) =>
  currentTeam.value && ((players.value[id] || {}).sort || 0) === 0;

const getPos = (id) => {
  const sort = (players.value[id] || {}).sort || 0;
  if (currentTeam.value) {
    return 30 * (sort + Math.ceil(sort / 2));
  }
  return sort * 40;
};

onMounted(() => {
  props.team.forEach((p, index) => {
    players.value[p.id] = { sort: index, ...p };
  });
});

watch(
  () => props.currentShooterId,
  (newVal) => {
    if (!newVal) return;
    const index = props.team.findIndex((p) => p.id === newVal);
    currentTeam.value = index >= 0;
    if (index >= 0) {
      const newPlayers = [...props.team];
      const target = newPlayers.splice(index, 1)[0];
      if (target) {
        newPlayers.unshift(target);
        firstName.value = target.name;
        newPlayers.forEach((p, index) => {
          players.value[p.id] = { sort: index, ...p };
        });
      }
    }
  },
  { immediate: true }
);
</script>

<template>
  <view class="container">
    <image
      :src="isRed ? '../static/flag-red.png' : '../static/flag-blue.png'"
      class="flag"
      :style="{
        [isRed ? 'left' : 'right']: '10rpx',
        top: currentTeam ? '-36rpx' : '-24rpx',
      }"
    />
    <view
      v-for="(item, index) in team"
      :key="index"
      class="player"
      :style="{
        width: (isFirst(item.id) ? 80 : 60) + 'rpx',
        height: (isFirst(item.id) ? 80 : 60) + 'rpx',
        zIndex: team.length - ((players[item.id] || {}).sort || 0),
        border: isFirst(item.id) ? '3.5rpx solid' : '2rpx solid',
        borderColor: isRed ? '#ff6060' : '#5fadff',
        top: isFirst(item.id) ? '0rpx' : '12rpx',
        [isRed ? 'left' : 'right']: getPos(item.id) + 'rpx',
      }"
    >
      <image :src="item.avatar || '../static/user-icon.png'" mode="widthFix" />
      <text
        v-if="isFirst(item.id)"
        :style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
        >{{ isRed ? "红队" : "蓝队" }}</text
      >
    </view>
    <text
      v-if="currentTeam"
      class="truncate"
      :style="{
        color: isRed ? '#ff6060' : '#5fadff',
        [isRed ? 'left' : 'right']: '-4rpx',
      }"
      >{{ firstName }}</text
    >
  </view>
</template>

<style scoped>
.container {
  display: flex;
  align-items: center;
  position: relative;
  width: 20vw;
  height: 10rpx;
  margin: 0 20rpx;
}
.container > text {
  position: absolute;
  font-size: 20rpx;
  text-align: center;
  width: 80rpx;
  bottom: -100rpx;
}
.player {
  transition: all 0.3s ease;
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
}
.player > image {
  width: 100%;
  min-height: 100%;
}
.player > text {
  position: absolute;
  font-size: 15rpx;
  text-align: center;
  width: 76rpx;
  left: 0;
  bottom: 0;
  color: #fff;
}
.flag {
  position: absolute;
  width: 45rpx;
  height: 45rpx;
  transition: all 0.3s ease;
}
</style>