mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-09 10:56:47 +08:00
提交修改
This commit is contained in:
daihh
@@ -5,8 +5,117 @@
|
||||
<u-toast ref="messager"></u-toast>
|
||||
<page-title :showBack="true">{{courseInfo.name}}</page-title>
|
||||
<view class="playbox"><!--内容播放区域-->
|
||||
<view style="min-height: 400upx;">
|
||||
内容插入区域
|
||||
<view style="min-height: 400upx;" >
|
||||
<view v-if="curContent.contentType==10" >
|
||||
<!--视频-->
|
||||
<view style="position: relative;">
|
||||
<video id="myVideo"
|
||||
@touchend="doubleClickVideo"
|
||||
:src="fileBaseUrl+curriculumData.url"
|
||||
controls
|
||||
:enable-play-gesture="true"
|
||||
:initial-time="curContent.lastStudyTime"
|
||||
@play="onPlayerPlay"
|
||||
@pause="onPlayerPause"
|
||||
@ended="onPlayerEnded"
|
||||
@timeupdate="onPlayerPlaying"
|
||||
@fullscreenchange="onFullScreen"
|
||||
style="width: 100%; object-fit: fill">
|
||||
</video>
|
||||
<!--倍速度-->
|
||||
<view id="myVideoSpeed" class="player-controls-btn cursor-pointer btn-speed">
|
||||
<view @click="showSpeedCtrl">{{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}}</view>
|
||||
<view class="speed-control" v-if="speedListShow">
|
||||
<view class="speed-control-list">
|
||||
<view class="li"
|
||||
v-for="item in speedList"
|
||||
:key="item"
|
||||
@click="changeSpeed(item)"
|
||||
:data-value="item"
|
||||
:class="{'current': videoSpeed === Number(item)}">
|
||||
{{ item }}x
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="player-box" v-if="playerBoxShow">
|
||||
<view class="player-praise">
|
||||
<view @click="praiseContent" style="cursor: pointer;">
|
||||
<image class="icon-small" v-if="isPraise" src="/static/images/icon/praise-active.png" />
|
||||
<image class="icon-small" v-else src="/static/images/icon/praise1.png" />
|
||||
<!-- {{ courseInfo.praises }} -->
|
||||
<view style="color:#fff;cursor: pointer;">赞</view>
|
||||
</view>
|
||||
<view style="margin-left: 15px;cursor: pointer;" @click="treadContent">
|
||||
<image class="icon-small" v-if="isTrample" src="/static/images/icon/trample-active.png" />
|
||||
<image class="icon-small" v-else src="/static/images/icon/trample.png" />
|
||||
<!-- {{ courseInfo.trampleCount }} -->
|
||||
<view style="color:#fff;cursor: pointer;">踩</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!scoreInfo.has" class="player-rate">
|
||||
<u-rate v-model="scoreInfo.score" active-color="#f7ba2a" text-color="#ff9900" score-template="{value}" void-color="#fff" @change="addScore"></u-rate>
|
||||
</view>
|
||||
<view v-if="scoreInfo.has" style="padding-top: 5px;display: flex;">
|
||||
<view class="player-rate" style="padding-left: 5px;">
|
||||
<!-- <u-rate active-color="#f7ba2a" readonly v-model="courseInfo.score" :allow-half="true" ></u-rate> -->
|
||||
<u-rate readonly :count="5" active-color="#f7ba2a" v-model="scoreInfo.score"></u-rate>
|
||||
</view>
|
||||
<view class="score-text" style="margin-top:20px">
|
||||
<text style="color:#ffb30f;">{{ toScore(scoreInfo.score) }}</text>
|
||||
<text style="font-size: 12px;color: #fff">分</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!---->
|
||||
<view v-if="curContent.contentType==20">
|
||||
<!--音频播放-->
|
||||
<view style="text-align: center;padding-top: 40px;background-color: #FFFFFF;">
|
||||
<audio-player
|
||||
:src="fileBaseUrl+curriculumData.url"
|
||||
:name="curContent.contentName"
|
||||
:drag="curriculumData.isDrag"
|
||||
@onPlay="audioPlay"
|
||||
@onPause="audioPause"
|
||||
@onPlaying="audioPlaying"
|
||||
@onEnded="audioEnd">
|
||||
</audio-player>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="curContent.contentType==30">
|
||||
<image :src="fileBaseUrl+curContent.content" style="width: 100%;"></image>
|
||||
</view>
|
||||
<view v-if="curContent.contentType==40">
|
||||
<!--pdf文档-->
|
||||
<view style="min-height: 500px;padding-top: 200upx;position: relative;">
|
||||
<pdf-preview v-if="curContent.content && curContent.content!=''" :src="curContent.content ? fileBaseUrl+curContent.content : ''"></pdf-preview>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="curContent.contentType==41">
|
||||
<view style="padding: 15px;text-indent:40px;line-height: 28px;position: relative;">
|
||||
<u-parse :content="curContent.content"></u-parse>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="curContent.contentType==52">
|
||||
<!--外连接-->
|
||||
<view v-if="conLink.url!=''" style="min-height: 400px;position: relative;">
|
||||
<web-view :src="conLink.url"></web-view>
|
||||
</view>
|
||||
</view>
|
||||
<!--作业-->
|
||||
<view v-if="curContent.contentType==60">
|
||||
<course-homework :content="curContent" :studyId="studyId"></course-homework>
|
||||
</view>
|
||||
<!--考试-->
|
||||
<view v-if="curContent.contentType==61">
|
||||
<course-exam :courseType="courseInfo.type" :content="curContent" :studyId="studyId"></course-exam>
|
||||
</view>
|
||||
<!--评估-->
|
||||
<view v-if="curContent.contentType==62">
|
||||
<course-assess :content="curContent" :studyId="studyId"></course-assess>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentbox">
|
||||
@@ -61,7 +170,9 @@
|
||||
<view class="citembox1">
|
||||
<view v-for="(con,conIdx) in contentList" :key="conIdx" class="citembox1-item">
|
||||
<view class="citem">
|
||||
<view class="citem-body">{{con.contentName}} </view>
|
||||
<view class="citem-body" :class="{'box-studying':con.id==curContent.id}">
|
||||
<text :class="{'color-studying':con.id==curContent.id}">{{con.contentName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -70,7 +181,9 @@
|
||||
<view class="citembox1">
|
||||
<view v-for="(con,conIdx) in scrollList" :key="conIdx" class="citembox1-item">
|
||||
<view class="citem">
|
||||
<view class="citem-body">{{con.contentName}} </view>
|
||||
<view class="citem-body" :class="{'box-studying':con.id==curContent.id}">
|
||||
<text :class="{'color-studying':con.id==curContent.id}">{{con.contentName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -81,9 +194,9 @@
|
||||
<view v-if="scrollItemWidth>0" class="main-cata-active">
|
||||
<scroll-view scroll-x :scroll-y="false" style="min-height:180upx;white-space: nowrap;overflow: hidden;" :scroll-left="scrollInfo.scrollLeft" @scroll="scrollHandler">
|
||||
<!-- <view class="mycrollcontent" style="display: flex;justify-content:flex-start;"> -->
|
||||
<view v-for="(con,conIdx) in contentList" :key="conIdx" style="display: inline-block;" :id="con.id" @click="playContent('',con,conIdx,0)">
|
||||
<view v-for="(con,conIdx) in contentList" :key="conIdx" style="display: inline-block;" :id="con.id" @click="playContent(con,conIdx,0)">
|
||||
<!---->
|
||||
<view :style="{width:scrollItemWidth+'px'}" class="scroll-item" :class="{'studying':curContent.id==con.id}">
|
||||
<view :style="{width:scrollItemWidth+'px'}" class="scroll-item" :class="{'box-studying':curContent.id==con.id}">
|
||||
<view class="scroll-item-con">
|
||||
<view class="scroll-item-name">
|
||||
{{con.contentName}}
|
||||
@@ -109,7 +222,7 @@
|
||||
<view v-if="scrollItemWidth>0" class="main-cata-active">
|
||||
<scroll-view scroll-x :scroll-y="false" style="height:115px;white-space: nowrap;overflow: hidden;" :scroll-left="scrollInfo.scrollLeft" @scroll="scrollHandler">
|
||||
<!-- <view class="mycrollcontent" style="display: flex;justify-content:flex-start;"> -->
|
||||
<view v-for="(con,conIdx) in scrollList" :key="conIdx" style="display: inline-block;" :id="con.id" @click="playContent(con.cataName,con,conIdx,0)">
|
||||
<view v-for="(con,conIdx) in scrollList" :key="conIdx" style="display: inline-block;" :id="con.id" @click="playContent(con,conIdx,0)">
|
||||
<!---->
|
||||
<view :style="{width:scrollItemWidth+'px'}" class="scroll-item" :class="{'studying':curContent.id==con.id}">
|
||||
<view class="scroll-item-sec">{{con.cataName}}
|
||||
@@ -181,15 +294,15 @@
|
||||
<!-- <text>{{catIdx+1}}, </text> -->
|
||||
<text class="text-ellipsis">{{cata.section.name}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text v-if="cata.section.status==1" class="status-tag tag-nostart" style="font-size: 14px;">未开始</text>
|
||||
<text v-if="cata.section.status==2" class="status-tag tag-studying" style="font-size: 14px;">进行中</text>
|
||||
<text v-if="cata.section.status==9" class="status-tag tag-finish" style="font-size: 14px;">已完成</text>
|
||||
<view :class="{'color-studying':cata.section.status==2}">
|
||||
<text v-if="cata.section.status==1" style="font-size: 14px;">未开始</text>
|
||||
<text v-if="cata.section.status==2" style="font-size: 14px;">进行中</text>
|
||||
<text v-if="cata.section.status==9" style="font-size: 14px;">已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<view >
|
||||
<view v-for="(con,conIdx) in cata.children" :key="conIdx" class="catalog-con" @click="playContent(cata.section,con,conIdx,catIdx)">
|
||||
<view class="catalog-con-name" :class="{'studying':curContent.id==con.id}">
|
||||
<view v-for="(con,conIdx) in cata.children" :key="conIdx" class="catalog-con" @click="playContent(con,conIdx,catIdx)">
|
||||
<view class="catalog-con-name" :class="{'color-studying':curContent.id==con.id}">
|
||||
<!-- <text>{{catIdx+1}}.{{conIdx+1}}, </text> -->
|
||||
<!-- <text class="square-border">{{getConType(con.contentType)}}</text> -->
|
||||
<text class="text-ellipsis" style="font-size: 14px;">{{con.contentName}}</text>
|
||||
@@ -205,8 +318,8 @@
|
||||
</view>
|
||||
<view v-else class="catalog">
|
||||
<view >
|
||||
<view v-for="(con,conIdx) in cata.contentList" :key="conIdx" class="catalog-con" @click="playContent(cata.section,con,conIdx,catIdx)">
|
||||
<view class="catalog-con-name" :class="{'studying':curContent.id==con.id}">
|
||||
<view v-for="(con,conIdx) in contentList" :key="conIdx" class="catalog-con" @click="playContent(con,conIdx,catIdx)">
|
||||
<view class="catalog-con-name" :class="{'color-studying':curContent.id==con.id}">
|
||||
<!-- <text>{{catIdx+1}}.{{conIdx+1}}, </text> -->
|
||||
<!-- <text class="square-border">{{getConType(con.contentType)}}</text> -->
|
||||
<text class="text-ellipsis" style="font-size: 14px;">{{con.contentName}}</text>
|
||||
@@ -254,6 +367,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<interact-share ref="comShare" :data="courseInfo"></interact-share>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -512,24 +626,19 @@
|
||||
})
|
||||
});
|
||||
//设置正在学习的章节
|
||||
if(showConId==''){
|
||||
if(this.curContent.studyItemId){
|
||||
this.playContent(this.curContent,0);
|
||||
//this.curSection=this.sectionList[0];
|
||||
}else{
|
||||
this.curContent=this.contentList[0];
|
||||
this.curSection=this.sectionList[0];
|
||||
//要不要在这里处理？
|
||||
if(this.curContent.contentType==10 || this.curContent.contentType==20){
|
||||
if(this.contentList[0].content.startsWith('\{')){
|
||||
this.curriculumData=JSON.parse(this.contentList[0].content);
|
||||
}else{
|
||||
this.curriculumData.url=this.contentList[0].content;
|
||||
}
|
||||
}
|
||||
|
||||
this.playContent(this.curContent,0);
|
||||
}
|
||||
uni.hideLoading();
|
||||
|
||||
});
|
||||
},
|
||||
playContent(cata,con,conIndex,catIndex){
|
||||
playContent(con,conIndex,catIndex){
|
||||
//对于需要控制学习顺序的
|
||||
if(conIndex!=undefined && catIndex!=undefined) {
|
||||
if(this.courseInfo.orderStudy) {
|
||||
let hasIndex=-1;
|
||||
@@ -584,7 +693,6 @@
|
||||
this.curriculumData.url=con.content;
|
||||
}
|
||||
}
|
||||
//this.curSection=cata;
|
||||
this.curContent=con;
|
||||
this.catalogShow=false;
|
||||
this.scoreInfo.itemId=con.id;
|
||||
@@ -734,27 +842,35 @@
|
||||
this.scoreInfo.dlgShow=false;
|
||||
return;
|
||||
}
|
||||
let postData={
|
||||
courseId:this.courseInfo.id,
|
||||
studyId:this.studyId,
|
||||
score:this.scoreInfo.score
|
||||
}
|
||||
if(this.scoreInfo.score>0){
|
||||
apiCourseGrade.grade(postData).then(rs=>{
|
||||
if(rs.status==200){
|
||||
this.scoreInfo.dlgShow=false;
|
||||
this.scoreInfo.has=true;
|
||||
this.$refs.messager.show({message:'评分成功，谢谢您的评分',type:'success'});
|
||||
}else{
|
||||
this.$refs.messager.show({message:'评分分处理失败，请稍后再试',type:'error'});
|
||||
}
|
||||
});
|
||||
}
|
||||
let postData={
|
||||
courseId:this.courseInfo.id,
|
||||
studyId:this.studyId,
|
||||
score:this.scoreInfo.score
|
||||
}
|
||||
if(this.scoreInfo.score>0){
|
||||
apiCourseGrade.grade(postData).then(rs=>{
|
||||
if(rs.status==200){
|
||||
this.scoreInfo.dlgShow=false;
|
||||
this.scoreInfo.has=true;
|
||||
this.$refs.messager.show({message:'评分成功，谢谢您的评分',type:'success'});
|
||||
}else{
|
||||
this.$refs.messager.show({message:'评分分处理失败，请稍后再试',type:'error'});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
openComment(){
|
||||
//打开评论窗口，调用组件内事件
|
||||
this.$refs.fiexdbar.openInput();
|
||||
},
|
||||
refreshComments(){
|
||||
this.$refs.comments.loadData(false);
|
||||
},
|
||||
openShare(){
|
||||
//console.log(this.$refs.fiexdbar,'this.$refs.fiexdbar');
|
||||
//因为开始是v-if控制的，所以这里获取不到，必须显示时才会获取到，所以需要单独的弄一个分享组件
|
||||
this.$refs.fiexdbar.addShare();
|
||||
this.$refs.comShare.openShare();
|
||||
|
||||
},
|
||||
shareSuccess(rs){
|
||||
this.$refs.messager.show({message:'分享成功',type:'success'});
|
||||
@@ -876,6 +992,322 @@
|
||||
//console.log(e);
|
||||
this.scrollInfo = e.detail;
|
||||
},
|
||||
//以下是插入相关的处理
|
||||
doubleClickVideo(e){
|
||||
// this.onPlayerPause()
|
||||
this.touchNum ++
|
||||
setTimeout(()=>{
|
||||
if(this.touchNum == 1){
|
||||
// console.log('单击')
|
||||
}else if(this.touchNum >= 2){
|
||||
if(this.isPlaying){
|
||||
this.onPlayerPause()
|
||||
} else {
|
||||
this.onPlayerPlay()
|
||||
}
|
||||
}
|
||||
this.touchNum = 0
|
||||
},250)
|
||||
|
||||
},
|
||||
saveStudyItem(){ //先保存学习的内容,针对于音视频的内容
|
||||
if(this.curContent.studyItemId) {
|
||||
return;//已经有记录的，不需要再保存了
|
||||
}
|
||||
let params = {
|
||||
studyId: this.studyId, //学习id,
|
||||
courseId: this.courseId, //课程id,
|
||||
contentId: this.curContent.id, //内容id,
|
||||
contentType:this.curContent.contentType, //内容id,
|
||||
contentName: this.curContent.contentName, //内容名称
|
||||
progress: 0,
|
||||
lastStudyTime:0,
|
||||
status:2,
|
||||
studyDuration:0,
|
||||
contentTotal: this.totalContent
|
||||
};
|
||||
apiVideoStudy.saveStudyItem(params).then(res=>{
|
||||
if(res.status == 200){
|
||||
this.curContent.studyItemId=res.result.id;
|
||||
this.curContent.status = 2;//进行中状态
|
||||
}else{
|
||||
console.log("记录学习失败:" + res.message + "，" + res.error);
|
||||
}
|
||||
});
|
||||
},
|
||||
finishStudyItem(){ //设置完成学习的内容,针对于音视频的内容
|
||||
if(!this.curContent.studyItemId){
|
||||
//这种可能没有，不过这里也是为了万中那个1
|
||||
this.saveStudyInfo();
|
||||
}else{
|
||||
let params={
|
||||
itemId:this.curContent.studyItemId,
|
||||
studyId:this.studyId,
|
||||
courseId:this.courseId,
|
||||
cnum:this.totalContent
|
||||
}
|
||||
apiVideoStudy.finishStudyItem(params).then(res=>{
|
||||
if(res.status == 200){
|
||||
this.curContent.status = 9;
|
||||
this.curContent.progress = 100;
|
||||
}else{
|
||||
console.log("记录完成学习失败:" + res.message + "，" + res.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
onFullScreen(e){
|
||||
//console.log(e,'e');
|
||||
let full=e.detail.fullScreen;
|
||||
let divId='videowatermark';
|
||||
setTimeout(() => {
|
||||
var div = document.getElementById('myVideo')
|
||||
var div1 = div.firstChild;
|
||||
var speedDiv=div1.querySelector("#myVideoSpeed");
|
||||
if(full){
|
||||
var div3 = document.createElement("div");
|
||||
div3.id =divId;
|
||||
div3.setAttribute("class", "fullmark");
|
||||
div3.innerHTML='';
|
||||
// 从父组件传过来的水印内容
|
||||
//div3.innerText =this.userInfo.name+this.userInfo.code;
|
||||
for(var i=0;i<4;i++){
|
||||
div3.innerHTML+='<div style="color:#ffffff;width: 40%;height: 155px;padding-left:60px;padding-top:50px; display: flex;justify-content: center; transform: rotate(-36deg);font-size:20px;">'+this.userInfo.name+this.userInfo.code+'</div>';
|
||||
}
|
||||
|
||||
div3.style.cssText = "position:absolute;pointer-events: none; width: 100%;height: 100%;top:0;left:0;bottom: 0;right: 0; display: flex;justify-content: center;flex-wrap: wrap;overflow: hidden; opacity:0.3;padding-top:10px";
|
||||
//console.log(div3,'div3');
|
||||
div1.appendChild(div3);
|
||||
if(!speedDiv){
|
||||
var speedDiv=document.getElementById('myVideoSpeed');
|
||||
div1.appendChild(speedDiv)
|
||||
}
|
||||
}else{
|
||||
var markDiv=div1.querySelector("#"+divId);
|
||||
//var speedDiv=div1.querySelector("#myVideoSpeed");
|
||||
if(markDiv){
|
||||
div1.removeChild(markDiv);
|
||||
}
|
||||
if(speedDiv){
|
||||
//div1.removeChild(speedDiv);
|
||||
}
|
||||
}
|
||||
}, 200);
|
||||
},
|
||||
onPlayerPlay(){
|
||||
this.isPlaying = true;
|
||||
this.videoPlayingTime=0;
|
||||
// console.log("开始播放");
|
||||
this.playerBoxShow=false;
|
||||
this.isAppendTime=false;
|
||||
this.videoSpeed=studyUtil.getVideoSpeed();
|
||||
this.videoPlayer.playbackRate(this.videoSpeed);
|
||||
this.videoPlayer.play();
|
||||
let $this=this;
|
||||
if(this.curContent.status<9){
|
||||
let completeType=this.curriculumData.completeSetup;
|
||||
//console.log(completeType,'completeType');
|
||||
if(completeType==0){
|
||||
//默认5秒后学习完成.
|
||||
$this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
|
||||
}else{
|
||||
//先记录进行中的学习内容
|
||||
this.saveStudyItem();
|
||||
}
|
||||
}
|
||||
},
|
||||
onPlayerPause(){
|
||||
this.isPlaying = false;
|
||||
this.videoPlayer.pause();
|
||||
},
|
||||
onPlayerEnded(){
|
||||
this.playerBoxShow=true;
|
||||
//console.log("播放结束");
|
||||
//this.isAppendTime=true;//开启追
|
||||
//加学习时间
|
||||
if(this.curContent.status<9){
|
||||
this.finishStudyItem();
|
||||
}
|
||||
},
|
||||
changeSpeed(e) {
|
||||
// 获取选择的倍速
|
||||
let value = e;
|
||||
this.videoSpeed = Number(value);
|
||||
this.videoPlayer.playbackRate(this.videoSpeed);
|
||||
studyUtil.setVideoSpeed(this.videoSpeed);
|
||||
this.speedListShow=false;
|
||||
},
|
||||
showSpeedCtrl(){
|
||||
if(this.speedListShow){
|
||||
this.speedListShow=false;
|
||||
}else{
|
||||
this.speedListShow=true;
|
||||
}
|
||||
},
|
||||
formatSeconds(a) {
|
||||
var hh = parseInt(a/3600);
|
||||
var mm = parseInt((a-hh*3600)/60);
|
||||
if(mm<10) mm = "0" + mm;
|
||||
var ss = parseInt((a-hh*3600)%60);
|
||||
if(ss<10) ss = "0" + ss;
|
||||
if(hh<10) hh = hh == 0?'':`0${hh}:`;
|
||||
var length = hh + mm + ":" + ss;
|
||||
if(a>=0){
|
||||
return length;
|
||||
}else{
|
||||
return "00:00";
|
||||
}
|
||||
},
|
||||
onPlayerPlaying(e){
|
||||
//console.log("当前播放11",itme);
|
||||
this.isAppendTime=false;//禁止追加学习时间
|
||||
//console.log("当前播放11"+itme);
|
||||
let intTime=parseInt(e.detail.currentTime);
|
||||
if(intTime>this.videoPlayingTime){
|
||||
this.videoPlayingTime=intTime;
|
||||
|
||||
//判断是否完成
|
||||
let completeType=this.curriculumData.completeSetup;
|
||||
let completeSecond=this.curriculumData.second;
|
||||
if(!completeSecond){
|
||||
completeSecond=5;//如果没有就采用默认的时间了
|
||||
}
|
||||
if(completeType>0 && this.curContent.status<9){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
|
||||
if(completeType==1){
|
||||
let finishPercent=this.curriculumData.setupTage;
|
||||
let videDuration=this.curContent.duration;
|
||||
let percent =intTime*100/videDuration;
|
||||
if(percent>=finishPercent){
|
||||
this.finishStudyItem();
|
||||
}
|
||||
}else if(completeType==2){
|
||||
if(intTime>=completeSecond){
|
||||
this.finishStudyItem();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//以下是每隔10秒存储一下进度
|
||||
let saveTime=Math.floor(intTime%10);
|
||||
//console.log(intTime,saveTime,'aa',this.curContent.studyItemId)
|
||||
if(this.preTime!=intTime && saveTime==0 && this.curContent.studyItemId!=''){
|
||||
this.preTime=intTime;
|
||||
this.curContent.lastStudyTime=intTime;
|
||||
//记录播放时间
|
||||
//console.log('记录播放时间:'+intTime);
|
||||
let postData={
|
||||
itemId:this.curContent.studyItemId,
|
||||
videoTime:intTime
|
||||
}
|
||||
apiCourseStudy.studyVideoTime(postData).then(rs=>{
|
||||
if(rs.status!=200){
|
||||
console.log('记录播放时间错误');
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
audioPlay(){
|
||||
this.isAppendTime=false;
|
||||
let $this=this;
|
||||
if(this.curContent.status<9){
|
||||
let completeType=this.curriculumData.completeSetup;
|
||||
//console.log(completeType,'completeType');
|
||||
if(completeType==0){
|
||||
//默认5秒后学习完成.
|
||||
$this.handleTimeout= setTimeout(function() {$this.saveStudyInfo();}, 5000); //5秒后记录学习完成
|
||||
}else{
|
||||
//先记录进行中的学习内容
|
||||
this.saveStudyItem();
|
||||
}
|
||||
}
|
||||
},
|
||||
audioEnd(){
|
||||
if(this.curContent.status<9){
|
||||
this.finishStudyItem();
|
||||
}
|
||||
},
|
||||
audioPause(){
|
||||
},
|
||||
audioPlaying(e,second){
|
||||
this.isAppendTime=false;//禁止追加学习时间
|
||||
let intTime=second;//当前播放时间
|
||||
let videDuration=e.duration;//音频总时长，秒
|
||||
if(!videDuration){
|
||||
videDuration=this.curContent.duration;
|
||||
}
|
||||
//判断是否完成
|
||||
let completeType=this.curriculumData.completeSetup;
|
||||
let completeSecond=this.curriculumData.second;
|
||||
if(!completeSecond){
|
||||
completeSecond=5;//如果没有就采用默认的时间了
|
||||
}
|
||||
if(completeType>0 && this.curContent.status<9){ //因为1按进度，2按时长都是计算时间，所以这里直接大于0处理
|
||||
if(completeType==1){
|
||||
let finishPercent=this.curriculumData.setupTage;
|
||||
let percent =intTime*100/videDuration;
|
||||
if(percent>=finishPercent){
|
||||
this.finishStudyItem();
|
||||
}
|
||||
}else if(completeType==2){
|
||||
if(intTime>=completeSecond){
|
||||
this.finishStudyItem();
|
||||
}
|
||||
}
|
||||
}
|
||||
//以下是每隔10秒存储一下进度
|
||||
let saveTime=Math.floor(intTime%10);
|
||||
//console.log(intTime,saveTime,'aa',this.curContent.studyItemId)
|
||||
if(this.preTime!=intTime && saveTime==0 && this.curContent.studyItemId!=''){
|
||||
this.preTime=intTime;
|
||||
this.curContent.lastStudyTime=intTime;
|
||||
//记录播放时间
|
||||
//console.log('记录播放时间:'+intTime);
|
||||
let postData={
|
||||
itemId:this.curContent.studyItemId,
|
||||
videoTime:intTime
|
||||
}
|
||||
apiCourseStudy.studyVideoTime(postData).then(rs=>{
|
||||
if(rs.status!=200){
|
||||
console.log('记录播放时间错误');
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
//还需要记录播放时间
|
||||
saveStudyInfo() { //记录课件学习信息
|
||||
if(this.curContent.contentType>=60){
|
||||
//只有在课件页面停留超过5秒才会记录
|
||||
return;
|
||||
}
|
||||
if(this.curContent.status==9){
|
||||
//已学习完的，不用再添加
|
||||
return;
|
||||
}
|
||||
let params ={
|
||||
studyId: this.studyId,//学习id,
|
||||
courseId: this.courseId,//课程id,
|
||||
contentId: this.curContent.id,//内容id,
|
||||
contentName: this.curContent.contentName,//内容名称
|
||||
progress: 100,
|
||||
contentTotal:this.totalContent
|
||||
}
|
||||
apiCourseStudy.studyContent(params).then(res=>{
|
||||
if(res.status == 200) {
|
||||
this.curContent.status=9;//完成
|
||||
this.curContent.studyItemId=res.result;//学习记录id
|
||||
}else{
|
||||
console.log('记录学习失败:'+res.message+'，'+res.error);
|
||||
}
|
||||
})
|
||||
},
|
||||
statusClass(status){
|
||||
let statusObj={
|
||||
1:'nostart',
|
||||
2:'studying',
|
||||
9:'finish',
|
||||
}
|
||||
return statusObj[status]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -885,7 +1317,7 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
.playbox{
|
||||
padding: 34upx;
|
||||
padding: 10upx;
|
||||
background-color: #000000;
|
||||
}
|
||||
.contentbox{
|
||||
@@ -965,7 +1397,7 @@
|
||||
}
|
||||
}
|
||||
.citem{
|
||||
margin: 20upx;
|
||||
margin: 10upx;
|
||||
.citem-title{
|
||||
color: #333333;
|
||||
word-break: break-all;
|
||||
@@ -976,7 +1408,8 @@
|
||||
.citem-body{
|
||||
background-color: #F7F8F9;
|
||||
color: #333333;
|
||||
padding: 40upx;
|
||||
height: 100upx;
|
||||
padding: 20upx 30upx;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
@@ -985,10 +1418,6 @@
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
}
|
||||
.citem-active{
|
||||
color: #387DF7;
|
||||
border: 1px dotted #387DF7;
|
||||
}
|
||||
|
||||
}
|
||||
.scroll-item{
|
||||
@@ -1009,7 +1438,7 @@
|
||||
width: 220rpx;
|
||||
display:inline-flex;
|
||||
border-radius: 8upx;
|
||||
padding: 20upx;
|
||||
padding: 20upx 30upx;
|
||||
min-height: 100upx;
|
||||
// line-height: 60rpx;
|
||||
background-color: #f4f5f7;
|
||||
@@ -1048,37 +1477,60 @@
|
||||
padding: 5upx;
|
||||
}
|
||||
}
|
||||
>.studying{
|
||||
background-color: #FDF1D7;
|
||||
color:#FFB30F;
|
||||
}
|
||||
>.finish{
|
||||
background-color: #BED2F8;
|
||||
color: #3C7EFF;
|
||||
}
|
||||
>.nostart{
|
||||
background-color: #FFC8C8;
|
||||
color:#EE474A;
|
||||
}
|
||||
.status-tag{
|
||||
width: 88upx;
|
||||
height: 38upx;
|
||||
line-height: 38upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.color-studying{
|
||||
// background: #FDF1D7;
|
||||
color: #FFB30F;
|
||||
}
|
||||
.color-finish{
|
||||
// background: #f3f9ff;
|
||||
color: #666666;
|
||||
}
|
||||
.color-nostart{
|
||||
// background: #ffe8e7;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.box-studying{
|
||||
//color:#FFB30F;
|
||||
color: #387DF7;
|
||||
border: 1px dotted #387DF7;
|
||||
}
|
||||
.box-finish{
|
||||
color: #3C7EFF;
|
||||
}
|
||||
.box-nostart{
|
||||
color:#EE474A;
|
||||
}
|
||||
.color-studying{
|
||||
// background: #FDF1D7;
|
||||
//color: #FFB30F;
|
||||
color: #387DF7;
|
||||
}
|
||||
.color-finish{
|
||||
// background: #f3f9ff;
|
||||
color: #666666;
|
||||
}
|
||||
.color-nostart{
|
||||
// background: #ffe8e7;
|
||||
color: #666666;
|
||||
}
|
||||
.status-tag{
|
||||
height: 40upx;
|
||||
width: 44px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 40upx;
|
||||
padding: 2upx 10upx;
|
||||
border-radius: 14upx;
|
||||
}
|
||||
.tag-studying{
|
||||
// color: #FFB30F;
|
||||
color: #588AFC;
|
||||
}
|
||||
.tag-finish{
|
||||
// color: #00aaff;
|
||||
color: #08A890;
|
||||
}
|
||||
.tag-nostart{
|
||||
// color: #ff0000;
|
||||
color: #787878;
|
||||
}
|
||||
.text-ellipsis{
|
||||
//display: inline-block;
|
||||
max-width: 80%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.catalog{
|
||||
background: #FFFFFF;
|
||||
|
||||
Reference in New Issue
Block a user