zhgdyun/src/views/projectFront/examination/videoLearning.vue

<template>
  <div>
    <div class="fullHeight">
      <div class="headers">
        <div class="headerName">课程学习</div>
      </div>

      <video
        :src="$store.state.FILEURL + courseDetail.eduVideo"
        controls
        class="videoBox"
      ></video>
      <div class="courseTitle">
        {{ courseDetail.eduCourseName }}
      </div>
      <div class="desc">
        课程类型：{{ educateTypeList[courseDetail.eduType - 1] }}
      </div>
      <div class="desc">试卷总分：{{ courseDetail.totalScore }}</div>
      <div class="desc">及格分数：{{ courseDetail.passScore }}</div>
      <div class="desc">创建时间：{{ courseDetail.addTime }}</div>
      <button
        type="primary"
        class="btn submitBtn big"
        @click="gotoTest"
        v-if="courseDetail.questionList.length > 0"
      >
        开始考试
      </button>
    </div>
  </div>
</template>

<script>
import { getSelectSafeEducationQuestionInfoList } from '@/assets/js/api/safeManage.js'
export default {
  data() {
    return {
      courseDetail: {
        eduAddr: '',
        eduClasshour: '',
        eduContent: '',
        eduCourseName: '',
        eduPhoto: '',
        eduTeacher: '',
        eduTime: '',
        eduType: 1,
        eduVideo: '',
        passScore: '',
        projectSn: '',
        questionList: [],
        totalScore: '',
        addTime: ''
      },
      educateTypeList: [
        '入场三级教育',
        '定期安全教育',
        '安全技术交底',
        'VR安全教育'
      ],
      eduId: '',
      workerId: ''
    }
  },
  created(options) {
    console.log('获取课程详细数据1516', this.$route.query)
    this.eduId = this.$route.query.eduId
    this.workerId = this.$route.query.workerId
    this.getDetailData()
  },
  methods: {
    gotoTest() {
      this.$router.push({
        path: '/test',
        query: {
          eduId: this.eduId,
          workerId: this.workerId
        }
      })
    },
    //获取课程详细数据
    getDetailData() {
      var that = this
      console.log('获取课程详细数据1515')
      getSelectSafeEducationQuestionInfoList({ eduId: this.eduId }).then(
        (result) => {
          if (result.result) {
            that.courseDetail = result.result.safeEducation
          }
        }
      )
    }
  }
}
</script>

<style scoped>
.fullHeight {
  width: 100%;
  height: 120%;
}
.videoBox {
  width: 100%;
  height: 100rem;
  margin: 0rem 0;
}
.courseTitle {
  font-size: 7.5rem;

  padding: 2rem 7.5rem;
}
.desc {
  font-size: 6rem;
  opacity: 0.6;
  padding: 2.5rem 0 0 7.5rem;
}
.submitBtn {
  margin: -70rem 5rem;
  position: fixed;
  bottom: 10rem;
  /* left: 20px; */
  width: calc(100% - 10rem);
  background: #4181fe;
  height: 15rem;
  border: none;
  color: #fff;
  font-size: 7.5rem;
  border-radius: 10rem;
}
.headers {
  /* border-bottom: 0.5rem solid #f3f3f3; */
  height: 8rem;
  color: #3d4490;
  font-size: 7.5rem;
  text-align: center;
  line-height: 6rem;
  margin-top: -55%;
  /* background-color: pink; */
}

/* 播放器按钮 */
::v-deep video::-webkit-media-controls-play-button {
  /* background-image: url(play-button.png); */
  /* display: none; */
  width: 200rem;
  height: 200rem;
}
</style>