safetyEducationExamination/src/views/safetyEducationExaminationNew/featurePage/learningCourse/index.vue

<!-- 学习课程 -->
<template>
  <div class="learningCourse">
    <div class="page-container-top-max-big-box">
      <p class="top-1-p">开始学习</p>
      <p class="top-2-p" @click="backPage()">返回</p>
    </div>
    <div class="content-box">
      <div class="left-max-big-box">
        <coursewareComponent ref="coursewareComponent"></coursewareComponent>
      </div>
      <div class="right-max-big-box">
        <p class="title-p">{{newData.courseName}}</p>
        <div class="text-p" style="color:#666;">{{secondsToMinutes(newData.totalDuration)}}分钟丨{{newData.totalCreditHours}}学时丨{{newData.totalPoints}}积分</div>
        <div class="text-p">已学 {{newData.learnedCoursewareCount}} / 总 {{newData.totalCoursewareCount}} 课件</div>
        <div class="progress-box">
          <p class="progress-title-box">学习进度</p>
          <div class="progress-min-box">
            <el-progress :stroke-width="12" :percentage="newData.progress?newData.progress:0"></el-progress>
          </div>
        </div>
        <div class="learning-for-max-big-box scrollbar-box">
          <div class="for-max-big-box"
               v-for="(item,index) in newData.coursewares" :key="index">
            <div class="for-big-box" @click="checkLearningButton(index)"
                 :class="checkLearningIndex == index ?'check-for-box':''">
              <p>{{item.coursewareName}}</p>
              <p>已学习：{{formatTime(item.learnedDuration)}} / {{formatTime(item.minLearningDuration)}}</p>
              <p :class="item.learnStatus ==2 ?'colorA':(item.learnStatus ==1 ?'colorB':'')">{{item.learnStatus==2?'已学完':(item.learnStatus==1?'学习中':'未学完')}}</p>
            </div>
            <p class="for-button" @click="finishStudying(index)"
               v-if="item.learnStatus != 2 && item.learnedDuration == item.minLearningDuration && checkLearningIndex == index">
              若已完成学习，请点此确认
            </p>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="请完成安全验证"
      :visible.sync="dialogVisible"
      width="340px"
      :close-on-click-modal="false"
      :show-close="false"
      append-to-body
      center>
      <div class="verify-container">
        <VerifySlider
          v-if="dialogVisible"
          tips="请按住滑块，拖动到最后边"
          success-tips="验证通过"
          @success="onVerifySuccess" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import StudyTimer from '@/utils/timerUtils/StudyTimer';
  import CountdownTimer from '@/utils/timerUtils/CountdownTimer';
  import { VerifySlider } from 'vue-verify-slider';
  import coursewareComponent from "@/views/safetyEducationExaminationNew/components/coursewareComponent.vue";
  import {
    examUserCourseLearningCoursewareList,examUserCoursewareLearningReportProgress,
    examUserCoursewareLearningConfirmCompletion,examUserCoursewareLearningRestart
  } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'index',
    components: {
      VerifySlider,
      coursewareComponent,
    },
    data() {
      return {
        examId:null,
        courseId:null,
        newData:{
          courseName:"",
          totalDuration:0,
          totalCreditHours:0,
          totalPoints:0,
          learnedCoursewareCount:0,
          totalCoursewareCount:0,
          progress:0,
          coursewares:[],
        },
        //当前选中
        checkLearningIndex:0,
        //学习计时器
        studyTimer: null,
        //验证计时器
        countdownTimer:null,
        //验证器弹窗状态
        dialogVisible:false,
        //验证器弹窗间隔时间
        verificationTime:0,
        //心跳回报时间
        heartbeatValue:30,
      }
    },
    created() {

    },
    mounted() {
      this.initialization();
    },
    methods: {
      //初始化
      initialization(){
        this.$set(this,'courseId',this.$route.query.courseId)
        this.$set(this,'examId',this.$route.query.examId)
        this.$nextTick(()=>{
          this.examUserCourseLearningCoursewareList();
        })
      },
      //获取课程下的课件列表
      examUserCourseLearningCoursewareList(){
        examUserCourseLearningCoursewareList({ courseId:this.courseId,examId:this.examId }).then(response => {
          this.$set(this, 'newData', response.data)
          if(response.data.popupVerifyEnabled == 1){
            if (this.countdown) {
              this.countdown.clear();
              this.countdown = null;
            }
            this.$set(this,'verificationTime',this.accMul(response.data.popupIntervalMinutes,60));
            this.startCountdown();//验证码倒计时
          }
          this.initTimer();//学习计时器
          this.courseRendering(this.checkLearningIndex);//课件渲染
        })
      },
      //返回
      backPage() {
        this.$router.back()
      },
      //完成课件学习
      finishStudying(index){
        let self = this;
        this.$confirm('确认完成课件学习?', "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          self.examUserCoursewareLearningConfirmCompletion();
        }).catch(() => {});
      },
      //切换课件
      checkLearningButton(index){
        let self = this;
        if(this.newData.coursewares[this.checkLearningIndex].learnStatus == 2){
          self.$set(self,'checkLearningIndex',index);
          self.initTimer();
          self.courseRendering(index);
        }else{
          self.handleToggle();
          self.verificationHandleToggle();
          if(this.checkLearningIndex != index){
            this.$confirm('确认切换课件?', "提示", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              self.$set(self,'checkLearningIndex',index);
              self.initTimer();
              self.verificationHandleToggle();
              self.courseRendering(index);
            }).catch(() => {
              self.handleToggle();
              self.verificationHandleToggle();
            });
          }
        }
      },
      //课件渲染
      courseRendering(index){
        let name = this.newData.coursewares[index].coursewareName;
        let url = '';
        let type = '';
        if(this.newData.coursewares[index].materialType == 1){
          //视频
          type = 'video'
          url = this.newData.coursewares[index].attachmentPath;
        }else if(this.newData.coursewares[index].materialType == 3){
          //文档
          if(this.newData.coursewares[index].attachmentType == '.docx'){
            type = 'docx'
          }else if(this.newData.coursewares[index].attachmentType == '.xlsx'){
            type = 'excel'
          }else if(this.newData.coursewares[index].attachmentType == '.pdf'){
            type = 'pdf'
          }
          url = this.newData.coursewares[index].attachmentPath;
        }else if(this.newData.coursewares[index].materialType == 4){
          //文章
          type = 'text'
          url = this.newData.coursewares[index].articleContent;
        }
        this.$refs['coursewareComponent'].initialize(name,url,type);
        if(this.newData.coursewares[this.checkLearningIndex].learnStatus == 0){
          this.$set(this.newData.coursewares[this.checkLearningIndex],'learnStatus',1);
        }
      },
      //学习完成
      examUserCoursewareLearningConfirmCompletion(){
        let self = this;
        let obj = {
          coursewareId:this.newData.coursewares[this.checkLearningIndex].coursewareId,
          courseId:this.courseId,
          examId:this.examId,
        }
        examUserCoursewareLearningConfirmCompletion(obj).then(response => {
          for(let i=0;i<self.newData.coursewares.length;i++){
            if(self.newData.coursewares[i].learnStatus!=2 && i!=this.checkLearningIndex){
              this.$set(this,'checkLearningIndex',i);
              break
            }
          }
          this.examUserCourseLearningCoursewareList();
          this.msgSuccess(response.message)
        })
      },
      //心跳接口
      examUserCoursewareLearningReportProgress(){
        let obj = {
          coursewareId:this.newData.coursewares[this.checkLearningIndex].coursewareId,
          courseId:this.courseId,
          examId:this.examId,
          duration:this.heartbeatValue,
        }
        examUserCoursewareLearningReportProgress(obj).then(response => {})
      },
      //倒计时时间换算
      formatTime(totalSeconds) {
        if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
          return '0秒';
        }
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;
        if (minutes > 0 && seconds > 0) {
          return `${minutes}分${seconds}秒`;
        } else if (minutes > 0 && seconds === 0) {
          return `${minutes}分`;
        } else {
          return `${seconds}秒`;
        }
      },
      //展示时间换算
      secondsToMinutes(totalSeconds) {
        if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
          return 1;
        }
        return Math.ceil(totalSeconds / 60);
      },
      /*=================================== 验证器 ===================================*/
      onVerifySuccess() {
        this.$message.success('验证成功');
        this.$set(this,'dialogVisible',false);
        this.handleToggle();
        this.startCountdown();
        //如果是视频课件 则继续播放视频
        if(this.newData.coursewares[this.checkLearningIndex].materialType == 1){
          this.$refs['coursewareComponent'].resumeVideo();
        }
      },
      /*=================================== 学习定时器 ===================================*/
      // 初始化定时器
      initTimer() {
        let self = this;
        if(this.newData.coursewares[this.checkLearningIndex].learnedDuration == this.newData.coursewares[this.checkLearningIndex].minLearningDuration){
          return
        }
        this.studyTimer = new StudyTimer({
          initialSeconds: self.newData.coursewares[self.checkLearningIndex].learnedDuration,
          maxSeconds: self.newData.coursewares[self.checkLearningIndex].minLearningDuration,
          onTick: (elapsedSeconds) => {
            //每次计时
            this.$set(self.newData.coursewares[self.checkLearningIndex],'learnedDuration',elapsedSeconds);
            //心跳判断
            if (elapsedSeconds % this.heartbeatValue === 0) {
              //调用心跳方法
              this.examUserCoursewareLearningReportProgress();
            }
          },
          onMaxTimeReached: (elapsedSeconds) => {
            //达到最大值
            this.$set(self.newData.coursewares[self.checkLearningIndex],'learnedDuration',elapsedSeconds);
            //调用心跳方法
            this.examUserCoursewareLearningReportProgress();
          }
        });
        this.studyTimer.resume();
      },
      // 切换暂停/继续
      handleToggle() {
        if (!this.studyTimer) return;
        if (this.studyTimer.isRunning) {
          this.studyTimer.pause();
        } else {
          this.studyTimer.resume();
        }
      },
      // 清除定时器
      clearTimer() {
        if (this.studyTimer) {
          this.studyTimer.clear();
          this.studyTimer = null;
        }
      },
      /*=================================== 验证定时器 ===================================*/
      // 1. 启动倒计时
      startCountdown() {
        if(this.verificationTime == 0){
          return
        }
        this.countdown = new CountdownTimer({
          targetSeconds: this.verificationTime,
          // 达到目标值时触发的回调
          onTargetReached: (elapsedSeconds) => {
            //倒计时结束 开启弹窗
            this.handleToggle();
            this.verificationHandleToggle();
            this.$set(this,'dialogVisible',true);
            //如果是视频课件 则暂停播放视频
            if(this.newData.coursewares[this.checkLearningIndex].materialType == 1){
              this.$refs['coursewareComponent'].pauseVideo();
            }
          }
        });
        if (this.countdown) {
          this.countdown.start();
        }
      },
      // 2. 暂停/继续
      verificationHandleToggle() {
        if (!this.countdown) return;
        this.countdown.toggle();
      },
      // 3. 清除倒计时
      clearCountdown() {
        if (this.countdown) {
          this.countdown.clear();
          this.countdown = null;
        }
      },
      //乘法
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
    },
    beforeDestroy() {
      if (this.studyTimer) {
        this.studyTimer.destroy();
        this.studyTimer = null;
      }
      if (this.countdownTimer) {
        this.countdownTimer.destroy();
        this.countdownTimer = null;
      }
    },
  }
</script>
<style scoped lang="scss">
  .learningCourse {
    flex:1;
    display: flex;
    flex-direction: column;
    background:#FFFFFF;
    border-radius:10px;
    overflow: hidden;
    padding:0;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
    margin:10px;
    ::v-deep .el-progress .el-progress__text{
      margin-left:10px;
      margin-top:1px;
    }
    .content-box{
      flex: 1;
      display: flex;
      overflow: hidden;
      .left-max-big-box{
        flex:1;
        display: flex;
        flex-direction: column;
        background-color: #dedede;
        margin:20px 20px;
        border-radius:10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(37, 50, 74, 0.12);
        border:1px solid #dedede;
      }
      .right-max-big-box{
        padding:20px 0;
        width:400px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-left: 1px solid #dedede;
        .title-p{
          font-size:16px;
          font-weight:700;
          line-height:30px;
          padding:0 20px;
        }
        .text-p{
          font-size:14px;
          line-height:20px;
          margin-bottom:20px;
          padding:0 20px;
        }
        .progress-box{
          width:400px;
          height:20px;
          display: flex;
          padding:0 20px;
          .progress-title-box{
            font-size:14px;
            line-height:20px;
            font-weight:700;
          }
          .progress-min-box{
            flex:1;
            padding:0 0 0 20px;
            .el-progress{
              margin-top:1px;
            }
          }
        }
        .learning-for-max-big-box{
          flex:1;
          display: flex;
          flex-direction: column;
          padding:0 20px;
          .for-max-big-box{
            margin-top:40px;
            .for-big-box{
              cursor: pointer;
              border-radius:6px;
              border:1px solid #666;
              padding:15px 10px;
              position: relative;
              p{
                line-height:30px;
              }
              p:nth-child(1){
                font-size:16px;
                font-weight:700;
                /*单行省略号*/
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
              p:nth-child(2){
                font-size:14px;
              }
              p:nth-child(3){
                font-size:14px;
                position: absolute;
                bottom: 16px;
                right: 16px;
                color:#fff;
                background-color: #999;
                border-radius:4px;
                width:60px;
                line-height:24px;
                text-align: center;
              }
              .colorA{
                background-color: #0183fa!important;
                color:#fff!important;
              }
              .colorB{
                background-color: #fff!important;
                border:1px solid #0183fa!important;
                color:#0183fa!important;
              }
            }
            .for-button{
              margin-top:20px;
              background-color: #13CE66;
              color:#fff;
              text-align: center;
              line-height:30px;
              border-radius:4px;
              cursor: pointer;
              font-size:14px;
            }
            .check-for-box{
              background-color: rgba(1,131,250,0.1);
              border:1px solid #0183fa!important;
              p{
                color:#0183fa!important;
              }
            }
          }
        }
      }
    }
  }
</style>