caremate/train-frontend/pages/enroll/list.vue

<template>
  <view class="enroll-page">
    <view class="section-card">
      <text class="section-title">选择课程</text>
      <text class="card-desc">填写联系方式与准备情况，缴费后由助教分配班次</text>
      <view v-if="loading" class="empty-tip">加载中…</view>
      <view v-else-if="courses.length === 0" class="empty-tip">暂无可报名课程</view>
      <view v-else>
        <view class="course-card" v-for="item in courses" :key="item.id">
          <view class="course-head">
            <text class="course-level">{{ item.level }}</text>
            <text class="course-name">{{ item.name }}</text>
          </view>
          <view class="course-price-box">
            <text class="course-price" v-if="item.price > 0">¥{{ fenToYuan(item.price) }}</text>
            <text class="course-price-free" v-else>免费</text>
            <text class="member-price" v-if="item.memberPrice > 0 && item.memberPrice < item.price">
              会员价 ¥{{ fenToYuan(item.memberPrice) }}
            </text>
          </view>
          <view class="course-status-box">
            <text class="status-text" :class="item.statusCls">
              {{ item.statusLabel }}
            </text>
          </view>
          <view class="course-foot">
            <button 
              class="enroll-btn" 
              :disabled="!canEnroll(item)" 
              @click="handleCourseClick(item)"
            >
              {{ getButtonText(item) }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <view class="section-card">
      <text class="section-title">我的报名</text>
      <view v-if="mineLoading" class="empty-tip">加载中…</view>
      <view v-else-if="mineList.length === 0" class="empty-tip">暂无报名记录</view>
      <view v-else>
        <view class="mine-item" v-for="item in mineList" :key="item.id">
          <view class="mine-head">
            <text class="mine-class">
              <text v-if="item.courseName" class="mine-course">{{ item.courseName }}</text>
              {{ item.className || '' }}
            </text>
            <text class="mine-status">{{ statusLabel(item.status) }}</text>
          </view>
          <text class="mine-time" v-if="item.createdAt">报名时间：{{ formatDateTime(item.createdAt) }}</text>
          <view class="mine-actions" v-if="item.status === 'pending' && item.orderNo">
            <button class="mine-btn cancel-btn" @click="cancelOrder(item)">取消订单</button>
            <button class="mine-btn pay-btn" @click="goPay(item)">去支付</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCourseList, getMyEnrollments, cancelPayOrder } from '@/utils/api.js'
import { fenToYuan, formatDateTime } from '@/utils/format.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      courses: [],
      mineList: [],
      loading: false,
      mineLoading: false
    }
  },
  onShow() {
    if (!guardPage()) return
    this.loadCourses()
    this.loadMine()
  },
  methods: {
    fenToYuan: fenToYuan,
    formatDateTime: formatDateTime,
    loadCourses() {
      var self = this
      var statusLabelMap = { draft: '未开放', active: '报名中', finished: '已结束' }
      self.loading = true
      getCourseList().then(function(resp) {
        var raw = resp.data || []
        self.courses = raw.map(function(item) {
          var st = item.effectiveStatus
          var cls = 'status-active'
          if (st === 'draft') cls = 'status-draft'
          if (st === 'finished') cls = 'status-finished'
          item.statusCls = cls
          item.statusLabel = statusLabelMap[st] || '未知'
          return item
        })
      }).catch(function() {
        uni.showToast({ title: '加载课程失败', icon: 'none' })
      }).finally(function() {
        self.loading = false
      })
    },
    loadMine() {
      var self = this
      self.mineLoading = true
      getMyEnrollments().then(function(resp) {
        self.mineList = resp.data || []
      }).catch(function() {}).finally(function() {
        self.mineLoading = false
      })
    },
    getButtonText(item) {
      var status = item.myStatus
      if (status === 'pending') return '去支付'
      if (status === 'paid') return '待审核'
      if (status === 'reviewing') return '审核中'
      if (status === 'confirmed') return '已进班'
      if (status === 'rejected') return '重新报名'
      return '立即报名'
    },
    canEnroll(item) {
      if (item.effectiveStatus === 'draft' || item.effectiveStatus === 'finished') return false
      if (item.myStatus === 'paid' || item.myStatus === 'reviewing' || item.myStatus === 'confirmed') return false
      return true
    },
    handleCourseClick(item) {
      if (item.myStatus === 'pending') {
        var mine = this.mineList.filter(function(m) { return m.courseId === item.id })[0]
        if (mine) {
          this.goPay(mine)
        } else {
          uni.showToast({ title: '未找到订单', icon: 'none' })
        }
      } else {
        this.goForm(item)
      }
    },
    statusLabel(status) {
      var map = { pending: '待支付', paid: '已支付', reviewing: '进班审核中', confirmed: '已进班', rejected: '进班被拒', cancelled: '已取消' }
      return map[status] || status || '未知'
    },
    goForm(course) {
      var userInfo = uni.getStorageSync('userInfo') || {}
      var courseName = course.level + ' ' + course.name
      uni.navigateTo({ 
        url: '/pages/enroll/form?courseId=' + course.id + 
             '&courseName=' + encodeURIComponent(courseName) + 
             '&name=' + encodeURIComponent(userInfo.name || '') + 
             '&phone=' + encodeURIComponent(userInfo.phone || '') 
      })
    },
    goPay(item) {
      uni.navigateTo({ url: '/pages/pay/index?enrollmentId=' + item.id })
    },
    cancelOrder(item) {
      var self = this
      uni.showModal({
        title: '取消订单',
        content: '确定取消该报名订单吗？',
        success: function(res) {
          if (!res.confirm) return
          cancelPayOrder({ orderNo: item.orderNo }).then(function() {
            uni.showToast({ title: '已取消', icon: 'success' })
            self.loadMine()
          }).catch(function(err) {
            uni.showToast({ title: (err && err.message) || '取消失败', icon: 'none' })
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.enroll-page { min-height: 100vh; background: #F5F5F5; padding: 32rpx; }
.section-card { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; }
.section-title { display: block; font-size: 32rpx; font-weight: 700; color: #1E293B; margin-bottom: 8rpx; border-left: 8rpx solid #F97316; padding-left: 16rpx; }
.card-desc { display: block; font-size: 26rpx; color: #64748B; margin-bottom: 24rpx; }
.empty-tip { font-size: 26rpx; color: #94A3B8; padding: 32rpx 0; text-align: center; }
.course-card { border: 2rpx solid #E2E8F0; border-radius: 12rpx; padding: 24rpx; margin-bottom: 20rpx; }
.course-head { display: flex; align-items: center; margin-bottom: 12rpx; }
.course-level { background: #F97316; color: #FFF; padding: 2rpx 8rpx; border-radius: 4rpx; margin-right: 12rpx; font-weight: 600; font-size: 24rpx; }
.course-name { font-size: 30rpx; font-weight: 600; color: #1E293B; flex: 1; }
.course-price-box { display: flex; align-items: center; gap: 16rpx; margin-bottom: 12rpx; }
.course-price { font-size: 28rpx; color: #F97316; font-weight: 600; }
.course-price-free { font-size: 28rpx; color: #22C55E; font-weight: 600; }
.member-price { font-size: 24rpx; color: #64748B; }
.course-status-box { margin-bottom: 16rpx; }
.status-text { font-size: 24rpx; }
.status-active { color: #22C55E; }
.status-draft { color: #94A3B8; }
.status-finished { color: #EF4444; }
.course-foot { display: flex; align-items: center; justify-content: flex-end; }
.enroll-btn { width: 200rpx; height: 64rpx; line-height: 64rpx; font-size: 26rpx; background: #F97316; color: #FFF; border-radius: 32rpx; border: none; margin: 0; }
.enroll-btn:active { opacity: 0.85; }
.enroll-btn:disabled { background: #CBD5E1; }
.mine-item { padding: 20rpx 0; border-bottom: 1rpx solid #F1F5F9; }
.mine-item:last-child { border-bottom: none; }
.mine-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx; }
.mine-class { font-size: 28rpx; color: #1E293B; font-weight: 500; flex: 1; }
.mine-course { font-weight: 700; margin-right: 8rpx; }
.mine-status { font-size: 24rpx; color: #F97316; }
.mine-time { font-size: 24rpx; color: #94A3B8; }
.mine-actions { display: flex; justify-content: flex-end; margin-top: 16rpx; }
.mine-btn { width: 160rpx; height: 56rpx; line-height: 56rpx; font-size: 24rpx; border-radius: 28rpx; border: none; margin: 0 0 0 16rpx; }
.mine-btn:active { opacity: 0.85; }
.cancel-btn { background: #F1F5F9; color: #64748B; }
.pay-btn { background: #F97316; color: #FFF; }
</style>