study_sm/src/containers/center/play/index.vue

<template>
  <div class="m-right-block mh576">


    <ICourseInfoXsExtra v-if="tpl.isTranExam==2"
    :extraXs="extraXs"  :info="info"
    @updateInfo="updateInfo"
    :tpl="tpl" @startExamTest="startExamTest" @startExam="startExam"></ICourseInfoXsExtra>

    <ICourseInfoTest  v-else-if="tpl.isTranExam>0" :examList="examList" :info="info" :tpl="tpl" @printCert="printCert" @startExam="startExam"></ICourseInfoTest>


    <ICourseInfo v-else
    :info="info"
     :tpl="tpl"
     :extraXs="extraXs"
     @printCert="printCert" @startExam="startExam" @startExamTest="startExamTest"></ICourseInfo>

    <div class="right-block-bd ng-scope" ui-view="myStudyContent" style="position: relative;">
      <div class="m-account">
        <div class="account-tit" style="height:30px">
          <a :class="{'current':show===1}"  @click="show=1" class="">正在学习</a>
          <a :class="{'current':show===2}"  @click="show=2" class="">已经完成</a>
          <a :class="{'current':show===3}"  @click="show=3" class="" v-if="tpl.examGroupId>0">考试记录 </a>
        </div>

        <div v-if="show<3" class="lwh-ul-form mt20">
          <!-- 列表展示 -->
          <el-table :data="showList" border stripe style="width: 100%;"  >
            <el-table-column label="NO." prop="id" width="50" align="center">
              <template v-slot="{$index}">
                <span> {{$index+1}}</span>
              </template>
            </el-table-column>

            <el-table-column label="课程名称" prop="name" min-width="200">
            </el-table-column>

            <el-table-column label="类型" prop="type" align="center" width="80">
              <span>必修</span>
            </el-table-column>

            <el-table-column label="学时" prop="xs" align="center" width="80">
              <template v-slot="{row}">
                <span> {{row.xs/10}}</span>
              </template>
            </el-table-column>

            <el-table-column label="学习进度" prop="useTime" align="left" width="220">
              <template v-slot="{row}">
                <span style="display: flex;" v-if="show==1">
                  <el-progress
                    type="line"
                    style="width: 120px;"
                    :stroke-width="26"
                    :text-inside="true"
                    :show-text="false"
                    :percentage="row.percent"
                    :class="row.percent|showProgressColor">
                  </el-progress>
                  <span style="margin-left: 10px;"> {{row.percent}}% </span>
                </span>
                <span v-else>
                  <span style="margin-left: 10px;color: green;">视频学习完成</span>
                </span>
              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" prop="xs" align="center" width="80">
              <template v-slot="{row, $index}">
                <el-button @click="loadMedia(row, $index)" type="text">播放</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>

        <div v-if="show===3" class="lwh-ul-form mt20">
          <exam-list :courseId="courseId"> </exam-list>
        </div>
      </div>
     </div>


    <el-dialog title="输入认证" center :visible.sync="editRzcode"  >
      <el-form  label-width="120px" ref="elAdd">
        <el-form-item  label="认证编号">
          <el-input v-model="info.rzCode" type="text" disabled></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="cancelRzCode">取 消</el-button>
        <el-button @click="doAddRzCode" type="primary">确定打印</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {httpServer } from "@/components/httpServer/httpServer.js";
  import Media from "./components/media.vue";
  import ExamList from "./components/ExamList.vue";
  import ICourseInfo from "./components/iCourseInfo.vue";
  import ICourseInfoTest from "./components/iCourseInfoTest.vue";
  import ICourseInfoXsExtra from "./components/iCourseInfoXsExtra.vue";
  import ICourseAnswerTest from "./components/iCourseAnswerTest.vue";
  import {getPercent} from '@/utils/index.js'
  import {delExam} from '../exam/components/util.js'
  import md5 from 'js-md5';
  export default {
    name: "Index",
    data() {
      return {
        courseId: 0,
        show:1,
        mediaDialog: false,
        mediaType:'hls',
        mediaUrl:'',
        editRzcode: false,
        testExamDalog: false,
        info: {score:0, percent:0},
        tpl:{},
        media:{},
        extraXs:{},
        counter:{
          1:150,
          2:156,
          3:149,
          4:45,
        },
        options:{
          controls:true,
          autoplay: true, // 如果true,浏览器准备好时开始回放。
          muted: true, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [],
          poster: '', // 你的封面地址
          notSupportedMessage: '无法播放媒体源', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          playtimes: '',
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true,
            volumePanel: true
          }
        },
        list: [],
        examList:[],
        showList:[],
      };
    },
    watch:{
      show(val){
        console.log("show", val)
        this.updateShowList()
      }
    },
    components:{Media,ExamList,ICourseInfo,ICourseInfoTest,ICourseAnswerTest,ICourseInfoXsExtra},
    beforeMount() {
      console.log('beforeMount')
      this.courseId = +this.$route.params.courseId
      this.getData()
      this._onVisible = () => {
        if (document.visibilityState === 'visible') {
          console.log('visible')
          this.getData()
        }
      }
      document.addEventListener('visibilitychange', this._onVisible)
    },
    beforeDestroy() {
      document.removeEventListener('visibilitychange', this._onVisible)
    },
    filters:{
      showProgressColor: function (val) {
      	if (val == '进行中') {
          	return val = 'el-bg-inner-running';
          } else if (val == '失败') {
             return val = 'el-bg-inner-error'
         } else if (val == '完成') {
             return val = 'el-bg-inner-done'
         }
      }
    },
    methods: {
      changeMedia( val ){
        if( !val ) return;
        let mediaUrl = this.mediaUrl;
        if( val == 'ld'){
          mediaUrl = mediaUrl.replace('/hls/', '/ld/');
        }else{
          mediaUrl = mediaUrl.replace('/ld/', '/hls/');
        }
        this.mediaType = val;
        this.options.sources = [{src:mediaUrl,type: "application/x-mpegURL"}];
        this.options.playtimes = this.media.position||0;
        this.options.autoplay = true;
        this.mediaDialog = true;
      },
      updateInfo( param ){
        this.info = Object.assign(this.info, param);
      },
      startExamTest(){
        if( !this.isStudyFinish() ){
          this.$message.errorMsg(" 完成学习才能专项练习", 2)
          return;
        }
        let groupId = this.tpl.testGroupId
        this.testExamDalog = true;
        if( groupId == 0 || groupId == 10) return;
        httpServer('course.GetCourseExamInfo', {examId:groupId}).then( res=>{
            if( res.code != 200) return;
            this.counter[1] = res.data.judge||0;
            this.counter[2] = res.data.single||0;
            this.counter[3] = res.data.multi||0;
            this.counter[4] = res.data.anli||0;
        })
      },
      isStudyFinish(){
        let {getXs,totalXs} = this.info
        let {testXs, examXs} = this.tpl;
        return getXs>=totalXs -testXs - examXs
      },
      startExam( groupId ){
        let courseId = this.courseId
        let endDate = new Date( )
        if( !this.isStudyFinish() ){
          this.$message.errorMsg(" 完成学习才能考试", 2)
          return;
        }
        delExam()
        this.$router.push({path:`/center/exam/${courseId}`, query:{groupId}});
      },
      printCert( ){
        if( this.info.getXs < this.info.totalXs ){
          this.$message.errorMsg("课程还未完成", 2)
          return;
        }
        if( this.tpl.examGroupId >0 && this.info.score < 60){
          this.$message.errorMsg("考试未通过", 2)
          return;
        }
        let {id, rzCode} = this.info
        // this.editRzcode = true
        httpServer('Cert.printCert', {rzCode, id}).then( res => {
          if( res.code == 200 ){
            this.editRzcode = false;
            this.info.tmpRzCode="";
            window.open(  res.data.url )
          }
        })
      },
      cancelRzCode(){
        this.info.rzCode= this.info.tmpRzCode;
        this.editRzcode = false;
      },
      doAddRzCode(){
        let {type, rzCode, id} = this.info;
        if( !rzCode ) rzCode = "sm"+id
        httpServer('Cert.printCert', {rzCode, id}).then( res => {
          if( res.code == 200 ){
            this.editRzcode = false;
            this.info.tmpRzCode="";
            window.open(  res.data.url )
          }
        })
      },
      formatFinish() {
        let {gxs,axs} = this.info;
        if( !axs ) axs = 1;
        return `获得${gxs}学时, 总共${axs}学时`;
      },
      formatExam() {
        let {score} = this.info
        if( score == -1 ) return `已答0次，未通过`;
        return `最高${score<1?0:score}分, ${score>=60?'通过':'未通过'}`;
      },
      formatPass() {
        let {score} = this.info
        if( score == -1 ) return `未参加`;
        return `${score||0}分,${score>=60?'通过':'未通过'}`;
      },
      formatString(val){
        return ()=> val;
      },
      getData() {
        let param = { courseId: this.courseId }
        httpServer("course.getCourse", param).then(res => {
          if (res.code == 200) {
            let {info, extra, list, tpl, extraXs, examList} = res.data;
            this.info =  Object.assign( info, extra||{});
            this.info.score1 = +this.info.score1||0
            this.info.score2 = +this.info.score2||0
            this.info.score3 = +this.info.score3||0
            this.info.score4 = +this.info.score4||0
            this.info.score5 = +this.info.score5||0
            this.info.score6 = +this.info.score6||0
            this.tpl = tpl||{};
            this.extraXs = extraXs||{};
            this.examList = examList||[];
            this.list = list.map( (item)=>{
              item.percent = getPercent(item)||0;
              return item;
            })
            this.updateShowList()
          }
        })
      },
      updateShowList(){
        let show = this.show;
        this.showList = this.list.filter( item=>{
          if( show == 1) return !item.isFinish
          if( show == 2) return !!item.isFinish
          return false
        })
        //
        let gxs = 0
        let axs = 0;
        this.info.tcount = this.list.length;
        this.info.fcount =0;
        this.info.percent = 0;
        for( let i = 0; i< this.list.length;i++){
          let item = this.list[i]
          axs  += item.xs
          if( item.isFinish){
            gxs += item.xs
            this.info.fcount++
          }
        }
        this.info.gxs = gxs/10
        this.info.axs = axs/10
        this.info.percent = (this.info.gxs*10000/this.info.axs)/100;
      },
      updateOption( param ){
        this.options = Object.assign( this.options, param);
      },
      updateExtraXs( param ){
        this.extraXs = Object.assign( this.extraXs, param);
      },
      // 加载媒体
      loadMedia( item, index ) {
          let courseId = this.courseId
          let mediaId = item.mediaId;
          let uid = localStorage.uid
          let token = localStorage.token
          let href = `/play.html?courseId=${courseId}&uid=${uid}&token=${token}&mediaId=${mediaId}`
          // const {href} = this.$router.resolve({name:'playMedia', params:{courseId}, query:{mediaId}})
          window.open(href, '_blank');
      }
    }
  };
</script>

<style>
  @import "../../../assets/css/content.css";
  @import "../../../assets/css/course.css";
  @import url("../../../assets/css/m-account.css");
  @import url("./index.css");
  .media-dialog .el-dialog__header{
    /* display: none !important; */
   }
  .media-dialog .el-dialog__body{
    padding: 0 0 16px 0 !important;
   }
   .media-dialog .el-scrollbar__wrap {
    overflow-x: hidden!important;
  }
   .mprocess{
     margin: 0 auto;
     width: 150px !important;
   }

</style>

<style scoped>
  ::v-deep .media-dialog .el-dialog__body {
    padding: 0 0 16px 0 !important;
  }
  ::v-deep .media-dialog .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
  ::v-deep .mprocess {
    margin: 0 auto;
    width: 150px !important;
  }
  ::v-deep .el-progress {
    width: 100%;
  }
  ::v-deep .el-progress__text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #3290D4;
  }
  ::v-deep .el-progress-bar__outer {
    height: 20px !important;
    border: 1px solid #78335f;
    background-color: transparent;
  }
  ::v-deep .el-bg-inner-running .el-progress-bar__inner {
    background-color: unset;
    background-image: linear-gradient(to right, #3587d8, #6855ff);
  }
  ::v-deep .el-bg-inner-error .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #fb3a7e);
  }
   ::v-deep .el-bg-inner-done .el-progress-bar__inner {
    background-image: linear-gradient(to right, #3587d8, #53ff54);
  }

  @media screen and (max-width: 768px) {
    .m-right-block {
      padding: 0 10px;
    }

    .m-account .account-tit {
      display: flex;
    }

    .m-account .account-tit a {
      flex: 1;
      text-align: center;
      padding: 8px 0;
      font-size: 14px;
    }

    ::v-deep .el-table {
      width: 100% !important;
    }

    ::v-deep .el-table__header-wrapper,
    ::v-deep .el-table__body-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    ::v-deep .el-table .cell {
      padding: 0 6px;
      font-size: 13px;
    }

    ::v-deep .el-table .el-table__row td {
      padding: 6px 0;
    }

    ::v-deep .el-progress {
      width: 80px !important;
    }
  }
</style>