|
|
@@ -1,39 +1,29 @@
|
|
|
<template>
|
|
|
- <div class="video-detail">
|
|
|
+ <div class="video-detail" v-loading="loading">
|
|
|
<div class="main">
|
|
|
<div class="main-left">
|
|
|
<div class="video" id="video-box"></div>
|
|
|
<div class="mian-left-center">
|
|
|
<div class="mian-left-center-left">
|
|
|
- <h2>{{data.title}}</h2>
|
|
|
+ <h2>{{data.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="progress">已更新{{data.cs_item_count_valid}}课时/共{{data.cs_item_count}}课时</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="navBar-right">
|
|
|
- <a @click="handlelike">
|
|
|
- <svg-icon icon-class="like-line" className="icon-like"></svg-icon>
|
|
|
- <span>收藏</span>
|
|
|
- </a>
|
|
|
- <a @click="handleShare">
|
|
|
- <svg-icon icon-class="share-personal" className="icon-share"></svg-icon>
|
|
|
- <span>分享</span>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- <lesson-catalog :data="data.lessonCatalog" class="main-right"></lesson-catalog>
|
|
|
+ <lesson-catalog :data="lessonCatalog" :lessonCatalogEdsc="lessonCatalogEdsc" @getInfo="getInfo" class="main-right"></lesson-catalog>
|
|
|
</div>
|
|
|
- <div class="main-bottom">
|
|
|
+ <div class="main-bottom" v-if="info">
|
|
|
<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="info.lb_course_cs_item.intro" v-if="infoIndex===0"></div>
|
|
|
+ <resources-list :data="info.resource_file_list" v-if="infoIndex===1"></resources-list>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -45,114 +35,21 @@ import LessonCatalog from "./components/LessonCatalog.vue"
|
|
|
import ResourcesList from "./components/ResourcesList.vue"
|
|
|
import Player from 'xgplayer';
|
|
|
import 'xgplayer/dist/index.min.css';
|
|
|
+import { getLogin } from "@/api/ajax";
|
|
|
|
|
|
export default {
|
|
|
//import引入的组件需要注入到对象中才能使用
|
|
|
components: { LessonCatalog, ResourcesList},
|
|
|
- props: [],
|
|
|
+ props: ["lessonCatalog", "data", "lessonCatalogEdsc"],
|
|
|
data() {
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
- 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,
|
|
|
- infoIndex: 0 // 课节信息tabs
|
|
|
+ infoIndex: 0, // 课节信息tabs
|
|
|
+ info: null,
|
|
|
+ id: this.$route.query.id?this.$route.query.id:'',
|
|
|
+ lessonIndex: 0, // 课节索引
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
@@ -161,32 +58,47 @@ export default {
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- // 分享
|
|
|
- handleShare(){
|
|
|
-
|
|
|
- },
|
|
|
- // 收藏
|
|
|
- handlelike(){
|
|
|
-
|
|
|
- },
|
|
|
// 切换infotabs
|
|
|
handleChangeInfo(value){
|
|
|
this.infoIndex = value
|
|
|
+ },
|
|
|
+ // 获取课节信息
|
|
|
+ getInfo(index){
|
|
|
+ this.loading = true
|
|
|
+ let MethodName = "/CourseServer/Manager/LBCourseManager/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.info = 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,
|
|
|
+ poster: '', // 封面图
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
+ if(this.lessonCatalog.length>0){
|
|
|
+ this.getInfo()
|
|
|
+ }
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问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,
|
|
|
- poster: '', // 封面图
|
|
|
- });
|
|
|
+
|
|
|
},
|
|
|
//生命周期-创建之前
|
|
|
beforeCreated() { },
|
natasha
