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

<!--学生信息卡片组件-->
<template>
  <view class="student-info-card" >
    <!-- 学生基本信息 -->
    <view class="student-header">
      <view class="student-content" @click="handleStudentClick">
        <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">{{ calculateAge(student.birthday) }}</text>
            <text class="student-gender">{{ formatGender(student.gender) }}</text>
          </view>
          <!-- 学员标签 -->
          <view class="student-tags" v-if="student.student_tags && student.student_tags.length > 0">
            <view
              class="student-tag"
              v-for="tag in student.student_tags"
              :key="tag"
            >
              {{ tag }}
            </view>
          </view>
        </view>
      </view>
      <!-- 编辑按钮 -->
      <view class="edit-button" @click.stop="handleEditClick">
        <text class="edit-icon">✏️</text>
      </view>
    </view >

    <!-- 学生详细信息 -->
    <view class="student-info">
      <view class="info-row">
        <text class="info-label">生日：</text>
        <text class="info-value">{{ student.birthday || '' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">备注：</text>
        <text class="info-value">{{ student.note || '' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">班主任：</text>
        <text class="info-value">{{ student.class_teacher || '' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">教务：</text>
        <text class="info-value">{{ student.academic_affairs || '' }}</text>
      </view>
      <view class="info-row">
        <text class="info-label">体验课次数：</text>
        <text class="info-value">{{ student.trial_course_count || 0 }}次</text>
      </view>
      <view class="info-row">
        <text class="info-label">课程到访情况：</text>
        <text class="info-value">{{ student.course_visit_status || '' }}</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: {
    handleStudentClick(){
      this.$emit('action',{ action: 'edit', student: this.student})
    },
    handleEditClick(){
      this.$emit('action',{ action: 'edit', student: this.student})
    },
    // 计算年龄（x岁x月）
    calculateAge(birthday) {
      if (!birthday) return ''
      
      const birthDate = new Date(birthday)
      const now = new Date()
      
      let years = now.getFullYear() - birthDate.getFullYear()
      let months = now.getMonth() - birthDate.getMonth()
      
      if (months < 0) {
        years--
        months += 12
      }
      
      // 如果当前日期小于生日的日期，月份减1
      if (now.getDate() < birthDate.getDate()) {
        months--
        if (months < 0) {
          years--
          months += 12
        }
      }
      
      if (years > 0 && months > 0) {
        return `${years}岁${months}月`
      } else if (years > 0) {
        return `${years}岁`
      } else if (months > 0) {
        return `${months}月`
      } else {
        return '新生儿'
      }
    },

    // 格式化性别显示
    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: flex-start;
  justify-content: space-between;

  .student-content {
    flex: 1;
    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-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8rpx;
        margin-top: 8rpx;

        .student-tag {
          color: #29d3b4;
          font-size: 18rpx;
          background-color: rgba(41, 211, 180, 0.2);
          border: 1rpx solid rgba(41, 211, 180, 0.5);
          padding: 4rpx 10rpx;
          border-radius: 10rpx;
          display: inline-block;
        }
      }
    }
  }

  .edit-button {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    background-color: rgba(41, 211, 180, 0.2);
    border: 1rpx solid rgba(41, 211, 180, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    .edit-icon {
      font-size: 20rpx;
      color: #29d3b4;
    }

    &:active {
      background-color: rgba(41, 211, 180, 0.4);
      transform: scale(0.95);
    }
  }
}

.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>