GoCo/OL-LearnPlatform

Fork 0

username af756a13e2 第一版学生端页面

2025-08-04 02:13:12 +08:00

6.1 KiB

Raw Blame History

课程详情页报名流程更新说明

🎯 更新目标

修改报名成功后的跳转逻辑，让用户在报名成功后停留在课程详情页面的已报名状态，而不是直接跳转到学习页面，这样用户可以看到报名成功后的彩色可点击效果。

📋 更新内容

1. 报名流程优化

修改前：

未报名状态 → 点击"立即报名" → 报名确认 → 报名成功 → 跳转到学习页面

修改后：

未报名状态 → 点击"立即报名" → 报名确认 → 报名成功 → 停留在课程详情页（已报名状态）

2. 报名成功处理逻辑

// 确认报名
const confirmEnrollment = async () => {
  try {
    enrollmentLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 报名成功
    isEnrolled.value = true  // 关键：设置为已报名状态
    enrollConfirmVisible.value = false
    enrollSuccessVisible.value = true
    
    // 2秒后关闭成功提示，停留在当前页面（已报名状态）
    setTimeout(() => {
      enrollSuccessVisible.value = false
      // 不跳转，让用户看到已报名状态下的彩色可点击效果
      console.log('报名成功！现在显示已报名状态的课程详情页面')
    }, 2000)
    
  } catch (error) {
    console.error('报名失败:', error)
  } finally {
    enrollmentLoading.value = false
  }
}

3. 按钮状态和功能

// 处理课程报名
const handleEnrollCourse = () => {
  if (!userStore.isLoggedIn) {
    // 未登录，显示登录弹窗
    showLoginModal()
    return
  }
  
  if (isEnrolled.value) {
    // 已报名，跳转到学习页面
    console.log('用户已报名，跳转到学习页面')
    router.push(`/course/${courseId.value}/study`)
    return
  }
  
  // 未报名，显示报名确认弹窗
  console.log('用户未报名，显示报名确认弹窗')
  enrollConfirmVisible.value = true
}

4. 报名成功提示更新

<!-- 报名成功弹窗 -->
<div v-if="enrollSuccessVisible" class="modal-overlay">
  <div class="modal-content success-modal">
    <div class="success-icon">✓</div>
    <h3>报名成功！</h3>
    <p>现在您可以查看完整的课程内容了</p>
    <p class="success-tip">课程章节已变为可点击状态</p>
  </div>
</div>

🎨 用户体验流程

完整的用户体验

初始状态：用户看到灰色不可点击的课程章节
点击报名：显示"立即报名"按钮
确认报名：弹出报名确认对话框
报名处理：显示"报名中..."加载状态
报名成功：显示成功提示"现在您可以查看完整的课程内容了"
状态切换：页面自动切换到已报名状态，课程章节变为彩色可点击
继续学习：用户可以点击"进入学习"按钮跳转到学习页面

视觉变化对比

报名前（灰色不可点击）：

课程章节                    ⋮ 正序
─────────────────────────────────
第一章 课前准备 (灰色)
├── 📹 开课彩蛋：新开始新征程 (灰色不可点击)
├── 📹 课程定位与目标 (灰色不可点击)
└── ...

立即报名 [按钮]

报名后（彩色可点击）：

课程章节                    ⋮ 正序
─────────────────────────────────
第一章 课前准备 (正常色)
├── 📹 开课彩蛋：新开始新征程 (蓝色可点击) ✓
├── 📹 课程定位与目标 (蓝色可点击) ✓
└── ...

进入学习 [按钮]

🔧 技术实现

状态管理

// 关键状态变量
const isEnrolled = ref(false) // 报名状态
const isUserEnrolled = computed(() => {
  return userStore.isLoggedIn && isEnrolled.value // 综合状态
})

// 初始化为未报名状态，便于测试完整流程
const initializeMockState = () => {
  // 模拟用户已登录
  userStore.user = { ... }
  userStore.token = 'mock-token'
  
  // 模拟用户未报名状态，可以测试完整的报名流程
  isEnrolled.value = false  // false=未报名状态，true=已报名状态
}

样式切换

<!-- 根据报名状态动态应用样式 -->
<div class="lesson-content" 
     :class="{ 'unregistered': !isUserEnrolled }" 
     @click="isUserEnrolled ? handleSectionClick(section) : handleUnregisteredClick(section)">
  
  <div class="lesson-type-badge" 
       :class="[getLessonTypeBadgeClass(section), { 'disabled': !isUserEnrolled }]">
    {{ getLessonTypeText(section) }}
  </div>
  
  <span class="lesson-title" :class="{ 'disabled': !isUserEnrolled }">
    {{ section.name }}
  </span>
</div>

✅ 测试步骤

完整测试流程

刷新页面：看到未报名状态（灰色章节）
点击"立即报名"：弹出确认对话框
点击"确认报名"：显示加载状态
等待成功提示：显示"报名成功！现在您可以查看完整的课程内容了"
观察状态变化：2秒后提示消失，页面显示已报名状态（彩色章节）
测试功能：点击课程章节可以正常操作
进入学习：点击"进入学习"按钮跳转到学习页面

状态切换测试

// 在 initializeMockState 函数中修改
isEnrolled.value = false  // 测试未报名状态
isEnrolled.value = true   // 测试已报名状态

🎯 用户价值

对用户的好处

即时反馈：报名成功后立即看到状态变化
功能验证：可以在课程详情页面验证报名是否成功
内容预览：报名后可以在详情页面查看完整的课程结构
决策确认：看到完整内容后再决定是否立即开始学习

交互优化

渐进式体验：从灰色 → 彩色的视觉变化很直观
状态明确：用户清楚地知道自己的报名状态
操作连贯：报名 → 查看内容 → 开始学习的自然流程

现在用户可以完整体验从未报名到已报名的状态变化，看到报名成功后课程章节从灰色变为彩色可点击的效果！🎉

6.1 KiB Raw Blame History Unescape Escape