zhjwxt/uniapp/components/study-plan-card/index.vue

<!--学习计划内容组件-->
<template>
  <view class="study-plan-card">
    <!-- 学习计划列表 -->
    <view class="plan-list" v-if="planList && planList.length > 0">
      <view 
        class="plan-item" 
        v-for="(plan, index) in planList" 
        :key="plan.id || index"
        @click="viewPlanDetail(plan)"
      >
        <view class="plan-header">
          <view class="plan-title">{{ plan.plan_name || '未命名计划' }}</view>
          <view :class="['plan-status',getStatusClass(plan.status)]">
            {{ getStatusText(plan.status) }}
          </view>
        </view>
        
        <view class="plan-content">
          <view class="plan-description" v-if="plan.plan_content">
            {{ plan.plan_content }}
          </view>
          
          <view class="plan-meta">
            <view class="meta-item" v-if="plan.plan_type">
              <text class="meta-label">计划类型：</text>
              <text class="meta-value">{{ plan.plan_type }}</text>
            </view>
            <view class="meta-item" v-if="plan.create_time">
              <text class="meta-label">创建时间：</text>
              <text class="meta-value">{{ formatTime(plan.create_time) }}</text>
            </view>
            <view class="meta-item" v-if="plan.start_date">
              <text class="meta-label">开始日期：</text>
              <text class="meta-value">{{ formatDate(plan.start_date) }}</text>
            </view>
            <view class="meta-item" v-if="plan.end_date">
              <text class="meta-label">结束日期：</text>
              <text class="meta-value">{{ formatDate(plan.end_date) }}</text>
            </view>
          </view>
        </view>
        
        <!-- 进度条 -->
        <view class="plan-progress" v-if="plan.progress !== undefined">
          <view class="progress-bar">
            <view 
              class="progress-fill" 
              :style="{ width: plan.progress + '%' }"
            ></view>
          </view>
          <view class="progress-text">{{ plan.progress }}%</view>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <view class="empty-icon">📚</view>
      <view class="empty-text">暂无学习计划</view>
      <view class="empty-tip">点击下方"新增"按钮创建学习计划</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'StudyPlanCard',
  props: {
    // 学习计划列表数据
    planList: {
      type: Array,
      default: () => []
    }
  },
  
  methods: {
    // 查看计划详情
    viewPlanDetail(plan) {
      this.$emit('view-detail', plan)
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        'active': 'status-active',
        'completed': 'status-completed',
        'pending': 'status-pending',
        'expired': 'status-expired'
      }
      return statusMap[status] || 'status-default'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'active': '进行中',
        'completed': '已完成',
        'pending': '待开始',
        'expired': '已过期'
      }
      return statusMap[status] || '未知状态'
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      try {
        const date = new Date(timeStr)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
      } catch (e) {
        return timeStr
      }
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return ''
      try {
        const date = new Date(dateStr)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
      } catch (e) {
        return dateStr
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.study-plan-card {
  padding: 0;
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.plan-item {
  background: #3A3A3A;
  border-radius: 16rpx;
  padding: 32rpx;
  border: 1px solid #404040;
  transition: all 0.3s ease;
  
  &:active {
    background: #4A4A4A;
  }
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.plan-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
  flex: 1;
  margin-right: 20rpx;
}

.plan-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  
  &.status-active {
    background: rgba(41, 211, 180, 0.2);
    color: #29D3B4;
  }
  
  &.status-completed {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
  }
  
  &.status-pending {
    background: rgba(255, 193, 7, 0.2);
    color: #FFC107;
  }
  
  &.status-expired {
    background: rgba(244, 67, 54, 0.2);
    color: #F44336;
  }
  
  &.status-default {
    background: rgba(158, 158, 158, 0.2);
    color: #9E9E9E;
  }
}

.plan-content {
  margin-bottom: 20rpx;
}

.plan-description {
  font-size: 28rpx;
  color: #cccccc;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.plan-meta {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  font-size: 26rpx;
  color: #999999;
  min-width: 140rpx;
}

.meta-value {
  font-size: 26rpx;
  color: #ffffff;
  flex: 1;
}

.plan-progress {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.progress-bar {
  flex: 1;
  height: 8rpx;
  background: #404040;
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #29D3B4 0%, #4ECDC4 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #29D3B4;
  font-weight: 600;
  min-width: 60rpx;
  text-align: right;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  text-align: center;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  color: #ffffff;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.empty-tip {
  font-size: 26rpx;
  color: #999999;
  line-height: 1.4;
}
</style>