luffy课程详情页前端
# 1 新建FreeCourseDetail.vue # 2 配置路由 { path: '/free/detail/:pk', name: 'FreeCourseDetail', component: FreeCourseDetail }, #3 安装 vue-video播放器 -cnpm install vue-video-player -在main.js中配置 // vue-video播放器 require('video.js/dist/video-js.css'); require('vue-video-player/src/custom-theme.css'); import VideoPlayer from 'vue-video-player' Vue.use(VideoPlayer); #4 组件class="detail"> class="main">class="course-info">class="wrap-left">class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)"> class="wrap-right">class="course-name">{{course_info.name}}
class="data">{{course_info.students}}人在学 课程总时长:{{course_info.sections}}课时/{{course_info.pub_sections}}小时 难度:{{course_info.level_name}}
class="sale-time">class="sale-type">价格 class="original_price">¥{{course_info.price}}
class="expire">
class="buy">class="buy-btn">class="course-tab">class="tab-list">
- class="tabIndex==1?'active':''" @click="tabIndex=1">详情介绍
- class="tabIndex==2?'active':''" @click="tabIndex=2">课程章节 class="tabIndex!=2?'free':''">(试学)
- class="tabIndex==3?'active':''" @click="tabIndex=3">用户评论
- class="tabIndex==4?'active':''" @click="tabIndex=4">常见问题
class="course-content">class="course-tab-list">class="tab-item" v-if="tabIndex==1">class="course-brief" v-html="course_info.brief_text">class="tab-item" v-if="tabIndex==2">class="tab-item-title">class="chapter">课程章节
class="chapter-length">共{{course_chapters.length}}章 {{course_info.sections}}个课时
class="chapter-item" v-for="chapter in course_chapters" :key="chapter.name">class="chapter-title">
"@/assets/img/enum.svg" alt="">第{{chapter.chapter}}章·{{chapter.name}}
class="section-list">
- class="section-item" v-for="section in chapter.coursesections" :key="section.name">
class="name">class="index">{{chapter.chapter}}-{{section.orders}} {{section.name}}class="free" v-if="section.free_trail">免费
class="time">{{section.duration}}
"@/assets/img/chapter-player.svg">
class="tab-item" v-if="tabIndex==3"> 用户评论class="tab-item" v-if="tabIndex==4"> 常见问题class="course-side">class="teacher-info">class="side-title">授课老师
class="teacher-content">class="cont1">"course_info.teacher.image">
class="name">class="teacher-name">{{course_info.teacher.name}} {{course_info.teacher.title}}
class="teacher-title">{{course_info.teacher.signature}}
class="narrative">{{course_info.teacher.brief}}