193 lines
6.1 KiB
Markdown
193 lines
6.1 KiB
Markdown
# 课程详情页报名流程更新说明
|
||
|
||
## 🎯 更新目标
|
||
|
||
修改报名成功后的跳转逻辑，让用户在报名成功后停留在**课程详情页面的已报名状态**，而不是直接跳转到学习页面，这样用户可以看到报名成功后的彩色可点击效果。
|
||
|
||
## 📋 更新内容
|
||
|
||
### 1. 报名流程优化
|
||
**修改前**：
|
||
```
|
||
未报名状态 → 点击"立即报名" → 报名确认 → 报名成功 → 跳转到学习页面
|
||
```
|
||
|
||
**修改后**：
|
||
```
|
||
未报名状态 → 点击"立即报名" → 报名确认 → 报名成功 → 停留在课程详情页（已报名状态）
|
||
```
|
||
|
||
### 2. 报名成功处理逻辑
|
||
```javascript
|
||
// 确认报名
|
||
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. 按钮状态和功能
|
||
```javascript
|
||
// 处理课程报名
|
||
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. 报名成功提示更新
|
||
```html
|
||
<!-- 报名成功弹窗 -->
|
||
<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>
|
||
```
|
||
|
||
## 🎨 用户体验流程
|
||
|
||
### 完整的用户体验
|
||
1. **初始状态**：用户看到灰色不可点击的课程章节
|
||
2. **点击报名**：显示"立即报名"按钮
|
||
3. **确认报名**：弹出报名确认对话框
|
||
4. **报名处理**：显示"报名中..."加载状态
|
||
5. **报名成功**：显示成功提示"现在您可以查看完整的课程内容了"
|
||
6. **状态切换**：页面自动切换到已报名状态，课程章节变为彩色可点击
|
||
7. **继续学习**：用户可以点击"进入学习"按钮跳转到学习页面
|
||
|
||
### 视觉变化对比
|
||
**报名前（灰色不可点击）**：
|
||
```
|
||
课程章节 ⋮ 正序
|
||
─────────────────────────────────
|
||
第一章 课前准备 (灰色)
|
||
├── 📹 开课彩蛋：新开始新征程 (灰色不可点击)
|
||
├── 📹 课程定位与目标 (灰色不可点击)
|
||
└── ...
|
||
|
||
立即报名 [按钮]
|
||
```
|
||
|
||
**报名后（彩色可点击）**：
|
||
```
|
||
课程章节 ⋮ 正序
|
||
─────────────────────────────────
|
||
第一章 课前准备 (正常色)
|
||
├── 📹 开课彩蛋：新开始新征程 (蓝色可点击) ✓
|
||
├── 📹 课程定位与目标 (蓝色可点击) ✓
|
||
└── ...
|
||
|
||
进入学习 [按钮]
|
||
```
|
||
|
||
## 🔧 技术实现
|
||
|
||
### 状态管理
|
||
```javascript
|
||
// 关键状态变量
|
||
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=已报名状态
|
||
}
|
||
```
|
||
|
||
### 样式切换
|
||
```html
|
||
<!-- 根据报名状态动态应用样式 -->
|
||
<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>
|
||
```
|
||
|
||
## ✅ 测试步骤
|
||
|
||
### 完整测试流程
|
||
1. **刷新页面**：看到未报名状态（灰色章节）
|
||
2. **点击"立即报名"**：弹出确认对话框
|
||
3. **点击"确认报名"**：显示加载状态
|
||
4. **等待成功提示**：显示"报名成功！现在您可以查看完整的课程内容了"
|
||
5. **观察状态变化**：2秒后提示消失，页面显示已报名状态（彩色章节）
|
||
6. **测试功能**：点击课程章节可以正常操作
|
||
7. **进入学习**：点击"进入学习"按钮跳转到学习页面
|
||
|
||
### 状态切换测试
|
||
```javascript
|
||
// 在 initializeMockState 函数中修改
|
||
isEnrolled.value = false // 测试未报名状态
|
||
isEnrolled.value = true // 测试已报名状态
|
||
```
|
||
|
||
## 🎯 用户价值
|
||
|
||
### 对用户的好处
|
||
1. **即时反馈**：报名成功后立即看到状态变化
|
||
2. **功能验证**：可以在课程详情页面验证报名是否成功
|
||
3. **内容预览**：报名后可以在详情页面查看完整的课程结构
|
||
4. **决策确认**：看到完整内容后再决定是否立即开始学习
|
||
|
||
### 交互优化
|
||
- **渐进式体验**：从灰色 → 彩色的视觉变化很直观
|
||
- **状态明确**：用户清楚地知道自己的报名状态
|
||
- **操作连贯**：报名 → 查看内容 → 开始学习的自然流程
|
||
|
||
现在用户可以完整体验从未报名到已报名的状态变化，看到报名成功后课程章节从灰色变为彩色可点击的效果！🎉
|