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

<template>
  <view class="course-detail-page">
    <!-- 课程介绍 -->
    <view class="course-head">
      <text class="course-level">{{ course.level || 'L' }}</text>
      <text class="course-name">{{ course.name }}</text>
      <text class="course-status" :class="'st-' + course.effectiveStatus">{{ statusLabel(course.effectiveStatus) }}</text>
      <text class="course-desc" v-if="course.description">{{ course.description }}</text>
      <text class="course-time" v-if="course.startTime || course.endTime">
        开课 {{ fmtDate(course.startTime) }} · 结课 {{ fmtDate(course.endTime) }}
      </text>
      <text class="course-class" v-if="className">我的班次：{{ className }}</text>
    </view>

    <!-- 未报名：先报名 -->
    <view class="action-card" v-if="enrollmentStatus === 'none'">
      <text class="action-title">报名参加本课程</text>
      <text class="action-desc">填写报名信息并完成支付后，即可申请进班学习</text>
      <button class="action-btn" @click="goTo('/pages/enroll/list')">去报名</button>
    </view>

    <!-- 已报名未进班 -->
    <view class="action-card" v-else-if="enrollmentStatus === 'pending'">
      <text class="action-title">报名待支付</text>
      <text class="action-desc">完成支付后即可申请进班</text>
      <button class="action-btn" @click="goTo('/pages/enroll/list')">去支付</button>
    </view>
    <view class="action-card" v-else-if="enrollmentStatus === 'paid'">
      <text class="action-title">已报名，待进班</text>
      <text class="action-desc">提交进班申请后由班主任审核，审核通过即可开始学习</text>
      <button class="action-btn" :disabled="enterLoading" @click="applyEnter">申请进班</button>
    </view>
    <view class="action-card" v-else-if="enrollmentStatus === 'reviewing'">
      <text class="action-title">进班审核中</text>
      <text class="action-desc">班主任正在审核你的进班申请，请耐心等待</text>
      <button class="action-btn disabled" disabled>审核中</button>
    </view>
    <view class="action-card" v-else-if="enrollmentStatus === 'rejected'">
      <text class="action-title">进班申请被驳回</text>
      <text class="action-desc">可重新提交进班申请，或联系班主任了解原因</text>
      <button class="action-btn" :disabled="enterLoading" @click="applyEnter">重新申请进班</button>
    </view>

    <!-- 已进班：课程学习安排（班次=上课期次，负责上课时间地点） -->
    <template v-if="enrollmentStatus === 'confirmed'">
      <view class="class-info-card" v-if="className">
        <text class="class-info-title">上课班次</text>
        <text class="class-info-name">{{ className }}</text>
        <text class="class-info-time" v-if="classTime">上课时间：{{ classTime }}</text>
        <text class="class-info-place" v-if="classPlace">上课地点：{{ classPlace }}</text>
      </view>

      <!-- 模块列表 -->
      <view class="module-section" v-if="modules && modules.length > 0">
        <view class="section-title-block">课程模块</view>
        <view class="module-list">
          <view class="module-item" v-for="(mod, idx) in modules" :key="idx">
            <view class="module-main">
              <text class="module-key">{{ mod.moduleKey }}</text>
              <text class="module-title">{{ mod.name }}</text>
              <text class="module-version" v-if="mod.version">v{{ mod.version }}</text>
            </view>
            <text class="module-output" v-if="mod.outputDesc">{{ mod.outputDesc }}</text>
            <text class="module-output" v-if="mod.description && !mod.outputDesc">{{ mod.description }}</text>
            <view class="module-footer">
              <text class="module-duration" v-if="mod.duration">时长：{{ mod.duration }}</text>
              <text class="module-duration" v-if="mod.price > 0">模块价 ¥{{ fenToYuan(mod.price) }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 课程前：课前准备 -->
      <view class="stage-card" v-if="stage === 'upcoming'">
        <text class="stage-icon">📅</text>
        <view class="stage-text">
          <text class="stage-title">课程即将开课</text>
          <text class="stage-sub">先完成课前准备，做好学习规划</text>
        </view>
      </view>
      <!-- 课程中：学习进度 -->
      <view class="section-card" v-if="stage === 'active'">
        <view class="section-head">
          <text class="section-title">学习进度</text>
          <text class="progress-count">{{ progress.done }}/{{ progress.total }} 项完成</text>
        </view>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: progressPercent }"></view>
        </view>
        <view class="progress-list">
          <view class="progress-item" v-for="(it, idx) in progress.items" :key="idx">
            <text class="progress-icon" :class="{ done: it.ok }">{{ it.ok ? '✅' : '⬜' }}</text>
            <text class="progress-label">{{ it.label }}</text>
          </view>
        </view>
      </view>
      <!-- 课程后：结业事项 -->
      <view class="stage-card" v-if="stage === 'finished'">
        <text class="stage-icon">🎉</text>
        <view class="stage-text">
          <text class="stage-title">课程已结束</text>
          <text class="stage-sub">完成结业事项，收获学习成果</text>
        </view>
      </view>

      <!-- 本阶段要做的事 -->
      <view class="stage-title-block">本阶段要做的事</view>
      <view class="nav-grid">
        <view class="nav-item" v-for="(g, idx) in stageMenus" :key="idx" @click="onMenu(g)">
          <text class="nav-icon">{{ g.icon }}</text>
          <text class="nav-text">{{ g.text }}</text>
        </view>
      </view>
    </template>
  </view>
</template>

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

export default {
  data() {
    return {
      course: {},
      className: '',
      classTime: '',
      classPlace: '',
      enrollment: null,
      progress: { done: 0, total: 0, items: [] },
      modules: [],
      enterLoading: false
    }
  },
  computed: {
    isLoggedIn() {
      return this.$store.getters.isLoggedIn
    },
    progressPercent() {
      var total = this.progress.total || 0
      if (!total) return '0%'
      var pct = Math.round((this.progress.done || 0) * 100 / total)
      return pct + '%'
    },
    // 课程所处阶段：upcoming(前) / active(中) / finished(后) / draft
    stage() {
      return this.course.effectiveStatus || 'active'
    },
    enrollmentStatus() {
      if (!this.enrollment || !this.enrollment.status) return 'none'
      return this.enrollment.status
    },
    stageMenus() {
      if (this.stage === 'upcoming') {
        // 课程前：课前准备
        return [
          { icon: '📄', text: '课前资料', url: '/pages/material/index' },
          { icon: '📝', text: '兴趣调研', url: '/pages/survey/index' },
          { icon: '📅', text: '行动计划', url: '/pages/plan/index' },
          { icon: '👥', text: '我的小组', url: '/pages/group/index' }
        ]
      }
      if (this.stage === 'finished') {
        // 课程后：结业事项
        return [
          { icon: '📋', text: '三本账', url: '/pages/assignment/index' },
          { icon: '📅', text: '行动计划', url: '/pages/plan/index' },
          { icon: '🏆', text: '积分榜', url: '/pages/scoreboard/index' },
          { icon: '🗳️', text: '路演投票', url: '/pages/vote/index' }
        ]
      }
      // 课程中：学习内容
      return [
        { icon: '📄', text: '课前资料', url: '/pages/material/index' },
        { icon: '👥', text: '我的小组', url: '/pages/group/index' },
        { icon: '✅', text: '装机打卡', url: '/pages/checkin/index', tab: true },
        { icon: '📤', text: '成果上传', url: '/pages/upload/index' },
        { icon: '📝', text: '教学卡', url: '/pages/teaching/index' },
        { icon: '🎤', text: '路演材料', url: '/pages/roadmap/index' },
        { icon: '🗳️', text: '路演投票', url: '/pages/vote/index' },
        { icon: '🏆', text: '积分榜', url: '/pages/scoreboard/index' },
        { icon: '📅', text: '行动计划', url: '/pages/plan/index' },
        { icon: '📋', text: '三本账', url: '/pages/assignment/index' }
      ]
    }
  },
  onLoad(options) {
    this.courseId = (options && options.courseId) || ''
    this.loadAll()
  },
  methods: {
    loadAll() {
      var self = this
      getMyCourse(self.courseId).then(function(resp) {
        var d = resp.data || {}
        var c = d.course || {}
        self.course = c
        self.className = d.className || ''
        self.classTime = d.classTime || ''
        self.classPlace = d.classPlace || ''
        self.enrollment = d.enrollment || null
      }).catch(function() {})
      
      // 获取模块列表
      if (self.courseId) {
        getCourseModules(self.courseId).then(function(resp) {
          self.modules = resp.data || []
        }).catch(function() {})
      }

      // 学习进度需登录后请求，未登录浏览时不调用（避免 401 误触发登录过期弹窗）
      if (self.isLoggedIn) {
        getCourseProgress().then(function(resp) {
          var d = resp.data || {}
          self.progress = {
            done: d.done || 0,
            total: d.total || 0,
            items: d.items || []
          }
        }).catch(function() {})
      }
    },
    onMenu(g) {
      if (!g) return
      if (g.tab) {
        uni.switchTab({ url: g.url })
      } else {
        uni.navigateTo({ url: g.url })
      }
    },
    applyEnter() {
      var self = this
      if (!requireLogin()) return
      if (!self.course.id) return
      uni.showModal({
        title: '申请进班',
        content: '确认提交进班申请？提交后由班主任审核。',
        success: function(res) {
          if (!res.confirm) return
          self.enterLoading = true
          enterCourse(self.course.id).then(function(resp) {
            uni.showToast({ title: '已提交申请', icon: 'success' })
            self.loadAll()
          }).catch(function(err) {
            var msg = (err && err.message) || '提交失败'
            if (msg.indexOf('报名') >= 0 || msg.indexOf('支付') >= 0) {
              uni.showModal({
                title: '提示',
                content: msg,
                confirmText: '去报名',
                success: function(r) {
                  if (r.confirm) {
                    uni.navigateTo({ url: '/pages/enroll/list' })
                  }
                }
              })
            } else {
              uni.showToast({ title: msg, icon: 'none' })
            }
          }).finally(function() {
            self.enterLoading = false
          })
        }
      })
    },
    statusLabel(st) {
      var map = { upcoming: '未开始', active: '进行中', finished: '已结束', draft: '未发布' }
      return map[st] || st || '-'
    },
    fmtDate(v) {
      if (!v) return '-'
      return formatDateTime(v)
    },
    fenToYuan(fen) {
      return ((fen || 0) / 100).toFixed(2)
    },
    goTo(url) {
      // 去报名/去支付为实际操作，未登录先引导登录（课程信息浏览已放行）
      if (!requireLogin()) return
      uni.navigateTo({ url: url })
    }
  }
}
</script>

<style scoped>
.course-detail-page { min-height: 100vh; background: #F5F5F5; padding: 24rpx 32rpx; }
.course-head { background: #FFF; border-radius: 20rpx; padding: 32rpx; margin-bottom: 24rpx; display: flex; flex-direction: column; }
.action-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; display: flex; flex-direction: column; align-items: center; }
.action-title { font-size: 32rpx; font-weight: 700; color: #1E293B; margin-bottom: 12rpx; }
.action-desc { font-size: 26rpx; color: #64748B; text-align: center; line-height: 1.6; margin-bottom: 28rpx; }
.action-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: linear-gradient(135deg, #F97316, #EA580C); color: #FFF; font-size: 30rpx; font-weight: 600; border-radius: 44rpx; border: none; }
.action-btn.disabled { background: #F1F5F9; color: #94A3B8; }
.action-btn:active { opacity: 0.88; }
.course-level { align-self: flex-start; font-size: 22rpx; font-weight: 600; color: #F97316; background: #FFF7ED; border-radius: 8rpx; padding: 4rpx 14rpx; margin-bottom: 12rpx; }
.course-name { font-size: 36rpx; font-weight: 700; color: #1E293B; margin-bottom: 8rpx; }
.course-status { align-self: flex-start; font-size: 22rpx; border-radius: 6rpx; padding: 4rpx 16rpx; margin-bottom: 12rpx; }
.course-status.st-upcoming { color: #F97316; background: #FFF7ED; }
.course-status.st-active { color: #22C55E; background: #F0FDF4; }
.course-status.st-finished { color: #94A3B8; background: #F1F5F9; }
.course-desc { font-size: 26rpx; color: #64748B; line-height: 1.6; margin-bottom: 8rpx; }
.course-time { font-size: 24rpx; color: #94A3B8; margin-bottom: 8rpx; }
.course-class { font-size: 24rpx; color: #1E293B; background: #F1F5F9; border-radius: 8rpx; padding: 8rpx 16rpx; align-self: flex-start; }

.module-section { margin-bottom: 24rpx; }
.module-list { display: flex; flex-direction: column; gap: 20rpx; }
.module-item { background: #FFF; border-radius: 16rpx; padding: 24rpx; border: 1px solid #E2E8F0; }
.module-main { display: flex; align-items: center; margin-bottom: 12rpx; }
.module-key { font-size: 20rpx; color: #F97316; background: #FFF7ED; padding: 2rpx 8rpx; border-radius: 4rpx; margin-right: 12rpx; font-weight: 600; }
.module-title { font-size: 28rpx; font-weight: 700; color: #1E293B; flex: 1; }
.module-version { font-size: 22rpx; color: #94A3B8; }
.module-output { font-size: 24rpx; color: #64748B; line-height: 1.5; margin-bottom: 16rpx; }
.module-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #F1F5F9; padding-top: 16rpx; }
.module-duration { font-size: 22rpx; color: #94A3B8; }
.module-status { font-size: 22rpx; font-weight: 600; color: #94A3B8; }
.module-status.done { color: #22C55E; }

.class-info-card { background: #FFF; border-radius: 16rpx; padding: 28rpx 32rpx; margin-bottom: 24rpx; display: flex; flex-direction: column; }
.class-info-title { font-size: 24rpx; color: #94A3B8; margin-bottom: 8rpx; }
.class-info-name { font-size: 30rpx; font-weight: 700; color: #1E293B; margin-bottom: 8rpx; }
.class-info-time { font-size: 26rpx; color: #475569; margin-bottom: 4rpx; }
.class-info-place { font-size: 26rpx; color: #475569; }

.stage-card { display: flex; align-items: center; background: #FFF; border-radius: 16rpx; padding: 28rpx 32rpx; margin-bottom: 24rpx; }
.stage-icon { font-size: 48rpx; margin-right: 20rpx; }
.stage-text { display: flex; flex-direction: column; }
.stage-title { font-size: 30rpx; font-weight: 700; color: #1E293B; margin-bottom: 6rpx; }
.stage-sub { font-size: 24rpx; color: #64748B; }

.stage-title-block { font-size: 30rpx; font-weight: 600; color: #1E293B; margin-bottom: 16rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }

.section-card { background: #FFF; border-radius: 16rpx; padding: 28rpx; margin-bottom: 24rpx; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; }
.section-title { font-size: 30rpx; font-weight: 600; color: #1E293B; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.progress-count { font-size: 24rpx; color: #64748B; }
.progress-bar { height: 16rpx; background: #F1F5F9; border-radius: 8rpx; overflow: hidden; margin-bottom: 20rpx; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #F97316, #EA580C); border-radius: 8rpx; }
.progress-list { display: flex; flex-direction: column; }
.progress-item { display: flex; align-items: center; padding: 10rpx 0; }
.progress-icon { font-size: 28rpx; margin-right: 12rpx; }
.progress-label { font-size: 26rpx; color: #1E293B; }

.nav-grid { display: flex; flex-wrap: wrap; gap: 0; background: #FFF; border-radius: 16rpx; overflow: hidden; }
.nav-item { width: 25%; display: flex; flex-direction: column; align-items: center; padding: 28rpx 0; }
.nav-item:active { background: #F8FAFC; }
.nav-icon { font-size: 44rpx; margin-bottom: 8rpx; }
.nav-text { font-size: 24rpx; color: #1E293B; text-align: center; }
</style>