peixue-dev/peidu/uniapp/training-package/pages/training/course-list.vue

<template>
  <view class="course-list-page">
    <!-- 顶部筛选 -->
    <view class="filter-bar">
      <view class="filter-item" @click="showTypePicker = true">
        <text>{{ selectedType || '全部类型' }}</text>
        <text class="arrow">▼</text>
      </view>
      <view class="filter-item" @click="showLevelPicker = true">
        <text>{{ selectedLevel || '全部级别' }}</text>
        <text class="arrow">▼</text>
      </view>
    </view>
    
    <!-- 课程列表 -->
    <view class="course-list">
      <view class="course-item" v-for="course in courseList" :key="course.id" @click="goCourseDetail(course.id)">
        <image class="course-cover" :src="course.coverImage" mode="aspectFill"></image>
        <view class="course-info">
          <view class="course-header">
            <text class="course-name">{{ course.courseName }}</text>
            <text class="course-required" v-if="course.isRequired">必修</text>
          </view>
          <text class="course-desc">{{ course.description }}</text>
          <view class="course-meta">
            <text class="meta-item">⏱ {{ course.duration }}分钟</text>
            <text class="meta-item">📊 {{ getLevelText(course.level) }}</text>
          </view>
          <view class="course-progress" v-if="course.progress > 0">
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: course.progress + '%' }"></view>
            </view>
            <text class="progress-text">{{ course.progress }}%</text>
          </view>
          <button class="start-btn" v-if="course.progress === 0">开始学习</button>
          <button class="continue-btn" v-else-if="course.progress < 100">继续学习</button>
          <view class="completed-badge" v-else>
            <text>✓ 已完成</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedType: '',
      selectedLevel: '',
      showTypePicker: false,
      showLevelPicker: false,
      courseList: []
    }
  },
  
  onLoad() {
    this.loadCourseList()
  },
  
  methods: {
    async loadCourseList() {
      try {
        const res = await this.$api.trainingApi.getCourseList({
          page: 1,
          size: 20
        })
        if (res.code === 200 && res.data) {
          this.courseList = res.data.records || []
        } else {
          uni.showToast({ title: res.message || '加载失败', icon: 'none' })
        }
      } catch (error) {
        console.error('加载课程列表失败:', error)
        uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
      }
    },
    
    getLevelText(level) {
      const levelMap = {
        basic: '基础',
        advanced: '进阶',
        expert: '专家'
      }
      return levelMap[level] || '未知'
    },
    
    goCourseDetail(courseId) {
      uni.navigateTo({
        url: `/pages/training/course-detail?id=${courseId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.course-list-page {
  min-height: 100vh;
  background: #f0f9f7;
}

.filter-bar {
  display: flex;
  background: #ffffff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eeeeee;
}

.filter-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  font-size: 28rpx;
  color: #333333;
}

.arrow {
  font-size: 20rpx;
  color: #999999;
}

.course-list {
  padding: 20rpx;
}

.course-item {
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.course-cover {
  width: 100%;
  height: 300rpx;
}

.course-info {
  padding: 30rpx;
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.course-name {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.course-required {
  padding: 6rpx 12rpx;
  background: #ff6b6b;
  color: #ffffff;
  font-size: 22rpx;
  border-radius: 8rpx;
}

.course-desc {
  display: block;
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.course-meta {
  display: flex;
  gap: 30rpx;
  margin-bottom: 20rpx;
}

.meta-item {
  font-size: 24rpx;
  color: #999999;
}

.course-progress {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7dd3c0 0%, #5fb8a8 100%);
  border-radius: 6rpx;
}

.progress-text {
  font-size: 24rpx;
  color: #7dd3c0;
  font-weight: bold;
}

.start-btn, .continue-btn {
  width: 100%;
  padding: 24rpx;
  background: linear-gradient(135deg, #7dd3c0 0%, #5fb8a8 100%);
  color: #ffffff;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;
}

.continue-btn {
  background: linear-gradient(135deg, #ff9800 0%, #ff6b6b 100%);
}

.completed-badge {
  text-align: center;
  padding: 24rpx;
  background: #e8f5e9;
  color: #4caf50;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: bold;
}
</style>