lrj
1 天以前 93eb6b470773bc49ea6e1a9d4cbd914eb95d525b
web/src/components/PlayerInfoCard.vue
@@ -9,6 +9,8 @@
          :size="80" 
          :src="playerInfo.avatarUrl"
          :style="{ backgroundColor: avatarBgColor }"
          class="clickable-avatar"
          @click="handleAvatarClick"
        >
          {{ playerInfo.name ? playerInfo.name.charAt(0) : '?' }}
        </el-avatar>
@@ -26,27 +28,68 @@
    
    <!-- 详细信息 -->
    <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 } from 'vue'
import { ElAvatar, ElIcon } from 'element-plus'
import { Phone } from '@element-plus/icons-vue'
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'