|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="video-detail">
|
|
|
+ <div class="video-detail" v-loading="loading">
|
|
|
<Header
|
|
|
:headerBg="headerBg"
|
|
|
:headerBorder="headerBorder"
|
|
|
@@ -10,7 +10,7 @@
|
|
|
<div class="navBar-left">
|
|
|
<a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i>{{previousPage}}</a>
|
|
|
<div class="border"></div>
|
|
|
- <p>{{data.navTitle}}</p>
|
|
|
+ <p>{{info.name}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main">
|
|
|
@@ -24,11 +24,11 @@
|
|
|
</div>
|
|
|
<div class="mian-left-center">
|
|
|
<div class="mian-left-center-left">
|
|
|
- <h2>{{data.title}}</h2>
|
|
|
+ <h2>{{info.name}}</h2>
|
|
|
<div class="main-top">
|
|
|
<svg-icon icon-class="facetime" className="icon-headset"></svg-icon>
|
|
|
- <span class="playsNumber">{{data.playsNumber}}</span>
|
|
|
- <span class="progress">已更新{{data.updateLessons}}课时/共{{data.totalLessons}}课时</span>
|
|
|
+ <span class="playsNumber">{{play_total_count}}</span>
|
|
|
+ <span class="progress">已更新{{info.cs_item_count_valid}}课时/共{{info.cs_item_count}}课时</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="navBar-right">
|
|
|
@@ -44,15 +44,15 @@
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <lesson-catalog :data="data.lessonCatalog" class="main-right"></lesson-catalog>
|
|
|
+ <lesson-catalog :data="lessonCatalog" :lessonCatalogEdsc="lessonCatalogEdsc" :lessonIndex="lessonIndex" :isBuy="isBuy" @getInfo="getLessonInfo" class="main-right" v-if="lessonCatalog.length>0"></lesson-catalog>
|
|
|
</div>
|
|
|
<div class="main-bottom">
|
|
|
<div class="tabs-box">
|
|
|
<a class="info-btn" :class="[infoIndex===0?'active':'']" @click="handleChangeInfo(0)">课节信息</a>
|
|
|
<a class="info-btn" :class="[infoIndex===1?'active':'']" @click="handleChangeInfo(1)">课节资源</a>
|
|
|
</div>
|
|
|
- <div class="info-detail" v-html="data.lessonInfo" v-if="infoIndex===0"></div>
|
|
|
- <resources-list :data="data.resourcesList" v-if="infoIndex===1"></resources-list>
|
|
|
+ <div class="info-detail" v-html="lessonInfo.lb_course_cs_item.intro" v-if="infoIndex===0"></div>
|
|
|
+ <resources-list :data="lessonInfo.resource_file_list" v-if="infoIndex===1"></resources-list>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -67,6 +67,7 @@ import Player from 'xgplayer';
|
|
|
import 'xgplayer/dist/index.min.css';
|
|
|
import Danmu from 'xgplayer/es/plugins/danmu'
|
|
|
import "xgplayer/es/plugins/danmu/index.css"
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
@@ -81,108 +82,29 @@ export default {
|
|
|
headerBorder: '#5C5C5C',
|
|
|
headerBg: '#1F1F1F',
|
|
|
previousPage: '课程详情',
|
|
|
- data:{
|
|
|
- navTitle:'2023 新高一阅读暑期训练营',
|
|
|
- title:'2023 新高一英语素养暑期训练营（基础级）',
|
|
|
- playsNumber: '3.2万',
|
|
|
- updateLessons: '56',
|
|
|
- totalLessons: '120',
|
|
|
- number: '1.',
|
|
|
- lessonTitle: '第一讲 英语阅读核心素养',
|
|
|
- teacher: '王琦',
|
|
|
- lessonInfo: '课节信息介绍',
|
|
|
- lessonCatalog: [
|
|
|
- {
|
|
|
- number:'1',
|
|
|
- title:'课程介绍',
|
|
|
- teacher:'王琦',
|
|
|
- length:'8分钟'
|
|
|
- },
|
|
|
- {
|
|
|
- number:'2',
|
|
|
- title:'基本阅读技能',
|
|
|
- teacher:'王琦',
|
|
|
- length:'10分钟'
|
|
|
- },
|
|
|
- {
|
|
|
- number:'3',
|
|
|
- title:'高级阅读技能',
|
|
|
- teacher:'王琦',
|
|
|
- length:'10分钟'
|
|
|
- },
|
|
|
- {
|
|
|
- number:'4',
|
|
|
- title:'主题语境·人与自然',
|
|
|
- teacher:'王琦',
|
|
|
- length:'10分钟'
|
|
|
- },
|
|
|
- {
|
|
|
- number:'5',
|
|
|
- title:'课程主题语境·人与自我介绍',
|
|
|
- teacher:'王琦',
|
|
|
- length:'14分钟'
|
|
|
- },
|
|
|
- {
|
|
|
- number:'6',
|
|
|
- title:'主题语境·人与自我',
|
|
|
- teacher:'王琦',
|
|
|
- length:'10分钟'
|
|
|
- },
|
|
|
- {
|
|
|
- number:'7',
|
|
|
- title:'主题语境·人与自我',
|
|
|
- teacher:'王琦',
|
|
|
- length:'10分钟'
|
|
|
- }
|
|
|
- ],
|
|
|
- resourcesList: [
|
|
|
- {
|
|
|
- type: 'txt',
|
|
|
- name: 'employeelist.txt'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'mp3',
|
|
|
- name: 'employeelist.mp3'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'jpg',
|
|
|
- name: 'employeelist.jpg'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'mp4',
|
|
|
- name: 'employeelist.mp4'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'zip',
|
|
|
- name: 'employeelist.zip'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'pdf',
|
|
|
- name: 'employeelist.pdf'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'doc',
|
|
|
- name: 'employeelist.doc'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'xlsx',
|
|
|
- name: 'employeelist.xlsx'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'ppt',
|
|
|
- name: 'employeelist.ppt'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'ppt',
|
|
|
- name: 'employeelist.ppt'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
player: null,
|
|
|
danmuID: 0, // 弹幕id
|
|
|
danmuValue:'', // 输入发送弹幕的值
|
|
|
isDanmu: true, // 是否开启弹幕
|
|
|
- infoIndex: 0 // 课节信息tabs
|
|
|
+ infoIndex: 0, // 课节信息tabs
|
|
|
+ courseId: this.$route.query.id?this.$route.query.id:'', // 课程id
|
|
|
+ lessonIndex: this.$route.query.index?this.$route.query.index*1:0, // 目录索引
|
|
|
+ loading: false,
|
|
|
+ lessonCatalog: [],
|
|
|
+ lessonCatalogEdsc: [],
|
|
|
+ info: {
|
|
|
+ name: '',
|
|
|
+ cs_item_count_valid: 0,
|
|
|
+ cs_item_count: 0,
|
|
|
+ },
|
|
|
+ isBuy: false,
|
|
|
+ lessonInfo: {
|
|
|
+ lb_course_cs_item: {
|
|
|
+ intro: ''
|
|
|
+ },
|
|
|
+ resource_file_list: []
|
|
|
+ },
|
|
|
+ play_total_count: null,
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -235,10 +157,134 @@ export default {
|
|
|
// 切换infotabs
|
|
|
handleChangeInfo(value){
|
|
|
this.infoIndex = value
|
|
|
+ },
|
|
|
+ // 获取课程信息
|
|
|
+ getInfo(){
|
|
|
+ this.loading = true
|
|
|
+ let MethodName = "/CourseServer/Client/LBCourseQuery/GetLBCourseInfo";
|
|
|
+ let data = null
|
|
|
+ data = {
|
|
|
+ id: this.courseId,
|
|
|
+ is_contain_cs_item: "true",
|
|
|
+ cs_item_sort_mode: "ASCE"
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ if(res.status===1){
|
|
|
+ this.info = res.lb_course
|
|
|
+ this.lessonCatalog = res.cs_item_list
|
|
|
+ this.lessonCatalog.forEach((item,index) => {
|
|
|
+ item.index = index
|
|
|
+ if(item.file_media_duration){
|
|
|
+ if(item.file_media_duration<60){
|
|
|
+ item.timeCn = '1分钟'
|
|
|
+ }else if(item.file_media_duration<600){
|
|
|
+ item.timeCn = Math.ceil(item.file_media_duration/60)+'分钟'
|
|
|
+ }else{
|
|
|
+ let first = Math.ceil(item.file_media_duration/60).toString().substring(0,Math.ceil(item.file_media_duration/60).toString().length-1)*1
|
|
|
+ let last = Math.ceil(item.file_media_duration/60).toString().substring(Math.ceil(item.file_media_duration/60).toString().length-1)*1
|
|
|
+ if(last<5){
|
|
|
+ item.timeCn = first+'0分钟'
|
|
|
+ }else{
|
|
|
+ item.timeCn = (first+1)+'0分钟'
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ item.timeCn = '-'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.lessonCatalogEdsc = JSON.parse(JSON.stringify(this.lessonCatalog)).reverse()
|
|
|
+ this.isBuy = res.buy_info.is_buy==='true'?true:false
|
|
|
+ let sales = res.play_info.play_total_count
|
|
|
+ if(sales<1000){
|
|
|
+ this.play_total_count = sales
|
|
|
+ }else if(1000<=sales&&sales<10000){
|
|
|
+ this.play_total_count = (sales/1000).toFixed(1)+'千'
|
|
|
+ }else if(10000<=sales&&sales<100000000){
|
|
|
+ this.play_total_count = (sales/10000).toFixed(1)+'万'
|
|
|
+ }else if(100000000<=sales){
|
|
|
+ this.play_total_count = (sales/100000000).toFixed(1)+'亿+'
|
|
|
+ }
|
|
|
+ this.getLessonInfo()
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取课节信息
|
|
|
+ getLessonInfo(index){
|
|
|
+ let MethodName = "/CourseServer/Client/LBCourseQuery/GetLBCourseCSItemInfo";
|
|
|
+ let data = {
|
|
|
+ id: index||index===0?this.lessonCatalog[index].id:this.lessonCatalog[this.lessonIndex].id
|
|
|
+ }
|
|
|
+ getLogin(MethodName, data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false
|
|
|
+ if(res.status===1){
|
|
|
+ this.lessonInfo = res
|
|
|
+ this.lessonIndex = index||index===0?index:this.lessonIndex
|
|
|
+ this.player = new Player({
|
|
|
+ id: 'video-box',
|
|
|
+ url: res.lb_course_cs_item.file_url,
|
|
|
+ height: '100%',
|
|
|
+ width: '100%',
|
|
|
+ cssFullscreen: false,
|
|
|
+ commonStyle:{
|
|
|
+ progressColor: 'rgba(255, 255, 255, 0.7)',
|
|
|
+ playedColor: '#0081F1',
|
|
|
+ volumeColor: '#0081F1',
|
|
|
+ sliderBtnStyle: {},
|
|
|
+ },
|
|
|
+ poster: '', // 封面图
|
|
|
+ plugins: [Danmu],
|
|
|
+ danmu: {
|
|
|
+ panel: false, // 弹幕面板
|
|
|
+ comments: [
|
|
|
+ {
|
|
|
+ duration: 15000, // 弹幕持续显示时间，毫秒(最低为5000毫秒)
|
|
|
+ id: 1, //弹幕id,需唯一
|
|
|
+ prior: false, // 弹幕优先显示，默认false
|
|
|
+ color: false, // 彩色弹幕，默认false
|
|
|
+ txt: 'item.text', // 弹幕文字内容
|
|
|
+ style: { // 弹幕自定义样式
|
|
|
+ color: 'red',
|
|
|
+ fontSize: '20px',
|
|
|
+ borderRadius: '50px',
|
|
|
+ padding: '5px 11px',
|
|
|
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ duration: 15000, // 弹幕持续显示时间，毫秒(最低为5000毫秒)
|
|
|
+ id: 2, //弹幕id,需唯一
|
|
|
+ prior: false, // 弹幕优先显示，默认false
|
|
|
+ color: true, // 彩色弹幕，默认false
|
|
|
+ txt: '222222222', // 弹幕文字内容
|
|
|
+ style: { // 弹幕自定义样式
|
|
|
+ color: 'red',
|
|
|
+ fontSize: '20px',
|
|
|
+ borderRadius: '50px',
|
|
|
+ padding: '5px 11px',
|
|
|
+ backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
+ this.getInfo()
|
|
|
if(this.config){
|
|
|
let arr = this.config.split('&&&')
|
|
|
this.LoginNavIndex = arr[0] * 1
|
|
|
@@ -249,55 +295,7 @@ export default {
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
- this.player = new Player({
|
|
|
- id: 'video-box',
|
|
|
- url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
|
|
|
- height: '100%',
|
|
|
- width: '100%',
|
|
|
- cssFullscreen: false,
|
|
|
- commonStyle:{
|
|
|
- progressColor: 'rgba(255, 255, 255, 0.7)',
|
|
|
- playedColor: '#0081F1',
|
|
|
- volumeColor: '#0081F1',
|
|
|
- sliderBtnStyle: {},
|
|
|
- },
|
|
|
- poster: require('../../assets/poster.png'), // 封面图
|
|
|
- plugins: [Danmu],
|
|
|
- danmu: {
|
|
|
- panel: false, // 弹幕面板
|
|
|
- comments: [
|
|
|
- {
|
|
|
- duration: 15000, // 弹幕持续显示时间，毫秒(最低为5000毫秒)
|
|
|
- id: 1, //弹幕id,需唯一
|
|
|
- prior: false, // 弹幕优先显示，默认false
|
|
|
- color: false, // 彩色弹幕，默认false
|
|
|
- txt: 'item.text', // 弹幕文字内容
|
|
|
- style: { // 弹幕自定义样式
|
|
|
- color: 'red',
|
|
|
- fontSize: '20px',
|
|
|
- borderRadius: '50px',
|
|
|
- padding: '5px 11px',
|
|
|
- backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- duration: 15000, // 弹幕持续显示时间，毫秒(最低为5000毫秒)
|
|
|
- id: 2, //弹幕id,需唯一
|
|
|
- prior: false, // 弹幕优先显示，默认false
|
|
|
- color: true, // 彩色弹幕，默认false
|
|
|
- txt: '222222222', // 弹幕文字内容
|
|
|
- style: { // 弹幕自定义样式
|
|
|
- color: 'red',
|
|
|
- fontSize: '20px',
|
|
|
- borderRadius: '50px',
|
|
|
- padding: '5px 11px',
|
|
|
- backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
|
|
|
- },
|
|
|
- });
|
|
|
+
|
|
|
},
|
|
|
//生命周期-创建之前
|
|
|
beforeCreated() { },
|
natasha