welfare-admin/src/views/course/CoursewarePreview.vue

<template>
  <a-card :bordered="false" :title="pageName">
    <template slot="extra">
      <!-- <h4 style="margin-right: 15px; display:inline-block">{{ courseware.classifyName }}</h4> -->
      <a-button v-if="!!!coursewareId" size="small" @click="goback">返回</a-button>
    </template>

    <div style="width:100%;height:600px;">
      <a-row class="left">
        <a-col :span="14">
          <!-- 这里面对应放视频 -->
          <div v-if="courseware.type == '1'">
            <video-player
              class="vjs-custom-skin"
              ref="videoPlayer"
              :options="playerOptions"
              :playsinline="true"
            ></video-player>
          </div>

          <p v-if="courseware.type == '2'" class="text">课件名称：《{{ courseware.name }}》</p>
          <div v-if="courseware.type == '2'" style="margin-left: 30%;margin-top:15%">
            <a-card class="card">
              <div>
                <a-button type="primary" icon="arrow-down" @click="download" class="down">
                  课件下载
                </a-button>
              </div>
            </a-card>
          </div>
        </a-col>
        <a-divider type="vertical" :dashed="false" />
        <a-divider type="vertical" :dashed="false" />
        <a-col :span="10" style="flex-shrink: 0; background-color: #f0f2f5">
          <div>
            <a-tabs default-active-key="1" @change="callback" style="margin-left: 50px">
              <a-tab-pane key="1" tab="课件" style="font-weight: bold">
                <a-radio-group v-model="value" @change="onChange">
                  <div class="coursewarePath">
                    <p
                      style="font-weight: bold; margin-bottom:30px"
                      v-for="(item, index) in courseware.videoList"
                      :key="index"
                      :class="{ active_color: index == isactive }"
                      @click="play(item.path, index, item.name)"
                    >
                      {{ item.name }}
                    </p>
                  </div>
                </a-radio-group>
              </a-tab-pane>
              <a-tab-pane v-if="!this.$route.query.isOther" key="2" tab="课中检测" force-render>
                <div v-if="question.length == 0">
                  <a-empty description="还没有设置必选题~~" />
                </div>
                <div v-if="question.length != 0">
                  <div style="margin-left: 10px;" v-for="(item, index) in question" :key="index">
                    <h1 style="font-weight: bold;" v-if="question != null && question.length != 0">
                      {{ index + 1 }}.（{{ item.questionTypeName }}）{{ item.questionName }}
                    </h1>

                    <!-- 显示单选题和多选题 -->
                    <div v-if="item.questionType == 1 || item.questionType == 2">
                      <div class="answer">A. {{ item.answerA }}</div>
                      <div class="answer">B. {{ item.answerB }}</div>
                      <div class="answer">C. {{ item.answerC }}</div>
                      <div class="answer">D. {{ item.answerD }}</div>
                      <div v-if="item.answerE" class="answer">E. {{ item.answerE }}</div>
                      <div v-if="item.answerF" class="answer">F. {{ item.answerF }}</div>
                    </div>

                    <!-- 判断题内容 -->
                    <div v-if="item.questionType == 3 && item.rightAnswers == 'A' ">
                      <div class="answer">正确答案:&nbsp;&nbsp;&nbsp;&nbsp; 正确 </div>
                    </div>
                    <div v-if="item.questionType == 3 && item.rightAnswers == 'B' ">
                      <div class="answer">正确答案:&nbsp;&nbsp;&nbsp;&nbsp; 错误 </div>
                    </div>

                    <!-- 显示简答题 -->
                    <div v-if="item.questionType == 4">
                      <div class="answer">
                        正确答案:&nbsp;&nbsp;&nbsp;&nbsp;{{ item.rightAnswers }}
                      </div>
                    </div>

                    <!-- 显示填空题 -->
                    <div>
                      <div class="answer" v-for="(item1, ind) in item.answerList" :key="ind">
                        正确答案{{ ind + 1 }}:&nbsp;&nbsp;&nbsp;&nbsp;{{ item1 }}
                      </div>
                    </div>

                    <div class="info_parent">
                      <div class="info">解析</div>
                      <div class="info_main">
                        {{ item.answerParse }}
                      </div>
                    </div>
                    <a-divider :style="{ backgroundColor: '#000' }" />
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
import { coursewareDeatil } from '@/api/course/courseware'
import { testing } from '@/api/course/question/requiredQuestion'

export default {
  components: { videoPlayer },
  props: {
    coursewareId: {
      type: Number
    }
  },
  watch: {},
  data () {
    return {
      pageName:this.$route.query.isOther == 1 ? '资源预览' : '课件预览',
      images: [],
      type: 1,
      isactive: 0,
      queryParam: { coursewareId: this.$route.query.coursewareId || this.coursewareId },
      courseware: [], // 课件详情
      question: [], // 课中检测
      coursewareName: '',
      path: '', // 课件下载路径
      value: 'a',
      playerOptions: {
        // width: 800,
        height: '650',
        fluid: false,
        autoplay: true, // 进入时是否开始自动播放
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 设置倍速
        sources: [
          // 类型： Array 一组对象，它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组
          // {
          //   type: 'video/mp4',
          //   src: this.videoPath,
          // },
        ]
        // poster: 'https://pica.zhimg.com/v2-c79ec963f532b2ad2749d5c71353c0d0_1440w.jpg?source=172ae18b', //封面图片
      }
    }
  },
  created () {
    console.log('porp - coursewareId :', this.coursewareId)
    console.log('porp - isOther :', this.$route.query.isOther)
    const parameter = {}
    coursewareDeatil(Object.assign(parameter, this.queryParam, { isEdit: 0 })).then(res => {
      // 课件内容
      this.courseware = res.data
      if (this.courseware.videoList.length > 0) {
        // 视频截取的封面图
        if (this.courseware.image != '' || this.courseware.image) {
          this.images = this.courseware.image && this.courseware.image.split(',') || []
          this.playerOptions.poster = this.images[0]
        }
        // 课件视频展现
        if (this.courseware.type == '1') this.play(this.courseware.videoList[0].path, 0)

        // 文本下载
        if (this.courseware.type == '2') {
          this.coursewareName = this.courseware.videoList[0].name
          this.path = this.courseware.videoList[0].path
        }
      }

      // 课中检测必选题
      testing(Object.assign(parameter, this.queryParam)).then(res1 => {
        this.question = res1.data
      })
    })
  },
  methods: {
    // 返回
    goback () {
      if (this.$route.query.isOther) {
        this.$router.go(-1)
      } else {
        this.$router.push({
          path: '/course/CoursewareList',
          query: { id: this.$route.query.courseId, type: this.$route.query.types }
        })
      }
    },

    // 选择播放的文件/下载的文件
    play (path, index, name) {
      this.isactive = index

      if (this.courseware.type == '2') {
        this.coursewareName = name
        this.path = path
      } else {
        // 加载视频
        this.playerOptions.sources = []
        this.playerOptions.sources.push({ type: 'video/mp4', src: path })
        console.log('index', index)
        console.log('images', this.images)
        this.playerOptions.poster = this.images[index]
      }
    },

    // 下载课件
    download () {
      window.location.href = this.path // 文件下载
    },

    // 控制显示视频还是课中检测
    callback (key) {
      console.log(key)
    },
    onChange (e) {
      console.log(`checked = ${e.target.value}`)
    }
  }
}
</script>
<style lang="less" scoped>
.vjs-custom-skin {
  width: 100%;
}

.coursewarePath {
  margin: 20px 0 0 0;
  cursor: pointer;
}

.active_color {
  color: rgba(63, 191, 241, 0.685);
  font-weight: bold;
  display: inline-block;
}
.left {
  height: 100%;
  background-color: #f0f2f5;
}
.text {
  margin-top: 40px;
  font-weight: bold;
  font-size: 25px;
  display: inline-block;
}
.answer {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
}
.info_parent {
  margin-top: 10px;
  height: auto;
}
.info {
  width: 50px;
  height: 20px;
  line-height: 15px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #000;
  background-color: white;
}
.info_main {
  width: calc(100% - 50px - 20px);
  margin-left: 20px;
  font-size: 13px;
  margin-left: 70px;
  margin-top: -20px;
}
.text {
  font-size: 15px;
  white-space: pre-wrap;
  word-break: normal;
  word-wrap: break-word;
  text-align: center;
  margin-left: 20px;
}
.card {
  width: 300px;
  height: 200px;
  position: relative;
  width: 350px;
  height: 160px;
}
.down {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 3px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>