zhjwxt/uniapp/components/student-info-card/student-info-card.vue

<!--学生信息卡片组件-->
<template>
  <view class="student-info-card">
    <!-- 学生基本信息 -->
    <view class="student-header">
      <view class="student-avatar">
        <text>{{ student.name ? student.name.charAt(0) : '学' }}</text>
      </view>
      <view class="student-details">
        <view class="student-name">{{ student.name || '未知学生' }}</view>
        <view class="student-meta">
          <text class="student-age">{{ formatAge(student.age) }}</text>
          <text class="student-gender">{{ formatGender(student.gender) }}</text>
        </view>
        <view class="student-label" v-if="student.member_label">{{ student.member_label }}</view>
      </view>
      <view class="action-toggle" @click="toggleActions">
        <text class="toggle-icon">{{ student.actionsExpanded ? '▲' : '▼' }}</text>
      </view>
    </view>

    <!-- 学生详细信息 -->
    <view class="student-info" v-if="showDetails">
      <view class="info-row">
        <text class="info-label">生日：</text>
        <text class="info-value">{{ student.birthday || '未知' }}</text>
      </view>
      <view class="info-row" v-if="student.emergency_contact">
        <text class="info-label">紧急联系人：</text>
        <text class="info-value">{{ student.emergency_contact }}</text>
      </view>
      <view class="info-row" v-if="student.contact_phone">
        <text class="info-label">联系电话：</text>
        <text class="info-value">{{ student.contact_phone }}</text>
      </view>
      <view class="info-row" v-if="student.note">
        <text class="info-label">备注：</text>
        <text class="info-value">{{ student.note }}</text>
      </view>
    </view>

    <!-- 操作按钮区域 -->
    <view class="action-panel">
      <view 
        class="action-btn" 
        v-for="action in actions" 
        :key="action.key"
        @click="handleAction(action)"
      >
        <text class="action-text">{{ action.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'StudentInfoCard',
  props: {
    student: {
      type: Object,
      default: () => ({})
    },
    actions: {
      type: Array,
      default: () => ([
        { key: 'edit', text: '编辑学生' },
        { key: 'order', text: '查看订单' },
        { key: 'course', text: '课程安排' },
        { key: 'fitness', text: '体测记录' }
      ])
    },
    showDetails: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    toggleActions() {
      this.$emit('toggle-actions', this.student)
    },
    
    handleAction(action) {
      this.$emit('action', { action, student: this.student })
    },

    // 格式化年龄显示
    formatAge(age) {
      if (!age) return '未知年龄'
      const years = Math.floor(age)
      const months = Math.round((age - years) * 12)
      if (months === 0) {
        return `${years}岁`
      }
      return `${years}岁${months}个月`
    },

    // 格式化性别显示
    formatGender(gender) {
      switch (gender) {
        case 1: return '男'
        case 2: return '女'
        default: return '未知'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.student-info-card {
  background-color: #1a1a1a;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border: 2rpx solid #333;
}

.student-header {
  display: flex;
  align-items: center;
  
  .student-avatar {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: #29d3b4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    
    text {
      color: white;
      font-size: 24rpx;
      font-weight: bold;
    }
  }
  
  .student-details {
    flex: 1;
    
    .student-name {
      color: white;
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 8rpx;
    }
    
    .student-meta {
      display: flex;
      align-items: center;
      gap: 20rpx;
      margin-bottom: 8rpx;
      
      .student-age,
      .student-gender {
        color: #999;
        font-size: 22rpx;
      }
    }
    
    .student-label {
      color: #29d3b4;
      font-size: 20rpx;
      background-color: rgba(41, 211, 180, 0.2);
      padding: 4rpx 12rpx;
      border-radius: 10rpx;
      display: inline-block;
    }
  }
  
  .action-toggle {
    padding: 10rpx;
    
    .toggle-icon {
      color: #29d3b4;
      font-size: 24rpx;
    }
  }
}

.student-info {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #333;
  
  .info-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15rpx;
    
    .info-label {
      color: #999;
      font-size: 22rpx;
      width: 150rpx;
      flex-shrink: 0;
    }
    
    .info-value {
      color: white;
      font-size: 22rpx;
      flex: 1;
      word-break: break-all;
    }
  }
}

.action-panel {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #333;
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  
  .action-btn {
    padding: 15rpx 25rpx;
    background-color: #29d3b4;
    border-radius: 25rpx;
    
    .action-text {
      color: white;
      font-size: 22rpx;
      font-weight: bold;
    }
  }
}
</style>