v3-lab-web/src/views/safetyEducationExam/safeLearning/el_course/courseDetails.vue

<!--课程详情-->
<template>
  <div class="page-container courseDetails">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p"></p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="chapter-page-one" v-if="pageType == 1">

      <div class="learn-list scrollbar-box">
        <div class="course-info">
          <div class="name-max-box">
            <p>{{infoData.title}}{{infoData.cateTitle}}</p>
            <!--<p>已学习时长：{{infoData.learnDurationStr}}</p>-->
          </div>
          <div class="time-box">
            <div>
              <img src="@/assets/ZDimages/safetyEducationExam/icon_ksxt_xxsc.png">
              <p>课程时长：{{infoData.durationStr}}</p>
            </div>
            <div>
              <img src="@/assets/ZDimages/safetyEducationExam/icon_ksxt_yxq.png">
              <p>有效期：{{infoData.ceType==0?'永久有效':infoData.ceTime}}</p>
            </div>
          </div>
          <p class="num-p">已有{{infoData.learns}}人学习</p>
        </div>
        <div class="for-chapter-box" v-for="(item,index) in infoData.chapterList" v-if="item.children[0]">
          <div class="title-max-p">
            <p class="position-p">{{index+1}}</p>
            <p class="title-p">{{item.title}}</p>
          </div>
          <div class="for-festival-max-box">
            <div class="for-festival-box" v-for="(minItem,minIndex) in item.children">
              <p class="festival-p"></p>
              <p class="name-p cursor-p" @click="goPage(2,minItem)">{{minItem.title}}</p>
              <p class="time-p" v-if="minItem.duration>0">时长：{{minItem.hour>0?minItem.hour+'小时':''}}{{minItem.minute>0?minItem.minute+'分钟':''}}{{minItem.second>0?minItem.second+'秒':''}}</p>
              <p class="null-p"></p>
              <p @click="goPage(3,minItem)" class="button-right-p" :class="minItem.isAssess == 1?'button-right-p-one':'button-right-p-two'">{{minItem.isAssess == 1?'课后考核':'未设置考核'}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <course-preview v-if="pageType == 2" :exerciseData="exerciseData"></course-preview>
    <assessment-preview v-if="pageType == 3" :exerciseData="exerciseData"></assessment-preview>
  </div>
</template>

<script>
  import { examElCourse, } from "@/api/safetyEducationExam/index";
  import coursePreview from "./coursePreview.vue";
  import assessmentPreview from "./assessmentPreview.vue";
  export default {
    name: 'courseDetails',
    props:{
      infoId:{},
    },
    components: {
      coursePreview,
      assessmentPreview
    },
    data() {
      return {
        pageType:1,
        infoData:{},
        exerciseData:{},
      }
    },
    created() {

    },
    mounted() {
      this.getInfo();
    },
    methods: {
      // 页面跳转
      goPage(type,row){
        if(type == 2){
          this.exerciseData = row;
          this.pageType = 2;
        }else if(type == 3){
          if(row.isAssess == 1){
            this.exerciseData = row;
            this.pageType = 3;
          }
        }else if(type == 1){
          this.pageType = 1;
        }
      },
      //返回
      backPage(){
        if(this.pageType != 1){
          this.$set(this,'pageType',1);
        }else{
          this.$parent.goPageEdit(4);
        }
      },
      /** 查询详情 */
      getInfo() {
        let self = this;
        examElCourse(this.infoId.id).then( res => {
          let newList = res.data;
          for(let i=0;i<newList.chapterList.length;i++){
            for(let o=0;o<newList.chapterList[i].children.length;o++){
              let hour = parseInt(newList.chapterList[i].children[o].duration/3600);
              let hourNum = newList.chapterList[i].children[o].duration - this.accMul(hour,3600);
              let minute = parseInt(hourNum/60);
              let second = hourNum - this.accMul(minute,60);
              newList.chapterList[i].children[o].hour = hour;
              newList.chapterList[i].children[o].minute = minute;
              newList.chapterList[i].children[o].second = second;
            }
          }
          self.infoData = newList;
        });
      },
      //乘法
      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)
      },
    }
  }
</script>

<style scoped lang="scss">
  .courseDetails{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .title-box{
      display: flex;
      border-bottom: 1px solid #E0E0E0;
      p:nth-child(1){
        flex:1;
        line-height:80px;
        color:#0045AF;
        font-size:18px;
        margin-left:20px;
      }
      p:nth-child(2){
        margin:20px;
      }
    }
    .chapter-page-one{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      *{
        margin:0;
        padding:0;
        font-weight:500;
        color:#333;
      }
      .learn-top-user-info-box{
        display: flex;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
        .logo-img{
          height:57px;
          width:57px;
          margin:21px 20px 0 40px;
        }
        .title-p{
          width: 300px;
          font-size:18px;
          font-weight:700;
          line-height:100px;
        }
        .time-p{
          flex:1;
          font-weight:700;
          line-height:100px;
          font-size:14px;
        }
        .home-box{
          width:100px;
          display: flex;
          margin-top:35px;
          margin-right:30px;
          img{
            width:30px;
            height:30px;
            margin-right:20px;
          }
          p{
            line-height:30px;
          }
        }
        .user-box{
          min-width:100px;
          display: flex;
          margin-top:35px;
          margin-right:30px;
          img{
            width:30px;
            height:30px;
            margin-right:20px;
          }
          p{
            line-height:30px;
          }
        }
        .button-p{
          width:82px;
          height:34px;
          background: #0045af;
          color:#fff;
          text-align: center;
          line-height:34px;
          margin:33px 20px 0 0;
          border-radius:4px;
          cursor:pointer;
        }
      }
      .learn-list{
        flex:1;
        overflow-y:scroll;
        margin:0;
        /*box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);*/
        .course-info{
          .name-max-box{
            display: flex;
            margin:0 42px;
            p{
              flex:1;
              font-size:18px;
              line-height:52px;
              font-weight:700;
            }
            p:nth-child(1){
              color:#333;
            }
            p:nth-child(2){
              text-align: right;
              color:#0183fa;
            }
          }
          .time-box{
            display: flex;
            margin:0 40px;
            div{
              display: flex;
              margin-right:100px;
              img{
                width:20px;
                height:20px;
                margin:15px 10px 0 0;
              }
              p{
                line-height:50px;
                font-size:16px;
                color:#333;
                font-weight:700;
              }
            }
          }
          .num-p{
            font-size:16px;
            line-height:52px;
            margin:0 40px;
            padding-bottom:10px;
            color:#0183fa;
            font-weight:700;
            border-bottom:3px dashed #dedede;
          }
        }
        .for-chapter-box{
          margin:5px 0 20px;
          .title-max-p{
            display: flex;
            .position-p{
              width:80px;
              height:50px;
              line-height: 50px;
              text-align: center;
              background: #0045af;
              border-top-right-radius: 25px;
              border-bottom-right-radius: 25px;
              color:#fff;
              font-size:24px;
              margin-top:15px;
              margin-right:37px;
            }
            .title-p{
              line-height:85px;
              font-size:19px;
              p{
                color:#02A7F0;
                text-align: right;
                margin-right:20px;
                flex:1;
              }
            }
          }
          .for-festival-max-box{
            padding:10px 0;
            background: #eaf5ff;
            margin:0 120px;
            .for-festival-box{
              padding:0 10px;
              display: flex;
              .festival-p{
                border-radius:50%;
                width:18px;
                height:18px;
                margin:26px 21px 0 38px;
                background: #349cfb;
              }
              .name-p{
                line-height: 67px;
                font-size:17px;
                color:#349cfb;
                width:550px;
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
              }
              .cursor-p{
                cursor:pointer;
              }
              .time-p{
                width:400px;
                line-height: 67px;
                font-size:16px;
              }
              .null-p{
                flex:1;
              }
              .festival-img{
                height:52px;
                width:60px;
                margin:7px 54px 0 0;
              }
              .button-right-p{
                margin:13px 28px 0 0;
                line-height:40px;
                width:120px;
                height:40px;
                font-size:16px;
                text-align: center;
                border-radius:10px;
                cursor:pointer;
              }
              .button-right-p-one{
                color:#fff;
                background: #349cfb;
              }
              .button-right-p-two{
                color:#999;
                background: #dedede;
              }
            }
          }
        }
      }
    }
  }
</style>