|
@@ -8,9 +8,16 @@
|
|
|
></van-nav-bar>
|
|
|
<div class="courseContent">
|
|
|
<div class="previewImg">
|
|
|
- <video ref="vueMiniPlayer" :src="videoSrc" controls autoplay v-if="showVideo" controlsList="nodownload"></video>
|
|
|
+ <video
|
|
|
+ ref="vueMiniPlayer"
|
|
|
+ :src="videoSrc"
|
|
|
+ controls
|
|
|
+ autoplay
|
|
|
+ v-if="showVideo"
|
|
|
+ controlsList="nodownload"
|
|
|
+ ></video>
|
|
|
</div>
|
|
|
- <div class="title">
|
|
|
+ <div class="videoTitle">
|
|
|
<!-- <span>{{ courseDetail.price }}</span> -->
|
|
|
<p>{{ curTitle }}</p>
|
|
|
<!-- <i style="margin-right: .1rem;">已更新{{ courseDetail.sections.length }}节课</i>
|
|
@@ -29,8 +36,8 @@
|
|
|
class="logLi"
|
|
|
v-for="(item, index) in courseDetail.sections"
|
|
|
:key="index"
|
|
|
- @click="toSectionVidio(item,index)"
|
|
|
- :class="{active:item.active}"
|
|
|
+ @click="toSectionVidio(item, index)"
|
|
|
+ :class="{ active: item.active }"
|
|
|
>
|
|
|
<p>{{ index + 1 }}、{{ item.name }}</p>
|
|
|
</div>
|
|
@@ -56,19 +63,19 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {learnerCourseDetail,getVideoSrc} from '../api'
|
|
|
+import { learnerCourseDetail, getVideoSrc } from "../api";
|
|
|
export default {
|
|
|
name: "video",
|
|
|
data() {
|
|
|
return {
|
|
|
- showBack:false,
|
|
|
- showVideo:true,
|
|
|
+ showBack: false,
|
|
|
+ showVideo: true,
|
|
|
loading: false,
|
|
|
finished: false,
|
|
|
activeTab: 0,
|
|
|
title: "课程详情",
|
|
|
- curTitle:'',
|
|
|
- videoSrc:"",
|
|
|
+ curTitle: "",
|
|
|
+ videoSrc: "",
|
|
|
courseDetail: {
|
|
|
thumb: "",
|
|
|
name: "",
|
|
@@ -77,15 +84,15 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
},
|
|
|
- watch:{
|
|
|
- videoSrc(){
|
|
|
+ watch: {
|
|
|
+ videoSrc() {
|
|
|
this.showVideo = false;
|
|
|
- this.$nextTick(()=>{
|
|
|
+ this.$nextTick(() => {
|
|
|
this.showVideo = true;
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.$refs.vueMiniPlayer.play();//播放
|
|
|
- })
|
|
|
- })
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.vueMiniPlayer.play(); //播放
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
@@ -93,10 +100,13 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
//滚动监控
|
|
|
- scrollChange(e){
|
|
|
- if(e>60){
|
|
|
+ scrollChange(e) {
|
|
|
+ //需要滚动的界面实际长度大于整个页面长度
|
|
|
+ let allH = document.getElementsByClassName("_v-content")[0].offsetHeight + document.getElementsByClassName("van-nav-bar")[0].offsetHeight+document.getElementsByClassName("previewImg")[0].offsetHeight+document.getElementsByClassName("videoTitle")[0].offsetHeight
|
|
|
+ let canShow = allH > document.getElementsByClassName("page")[0].offsetHeight
|
|
|
+ if ( e > 40 && canShow ) {
|
|
|
this.showBack = true;
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.showBack = false;
|
|
|
}
|
|
|
},
|
|
@@ -105,32 +115,34 @@ export default {
|
|
|
this.$refs.scroller.scrollTo(0, 0, 500);
|
|
|
},
|
|
|
// 章节切换获取视频地址
|
|
|
- toSectionVidio(item,i) {
|
|
|
- this.courseDetail.sections.forEach((item,index)=>{
|
|
|
+ toSectionVidio(item, i) {
|
|
|
+ this.courseDetail.sections.forEach((item, index) => {
|
|
|
item.active = false;
|
|
|
- if(index == i){
|
|
|
+ if (index == i) {
|
|
|
item.active = true;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
let data = {
|
|
|
- index: i,
|
|
|
- link: item.link
|
|
|
+ index: i,
|
|
|
+ link: item.link
|
|
|
};
|
|
|
- sessionStorage.setItem('vd_info',JSON.stringify(data))
|
|
|
- this.getVideoLink(item.link)
|
|
|
+ sessionStorage.setItem("vd_info", JSON.stringify(data));
|
|
|
+ this.getVideoLink(item.link);
|
|
|
// this.videoSrc = this.courseDetail.sections[index].link
|
|
|
},
|
|
|
// 获取视频地址
|
|
|
- getVideoLink(link){
|
|
|
+ getVideoLink(link) {
|
|
|
let data = {
|
|
|
- subjectId:this.$route.params.id,
|
|
|
- link:link
|
|
|
- }
|
|
|
- getVideoSrc(data).then(res=>{
|
|
|
- this.videoSrc = res
|
|
|
- }).catch(err=>{
|
|
|
- this.$router.push('/courseError')
|
|
|
- })
|
|
|
+ subjectId: this.$route.params.id,
|
|
|
+ link: link
|
|
|
+ };
|
|
|
+ getVideoSrc(data)
|
|
|
+ .then(res => {
|
|
|
+ this.videoSrc = res;
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$router.push("/courseError");
|
|
|
+ });
|
|
|
},
|
|
|
// 返回
|
|
|
onClickLeft() {
|
|
@@ -139,29 +151,34 @@ export default {
|
|
|
// 初始化
|
|
|
init() {
|
|
|
this.courseId = this.$route.params.id;
|
|
|
- this.getVideoLink(JSON.parse(sessionStorage.getItem('vd_info')).link)
|
|
|
- this.getDetail()
|
|
|
+ this.getVideoLink(JSON.parse(sessionStorage.getItem("vd_info")).link);
|
|
|
+ this.getDetail();
|
|
|
},
|
|
|
// 获取课程详情
|
|
|
- getDetail(){
|
|
|
- learnerCourseDetail(this.courseId).then(res=>{
|
|
|
- this.title = res.name
|
|
|
- document.title = res.name
|
|
|
- res.sections.forEach((item,index)=>{
|
|
|
+ getDetail() {
|
|
|
+ learnerCourseDetail(this.courseId).then(res => {
|
|
|
+ this.title = res.name;
|
|
|
+ document.title = res.name;
|
|
|
+ res.sections.forEach((item, index) => {
|
|
|
item.active = false;
|
|
|
- })
|
|
|
- if(JSON.parse(sessionStorage.getItem('vd_info'))){
|
|
|
- res.sections[JSON.parse(sessionStorage.getItem('vd_info')).index].active = true;
|
|
|
- this.curTitle = res.sections[JSON.parse(sessionStorage.getItem('vd_info')).index].name
|
|
|
+ });
|
|
|
+ if (JSON.parse(sessionStorage.getItem("vd_info"))) {
|
|
|
+ res.sections[
|
|
|
+ JSON.parse(sessionStorage.getItem("vd_info")).index
|
|
|
+ ].active = true;
|
|
|
+ this.curTitle =
|
|
|
+ res.sections[
|
|
|
+ JSON.parse(sessionStorage.getItem("vd_info")).index
|
|
|
+ ].name;
|
|
|
}
|
|
|
this.courseDetail = res;
|
|
|
- })
|
|
|
- },
|
|
|
- },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
-@import url('../utils/navBar.scss');
|
|
|
+@import url("../utils/navBar.scss");
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
@@ -183,21 +200,21 @@ img {
|
|
|
height: 4rem;
|
|
|
}
|
|
|
}
|
|
|
- .title {
|
|
|
- padding: .2rem;
|
|
|
- background-color: #FFF;
|
|
|
- margin-bottom: .2rem;
|
|
|
- span{
|
|
|
- font-size: .35rem;
|
|
|
+ .videoTitle {
|
|
|
+ padding: 0.2rem;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 0.2rem;
|
|
|
+ span {
|
|
|
+ font-size: 0.35rem;
|
|
|
font-weight: 600;
|
|
|
color: red;
|
|
|
- line-height: .8rem;
|
|
|
+ line-height: 0.8rem;
|
|
|
}
|
|
|
p {
|
|
|
font-size: 0.32rem;
|
|
|
font-weight: 600;
|
|
|
color: #000;
|
|
|
- line-height: .4rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
// margin-bottom: .2rem;
|
|
|
/* white-space: pre-wrap; */
|
|
|
/* overflow: hidden; */
|
|
@@ -207,15 +224,15 @@ img {
|
|
|
width: 100%;
|
|
|
word-wrap: break-word;
|
|
|
}
|
|
|
- i{
|
|
|
- font-size: .22rem;
|
|
|
+ i {
|
|
|
+ font-size: 0.22rem;
|
|
|
color: #888;
|
|
|
- line-height: .3rem;
|
|
|
+ line-height: 0.3rem;
|
|
|
font-style: normal;
|
|
|
}
|
|
|
}
|
|
|
.tabs {
|
|
|
- height: calc(100vh - 6.25rem);
|
|
|
+ height: calc(100vh - 6rem);
|
|
|
position: relative;
|
|
|
.toTop {
|
|
|
width: 1rem;
|
|
@@ -241,7 +258,7 @@ img {
|
|
|
}
|
|
|
}
|
|
|
.catelog {
|
|
|
- background: #FFF;
|
|
|
+ background: #fff;
|
|
|
padding: 0.2rem;
|
|
|
margin-top: 1px;
|
|
|
border-top: 1px solid #efefef;
|
|
@@ -253,7 +270,7 @@ img {
|
|
|
font-size: 0.24rem;
|
|
|
color: #666;
|
|
|
line-height: 3;
|
|
|
- margin-left: .1rem;
|
|
|
+ margin-left: 0.1rem;
|
|
|
}
|
|
|
}
|
|
|
.logConetent {
|
|
@@ -262,14 +279,14 @@ img {
|
|
|
border-radius: 0.1rem;
|
|
|
padding: 0 0.2rem;
|
|
|
margin-bottom: 0.15rem;
|
|
|
- &.active{
|
|
|
+ &.active {
|
|
|
box-shadow: 0.02rem 0.08rem #ddd;
|
|
|
- p{
|
|
|
- color:#26a2ff;
|
|
|
+ p {
|
|
|
+ color: #26a2ff;
|
|
|
}
|
|
|
}
|
|
|
p {
|
|
|
- padding: .2rem 0;
|
|
|
+ padding: 0.2rem 0;
|
|
|
font-size: 0.3rem;
|
|
|
color: #000;
|
|
|
line-height: 1.3;
|