From 7f9aa9e61749e5fa0e78d0c6a0f3bdb00ff168b8 Mon Sep 17 00:00:00 2001 From: daihh Date: Sun, 13 Nov 2022 23:02:13 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/interact-share/interact-share.vue | 2 +- pages/study/courseStudy.vue | 616 ++++++++++++++++--- pages/study/onlineCourse.vue | 85 ++- 3 files changed, 577 insertions(+), 126 deletions(-) diff --git a/components/interact-share/interact-share.vue b/components/interact-share/interact-share.vue index 7363600..cbd710d 100644 --- a/components/interact-share/interact-share.vue +++ b/components/interact-share/interact-share.vue @@ -2,7 +2,7 @@ - + 请输入要分享给人的姓名 diff --git a/pages/study/courseStudy.vue b/pages/study/courseStudy.vue index 98c630a..656eb67 100644 --- a/pages/study/courseStudy.vue +++ b/pages/study/courseStudy.vue @@ -5,8 +5,117 @@ {{courseInfo.name}} - - 内容插入区域 + + + + + + + + {{videoSpeed === 1 ? '倍速' : `${videoSpeed}x`}} + + + + {{ item }}x + + + + + + + + + + + 赞 + + + + + + 踩 + + + + + + + + + + + + {{ toScore(scoreInfo.score) }} + 分 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -61,7 +170,9 @@ - {{con.contentName}} + + {{con.contentName}} + @@ -70,7 +181,9 @@ - {{con.contentName}} + + {{con.contentName}} + @@ -81,9 +194,9 @@ - + - + {{con.contentName}} @@ -109,7 +222,7 @@ - + {{con.cataName}} @@ -181,15 +294,15 @@ {{cata.section.name}} - - 未开始 - 进行中 - 已完成 + + 未开始 + 进行中 + 已完成 - - + + {{con.contentName}} @@ -205,8 +318,8 @@ - - + + {{con.contentName}} @@ -254,6 +367,7 @@ + @@ -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+='
'+this.userInfo.name+this.userInfo.code+'
'; + } + + 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] + } } } @@ -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; diff --git a/pages/study/onlineCourse.vue b/pages/study/onlineCourse.vue index d5ee333..9f4acff 100644 --- a/pages/study/onlineCourse.vue +++ b/pages/study/onlineCourse.vue @@ -742,52 +742,51 @@ }, 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; + 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(); + 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(); + } } - }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('记录播放时间错误'); } - } - } - } - //以下是每隔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; @@ -1022,7 +1021,7 @@ }, playContent(cata,con,conIndex,catIndex){ - if(conIndex!=undefined && catIndex!=undefined) { + if(conIndex && catIndex) { if(this.courseInfo.orderStudy) { let hasIndex=-1; this.scrollList.some((one,idx)=>{