<template>
|
<div class="player-info-card">
|
<h3>学员信息</h3>
|
|
<div class="player-header">
|
<!-- 头像 -->
|
<div class="avatar-container">
|
<el-avatar
|
:size="80"
|
:src="playerInfo.avatarUrl"
|
:style="{ backgroundColor: avatarBgColor }"
|
class="clickable-avatar"
|
@click="handleAvatarClick"
|
>
|
{{ playerInfo.name ? playerInfo.name.charAt(0) : '?' }}
|
</el-avatar>
|
</div>
|
|
<!-- 基本信息 -->
|
<div class="basic-info">
|
<h4>{{ playerInfo.name || '未知' }}</h4>
|
<p v-if="playerInfo.phone" class="phone">
|
<el-icon><Phone /></el-icon>
|
{{ playerInfo.phone }}
|
</p>
|
</div>
|
</div>
|
|
<!-- 详细信息 -->
|
<div class="detail-info">
|
<div v-if="regionInfo" class="info-item">
|
<label>所属区域：</label>
|
<p>{{ regionInfo.fullPath || regionInfo.name || '未设置' }}</p>
|
</div>
|
<div v-if="playerInfo.description" class="info-item">
|
<label>个人简介：</label>
|
<p>{{ playerInfo.description }}</p>
|
</div>
|
</div>
|
|
<!-- 头像预览对话框 -->
|
<el-dialog
|
v-model="previewVisible"
|
title="头像预览"
|
width="500px"
|
:show-close="true"
|
center
|
>
|
<div class="avatar-preview-container">
|
<img
|
v-if="playerInfo.avatarUrl"
|
:src="playerInfo.avatarUrl"
|
class="preview-image"
|
alt="头像预览"
|
/>
|
<div v-else class="no-avatar">
|
<el-icon size="80"><Picture /></el-icon>
|
<p>暂无头像</p>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { computed, ref } from 'vue'
|
import { ElAvatar, ElIcon, ElDialog } from 'element-plus'
|
import { Phone, Picture } from '@element-plus/icons-vue'
|
|
const props = defineProps({
|
playerInfo: {
|
type: Object,
|
required: true,
|
default: () => ({})
|
},
|
regionInfo: {
|
type: Object,
|
required: false,
|
default: () => null
|
}
|
})
|
|
// 响应式数据
|
const previewVisible = ref(false)
|
|
// 头像点击处理
|
const handleAvatarClick = () => {
|
if (props.playerInfo.avatarUrl) {
|
previewVisible.value = true
|
}
|
}
|
|
// 根据姓名生成头像背景色
|
const avatarBgColor = computed(() => {
|
if (!props.playerInfo.name) return '#409EFF'
|
|
const colors = [
|
'#409EFF', '#67C23A', '#E6A23C', '#F56C6C',
|
'#909399', '#C71585', '#FF6347', '#32CD32',
|
'#1E90FF', '#FF69B4', '#8A2BE2', '#00CED1'
|
]
|
|
let hash = 0
|
for (let i = 0; i < props.playerInfo.name.length; i++) {
|
hash = props.playerInfo.name.charCodeAt(i) + ((hash << 5) - hash)
|
}
|
|
return colors[Math.abs(hash) % colors.length]
|
})
|
</script>
|
|
<style scoped>
|
.player-info-card {
|
background: white;
|
border-radius: 8px;
|
padding: 20px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
|
.player-info-card h3 {
|
margin: 0 0 16px 0;
|
color: #303133;
|
font-size: 18px;
|
font-weight: 600;
|
}
|
|
.player-header {
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
margin-bottom: 16px;
|
}
|
|
.avatar-container {
|
flex-shrink: 0;
|
}
|
|
.basic-info h4 {
|
margin: 0 0 8px 0;
|
color: #303133;
|
font-size: 20px;
|
font-weight: 600;
|
}
|
|
.phone {
|
margin: 0;
|
color: #606266;
|
display: flex;
|
align-items: center;
|
gap: 4px;
|
}
|
|
.detail-info {
|
border-top: 1px solid #EBEEF5;
|
padding-top: 16px;
|
}
|
|
.info-item {
|
margin-bottom: 12px;
|
}
|
|
.info-item label {
|
font-weight: 600;
|
color: #606266;
|
margin-right: 8px;
|
}
|
|
.info-item p {
|
margin: 4px 0 0 0;
|
color: #303133;
|
line-height: 1.6;
|
}
|
</style>
|
