学习功能，课程详情与视频
学习功能组件准备
整体分为上中下三部分，顶部为标题，中间为学习课程列表，底部为导航
那么我们就首先引入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 }}人已购
每周三、五更新主体选项卡 选项卡使用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
...
￥{{ course.discounts }}
￥{{ course.price }}立即购买
...
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课时
// CourseSection.vue
......可使用在线配置获取创建实例代码
- 选择playauth播放方式即可
具体的代码
....course-video {
width: 100%;
height: 210px;
}
#video-container {
width: 100%;
height: auto;
}【学习功能，课程详情与视频】小知识：手机和电脑链接到同一个无线网络下，可以使用手机访问IP地址:8080端口访问项目，可以调试项目
完成
推荐阅读
- 由浅入深理解AOP
- 继续努力，自主学习家庭Day135(20181015）
- python学习之|python学习之 实现QQ自动发送消息
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- 《深度倾听》第5天──「RIA学习力」便签输出第16期
- 如何更好的去学习
- 【韩语学习】（韩语随堂笔记整理）
- 焦点学习田源分享第267天《来访》