245 lines
5.6 KiB
Markdown
245 lines
5.6 KiB
Markdown
# 课程章节考试功能集成说明
|
||
|
||
## 🎯 功能目标
|
||
|
||
实现点击课程详情页面右侧课程章节中的考试部分，能够跳转到之前创建的考试页面功能。
|
||
|
||
## 📋 实现内容
|
||
|
||
### 1. 考试识别逻辑
|
||
```javascript
|
||
// 判断是否为考试课程
|
||
const isExamLesson = (section: CourseSection) => {
|
||
return section.name.includes('考试') || section.name.includes('测试')
|
||
}
|
||
```
|
||
|
||
### 2. 考试处理函数
|
||
|
||
#### 未报名状态页面 (CourseDetail.vue)
|
||
```javascript
|
||
const handleExam = (section: CourseSection) => {
|
||
console.log('开始考试:', section)
|
||
|
||
// 跳转到考前须知页面
|
||
router.push({
|
||
name: 'ExamNotice',
|
||
params: {
|
||
courseId: courseId.value,
|
||
sectionId: section.id
|
||
},
|
||
query: {
|
||
courseName: course.value?.title || '课程名称',
|
||
examName: section.name
|
||
}
|
||
})
|
||
}
|
||
```
|
||
|
||
#### 已报名状态页面 (CourseDetailEnrolled.vue)
|
||
```javascript
|
||
// 处理考试
|
||
const handleExam = (section: CourseSection) => {
|
||
console.log('开始考试:', section.name)
|
||
|
||
// 跳转到考前须知页面
|
||
router.push({
|
||
name: 'ExamNotice',
|
||
params: {
|
||
courseId: courseId.value.toString(),
|
||
sectionId: section.id.toString()
|
||
},
|
||
query: {
|
||
courseName: course.value?.title || '课程名称',
|
||
examName: section.name
|
||
}
|
||
})
|
||
}
|
||
```
|
||
|
||
### 3. 路由配置
|
||
```typescript
|
||
// router/index.ts 中已存在的路由
|
||
{
|
||
path: '/course/:courseId/exam/:sectionId/notice',
|
||
name: 'ExamNotice',
|
||
component: ExamNotice,
|
||
meta: {
|
||
title: '考前须知'
|
||
}
|
||
},
|
||
{
|
||
path: '/course/:courseId/exam/:sectionId',
|
||
name: 'Exam',
|
||
component: Exam,
|
||
meta: {
|
||
title: '在线考试'
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🎨 用户界面
|
||
|
||
### 1. 考试章节显示
|
||
```html
|
||
<!-- 考试图标 - 可点击 -->
|
||
<button v-else-if="isExamLesson(section)"
|
||
class="lesson-action-btn exam-btn"
|
||
@click.stop="handleExam(section)">
|
||
<svg width="12" height="12" viewBox="0 0 16 16">
|
||
<rect x="2" y="2" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||
<path d="M6 6h4M6 8h4M6 10h2" stroke="currentColor" stroke-width="1.5"/>
|
||
</svg>
|
||
</button>
|
||
```
|
||
|
||
### 2. 考试徽章样式
|
||
```css
|
||
.badge-exam {
|
||
background: #fff1f0;
|
||
color: #f5222d;
|
||
border: 1px solid #ffa39e;
|
||
}
|
||
|
||
.exam-btn {
|
||
color: #f5222d;
|
||
}
|
||
```
|
||
|
||
## 🚀 完整流程
|
||
|
||
### 1. 用户操作流程
|
||
```
|
||
1. 用户访问课程详情页面
|
||
↓
|
||
2. 查看右侧课程章节列表
|
||
↓
|
||
3. 找到考试类型的章节（红色徽章标识）
|
||
↓
|
||
4. 点击考试章节或考试图标
|
||
↓
|
||
5. 跳转到考前须知页面
|
||
↓
|
||
6. 阅读考试说明
|
||
↓
|
||
7. 点击"开始考试"按钮
|
||
↓
|
||
8. 进入正式考试页面
|
||
```
|
||
|
||
### 2. 页面跳转路径
|
||
```
|
||
课程详情页面
|
||
/course/1 或 /course/1/enrolled
|
||
↓ 点击考试章节
|
||
考前须知页面
|
||
/course/1/exam/15/notice
|
||
↓ 点击开始考试
|
||
正式考试页面
|
||
/course/1/exam/15
|
||
```
|
||
|
||
### 3. 参数传递
|
||
```javascript
|
||
// 传递的参数
|
||
{
|
||
params: {
|
||
courseId: '1', // 课程ID
|
||
sectionId: '15' // 章节ID（考试ID）
|
||
},
|
||
query: {
|
||
courseName: '课程标题', // 课程名称
|
||
examName: '期末考试' // 考试名称
|
||
}
|
||
}
|
||
```
|
||
|
||
## 📱 模拟数据
|
||
|
||
### 考试章节示例
|
||
```javascript
|
||
// 模拟数据中的考试章节
|
||
{
|
||
id: 15,
|
||
lessonId: courseId.value,
|
||
name: '期末考试', // 包含"考试"关键词，会被识别为考试类型
|
||
outline: '',
|
||
parentId: 0,
|
||
sort: 15,
|
||
level: 1,
|
||
revision: 1,
|
||
createdAt: Date.now(),
|
||
updatedAt: Date.now(),
|
||
deletedAt: null,
|
||
completed: false,
|
||
duration: undefined
|
||
}
|
||
```
|
||
|
||
### 考试类型识别
|
||
- **名称包含"考试"**：期末考试、中期考试、单元考试
|
||
- **名称包含"测试"**：能力测试、知识测试、技能测试
|
||
|
||
## 🎯 视觉效果
|
||
|
||
### 1. 未报名状态
|
||
```
|
||
第三章 实战项目
|
||
├── 📹 项目一：计算器开发 (灰色不可点击)
|
||
├── 📄 项目源码下载 (灰色不可点击)
|
||
├── 📝 作业：完成个人项目 (灰色不可点击)
|
||
└── 🎯 期末考试 (灰色不可点击)
|
||
```
|
||
|
||
### 2. 已报名状态
|
||
```
|
||
第三章 实战项目
|
||
├── 📹 项目一：计算器开发 (蓝色可点击)
|
||
├── 📄 项目源码下载 (绿色可点击)
|
||
├── 📝 作业：完成个人项目 (橙色可点击)
|
||
└── 🎯 期末考试 (红色可点击) ← 点击跳转到考试
|
||
```
|
||
|
||
## 🔧 技术实现
|
||
|
||
### 1. 考试识别
|
||
- 通过章节名称关键词识别
|
||
- 自动应用红色徽章样式
|
||
- 显示考试图标
|
||
|
||
### 2. 路由跳转
|
||
- 使用 `router.push()` 进行页面跳转
|
||
- 传递课程ID和章节ID作为路由参数
|
||
- 传递课程名称和考试名称作为查询参数
|
||
|
||
### 3. 状态管理
|
||
- 未报名用户点击考试：显示报名提示
|
||
- 已报名用户点击考试：直接跳转到考前须知
|
||
|
||
## ✅ 测试验证
|
||
|
||
### 1. 功能测试
|
||
1. **访问已报名状态页面**：`/course/1/enrolled`
|
||
2. **找到考试章节**：第三章中的"期末考试"
|
||
3. **验证样式**：红色徽章，考试图标
|
||
4. **点击测试**：点击考试章节或图标
|
||
5. **验证跳转**：应该跳转到 `/course/1/exam/15/notice`
|
||
6. **参数验证**：检查页面是否正确显示课程名称和考试名称
|
||
|
||
### 2. 路径验证
|
||
- ✅ 课程详情页面 → 考前须知页面
|
||
- ✅ 考前须知页面 → 正式考试页面
|
||
- ✅ 参数正确传递
|
||
- ✅ 页面正常显示
|
||
|
||
## 🎉 集成完成
|
||
|
||
现在用户可以：
|
||
1. 在课程章节中看到考试内容（红色徽章标识）
|
||
2. 点击考试章节跳转到考前须知页面
|
||
3. 在考前须知页面了解考试规则
|
||
4. 点击开始考试进入正式考试界面
|
||
5. 完成完整的考试流程
|
||
|
||
考试功能已完全集成到课程学习流程中！🚀
|