学习功能，课程详情与视频学习功能，课程详情与视频

学习功能组件准备整体分为上中下三部分，顶部为标题，中间为学习课程列表，底部为导航
那么我们就首先引入LayoutFooter组件

// learn/index.vue

头部功能设置NarBar进行标题显示就可以了

... ...

课程列表公共组件顶部列表与Course中使用的CourseContentList组件列表是非常类似的，我们可以把它封装成公共组件来减少工作量
Course显示的是所有的课程，而学习展示的则是用于已经购买的课程，数据不同，但是结构相同
这里将CourseContentList.vue作为公共组件移动到src/components 中
那么要注意：CourseContent中对于CourseContentList的引入路径要随之修改

// course/components/CourseContent.vue ... import CourseContentList from '@/components/CourseContentList' ...

引入组件：

... ...

// 同理，要保持顶部和底部的距离，防止覆盖一部分内容.course-content-list { top: 50px; bottom: 50px; }

接口抽离课程列表组件初始设置时使用的是所有课程接口，如果我们改为其他的数据（已购课程），那么应当由父组件进行接口设置，再将其传入子组件，由子组件在适当的时机进行调用
修改我们的CourseContentList.vue
（+、-表示当前行代码我们应该去除还是新加）

设置路由规则

// router/index.js ... { path: '/course-info/:courseId/', name: 'course-info', component: () => import(/* webpackChunkName: 'course-info' */'@/views/course/info'), props: true }, ...

设置跳转

// course/components/CourseContentList.vue ... ...

接口封装使用接口：获取课程详情接口

// 获取课程详情信息 export const getCourseById = params => { return request({ method: 'GET', url: '/front/course/getCourseById', params }) }

引入到页面，并且发送请求验证没有问题

// course-info/index.vue ...

主体内容区域处理整体采用Vant的cell单元格处理

// course-info/index.vue

顶部图片和课程信息，外加修改具体的样式

// course-info/index.vue ... 文章图片￥{{ course.discounts }} ￥{{ course.price }} {{ course.sales }}人已购每周三、五更新 ....van-cell { padding: 0; } .course-img { height: 280px; }.course-desctription { padding: 10px 20px; height: 150px; }.course-desctription h2 { padding: 0; }.course-saleInfo { display: flex; }.course-price { flex: 1; margin: 0; } .course-price .discounts { color: #ff7452; font-size: 24px; font-weight: 700; }.course-saleInfo .tag{ line-height: 15px; background: #f8f9fa; border-radius: 2px; padding: 7px 8px; font-size: 12px; font-weight: 700; color: #666; margin-left: 10px; }

主体选项卡选项卡使用vant的Tab标签页组件
设置到页面中

内容 1 内容 2 内容 3 内容 4

课程详情
设置详情部分数据

当详情内容过于长的时候，将选项卡部分固定，可以使用Tab组件的粘性定位功能（scrollspy表示滚动导航，美化效果拉满）

// course-info/index.vue ...

章节列表处理课程内容要显示课程的章节和课时信息
封装接口
接口为获取课程章节：地址
封装到course.js中

// course.js ... // 获取课程章节 export const getSectionAndLesson = params => { return request({ method: 'GET', url: '/front/course/session/getSectionAndLesson', params }) }

封装章节的组件
Vant没有提供与需求相似的用于显示章节和课时的组件，我们可以自行封装一手
准备组件文件，CourseSectionAndLesson用于单个章节与内部课时展示

引入该组件

// course-info/index.vue ... ...

遍历sections，同时从父组件中传递数据给章节组件

章节组件布局处理

....section-and-lesson { padding: 0 20px; } // 让课时标题与图标两端显示 .lesson { display: flex; justify-content: space-between; }

底部支付功能布局处理
整体采用vant的Tabbar组件，也可自行设置元素进行固定定位处理

// course-info/index.vue ... data () { return { ... // 样式信息 styleOptions: {} } }, ... async loadCourse () { ... if (data.content.isBuy) { this.styleOptions.bottom = 0 } } ...... // 修改 discounts 选择器范围，让顶部与底部均可使用 .discounts { color: #ff7452; font-size: 24px; font-weight: 700; } ...// 添加底部导航后设置 .van-cell-group { position: fixed; // 预留底部支付区域高度 width: 100%; top: 0; bottom: 50px; overflow-y: auto; }// 调整内部文字位置 .van-tabbar { line-height: 50px; // 设置 padding 后元素超出窗口 padding: 0 20px; // 设置 box-sizing box-sizing: border-box; display: flex; // 内部元素左右显示 justify-content: space-between; // 内容居中 align-items: center; }span { font-size: 14px; } // 尺寸调整 .van-button { width: 50%; height: 80%; }

如果已经购买了该课程，就无需显示这个功能了

显示隐藏控制
主体内容区域位置处理

// course-info/index.vue ... data () { return { ... // 样式信息 styleOptions: {} } }, ... async loadCourse () { ... if (data.content.isBuy) { this.styleOptions.bottom = 0 } } ...

视频播放组件组件准备
当点击某个可播放的课时时，需要进行视频播放，设置视频组件用于播放视频

// course-info/video.vue

设置路由：

// router/index.js ... // 视频页 { path: '/lesson-video/:lessonId/', name: 'lesson-video', component: () => import(/* webpackChunkName: 'lesson-video' */'@/views/course-info/video'), props: true }, ...

点击课时时，如果可以播放，那么就跳转该视频页，并传递ID课时