|
|
@@ -1,218 +1,310 @@
|
|
|
<template>
|
|
|
- <div class="page">
|
|
|
- <van-nav-bar
|
|
|
- :title="title"
|
|
|
- left-text="返回"
|
|
|
- left-arrow
|
|
|
- @click-left="onClickLeft"
|
|
|
- ></van-nav-bar>
|
|
|
- <div class="courseContent">
|
|
|
- <div class="previewImg">
|
|
|
- <video ref="vueMiniPlayer" :src="videoSrc" controls autoplay v-if="showVideo" controlsList="nodownload"></video>
|
|
|
- </div>
|
|
|
- <div class="title">
|
|
|
- <p>{{ video_info.name }}</p>
|
|
|
- </div>
|
|
|
+ <div class="page">
|
|
|
+ <van-nav-bar :title="title" @click-left="onClickLeft">
|
|
|
+ <template #left>
|
|
|
+ <template v-if="$route.query && $route.query.code && $route.query.code == 2">
|
|
|
+ <van-icon name="wap-home-o" />
|
|
|
+ <span style="font-size: .32rem;color: #FFF;">首页</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <van-icon name="arrow-left" />
|
|
|
+ <span style="font-size: .32rem;color: #FFF;">返回</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <div class="courseContent">
|
|
|
+ <div class="previewImg">
|
|
|
+ <video
|
|
|
+ ref="vueMiniPlayer"
|
|
|
+ :src="videoSrc"
|
|
|
+ controls
|
|
|
+ autoplay
|
|
|
+ v-if="showVideo"
|
|
|
+ controlsList="nodownload"
|
|
|
+ ></video>
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ <p>{{ video_info.name }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script>
|
|
|
- import {learnerCourseDetail,getFreeVideoSrc} from '../api'
|
|
|
- import {setWxConfig} from "../utils"
|
|
|
- export default {
|
|
|
- name: "video",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- video_info:{
|
|
|
- name:'免费课程'
|
|
|
- },
|
|
|
- showVideo:true,
|
|
|
- title: "免费课程",
|
|
|
- videoSrc:"",
|
|
|
- courseDetail: {
|
|
|
- thumb: "",
|
|
|
- name: "",
|
|
|
- images: [],
|
|
|
- sections: []
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- watch:{
|
|
|
- videoSrc(){
|
|
|
- this.showVideo = false;
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.showVideo = true;
|
|
|
- this.$nextTick(()=>{
|
|
|
- this.$refs.vueMiniPlayer.play();//播放
|
|
|
- })
|
|
|
- })
|
|
|
+ <div class="otherCourse">
|
|
|
+ <scroller :isInitRefresh="false" ref="recordScroller">
|
|
|
+ <div class="otherContent">
|
|
|
+ <div class="tit">
|
|
|
+ <span>推荐课程</span>
|
|
|
+ </div>
|
|
|
+ <courseList :dataList="courseList" :showNum="4"></courseList>
|
|
|
+ </div>
|
|
|
+ </scroller>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { learnerCourseDetail, getFreeVideoSrc,getUserAllCourseList } from "../api";
|
|
|
+import courseList from "../components/courseList.vue";
|
|
|
+import { setWxConfig } from "../utils";
|
|
|
+export default {
|
|
|
+ name: "video",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ video_info: {
|
|
|
+ name: "今日更新"
|
|
|
+ },
|
|
|
+ showVideo: true,
|
|
|
+ title: "今日更新",
|
|
|
+ videoSrc: "",
|
|
|
+ courseDetail: {
|
|
|
+ thumb: "",
|
|
|
+ name: "",
|
|
|
+ images: [],
|
|
|
+ sections: []
|
|
|
+ },
|
|
|
+ courseList: [],
|
|
|
+ page:{
|
|
|
+ cur:1,
|
|
|
+ size:5,
|
|
|
+ total:0
|
|
|
}
|
|
|
- },
|
|
|
- activated(){
|
|
|
- this.init();
|
|
|
- },
|
|
|
- created() {
|
|
|
- // this.init();
|
|
|
- if(this.$isWx){
|
|
|
- setWxConfig();
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: { courseList },
|
|
|
+ watch: {
|
|
|
+ videoSrc() {
|
|
|
+ this.showVideo = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.showVideo = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.vueMiniPlayer.play(); //播放
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.init();
|
|
|
+ if (this.$isWx) {
|
|
|
+ let info = {
|
|
|
+ title:this.$route.query.name,// 分享标题
|
|
|
+ desc:'听完觉得确实不错，忍不住要推荐~',// 分享描述
|
|
|
+ link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
|
+ imgUrl: 'https://oa.g107.com/m/static/images/logo.png', // 分享图标
|
|
|
+ }
|
|
|
+ if(this.$route.query&&this.$route.query.code){
|
|
|
+ let newUrl = this.urlDelP(window.location.href,'code')
|
|
|
+ info.link = newUrl.includes('?')?`${newUrl}&code=2`:`${newUrl}?code=2`
|
|
|
+ }else{
|
|
|
+ info.link = window.location.href.includes('?')?`${window.location.href}&code=2`:`${window.location.href}?code=2`
|
|
|
}
|
|
|
+ setWxConfig(info);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //删除URL的指定参数
|
|
|
+ urlDelP(url,name){
|
|
|
+ var urlArr = url.split('?');
|
|
|
+ if(urlArr.length>1 && urlArr[1].indexOf(name)>-1){
|
|
|
+ var query = urlArr[1];
|
|
|
+ var obj = {}
|
|
|
+ var arr = query.split("&");
|
|
|
+ for (var i = 0; i < arr.length; i++) {
|
|
|
+ arr[i] = arr[i].split("=");
|
|
|
+ obj[arr[i][0]] = arr[i][1];
|
|
|
+ };
|
|
|
+ delete obj[name];
|
|
|
+ var urlte = urlArr[0] +'?'+ JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");
|
|
|
+ return urlte;
|
|
|
+ }else{
|
|
|
+ return url;
|
|
|
+ };
|
|
|
},
|
|
|
- methods: {
|
|
|
- // 章节切换获取视频地址
|
|
|
- toSectionVidio(item,i) {
|
|
|
- this.courseDetail.sections.forEach((item,index)=>{
|
|
|
- item.active = false;
|
|
|
- if(index == i){
|
|
|
- item.active = true;
|
|
|
- }
|
|
|
- })
|
|
|
- let data = {
|
|
|
- index: i,
|
|
|
- link: item.link
|
|
|
- };
|
|
|
- sessionStorage.setItem('vd_info',JSON.stringify(data))
|
|
|
- this.getVideoLink(item.link)
|
|
|
- // this.videoSrc = this.courseDetail.sections[index].link
|
|
|
- },
|
|
|
- // 获取视频地址
|
|
|
- getVideoLink(link){
|
|
|
- let data = {
|
|
|
- subjectId:this.$route.params.id,
|
|
|
- link:link
|
|
|
+ // 获取所有课程列表
|
|
|
+ getList() {
|
|
|
+ let data = {
|
|
|
+ page: this.page.cur,
|
|
|
+ pageSize: this.page.size,
|
|
|
+ enable: 1
|
|
|
+ };
|
|
|
+ getUserAllCourseList(data).then(res => {
|
|
|
+ let list = [];
|
|
|
+ res.list.forEach(item => {
|
|
|
+ let data = {
|
|
|
+ subjectName: item.name,
|
|
|
+ subjectId: item.id,
|
|
|
+ subjectPrice: item.price,
|
|
|
+ subjectThumb: item.thumb,
|
|
|
+ subjectEnable: item.enable,
|
|
|
+ sectionsNum: item.sectionsNum,
|
|
|
+ clickNum: Number(item.baseClick) + Number(item.clickNum)
|
|
|
+ };
|
|
|
+ list.push(data);
|
|
|
+ });
|
|
|
+ this.courseList = list;
|
|
|
+ this.page.total = res.total;
|
|
|
+ this.page.cur = res.current;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 章节切换获取视频地址
|
|
|
+ toSectionVidio(item, i) {
|
|
|
+ this.courseDetail.sections.forEach((item, index) => {
|
|
|
+ item.active = false;
|
|
|
+ if (index == i) {
|
|
|
+ item.active = true;
|
|
|
}
|
|
|
- getFreeVideoSrc(data).then(res=>{
|
|
|
- this.videoSrc = res
|
|
|
- }).catch(err=>{
|
|
|
- this.$router.push('/courseError')
|
|
|
+ });
|
|
|
+ let data = {
|
|
|
+ index: i,
|
|
|
+ link: item.link
|
|
|
+ };
|
|
|
+ sessionStorage.setItem("vd_info", JSON.stringify(data));
|
|
|
+ this.getVideoLink(item.link);
|
|
|
+ // this.videoSrc = this.courseDetail.sections[index].link
|
|
|
+ },
|
|
|
+ // 获取视频地址
|
|
|
+ getVideoLink(link) {
|
|
|
+ let data = {
|
|
|
+ subjectId: this.$route.params.id,
|
|
|
+ link: link
|
|
|
+ };
|
|
|
+ getFreeVideoSrc(data)
|
|
|
+ .then(res => {
|
|
|
+ this.videoSrc = res;
|
|
|
})
|
|
|
- },
|
|
|
- // 返回
|
|
|
- onClickLeft() {
|
|
|
+ .catch(err => {
|
|
|
+ this.$router.push("/courseError");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 返回
|
|
|
+ onClickLeft() {
|
|
|
+ // this.$router.go(-1);
|
|
|
+ if (this.$route.query && this.$route.query.code && this.$route.query.code == 2) {
|
|
|
+ this.$router.push("/courseHome");
|
|
|
+ } else {
|
|
|
this.$router.go(-1);
|
|
|
- },
|
|
|
- // 初始化
|
|
|
- init() {
|
|
|
- if(this.$route.query){
|
|
|
- this.video_info = this.$route.query;
|
|
|
- this.getVideoLink(this.video_info.link)
|
|
|
- }else{
|
|
|
- this.$toast.fail('视频似乎有点问题')
|
|
|
- setTimeout(() => {
|
|
|
- this.$router.go(-1)
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
- };
|
|
|
- </script>
|
|
|
- <style scoped lang="scss">
|
|
|
- @import url('../utils/navBar.scss');
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- img {
|
|
|
- display: block;
|
|
|
+ // 初始化
|
|
|
+ init() {
|
|
|
+ if (this.$route.query) {
|
|
|
+ this.video_info = this.$route.query;
|
|
|
+ this.getVideoLink(this.video_info.link);
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ this.$toast.fail("视频似乎有点问题");
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.go(-1);
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .page {
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+@import url("../utils/navBar.scss");
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+img {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.page {
|
|
|
+ box-sizing: border-box;
|
|
|
+ .courseContent {
|
|
|
+ padding: 0.3rem 0.2rem 0;
|
|
|
background-color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- .courseContent {
|
|
|
- padding: 0 0.2rem;
|
|
|
- margin-top: 0.3rem;
|
|
|
- .previewImg {
|
|
|
- border-radius: 0.1rem;
|
|
|
- overflow: hidden;
|
|
|
+ .previewImg {
|
|
|
+ border-radius: 0.1rem;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ // height: 4rem;
|
|
|
+ video {
|
|
|
width: 100%;
|
|
|
- height: 4rem;
|
|
|
- video {
|
|
|
- width: 100%;
|
|
|
- height: 4rem;
|
|
|
- }
|
|
|
+ // height: 4rem;
|
|
|
}
|
|
|
- .title {
|
|
|
- p {
|
|
|
- font-size: 0.32rem;
|
|
|
- font-weight: 600;
|
|
|
- color: #000;
|
|
|
- line-height: .5rem;
|
|
|
- // overflow: hidden;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- // white-space: nowrap;
|
|
|
- // word-break: break-all;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ padding: 0.2rem 0;
|
|
|
+ p {
|
|
|
+ font-size: 0.32rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000;
|
|
|
+ line-height: 0.5rem;
|
|
|
+ // overflow: hidden;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ // white-space: nowrap;
|
|
|
+ // word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs {
|
|
|
+ height: calc(100vh - 6.25rem);
|
|
|
+ position: relative;
|
|
|
+ .images {
|
|
|
+ margin-top: 0.1rem;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .tabs {
|
|
|
- height: calc(100vh - 6.25rem);
|
|
|
- position: relative;
|
|
|
- .images {
|
|
|
- margin-top: 0.1rem;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
+ .catelog {
|
|
|
+ margin-top: 1px;
|
|
|
+ border-top: 1px solid #efefef;
|
|
|
+ .sup {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ font-size: 0.24rem;
|
|
|
+ color: #666;
|
|
|
+ line-height: 3;
|
|
|
}
|
|
|
}
|
|
|
- .catelog {
|
|
|
- margin-top: 1px;
|
|
|
- border-top: 1px solid #efefef;
|
|
|
- .sup {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- span {
|
|
|
- font-size: 0.24rem;
|
|
|
- color: #666;
|
|
|
- line-height: 3;
|
|
|
+ .logConetent {
|
|
|
+ .logLi {
|
|
|
+ border: 1px solid #efefef;
|
|
|
+ border-radius: 0.1rem;
|
|
|
+ padding: 0 0.2rem;
|
|
|
+ margin-bottom: 0.15rem;
|
|
|
+ p {
|
|
|
+ padding: 0.2rem 0;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ color: #000;
|
|
|
+ line-height: 1.3;
|
|
|
+ // overflow: hidden;
|
|
|
+ // text-overflow: ellipsis;
|
|
|
+ // white-space: nowrap;
|
|
|
+ // word-break: break-all;
|
|
|
}
|
|
|
- }
|
|
|
- .logConetent {
|
|
|
- .logLi {
|
|
|
- border: 1px solid #efefef;
|
|
|
- border-radius: 0.1rem;
|
|
|
- padding: 0 0.2rem;
|
|
|
- margin-bottom: 0.15rem;
|
|
|
+ &.active {
|
|
|
+ box-shadow: 1px 4px #ddd;
|
|
|
p {
|
|
|
- padding: .2rem 0;
|
|
|
- font-size: 0.3rem;
|
|
|
- color: #000;
|
|
|
- line-height: 1.3;
|
|
|
- // overflow: hidden;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- // white-space: nowrap;
|
|
|
- // word-break: break-all;
|
|
|
- }
|
|
|
- &.active{
|
|
|
- box-shadow: 1px 4px #ddd;
|
|
|
- p{
|
|
|
- color: #26A2FF;
|
|
|
- }
|
|
|
+ color: #26a2ff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .getCourse {
|
|
|
- position: absolute;
|
|
|
- bottom: 0.1rem;
|
|
|
- left: 0.1rem;
|
|
|
- width: calc(100% - 0.2rem);
|
|
|
- .getBtn {
|
|
|
- width: 100%;
|
|
|
- background-color: #26A2FF;
|
|
|
- color: #fff;
|
|
|
- // animation: getFire 3s infinite linear;
|
|
|
- border-radius: .1rem;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
- @keyframes getFire {
|
|
|
- 0% {
|
|
|
- transform: scale(0.95);
|
|
|
+ .otherCourse {
|
|
|
+ height: calc(100vh - 6.3rem);
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 0.2rem;
|
|
|
+ .tit {
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ font-size: 0.32rem;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 0.6rem;
|
|
|
+ }
|
|
|
}
|
|
|
- 100% {
|
|
|
- transform: scale(1.05);
|
|
|
+ .otherContent {
|
|
|
+ padding: 0 0.2rem;
|
|
|
}
|
|
|
}
|
|
|
- </style>
|
|
|
-
|
|
|
+}
|
|
|
+</style>
|
guojy
