147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
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>
|