caremate/train-frontend/pages/course/index.vue

<template>
  <view class="course-page">
    <!-- 进行中的课程（上课状态） -->
    <view v-if="activeCourse" class="active-card">
      <view class="active-badge">
        <text class="active-badge-text">⏰ 课程进行中</text>
      </view>
      <text class="active-name">{{ activeCourse.level }} {{ activeCourse.name }}</text>
      <text class="active-desc">{{ activeCourse.description || '当前正在进行的课程' }}</text>
      <view class="active-time">
        <text class="active-time-text">开始 {{ fmtTime(activeCourse.startTime) }}</text>
        <text class="active-time-text" v-if="activeCourse.endTime">结束 {{ fmtTime(activeCourse.endTime) }}</text>
      </view>
      <button class="active-btn" :class="{ 'btn-disabled': isReviewing(activeCourse) }"
        :disabled="isReviewing(activeCourse)" @click="handleAction(activeCourse)">
        {{ actionText(activeCourse) }}
      </button>
    </view>

    <view class="section-title">全部课程</view>
    <view class="course-list">
      <view class="course-card" v-for="(c, idx) in courses" :key="idx">
        <view class="course-head">
          <text class="course-level">{{ c.level }}</text>
          <text class="course-name">{{ c.name }}</text>
        </view>
        <view class="course-desc" v-if="c.description">{{ c.description }}</view>
        <view class="course-tags">
          <text class="course-tag" :class="'st-' + c.effectiveStatus">{{ statusLabel(c.effectiveStatus) }}</text>
          <text class="course-tag mine" :class="'my-' + c.myStatus">{{ myLabel(c.myStatus) }}</text>
        </view>
        <button class="course-btn" :class="{ 'btn-disabled': isReviewing(c) }"
          :disabled="isReviewing(c)" @click="handleAction(c)">
          {{ actionText(c) }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { getCourseList, enterCourse } from '@/utils/api.js'
import { formatDateTime } from '@/utils/format.js'
import { requireLogin } from '@/utils/guard.js'

export default {
  data() {
    return {
      courses: [],
      loading: false
    }
  },
  computed: {
    isLoggedIn() {
      return this.$store.getters.isLoggedIn
    },
    activeCourse() {
      var list = this.courses || []
      for (var i = 0; i < list.length; i++) {
        if (list[i].effectiveStatus === 'active') {
          return list[i]
        }
      }
      return null
    }
  },
  onShow() {
    this.loadCourses()
  },
  methods: {
    loadCourses() {
      // 未登录也可浏览课程信息（后端 /api/course/list 已放行，我的状态为 none）
      var self = this
      self.loading = true
      getCourseList().then(function(resp) {
        self.courses = resp.data || []
      }).catch(function() {
        uni.showToast({ title: '获取课程列表失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    statusLabel(st) {
      var map = { upcoming: '未开始', active: '进行中', finished: '已结束', draft: '未发布' }
      return map[st] || st || '-'
    },
    myLabel(st) {
      var map = { none: '未报名', pending: '待支付', paid: '已支付', reviewing: '审核中', confirmed: '已进班', rejected: '未通过' }
      return map[st] || st || '-'
    },
    isReviewing(c) {
      return c && c.myStatus === 'reviewing'
    },
    actionText(c) {
      if (!c) return ''
      var s = c.myStatus
      if (s === 'confirmed') return '进入课程'
      if (s === 'reviewing') return '等待审核'
      if (s === 'pending') return '去支付'
      if (s === 'paid' || s === 'rejected') return '申请进班'
      return '报名进班'
    },
    handleAction(c) {
      if (!c) return
      // 报名/支付/申请进班均为实际操作，未登录需先登录（课程浏览已放行）
      if (!requireLogin()) return
      var s = c.myStatus
      if (s === 'confirmed') {
        uni.navigateTo({ url: '/pages/course/detail?courseId=' + c.id })
      } else if (s === 'pending') {
        uni.navigateTo({ url: '/pages/enroll/list' })
      } else if (s === 'paid' || s === 'rejected') {
        this.applyEnter(c)
      } else {
        // 未报名：先走报名流程
        uni.navigateTo({ url: '/pages/enroll/list' })
      }
    },
    applyEnter(c) {
      var self = this
      uni.showModal({
        title: '申请进班',
        content: '确认申请进入「' + c.name + '」？班主任/管理员审核通过后即可进入课程。',
        success: function(res) {
          if (!res.confirm) return
          enterCourse(c.id).then(function(resp) {
            var d = resp.data || {}
            uni.showToast({ title: d.message || '申请已提交', icon: 'none' })
            self.loadCourses()
          }).catch(function(err) {
            var msg = (err && err.message) || '申请失败'
            uni.showToast({ title: msg, icon: 'none' })
            // 未完成报名/支付等场景引导去报名
            if (msg.indexOf('报名') !== -1 || msg.indexOf('支付') !== -1) {
              setTimeout(function() {
                uni.navigateTo({ url: '/pages/enroll/list' })
              }, 1200)
            }
          })
        }
      })
    },
    fmtTime(v) {
      if (!v) return ''
      return formatDateTime(v)
    }
  }
}
</script>

<style scoped>
.course-page { min-height: 100vh; background: #F5F5F5; padding: 24rpx 32rpx; }
.section-title { font-size: 30rpx; font-weight: 600; color: #1E293B; margin-bottom: 16rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }

.active-card { background: linear-gradient(135deg, #F97316, #EA580C); border-radius: 20rpx; padding: 32rpx; margin-bottom: 32rpx; }
.active-badge { display: inline-block; background: rgba(255,255,255,0.2); border-radius: 100rpx; padding: 4rpx 20rpx; margin-bottom: 16rpx; }
.active-badge-text { font-size: 22rpx; color: #FFF; font-weight: 600; }
.active-name { display: block; font-size: 36rpx; font-weight: 700; color: #FFF; margin-bottom: 8rpx; }
.active-desc { display: block; font-size: 26rpx; color: rgba(255,255,255,0.9); margin-bottom: 16rpx; }
.active-time { display: flex; flex-direction: column; margin-bottom: 24rpx; }
.active-time-text { font-size: 22rpx; color: rgba(255,255,255,0.8); margin-bottom: 4rpx; }
.active-btn { background: #FFF; color: #EA580C; font-size: 30rpx; font-weight: 600; border-radius: 48rpx; height: 80rpx; line-height: 80rpx; border: none; margin: 0; }
.active-btn:active { opacity: 0.9; }

.course-list { display: flex; flex-direction: column; }
.course-card { background: #FFF; border-radius: 16rpx; padding: 28rpx; margin-bottom: 20rpx; }
.course-head { display: flex; align-items: center; margin-bottom: 8rpx; }
.course-level { font-size: 24rpx; font-weight: 600; color: #F97316; background: #FFF7ED; border-radius: 8rpx; padding: 4rpx 14rpx; margin-right: 16rpx; }
.course-name { font-size: 30rpx; font-weight: 600; color: #1E293B; flex: 1; }
.course-desc { font-size: 24rpx; color: #64748B; margin-bottom: 16rpx; line-height: 1.6; }
.course-tags { display: flex; align-items: center; margin-bottom: 20rpx; }
.course-tag { font-size: 20rpx; color: #64748B; background: #F1F5F9; border-radius: 6rpx; padding: 4rpx 14rpx; margin-right: 12rpx; }
.course-tag.st-upcoming { color: #F97316; background: #FFF7ED; }
.course-tag.st-active { color: #22C55E; background: #F0FDF4; }
.course-tag.st-finished { color: #94A3B8; background: #F1F5F9; }
.course-tag.mine { color: #6366F1; background: #EEF2FF; }
.course-tag.my-confirmed { color: #22C55E; background: #F0FDF4; }
.course-tag.my-reviewing { color: #F97316; background: #FFF7ED; }
.course-tag.my-rejected { color: #EF5350; background: #FEF2F2; }
.course-btn { background: linear-gradient(135deg, #F97316, #EA580C); color: #FFF; font-size: 28rpx; font-weight: 600; border-radius: 44rpx; height: 76rpx; line-height: 76rpx; border: none; margin: 0; }
.course-btn:active { opacity: 0.9; }
.btn-disabled { background: #E2E8F0; color: #94A3B8; }
</style>