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

<template>
  <view class="course-list-page">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view 
        v-for="tab in tabs" 
        :key="tab.id"
        class="filter-tab"
        :class="{ active: currentTab === tab.id }"
        @click="switchTab(tab.id)"
      >
        {{ tab.name }}
      </view>
    </view>

    <!-- 课程列表 -->
    <view class="course-list">
      <view 
        v-for="course in courseList" 
        :key="course.id"
        class="course-card"
        @click="goCourseDetail(course.id)"
      >
        <view class="course-header">
          <text class="course-name">{{ course.courseName }}</text>
          <view class="course-status" :class="'status-' + course.status">
            {{ course.statusText }}
          </view>
        </view>
        
        <view class="course-info">
          <view class="info-row">
            <text class="label">👨‍🎓 学生：</text>
            <text class="value">{{ course.studentName }}（{{ course.grade }}）</text>
          </view>
          <view class="info-row">
            <text class="label">⏰ 时间：</text>
            <text class="value">{{ course.startTime }}</text>
          </view>
          <view class="info-row">
            <text class="label">📍 地点：</text>
            <text class="value">{{ course.location }}</text>
          </view>
          <view class="info-row">
            <text class="label">💵 费用：</text>
            <text class="value price">¥{{ course.fee }}</text>
          </view>
        </view>
      </view>

      <view v-if="courseList.length === 0" class="empty-state">
        <text class="empty-icon">📭</text>
        <text class="empty-text">暂无课程</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { id: 'all', name: '全部' },
        { id: 'pending', name: '待开始' },
        { id: 'active', name: '进行中' },
        { id: 'completed', name: '已完成' }
      ],
      currentTab: 'all',
      courseList: []
    }
  },
  
  onLoad() {
    this.loadCourseList()
  },
  
  methods: {
    async loadCourseList() {
      uni.showLoading({ title: '加载中' })
      try {
        const res = await this.$api.providerApi.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' })
      } finally {
        uni.hideLoading()
      }
    },
    
    switchTab(tabId) {
      this.currentTab = tabId
      this.loadCourseList()
    },
    
    goCourseDetail(id) {
      uni.navigateTo({ url: `/pages/provider/course-detail?id=${id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';

.course-list-page {
  min-height: 100vh;
  background: $bg-color;
}

.filter-bar {
  display: flex;
  background: #fff;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  gap: 20rpx;
  
  .filter-tab {
    flex: 1;
    text-align: center;
    padding: 16rpx;
    background: $bg-color;
    border-radius: 8rpx;
    font-size: 26rpx;
    color: $text-color;
    
    &.active {
      background: $primary-color;
      color: #fff;
    }
  }
}

.course-list {
  padding: 0 30rpx 30rpx;
}

.course-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  
  .course-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .course-name {
      font-size: 28rpx;
      font-weight: bold;
      color: $text-color;
    }
    
    .course-status {
      padding: 4rpx 16rpx;
      border-radius: 20rpx;
      font-size: 22rpx;
      
      &.status-pending {
        background: rgba($warning-color, 0.1);
        color: $warning-color;
      }
      
      &.status-active {
        background: rgba($success-color, 0.1);
        color: $success-color;
      }
      
      &.status-completed {
        background: rgba(0, 0, 0, 0.05);
        color: $text-secondary;
      }
    }
  }
  
  .course-info {
    .info-row {
      display: flex;
      margin-bottom: 12rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-size: 24rpx;
        color: $text-secondary;
        min-width: 120rpx;
      }
      
      .value {
        flex: 1;
        font-size: 26rpx;
        color: $text-color;
        
        &.price {
          color: $secondary-color;
          font-weight: bold;
        }
      }
    }
  }
}

.empty-state {
  padding: 120rpx 0;
  text-align: center;
  
  .empty-icon {
    display: block;
    font-size: 100rpx;
    margin-bottom: 20rpx;
    opacity: 0.3;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: $text-secondary;
  }
}
</style>