index.vue

<template>
  <div class="check-lession flex">
    <div class="top-title">
      <div class="item allone">
        <div class="text">{{ state != 2 ? "学习课程" : "查看课程" }}</div>
        <div v-if="state!=3" class="gotime">{{parseInt(personInfo.realityTrainDuration/60)}}:{{calculation(personInfo.realityTrainDuration%60)}}/{{parseInt(trainInfo.trainDuration)}}:{{"00"}}</div>
        <div v-if="state==3" style="background: red" class="gotime"> 已过期 </div>
      </div>

      <div class="bt flex fz14 border-bottom">
        <div class="a">课程标题</div>
        <div class="b">
          <div>{{ trainInfo.lessonName }}</div>
        </div>
      </div>


      <div class="bt flex fz14 border-bottom">
        <div class="a">课程内容</div>
        <div class="b" v-html="trainInfo.lessonContent"></div>
      </div>

      <div class="bt flex fz14 video" >
        <div class="a">视频文件</div>
        <div class="b">
          <div class="video" v-if="trainInfo.videoUrl">
            <video-player
              class="video-player vjs-custom-skin"
              ref="videoPlayer"
              :playsinline="true"
              :options="playerOptions"
            ></video-player>
          </div>
          <div v-else>未上传视频</div>
        </div>
      </div>

      <div class="bt flex fz14" v-if="trainInfo.annexUrl">
        <div class="a">学习附件</div>
        <div class="b flex">
          <div class="download flex">
            <span>学习资料</span>
            <el-button style="padding: 0; margin-left: 20px" type="text">
              <a :href="trainInfo.annexUrl">下载</a>
            </el-button>
            <el-button style="padding: 0; margin-left: 20px" type="text">
              <a @click="openXslx(trainInfo.annexUrl)">预览</a>
            </el-button>
          </div>
        </div>
      </div>

      <div class="bt flex fz14" v-if="trainInfo.videoUrl">
        <div class="a">学习视频</div>
        <div class="b flex">
          <div class="download flex">
            <span>学习视频</span>
            <el-button style="padding: 0; margin-left: 20px" type="text">
              <a @click="downLoad(trainInfo.videoUrl, trainInfo.lessonName)"
              >下载</a
              >
            </el-button>
          </div>
        </div>
      </div>

      <div class="btn-wrapper flex">
        <el-button @click="$router.back()" type="primary" plain>取消</el-button>
      </div>

    </div>

    <el-dialog :visible.sync="iframeVisible" width="80%">
      <!--<div v-if="userlessonData.state!=3" class="gotime2">{{minute}}:{{calculation(second)}}/{{parseInt(lessonData.duration/60)}}:{{calculation(lessonData.duration%60)}}</div>-->
      <iframe style="width: 100%; height: 500px" :src="ky"></iframe>
    </el-dialog>
  </div>
</template>

<script>
  import { getManage, updatePersonInfo } from "@/api/trainManage/manage";
    export default {
      name: "index",
      data(){
        return{
          trainInfo: {},
          state: "",
          playerOptions: {
            aspectRatio: "16:9",
          },
          personInfo:{},
          dingshi: "",
          timer: "",
          iframeVisible:false,
          ky: ""
        }
      },
      created(){
        this.state = this.$route.query.state;
        this.getTrainByTrainManageId();
      },
      destroyed(){
        console.log('销毁');
        this.updatePersonStatus();
        clearInterval(this.dingshi);
        clearInterval(this.timer);
      },
      methods:{
        getTrainByTrainManageId(){
          getManage(this.$route.query.trainManageId).then(res =>{
            if(res.code == 200){
              this.trainInfo = res.data;
              if(this.trainInfo.tTrainPersonList && this.trainInfo.tTrainPersonList.length >0){
                this.personInfo = this.trainInfo.tTrainPersonList.find(item => item.trainPersonId == this.$store.state.user.userId);
                this.initInterval();
              }
              if(this.trainInfo.videoUrl){
                this.changeVideo(this.trainInfo.videoUrl);
              }
            }
          })

        },
        initInterval(){
          if(this.personInfo.isFinish == '0' && this.state != '2'){
            let that = this;
            this.dingshi = setInterval(()=>{
                let realityTrainDuration = that.personInfo.realityTrainDuration?parseInt(that.personInfo.realityTrainDuration):0;
                that.personInfo.realityTrainDuration = realityTrainDuration+1;
                if(this.trainInfo.trainDuration <= this.personInfo.realityTrainDuration/60){
                  this.updatePersonStatus();
                }
            },1000);
            this.timer = setInterval(()=>{this.updatePersonStatus();},60 * 1000)
          }
        },
        updatePersonStatus(){
          console.log("-------------------------")
          if(this.trainInfo.trainDuration > this.personInfo.realityTrainDuration/60){
            updatePersonInfo({id:this.personInfo.id,realityTrainDuration:this.personInfo.realityTrainDuration})
          }else{
            updatePersonInfo({id:this.personInfo.id,realityTrainDuration:this.personInfo.realityTrainDuration,isFinish:'1'})
            clearInterval(this.dingshi);
            clearInterval(this.timer);
          }
        },
        calculation(num){
          if(num<10){
            num = "0"+num;
          }
          return num;
        },
        changeVideo(src) {
          this.playerOptions = {
            // 视频播放
            playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
            autoplay: false, //如果true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 视频一结束就重新开始。
            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: "zh-CN",
            aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            sources: [
              {
                type: "",
                src, //url地址
              },
            ],
            poster: "", //你的封面地址
            // width: document.documentElement.clientWidth,
            notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true, //当前时间和持续时间的分隔符
              durationDisplay: true, //显示持续时间
              remainingTimeDisplay: false, //是否显示剩余时间功能
              fullscreenToggle: true, //全屏按钮
            },
          };
        },
        downLoad(url, name) {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", url, true);
          xhr.responseType = "arraybuffer"; // 返回类型blob
          xhr.onload = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
              let blob = this.response;
              console.log(blob);
              // 转换一个blob链接
              // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
              // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
              let downLoadUrl = window.URL.createObjectURL(
                new Blob([blob], {
                  type: "video/mp4",
                })
              );
              // 视频的type是video/mp4，图片是image/jpeg
              // 01.创建a标签
              let a = document.createElement("a");
              // 02.给a标签的属性download设定名称
              a.download = name;
              // 03.设置下载的文件名
              a.href = downLoadUrl;
              // 04.对a标签做一个隐藏处理
              a.style.display = "none";
              // 05.向文档中添加a标签
              document.body.appendChild(a);
              // 06.启动点击事件
              a.click();
              // 07.下载完毕删除此标签
              a.remove();
            }
          };
          xhr.send();
        },
        openXslx(url, name) {
          // window.open(`https://view.xdocin.com/view?src=${url}`);
          console.log(url)
          //this.ky=`https://view.xdocin.com/view?src=${url}`;
          this.ky = url;
          this.iframeVisible=true;
        },
      }
    }
</script>

<style scoped lang="scss">

  .check-lession {
    width: 100%;
    height: calc(100vh - 50px);
    overflow: auto;
    justify-content: center;
    .top-title {
      padding-top: 14px;
      padding-bottom: 14px;
      width: 93.2%;
      max-width: 1600px;
      .item {
        margin-bottom: 10px;
      }
      .bt {
        padding-bottom: 10px;
        margin-bottom: 10px;
        width: 85%;
        min-width: 1050px;
        .a {
          width: 70px;
          color: #101010;
        }
        .b {
          flex: 1;
          color: #606266;

          .video {
            width: 870px;
            height: 489px;
          }
        }
        &.border-bottom {
          border-bottom: 1px solid #bbbbbb;
          &.viedo-wrapper {
            border-bottom: none;
          }
        }
      }
      .btn-wrapper {
        justify-content: center;
      }
    }
  }
  .allone{
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
  }

  .gotime{
    background: #1c84c6;
    width: 110px;
    text-align: center;
    line-height: 22px;
    color: white;
    margin-left: 15px;
    border-radius: 10px;
  }
  .gotime2{
    background: #1c84c6;
    width: 80px;
    text-align: center;
    line-height: 22px;
    color: white;
    margin-left: 20px;
    border-radius: 10px;
    position: absolute;
    top: 20px;
  }


</style>
<style>
  .check-lession p{
    margin: 0;
  }
</style>