课件预览，课中检测

2021-12-23 14:42:55 +08:00 · 2021-12-23 14:42:55 +08:00 · c9b10a477d
parent 9a1675e59e
commit c9b10a477d
3 changed files with 157 additions and 28 deletions
--- a/src/api/course/question/requiredQuestion.js
+++ b/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({
--- a/src/views/course/CoursewareList.vue
+++ b/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}
      })  
    }

--- a/src/views/course/CoursewarePreview.vue
+++ b/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> -->
-          <video-player
-            class="vjs-custom-skin"
-            ref="videoPlayer"
-            :options="playerOptions"
-            :playsinline="true"
-          >
-          </video-player>
+          <div>
+            <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true"></video-player>
+          </div>
        </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',
-        fluid: true,
+        height: '650',
+        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: [
-          {
-            type: 'video/mp4',
-            src: 'http://vjs.zencdn.net/v/oceans.mp4'
-          }
+          //类型： Array 一组对象，它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组
+          // {
+          //   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 => {
-      console.log(res)
-      this.courseware = res
+    coursewareDeatil(Object.assign(parameter, this.queryParam)).then((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>