课件预览，课中检测

src/api/course/question/requiredQuestion.js

@@ -2,9 +2,9 @@ import request from '@/utils/request'
 
 const requiredQuesitonApi = {
     list: 'courseManagement/requiredQuestion/listPage',
-    addOrUpdate: '/courseManagement/requiredQuestion/addOrUpdate',
+    addOrUpdate: 'courseManagement/requiredQuestion/addOrUpdate',
     requiredQuestionId:'courseManagement/requiredQuestion/requiredQuestionId',
-    //   questionList:'/courseManagement/course/questionList',
+    testing:'/courseManagement/requiredQuestion/testing',
 }
 
 
@@ -35,6 +35,14 @@ export function requiredQuestionId(params) {
     })
 }
 
+//必选题题目内容
+export function testing(params) {
+    return request({
+        url: requiredQuesitonApi.testing,
+        method: 'get',
+        params: params
+    })
+}
 
 // export function menuGet (params) {
 //   return request({

src/views/course/CoursewareList.vue

@@ -90,7 +90,7 @@ export default {
     detail(record){
       this.$router.push({
         path: '/course/CoursewarePreview',
-        query: { coursewareId: record.id}
+        query: { coursewareId: record.id, courseId: this.$route.query.id}
       })  
     }
 

src/views/course/CoursewarePreview.vue

@@ -6,19 +6,62 @@
     </template>
 
     <div style="width:100%">
-      <a-row>
+      <a-row class="left">
         <a-col :span="14">
           <!-- 这里面对应放视频 -->
-          <!-- <h1>视频视频视频</h1> -->
+          <div>
-          <video-player
+            <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"></video-player>
-            class="vjs-custom-skin"
+          </div>
-            ref="videoPlayer"
-            :options="playerOptions"
-            :playsinline="true"
-          >
-          </video-player>
         </a-col>
         <a-col :span="10" style="flex-shrink: 0;">
+          <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}}</p>
+                  </div>
+                </a-radio-group>
+              </a-tab-pane>
+              <a-tab-pane key="2" tab="课中检测" force-render>
+                <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.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" v-if="question != null && question.length != 0">
+                    <div class="info">解析</div>
+                    <div class="info_main">
+                      {{ item.asnwerParse }}
+                    </div>
+                  </div>
+                  <a-divider :style="{ backgroundColor: '#000' }" />
+                </div>
+              </a-tab-pane>
+            </a-tabs>
+          </div>
         </a-col>
       </a-row>
     </div>
@@ -30,48 +73,126 @@ 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 },
   data() {
     return {
-      queryParam: { id: this.$route.query.coursewareId },
+      type: 1,
+      isactive: 0,
+      queryParam: { coursewareId: this.$route.query.coursewareId },
       courseware: [], //课件详情
+      question: [], //课中检测
+      value: 'a',
       playerOptions: {
         // width: 800,
-        height: '360',
+        height: '650',
-        fluid: true,
+        fluid: false,
         autoplay: true,
         muted: true,
         language: 'en',
-        playbackRates: [0.7, 1.0, 1.5, 2.0],
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //设置倍速
+        autoplay: false, //进入时是否开始自动播放
         sources: [
-          {
+          //类型： Array 一组对象，它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组
-            type: 'video/mp4',
+          // {
-            src: 'http://vjs.zencdn.net/v/oceans.mp4'
+          //   type: 'video/mp4',
-          }
+          //   src: this.videoPath,
+          // },
         ],
-        poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg'
+        poster: 'https://pica.zhimg.com/v2-c79ec963f532b2ad2749d5c71353c0d0_1440w.jpg?source=172ae18b', //封面图片
-      }
+      },
     }
   },
   created() {
     let parameter = {}
-    coursewareDeatil(Object.assign(parameter, this.queryParam)).then(res => {
+    coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
-      console.log(res)
+      //课件内容
-      this.courseware = res
+      this.courseware = res.data
+
+      if (this.courseware.videoList.length > 1) this.play(this.courseware.videoList[0].path, 0)
+
+      //课中检测必选题
+      testing(Object.assign(parameter, this.queryParam)).then((res1) => {
+        this.question = res1.data
+        console.log('question-------', this.question)
+      })
     })
   },
   methods: {
     //返回
     goback() {
-      this.$router.push({ path: '/course/CourseList', query: {} })
+      this.$router.push({ path: '/course/CoursewareList', query: { id: this.$route.query.courseId } })
-    }
+    },
-  }
+
+    //选择播放的文件
+    play(path, index) {
+      this.isactive = index
+
+      // 加载视频
+      this.playerOptions.sources = []
+      this.playerOptions.sources.push({ type: 'video/mp4', src: 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;
+}
 </style>