merge...

client/src/action/CourseAction.js

@@ -104,12 +104,27 @@ export default class CourseAction extends BaseACTION {
           unit: item.lecturer_title || ''
         })
       }
+      const findChapter = function (id, list) {
+        for (const item of list) {
+          if (item.resource_id === id) {
+            return item
+          }
+          if (item.children && item.children.length) {
+            const found = findChapter(id, item.children)
+            if (found) {
+              return found
+            }
+          }
+        }
+      }
       /* 课程内容 */
       json.tabs1ChapterList = {
+        currentChapter: findChapter(cur.latest_play, data.chapters),
         currentChapterId: cur.latest_play || '',
         currentVideoProvider: cur.latest_play_type || '1',
         course: cur.chapters.map((_, i) => {
           return {
+            id: _.id,
             title: _.name,
             isUp: true,
             chapters: _.children.map((__, j) => {
@@ -126,9 +141,6 @@ export default class CourseAction extends BaseACTION {
                   case 0: str = '直播未开始'; break
                   case 1: str = '正在直播'; break
                   case 2: str = '直播结束'; break
-                  case 101: str = '直播结束，视频剪辑中'; break // 录制开始
-                  case 102: str = '直播结束，视频剪辑中'; break // 录制结束
-                  case 103: str = '观看回放'; break
                   default: str = '直播未开始'
                 }
                 // 5分钟内显示“即将开始”，5~1小时内“N分钟后开始”，1~24小时内“N小时后开始”，1天以上“N天后开始”天就显示年月日
@@ -144,8 +156,8 @@ export default class CourseAction extends BaseACTION {
                     str = parseInt(time / (24 * 60 * 60)) + '天后开始'
                   }
                 }
-                if (__.live.live_status === 103 && __.live.enable_record !== undefined && __.live.enable_record !== null && !__.live.enable_record) {
-                  str = ''
+                if (__.live.live_status === 2 && __.live.enable_record && __.live.record_url) {
+                  str = '观看回放'
                 }
                 __.live.statusStr = str
               }
@@ -172,35 +184,39 @@ export default class CourseAction extends BaseACTION {
         title: '课程大作业',
         isUp: true,
         chapters: [],
-        type: 'course_work',
+        id: 'course_work',
         sid: sid,
-        cid: cid
+        cid: cid,
+        type: 99
       })
       json.tabs1ChapterList.course.push({
         title: '课程资料',
         isUp: true,
         chapters: [],
-        type: 'course_info',
+        id: 'course_info',
         sid: sid,
-        cid: cid
+        cid: cid,
+        type: 100
       })
       json.tabs1ChapterList.course.push({
         title: '教学评估',
         isUp: true,
         chapters: [],
-        type: 'teach_evaluation',
+        id: 'teach_evaluation',
         sid: sid,
-        cid: cid
+        cid: cid,
+        type: 102
       })
       if (cur.course_examination) {
         json.tabs1ChapterList.course.push({
           title: '课程考试',
           isUp: true,
           chapters: [],
-          type: 'exam',
+          id: 'course_exam',
           sid: sid,
           cid: cid,
-          examId: cur.course_examination
+          examId: cur.course_examination,
+          type: 102
         })
       }
       /* 课程考核 考核标准文案读取  */

client/src/action/PlayerAction.js

@@ -93,9 +93,6 @@ export default class PlayerAction extends BaseACTION {
                   case 0: str = '直播未开始'; break
                   case 1: str = '正在直播'; break
                   case 2: str = '直播结束'; break
-                  case 101: str = '直播结束，视频剪辑中'; break // 录制开始
-                  case 102: str = '直播结束，视频剪辑中'; break // 录制结束
-                  case 103: str = '观看回放'; break
                   default: str = '直播未开始'
                 }
                 // 5分钟内显示“即将开始”，5~1小时内“N分钟后开始”，1~24小时内“N小时后开始”，1天以上“N天后开始”天就显示年月日
@@ -111,8 +108,8 @@ export default class PlayerAction extends BaseACTION {
                     str = parseInt(time / (24 * 60 * 60)) + '天后开始'
                   }
                 }
-                if (__.live.live_status === 103 && __.live.enable_record !== undefined && __.live.enable_record !== null && !__.live.enable_record) {
-                  str = ''
+                if (__.live.live_status === 2 && __.live.enable_record && __.live.record_url) {
+                  str = '观看回放'
                 }
                 __.live.statusStr = str
               }
@@ -122,6 +119,7 @@ export default class PlayerAction extends BaseACTION {
                 video_provider: (__.video && __.video.video_provider) || '',
                 time: (__.video && tools.convertTime.durationToTimeString(__.video.video_length)) || '',
                 name: __.name,
+                chapterId: __.id, // 需要chapterId 用来 提交 作业或问题 , 这个 chapterId 是 每个章节下 对应课程的 id，不是 章节id
                 type: __.type,
                 work_type: (__.homework && __.homework.work_type) || '',
                 homework: _homework,
@@ -194,7 +192,8 @@ export default class PlayerAction extends BaseACTION {
         json: json,
         courseInfo: _res.files || [],
         courseWork: _res.curriculum || {},
-        curJson: curJson
+        curJson: curJson,
+        rawResponse: _res
       }
     })
   }
@@ -332,4 +331,130 @@ export default class PlayerAction extends BaseACTION {
   getLiveList () { return Player.getLiveList().then(res => res) }
   /* 获取云课堂 url */
   getCloudUrl () { return Player.getCloudUrl().then(res => res) }
+  /* 获取考卷信息 */
+  getExamInfo (cid, sid) {
+    return Player.getExamInfo(cid, sid).then(_res => {
+      const exam = {}
+      exam.id = _res.id
+      exam.title = _res.title
+      exam.score = {}
+      exam.examination = _res.examination.map(exam => {
+        for (let i = 0; i < exam.radioList.length; i++) {
+          exam.radioList[i].user_answer = ''
+          exam.radioList[i].right_answer = ''
+          exam.radioList[i].get_score = -1
+        }
+        for (let i = 0; i < exam.checkboxList.length; i++) {
+          exam.checkboxList[i].user_answer = []
+          exam.checkboxList[i].right_answer = []
+          exam.checkboxList[i].get_score = -1
+        }
+        for (let i = 0; i < exam.shortAnswerList.length; i++) {
+          exam.shortAnswerList[i].user_answer = ''
+          exam.shortAnswerList[i].get_score = -1
+          exam.shortAnswerList[i].attachments = []
+          exam.shortAnswerList[i].upload = {
+            type: 'upload-form',
+            label: '附件上传：',
+            model: 'attachments',
+            action: webConf.apiBaseURL + '/util/upload-file',
+            data: {
+              special: 'exam'
+            },
+            attrs: {
+              multiple: true,
+              headers: {
+                tenant: 'sofia'
+              }
+            },
+            html: `
+              <div style="color: #72818c; font-size: 14px;">
+                <p style="margin: 0;">支持doc,docx,ppt,xls,txt,rar,zip,pdf,jpg,pic,png格式的文件，文件小于30M。</p>
+              </div>
+            `
+          }
+        }
+        return exam
+      })
+      return exam
+    })
+  }
+
+  /* 获取考卷结果 */
+  getExamAnswer (cid, sid, eid, obj) {
+    return Player.getExamAnswer(cid, sid, eid, obj).then(_res => {
+      if (_res.code) { return _res }
+      const exam = {}
+      let tmp = null
+      exam.id = _res.id
+      exam.title = _res.title
+      exam.type = _res.type
+      exam.score = _res.score
+      exam.isPublished = _res.is_published || ''
+      exam.submitted_time = _res.submitted_time
+      exam.examination = _res.sheet.map(exam => {
+        exam.radioList = exam.radioList || []
+        for (let i = 0; i < exam.radioList.length; i++) {
+          tmp = exam.radioList[i]
+          if (!tmp.user_answer) tmp.user_answer = ''
+          if (!tmp.right_answer) tmp.right_answer = ''
+          if (!tmp.get_score) tmp.get_score = -1
+        }
+        exam.checkboxList = exam.checkboxList || []
+        for (let i = 0; i < exam.checkboxList.length; i++) {
+          tmp = exam.checkboxList[i]
+          if (!tmp.user_answer || !tmp.user_answer.length) tmp.user_answer = []
+          // if (!tmp.right_answer || !tmp.right_answer.length) tmp.right_answer = []
+          tmp.right_answer = tmp.right_answer || []
+          if (!tmp.get_score) tmp.get_score = -1
+        }
+        exam.shortAnswerList = exam.shortAnswerList || []
+        for (let i = 0; i < exam.shortAnswerList.length; i++) {
+          tmp = exam.shortAnswerList[i]
+          tmp.user_answer = tmp.user_answer ? Base64.decode(tmp.user_answer.replace(/ /gi, '+')) : ''
+          if (!tmp.attachments || !tmp.attachments.length) tmp.attachments = []
+          tmp.upload = {
+            type: 'upload-form',
+            label: '附件上传：',
+            model: 'attachments',
+            action: webConf.apiBaseURL + '/util/upload-file',
+            data: {
+              special: 'exam'
+            },
+            attrs: {
+              multiple: true,
+              headers: {
+                tenant: 'sofia'
+              }
+            },
+            html: `
+              <div style="color: #72818c; font-size: 14px;">
+                <p style="margin: 0;">支持doc,docx,ppt,xls,txt,rar,zip,pdf,jpg,pic,png格式的文件，文件小于30M。</p>
+              </div>
+            `
+          }
+        }
+        return exam
+      })
+      return exam
+    })
+  }
+
+  /* 获取考试状态 */
+  getExamStatus (cid, sid, eid) {
+    return Player.getExamStatus(cid, sid, eid).then(_res => {
+      /* 00: 考场未开放，不允许进入
+      10：考场开放，允许进入
+      20：开始答题
+      90：考试已结束 */
+      return _res
+    })
+  }
+
+  /* 提交考卷 */
+  submitExam (cid, sid, eid, obj) {
+    return Player.submitExam(cid, sid, eid, obj).then(_res => {
+      return _res
+    })
+  }
 }

client/src/api/base_api.js

@@ -100,9 +100,9 @@ export default class API {
       if (data && data.code !== undefined) {
         if (data.code !== 0) {
           if (!/account\/get-user-info/gi.test(res.config.url)) {
-            Message({ type: 'error', message: data.msg })
+            data.msg && Message({ type: 'error', message: data.msg })
           }
-          return null
+          return data
         } else if (data.code === 0) {
           return data.data
         }

client/src/api/player_api.js

@@ -102,4 +102,32 @@ export default class PlayerAPI extends BaseAPI {
    * 跨域接口请求 - 直接获取云课堂设置
    */
   getCloudUrl = (obj = {}) => this.get('https://node-server.ezijing.com/get/cloud-class', obj)
+  /**
+   * 获取考卷信息
+   * @param {[string]} course_id -> cid
+   * @param {[string]} semester_id -> sid
+   */
+  getExamInfo = (cid, sid) => this.get(`/v2/education/${sid}/${cid}/examination`, {})
+  /**
+   * 获取考卷结果
+   * @param {[string]} course_id -> cid
+   * @param {[string]} semester_id -> sid
+   * @param {[string]} exam_id -> eid
+   */
+  getExamAnswer = (cid, sid, eid, obj = {}) => this.get(`/v2/education/${sid}/${cid}/examination/${eid}/sheet`, obj)
+  /**
+   * 获取考试状态
+   * @param {[string]} course_id -> cid
+   * @param {[string]} semester_id -> sid
+   * @param {[string]} exam_id -> eid
+   */
+  getExamStatus = (cid, sid, eid) => this.get(`/v2/education/${sid}/${cid}/examination/${eid}/status`, {})
+  /**
+   * 提交考卷
+   * @param {[string]} course_id -> cid
+   * @param {[string]} semester_id -> sid
+   * @param {[string]} exam_id -> eid
+   * @param {[object]} obj -> 提交对象类
+   */
+  submitExam = (cid, sid, eid, obj = {}) => this.post(`/v2/education/${sid}/${cid}/examination/${eid}/sheet`, obj, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
 }

client/src/components/beforeEnter/Before.js

@@ -3,36 +3,56 @@ import cAction from '@action'
 import { Message } from 'element-ui'
 
 export default class Before {
-  constructor (opt) {
+  constructor(opt) {
+    const UA = navigator.userAgent
     this.opt = opt || {}
+    // 免登录列表
+    this.whiteList = [
+      'login-normal',
+      'login-code',
+      'login-forget',
+      'studentHelp',
+      'teacherHelp'
+    ]
+    this.isMobile = /android|iphone|ipod/i.test(UA)
   }
 
-  async update (to, from, next) {
-    if (to.name === 'studentHelp' || to.name === 'teacherHelp') {
-      next()
-    } else if (to.name !== 'login-normal' && to.name !== 'login-code' && to.name !== 'login-forget') { // 所有登录页 不进行登录校验
-      const isLogin = await this.isLogin()
-      if (isLogin) {
-        next()
-      } else {
-        next({ path: '/login/index?rd=' + encodeURIComponent(to.fullPath) }) // 需要传参并再传回来
-      }
-    } else {
+  async update(to, from, next) {
+    // 免登录页面
+    if (this.whiteList.includes(to.name)) {
       next()
+      return
+    }
+    // 检测登录状态
+    const isLogin = await this.isLogin()
+    if (!isLogin) {
+      next({
+        path: '/login/index',
+        query: { rd: encodeURIComponent(to.fullPath) }
+      })
+      return
+    }
+    // 移动端
+    if (this.isMobile && to.name !== 'mobileIndex') {
+      next({ path: '/mobile/list' })
+      return
     }
+    next()
   }
 
   /* 获取用户信息 */
-  isLogin () {
+  isLogin() {
     if (window.G.UserInfo) return true
-    return cAction.Other.getInfo().then(res => {
-      window.G.UserInfo = res
-      return true
-    }).catch(res => {
-      if (res.code !== 80201) {
-        Message({ type: 'error', message: res.message })
-      }
-      return false
-    })
+    return cAction.Other.getInfo()
+      .then((res) => {
+        window.G.UserInfo = res
+        return true
+      })
+      .catch((res) => {
+        if (res.code !== 80201) {
+          Message({ type: 'error', message: res.message })
+        }
+        return false
+      })
   }
 }

client/src/components/comTable/tableList.vue

@@ -61,6 +61,7 @@
         :page-size="page.size"
         layout="total, prev, pager, next, jumper"
         :total="page.total"
+        :hide-on-single-page="true"
         @current-change="handleCurrentChange"
       ></el-pagination>
     </div>
@@ -154,8 +155,8 @@ export default {
 
         // 分页
         if (this.hasPage) {
-          this.dataList = response.list
-          this.page.total = parseInt(response.count)
+          this.dataList = response.list || []
+          this.page.total = parseInt(response.count) || 0
         }
       })
     },
@@ -164,7 +165,10 @@ export default {
       this.fetchData()
     },
     // 刷新
-    refersh() {
+    refersh(isForce = false) {
+      if (isForce) {
+        this.page.currentPage = 1
+      }
       this.fetchData()
     }
   },

client/src/components/editor.vue

+<template>
+  <div class="editor">
+    <textarea name="editor" :id="textareaElementId" :disabled="disabled"></textarea>
+  </div>
+</template>
+
+<script>
+import { uniqueId } from 'lodash'
+export default {
+  name: 'VEditor',
+  props: {
+    value: { type: String },
+    disabled: { type: Boolean, default: null }
+  },
+  data() {
+    return {
+      textareaElementId: uniqueId('editor_'),
+      ckEditor: null
+    }
+  },
+  watch: {
+    value(val) {
+      if (this.ckEditor && this.ckEditor.getData() !== val) {
+        this.ckEditor.setData(val)
+      }
+    },
+    disabled(val) {
+      if (this.ckEditor && this.ckEditor.instanceReady) {
+        this.ckEditor.setReadOnly(val)
+      }
+    }
+  },
+  methods: {
+    createEditor() {
+      const config = {
+        height: 400,
+        uiColor: '#eeeeee',
+        filebrowserImageUploadUrl: '/api/ckeditor/img/upload',
+        // resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
+        toolbar: [
+          // { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] },
+          { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
+          { name: 'colors', items: ['TextColor', 'BGColor'] },
+          { name: 'tools', items: ['Maximize', 'ShowBlocks'] },
+          // { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
+          { name: 'editing', items: ['Find', 'Replace'] },
+          // { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
+          '/',
+          {
+            name: 'basicstyles',
+            items: [
+              'Bold',
+              'Italic',
+              'Underline',
+              'Strike',
+              'Subscript',
+              'Superscript',
+              '-',
+              'RemoveFormat'
+            ]
+          },
+          {
+            name: 'paragraph',
+            items: [
+              'NumberedList',
+              'BulletedList',
+              '-',
+              'Outdent',
+              'Indent',
+              '-',
+              'Blockquote',
+              'CreateDiv',
+              '-',
+              'JustifyLeft',
+              'JustifyCenter',
+              'JustifyRight',
+              'JustifyBlock',
+              '-',
+              'BidiLtr',
+              'BidiRtl'
+            ]
+          },
+          { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
+          { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
+        ]
+      }
+
+      if (this.disabled !== null) {
+        config.readOnly = this.disabled
+      }
+
+      const editor = (this.ckEditor = CKEDITOR.replace(
+        this.textareaElementId,
+        config
+      ))
+      editor.on('instanceReady', () => {
+        const data = this.value
+        editor.fire('lockSnapshot')
+
+        editor.setData(data, {
+          callback: () => {
+            this.bindEvent()
+
+            const newData = editor.getData()
+            // Locking the snapshot prevents the 'change' event.
+            // Trigger it manually to update the bound data.
+            if (data !== newData) {
+              this.$once('input', () => {
+                this.$emit('ready', editor)
+              })
+
+              this.$emit('input', newData)
+            } else {
+              this.$emit('ready', editor)
+            }
+
+            editor.fire('unlockSnapshot')
+          }
+        })
+      })
+    },
+    bindEvent() {
+      const editor = this.ckEditor
+      editor.on('change', evt => {
+        const data = editor.getData()
+        if (this.value !== data) {
+          this.$emit('input', data, evt, editor)
+        }
+      })
+
+      editor.on('focus', evt => {
+        this.$emit('focus', evt, editor)
+      })
+
+      editor.on('blur', evt => {
+        this.$emit('blur', evt, editor)
+      })
+    }
+  },
+  mounted() {
+    this.createEditor()
+  },
+  beforeDestroy() {
+    this.ckEditor && this.ckEditor.destroy()
+    this.ckEditor = null
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+</style>

client/src/components/upload-form/elemInfo.md

+## 组件简介
+
+|  字段值  | 说明                       | 字段属性 | 默认值 |
+| ------- | ------------------------- | ------- | ----- |
+| `type`  | 类型：`String`; 说明：组件类型名 | 自定义字段 | `upload-form` |
+| `action`  | 类型：`String`; 说明：上传请求接口path | 自定义字段 | `` |
+| `deleteAction`  | 类型：`String`; 说明：删除请求接口path | 自定义字段 | `` |
+| `html`  | 类型：`String`; 说明：上传说明，支持html | 自定义字段 | `` |
+| `label` | 类型：`String`; 说明：组件左侧显示名称 | element-ui el-form-item对应字段 | `''` |
+| `label-width` | 类型：`String`; 说明：组件左侧显示名称宽度（加单位），父级设置可以子级继承 | element-ui el-form-item对应字段 | `''` |
+| `required` | 类型：`Boolean`; 说明：标识是否必填 | element-ui el-form-item对应字段 | `false` |
+| `disabled` | 类型：`Boolean`; 说明：标识是否只读 | element-ui el-form-item对应字段 | `false` |
+| `model` | 类型：`String`; 说明：表单提交name值和回显对照字段 | 自定义字段 | `''` |
+| `placeholder` | 类型：`String`; 说明：组件input框中，默认提示文字 | element-ui el-input对应字段 | `''` |
+| `attrs` | 类型：`Object`; 说明：定义标签上Data属性值 | element-ui对应字段 | `{}` |
+| `rules` | 类型：`Array`; 说明：组件错误提示规则 | element-ui el-form-item对应字段 | `[]` |
+
+### Demo Example:
+``` js
+return {
+  type: 'upload-form',
+  label: '姓名',
+  labeWidth: '160px',
+  required: true,
+  disabled: false,
+  model: 'uploadArrs',
+  action: '',
+  data: {
+
+  },
+  deleteAction: '',
+  deleteData: {
+
+  },
+  html: `
+    <div style="color: #72818c; font-size: 14px;">
+      <p style="margin: 0;">申请者需要将有效身份证件原件扫描或者拍照后提交。</p>
+      <p style="margin: 0;">请您提供有效身份证件的扫描件，身份证与台港澳居民大陆通行证应包括正反两面扫描件。</p>
+      <p style="margin: 0;">只上传一个文件，多份文件需合并到一个文件后打印出来检查无误后再上传。</p>
+      <p style="margin: 0;">上传文件仅限“jpg,jpeg,gif,png”格式，文件小于10MB。</p>
+    </div>
+  `,
+  attrs: {
+    multiple: false,
+    limit: 1
+  },
+  rules: [
+    {
+      required: true,
+      message: '请上传',
+      trigger: 'blur'
+    }
+  ]
+}
+```
+
+* 其他属性 [参考文档]([https://](https://element.eleme.cn/#/zh-CN/component/input))

client/src/components/upload-form/index.js

+import Upload from './src/uploadForm.vue'
+
+/* istanbul ignore next */
+Upload.install = function (Vue) {
+  Vue.component(Upload.name, Upload)
+}
+
+export default Upload

client/src/components/upload-form/src/ajax.js

+function getError (action, option, xhr) {
+  let msg
+  if (xhr.response) {
+    msg = `${xhr.response.error || xhr.response}`
+  } else if (xhr.responseText) {
+    msg = `${xhr.responseText}`
+  } else {
+    msg = `fail to post ${action} ${xhr.status}`
+  }
+
+  const err = new Error(msg)
+  err.status = xhr.status
+  err.method = 'post'
+  err.url = action
+  return err
+}
+
+function getBody (xhr) {
+  const text = xhr.responseText || xhr.response
+  if (!text) {
+    return text
+  }
+
+  try {
+    return JSON.parse(text)
+  } catch (e) {
+    return text
+  }
+}
+
+export function deleteFile (option) {
+  if (typeof XMLHttpRequest === 'undefined') {
+    return
+  }
+
+  // eslint-disable-next-line no-undef
+  const xhr = new XMLHttpRequest()
+  let action = option.action
+
+  xhr.onerror = function error (e) {
+    option.onError(e)
+  }
+
+  xhr.onload = function onload () {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return option.onError(getError(action, option, xhr))
+    }
+
+    option.onSuccess(getBody(xhr))
+  }
+
+  xhr.open('delete', action, true)
+
+  if (option.withCredentials && 'withCredentials' in xhr) {
+    xhr.withCredentials = true
+  }
+
+  const headers = option.headers || {}
+
+  for (let item in headers) {
+    if (headers.hasOwnProperty(item) && headers[item] !== null) {
+      xhr.setRequestHeader(item, headers[item])
+    }
+  }
+  xhr.send()
+  return xhr
+}
+
+export default function upload (option) {
+  if (typeof XMLHttpRequest === 'undefined') {
+    return
+  }
+
+  // eslint-disable-next-line no-undef
+  const xhr = new XMLHttpRequest()
+  const action = option.action
+
+  if (xhr.upload) {
+    xhr.upload.onprogress = function progress (e) {
+      if (e.total > 0) {
+        e.percent = e.loaded / e.total * 100
+      }
+      option.onProgress(e)
+    }
+  }
+
+  // eslint-disable-next-line no-undef
+  const formData = new FormData()
+
+  if (option.data) {
+    Object.keys(option.data).forEach(key => {
+      formData.append(key, option.data[key])
+    })
+  }
+
+  formData.append(option.filename, option.file, option.file.name)
+
+  xhr.onerror = function error (e) {
+    option.onError(e)
+  }
+
+  xhr.onload = function onload () {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return option.onError(getError(action, option, xhr))
+    }
+
+    option.onSuccess(getBody(xhr))
+  }
+
+  xhr.open('post', action, true)
+
+  if (option.withCredentials && 'withCredentials' in xhr) {
+    xhr.withCredentials = true
+  }
+
+  const headers = option.headers || {}
+
+  for (let item in headers) {
+    if (headers.hasOwnProperty(item) && headers[item] !== null) {
+      xhr.setRequestHeader(item, headers[item])
+    }
+  }
+  xhr.send(formData)
+  return xhr
+}

client/src/components/upload-form/src/uploadForm.vue

+<template>
+  <div class="upload-form">
+    <div class="u-babel">{{ item.label }}</div>
+    <el-upload style="display: inline-block;"
+      :action="item.action"
+      :data="item.data"
+      :before-upload="beforeUploadFile"
+      :on-success="onSuccessFile"
+      :with-credentials="true"
+      :show-file-list="false"
+      :disabled="(item.disabled || false) || !isUpload"
+      v-bind="item.attrs || {}"
+    >
+      <el-button type="primary" size="small" :disabled="!isUpload">点击上传</el-button>
+      <template v-if="formData[item.model] !== null && formData[item.model] !== '' && formData[item.model] !== undefined">
+        <div class="self-icon el-icon-circle-check" style="color: #237f00;"></div>
+      </template>
+      <div class="self-icon el-icon-circle-close" style="color: #b01c40;"></div>
+    </el-upload>
+    <div style="overflow: hidden; padding: 10px 0 0 0;">
+      <template v-if="filesArr.length">
+        <!-- 遍历显示文件 -->
+        <template v-for="(item, index) in filesArr">
+          <template v-if="/(jpeg)|(jpg)|(png)|(gif)/gi.test(item.url)">
+            <div v-bind:key="item.id" class="show-file">
+              <template v-if="!(item.disabled || false) && isUpload">
+                <div class="close" @click="deleteFiles(index)">X</div>
+              </template>
+              <el-avatar shape="square" :size="100" fit="contain" :src="item.url"></el-avatar>
+              <span class="title">{{ item.sso_file_name }}</span>
+              <div class="hover">
+                <a target="_blank" :href="item.url">下载</a>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div v-bind:key="item.id" class="show-file">
+              <template v-if="!(item.disabled || false) && isUpload">
+                <div class="close" @click="deleteFiles(index)">X</div>
+              </template>
+              <el-avatar shape="square" :size="100" fit="contain" :src="item.url"></el-avatar>
+              <span class="title">{{ item.sso_file_name }}</span>
+              <div class="hover">
+                <a target="_blank" :href="item.url">下载</a>
+              </div>
+            </div>
+          </template>
+        </template>
+      </template>
+    </div>
+    <div class='info' style="line-height: 1.5;" v-html="item.html"></div>
+  </div>
+</template>
+
+<script>
+// import { deleteFile } from './ajax'
+
+export default {
+  name: 'UploadForm',
+  componentName: 'UploadForm',
+  props: {
+    item: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    formData: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    isUpload: {
+      type: Boolean,
+      default () {
+        return true
+      }
+    }
+  },
+  data () {
+    const tmpArr = this.formData[this.item.model] || []
+    this.formData[this.item.model] = tmpArr
+    return {
+      project_id: '',
+      filesArr: tmpArr
+    }
+  },
+  methods: {
+    beforeUploadFile (file) {},
+    onSuccessFile (response, file, fileList) {
+      response.url = response.url || response.file || ''
+      response.sso_file_name = file.name
+      this.filesArr.push(response)
+      // this.$emit('onSubmit')
+    },
+    deleteFiles (index) {
+      this.filesArr.splice(index, 1)
+      // let temp = this.filesArr[index]
+      // deleteFile({
+      //   action: this.item.deleteAction + '/' + temp.id + '?project_id=' + this.item.data.project_id,
+      //   onError: () => {},
+      //   onSuccess: (res) => {
+      //     if (res.status === 200) {
+      //       this.filesArr.splice(index, 1)
+      //     }
+      //   }
+      // })
+    }
+  },
+  watch: {
+    filesArr: {
+      immediate: true,
+      deep: true,
+      handler (value) {
+        if (this.formData[this.item.model].length !== value.length) {
+          this.formData[this.item.model] = value
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .u-babel {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .self-icon {
+    display: none !important;
+    vertical-align: middle;
+    margin-left: 10px;
+    font-size: 21px;
+    line-height: 22px;
+  }
+  .is-error .self-icon.el-icon-circle-close { display: inline-block !important; }
+  .is-success .self-icon.el-icon-circle-check { display: inline-block !important; }
+
+  .show-file {
+    position: relative;
+    float: left;
+    margin-right: 10px;
+    .close {
+      position: absolute;
+      z-index: 10;
+      right: -10px;
+      top: -10px;
+      width: 20px;
+      height: 20px;
+      color: #fff;
+      font-size: 12px;
+      line-height: 20px;
+      text-align: center;
+      background: #efefef;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+    .el-avatar {
+      img {
+        width: 100%;
+      }
+    }
+    .title {
+      position: absolute;
+      left: 0;
+      bottom: 8px;
+      width: 100%;
+      padding-left: 5px;
+      font-size: 12px;
+      line-height: 20px;
+      background: #efefef;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-all;
+      box-sizing: border-box;
+    }
+    .hover {
+      display: none;
+      position: absolute;
+      z-index: 9;
+      top: 0;
+      left: 0;
+      height: 100px;
+      width: 100%;
+      background: rgba(0, 0, 0, 0.2);
+      line-height: 100px;
+      text-align: center;
+      a {
+        color: #f1f1f1;
+      }
+    }
+    &:hover {
+      .hover {
+        display: block;
+      }
+    }
+  }
+</style>

client/src/components/upload.vue

+<template>
+  <div class="upload">
+    <el-upload action :show-file-list="false" :http-request="httpRequest" v-bind="$attrs">
+      <slot></slot>
+      <el-button type="text" size="small" icon="el-icon-upload">点击上传</el-button>
+      <template v-slot:tip>
+        <div class="el-upload__tips">
+          <slot name="tip"></slot>
+        </div>
+      </template>
+    </el-upload>
+    <div class="file-list" v-if="value">
+      <div class="file-list-item">
+        <a :href="value" target="_blank">
+          <i class="el-icon-document"></i>
+          {{ fileName }}
+        </a>
+        <a :href="value" :download="fileName" target="_blank">
+          <el-tooltip effect="dark" content="下载">
+            <i class="el-icon-download"></i>
+          </el-tooltip>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import cAction from '@action'
+
+export default {
+  name: 'VUpload',
+  props: {
+    value: { type: String }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    fileName() {
+      return this.value ? this.value.split('/').pop() : ''
+    }
+  },
+  methods: {
+    httpRequest(xhr) {
+      cAction.Player.uploadFile({ file: xhr.file })
+        .then(response => {
+          if (response.success) {
+            this.$emit('input', response.url)
+          }
+        })
+        .catch(error => {
+          console.log(error)
+        })
+    },
+    handleRemove() {
+      this.$emit('input', '')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-list-item {
+  display: flex;
+  margin-bottom: 10px;
+  padding: 0 10px;
+  justify-content: space-between;
+  line-height: 30px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  a {
+    text-decoration: none;
+    color: #333;
+    &:hover {
+      color: #b49441;
+    }
+  }
+}
+</style>

client/src/index.html

@@ -24,7 +24,6 @@
   <script type="text/javascript" src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/common/runtime.js"></script>
   <!-- 直接引入aliyun播放插件 JS -->
   <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
-  <script type="text/javascript" charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
   <!-- 解决iframe嵌套，CC视频在safri中打开免登陆兼容问题 -->
   <script src="//view.csslcloud.net/js/_fix_.js"></script>
   <script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>

client/src/main.js

@@ -5,6 +5,7 @@ import VueI18n from 'vue-i18n' // 使用 国际化
 import createI18n from './assets/languages' // 国际化定义
 
 import App from './app.vue' // 初始化 vue页面
+import UploadForm from './components/upload-form'
 import './style.scss' // 公共样式
 import MetaInfo from 'vue-meta-info'
 import Element from 'element-ui'
@@ -19,6 +20,8 @@ require('promise.prototype.finally').shim()
 /* 兼容处理 end */
 
 Vue.use(VueRouter)
+Vue.use(UploadForm)
+Vue.component(UploadForm.name, UploadForm)
 const router = createRouter()
 Vue.use(VueI18n)
 const i18n = createI18n()

client/src/modules/discuss/api/index.js

@@ -2,55 +2,94 @@ import BaseAPI from '@/api/base_api'
 const httpRequest = new BaseAPI(webConf)
 
 /**
- * 获取课程详情
- * @param {string} courseId 课程ID
- * @param {string} semesterId 学期ID
+ * 获取课程讨论列表
  */
-export function getCourse(courseId, semesterId) {
-  return httpRequest.get(`/v2/education/courses/${courseId}/${semesterId}`)
+export const getDiscussList = (param) => {
+  const paramPath = param.path || ''
+  return httpRequest.get(
+    `/v2/qa/questions${paramPath}`,
+    param.dataJson
+  )
+}
+/**
+ * 获取我的课程讨论列表
+ */
+export const getCourseDiscussList = (param) => {
+  const paramPath = param.path || ''
+  return httpRequest.get(
+    `/v2/qa/questions/course${paramPath}`,
+    param.dataJson
+  )
+}
+/**
+ * 删除提问
+ */
+export const deleteDiscuss = (qid) => {
+  return httpRequest.delete(
+    `/v2/qa/questions/${qid}`
+  )
 }
 
 /**
- * 获取章节资源详情
- * @param {string} vid 资源ID
+ * 获取问题详情
  */
-export function getChapterVideo(vid) {
+export const getDiscussDetail = (qid) => {
+  return httpRequest.get(
+    `/v2/qa/questions/${qid}`
+  )
+}
+/**
+ * 删除评论
+ */
+export const deleteComment = (cid) => {
+  return httpRequest.delete(
+    `/v2/qa/comments/${cid}`
+  )
+}
+/**
+ * 回复评论
+ */
+export const callbackComment = (param) => {
   return httpRequest.post(
-    '/v2/education/video-streaming',
-    { vid },
+    '/v2/qa/comments',
+    param,
     { headers: { 'Content-Type': 'application/json' } }
   )
 }
 
 /**
- * 获取章节资源详情
- * @param {string} vid 章节的资源ID
+ * 回答问题
  */
-export function getChapterVideoAliyun(vid) {
+export const answerQues = (param) => {
   return httpRequest.post(
-    '/v2/education/aliyun-video-streaming',
-    { vid },
+    '/v2/qa/answers',
+    param,
     { headers: { 'Content-Type': 'application/json' } }
   )
 }
-
 /**
- * 获取课程讨论列表
+ * 删除回答
  */
-export const getDiscussList = (param) => {
-  const paramPath = param.path || ''
-  return httpRequest.get(
-    `/v2/qa/questions${paramPath}`,
-    param.dataJson
+export const deleteAnswer = (aid) => {
+  return httpRequest.delete(
+    `/v2/qa/answers/${aid}`
   )
 }
 /**
- * 获取我的课程讨论列表
+ * 取消点赞
  */
-export const getCourseDiscussList = (param) => {
-  const paramPath = param.path || ''
-  return httpRequest.get(
-    `/v2/qa/questions/course${paramPath}`,
-    param.dataJson
+export const unlike = (tagid) => {
+  return httpRequest.delete(
+    `/v2/qa/tags/${tagid}`
+  )
+}
+/**
+ * 点赞
+ */
+export const like = (param) => {
+  return httpRequest.post(
+    '/v2/qa/tags',
+    param,
+    { headers: { 'Content-Type': 'application/json' } }
   )
 }

client/src/modules/discuss/assets/languages/en.json

@@ -4,6 +4,17 @@
       "answers": "Answers",
       "votes": "Votes",
       "noData": "No discussion"
+    },
+    "DiscussDetail": {
+      "title": "Problem details",
+      "like": "Like",
+      "discuss": "Discuss",
+      "reply": "Reply",
+      "delete": "Delete",
+      "send": "Send",
+      "noAnswer": "No answer",
+      "deleteSuccess": "Delete success",
+      "answering": "Answer"
     }
   }
 }
\ No newline at end of file

client/src/modules/discuss/assets/languages/zh-CN.json

@@ -4,6 +4,17 @@
       "answers": "回答",
       "votes": "投票",
       "noData": "暂无相关评论"
+    },
+    "DiscussDetail": {
+      "title": "问题详情",
+      "like": "点赞",
+      "discuss": "讨论",
+      "reply": "回复",
+      "delete": "删除",
+      "send": "发送",
+      "noAnswer": "暂无回答",
+      "deleteSuccess": "删除成功",
+      "answering": "回答问题"
     }
   }
 }

client/src/modules/discuss/components/answerItem.vue

+<template>
+  <div>
+    <div class="ask">
+      <div class="user-1">
+        <img class="img-1" :src="avatar" />
+        <div class="right-1">
+          <div class="name-1">{{data.replier.nickname}}</div>
+          <div class="time-1">{{data.created_time}}</div>
+        </div>
+      </div>
+      <div class="text" v-html="data.contents"></div>
+      <div class="user">
+        <template v-if="data.mine">
+          <div
+            class="right-txt"
+            @click="deleteAnswer(data.id)"
+          >{{ $t('pages.learn.discussDetail.delete') }}</div>
+        </template>
+        <div class="right-txt" @click="$emit('reply', {answer_id: data.id})">{{ $t('pages.learn.discussDetail.reply') }}</div>
+        <div
+          class="right-txt"
+          @click="commentVisible = !commentVisible"
+        >{{ $t('pages.learn.discussDetail.discuss') }}({{data.comments.length}})</div>
+        <div class="right-txt" @click="$emit('btnlike', {tagId: data.tag ? data.tag.id : null, ansId: data.id})">点赞({{data.tag_count}})</div>
+      </div>
+      <template v-if="commentVisible">
+        <!-- 评论列表 -->
+        <template v-for="item in data.comments">
+          <reply-item v-on="$listeners" :data="item" :dataId="data.id" :key="item.id"></reply-item>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as api from '../api/index.js'
+import replyItem from './replyItem.vue'
+export default {
+  components: { replyItem },
+  props: {
+    data: { type: Object, default: () => {} }
+  },
+  data() {
+    console.log(this.data)
+    return {
+      commentVisible: false
+    }
+  },
+  computed: {
+    avatar() {
+      return this.data.replier.avatar || '../assets/images/person-default.jpg'
+    }
+  },
+  methods: {
+    deleteAnswer (id) {
+      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
+      api.deleteAnswer(id).then(json => {
+        this.$emit('updateList')
+        this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
+      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
+    }
+  }
+}
+</script>
+
+<style lang="sass" scoped>
+</style>

client/src/modules/discuss/components/replyDetailItem.vue

+<template>
+  <div class="item-list">
+    <div class="user">
+      <div class="name">{{data.observer.nickname}}</div>
+      <div class="time">{{data.created_time}}</div>
+      <template v-if="data.mine">
+        <div
+          class="right-txt"
+          @click="deleteComment(data.id)"
+        >{{ $t('pages.learn.discussDetail.delete') }}</div>
+      </template>
+      <div class="right-txt" @click="$emit('reply', {to: data.observer.nickname, question_id: dataId})">{{ $t('pages.learn.discussDetail.reply') }}</div>
+    </div>
+    <div class="text" v-html="data.comments"></div>
+  </div>
+</template>
+<script>
+import * as api from '../api/index.js'
+export default {
+  props: {
+    data: { type: Object, default: () => {} },
+    dataId: { type: String, default: () => {} }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    deleteComment (id) {
+      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
+      api.deleteComment(id).then(json => {
+        this.$emit('updateList')
+        this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
+      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
+    }
+  }
+}
+</script>

client/src/modules/discuss/components/replyItem.vue

+<template>
+  <div class="item-list">
+    <div class="user">
+      <div class="name">{{data.observer.nickname}}</div>
+      <div class="time">{{data.created_time}}</div>
+      <template v-if="data.mine">
+        <div
+          class="right-txt"
+          @click="deleteComment(data.id)"
+        >{{ $t('pages.learn.discussDetail.delete') }}</div>
+      </template>
+      <div class="right-txt" @click="$emit('reply', {answer_id: dataId, to: data.observer.nickname})">{{ $t('pages.learn.discussDetail.reply') }}</div>
+    </div>
+    <div class="text" v-html="data.comments"></div>
+  </div>
+</template>
+<script>
+import * as api from '../api/index.js'
+export default {
+  props: {
+    data: { type: Object, default: () => {} },
+    dataId: { type: String, default: () => {} }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    deleteComment (id) {
+      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
+      api.deleteComment(id).then(json => {
+        this.$emit('updateList')
+        this.$message({ type: 'success', message: this.$t('pages.learn.discussDetail.deleteSuccess') })
+      }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
+    }
+  }
+}
+</script>

client/src/modules/discuss/index.js

 import './index.scss'
 import Discuss from './src/discuss.vue'
+import DiscussDetail from './src/discussDetail.vue'
 
 const components = [
-  Discuss
+  Discuss,
+  DiscussDetail
 ]
 
 const install = function (Vue, opts = {}) {
@@ -26,5 +28,6 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 export default {
   install,
-  Discuss
+  Discuss,
+  DiscussDetail
 }

client/src/modules/discuss/src/discuss.vue

@@ -28,6 +28,19 @@
 </template>
 
 <script>
+/**
+ * 调用：通过组件传值监听watch来请求渲染
+ *
+params: {
+  path: '/my', 地址参数
+  request: 'getDiscussList', 请求方法
+  dataJson: {  参数
+    limit: 10,
+    offset: 0
+  }
+}
+*/
+
 import * as api from '../api/index'
 
 export default {

client/src/modules/viewer/api.js

+import BaseAPI from '@/api/base_api'
+
+const httpRequest = new BaseAPI(webConf)
+
+/**
+ * 获取课程详情
+ * @param {string} semesterId 学期ID
+ * @param {string} courseId 课程ID
+ */
+export function getCourse(semesterId, courseId) {
+  return httpRequest.get(`/v2/education/courses/${semesterId}/${courseId}`)
+}
+
+/**
+ * 获取章节资源详情
+ * @param {string} vid 资源ID
+ */
+export function getChapterVideo(vid) {
+  return httpRequest.post(
+    '/v2/education/video-streaming',
+    { vid },
+    { headers: { 'Content-Type': 'application/json' } }
+  )
+}
+
+/**
+ * 获取章节资源详情
+ * @param {string} vid 章节的资源ID
+ */
+export function getChapterVideoAliyun(vid) {
+  return httpRequest.post(
+    '/v2/education/aliyun-video-streaming',
+    { vid },
+    { headers: { 'Content-Type': 'application/json' } }
+  )
+}
+
+/**
+ * 获取章节视频播放进度
+ * @param {string} semesterId 学期ID
+ * @param {string} resourseId 章节的资源ID
+ * @param {Object} params
+ */
+export function getChapterVideoProgress(semesterId, resourseId, params) {
+  return httpRequest.get(
+    `/v2/education/video/${semesterId}/${resourseId}/device`,
+    params
+  )
+}
+
+/**
+ * 更新章节视频播放进度
+ * @param {Object} params
+ */
+export function updateChapterVideoProgress(params) {
+  return httpRequest.get('/v2/analytics/upload-video', params)
+}
+
+/**
+ * 获取章节作业
+ * @param {string} semesterId 学期ID
+ * @param {string} courseId 课程ID
+ * @param {string} resourseId 章节的资源ID
+ */
+export function getChapterHomework(semesterId, courseId, resourseId) {
+  return httpRequest.get(
+    `/v2/education/homeworks/${semesterId}/${courseId}/${resourseId}`
+  )
+}
+
+/**
+ * 获取提交作业截止时间
+ * @param {string} semesterId 学期ID
+ * @param {string} courseId 课程ID
+ * @param {string} chapterId 章节ID
+ */
+export function getChapterHomeworkDeadline(semesterId, courseId, chapterId) {
+  return httpRequest.get(
+    `/v2/education/homeworks/${semesterId}/${courseId}/${chapterId}/deadline`
+  )
+}
+
+/**
+ * 提交考试
+ */
+export function sbumitChapterHomework(params) {
+  return httpRequest.post('/v2/education/homeworks', params, {
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+/**
+ * 上传文件
+ */
+export function uploadFile(data) {
+  return httpRequest.post('/util/upload-file', data, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}
+
+/**
+ * 获取课程大作业详情
+ * @param {string} semesterId 学期ID
+ * @param {string} courseId 课程ID
+ */
+export function getCourseWork(semesterId, courseId) {
+  return httpRequest.get(
+    `/v2/education/courses/${semesterId}/${courseId}/essay`
+  )
+}
+
+/**
+ * 提交课程大作业
+ * @param {string} semesterId 学期ID
+ * @param {string} courseId 课程ID
+ */
+export function updateCourseWork(semesterId, courseId, data) {
+  return httpRequest.post(
+    `/v2/education/courses/${semesterId}/${courseId}/essay`,
+    data,
+    { headers: { 'Content-Type': 'multipart/form-data' } }
+  )
+}
+
+/**
+ * 获取课程考试试题
+ * @param {string} semesterId 学期ID
+ * @param {string} courseId 课程ID
+ */
+export function getCourseExam(semesterId, courseId) {
+  return httpRequest.get(`/v2/education/${semesterId}/${courseId}/examination`)
+}
+
+/**
+ * 获取课程考试状态
+ * @param {string} semesterId 学期ID
+ * @param {string} courseId 课程ID
+ * @param {string} examId 试题ID
+ */
+export function getCourseExamStatus(semesterId, courseId, examId) {
+  return httpRequest.get(
+    `/v2/education/${semesterId}/${courseId}/examination/${examId}/status`
+  )
+}
+
+/**
+ * 提交课程考试
+ * @param {string} semesterId 学期ID
+ * @param {string} courseId 课程ID
+ * @param {string} examId 试题ID
+ */
+export function submitCourseExam(semesterId, courseId, examId, data) {
+  return httpRequest.post(
+    `/v2/education/${semesterId}/${courseId}/examination/${examId}/sheet`,
+    data,
+    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
+  )
+}
+
+/**
+ * 获取课程考试结果
+ * @param {string} semesterId 学期ID
+ * @param {string} courseId 课程ID
+ * @param {string} examId 试题ID
+ */
+export function getCourseExamResult(semesterId, courseId, examId, params) {
+  return httpRequest.get(
+    `/v2/education/${semesterId}/${courseId}/examination/${examId}/sheet`,
+    params
+  )
+}

client/src/modules/viewer/api/index.js

-import BaseAPI from '@/api/base_api'
-const httpRequest = new BaseAPI(webConf)
-
-/**
- * 获取课程详情
- * @param {string} courseId 课程ID
- * @param {string} semesterId 学期ID
- */
-export function getCourse(courseId, semesterId) {
-  return httpRequest.get(`/v2/education/courses/${courseId}/${semesterId}`)
-}
-
-/**
- * 获取章节资源详情
- * @param {string} vid 资源ID
- */
-export function getChapterVideo(vid) {
-  return httpRequest.post(
-    '/v2/education/video-streaming',
-    { vid },
-    { headers: { 'Content-Type': 'application/json' } }
-  )
-}
-
-/**
- * 获取章节资源详情
- * @param {string} vid 章节的资源ID
- */
-export function getChapterVideoAliyun(vid) {
-  return httpRequest.post(
-    '/v2/education/aliyun-video-streaming',
-    { vid },
-    { headers: { 'Content-Type': 'application/json' } }
-  )
-}

client/src/modules/viewer/components/aside/asideChapter.vue → client/src/modules/viewer/components/aside/chapter.vue

 <template>
   <ul class="chapter-list">
-    <li class="chapter-item" v-for="item in list" :key="item.id">
+    <li class="chapter-item" v-for="item in chapters" :key="item.id">
       <h4>{{item.name}}</h4>
-      <ul class="knot-list">
-        <li v-for="subItem in item.children" :key="subItem.id" @click="onClick(subItem)">
-          <span class="knot-name">{{subItem.name | showName(subItem.type)}}</span>
+      <ul class="chapter-item-list">
+        <li
+          v-for="subItem in item.children"
+          :key="subItem.id"
+          @click="onClick(subItem)"
+          :class="{'is-active': subItem.id === (active ? active.id : '')}"
+        >
+          <span class="chapter-item-list__name">{{subItem.name | showName(subItem)}}</span>
+          <i class="el-icon" :class="genIconClass(subItem.type)"></i>
         </li>
       </ul>
     </li>
@@ -14,40 +20,61 @@
 <script>
 export default {
   props: {
+    // 课程详情接口返回的数据
     data: {
-      type: Array,
+      type: Object,
       default() {
-        return []
+        return {}
+      }
+    },
+    chapters: { type: Array, default: () => [] },
+    // 当前选中的章节
+    active: {
+      type: Object,
+      default() {
+        return {}
       }
     }
   },
   data() {
-    return {
-      otherList: [
-        {
-          name: '大作业及资料',
-          children: [
-            { name: '课程大作业', id: 'course_work' },
-            { name: '课程资料', id: 'course_info' },
-            { name: '教学评估', id: 'teach_evaluation' }
-          ]
-        }
-      ]
-    }
-  },
-  computed: {
-    list() {
-      return this.data.concat(this.otherList)
-    }
+    return {}
   },
   filters: {
-    showName(name, type) {
+    showName(name, data) {
+      if (data.type === 5 && data.live) {
+        return `${name}(${data.live.start_time})`
+      }
       return name
     }
   },
   methods: {
+    genIconClass(type) {
+      const map = {
+        2: 'el-icon-self-iconset0481',
+        3: 'el-icon-edit-outline',
+        4: 'el-icon-self-cc-book'
+      }
+      return map[type] || 'el-icon-self-cc-book'
+    },
     onClick(data) {
-      console.log(data)
+      if (data.type === 1) {
+        return
+      }
+      // 课程大作业
+      if (data.id === 'course_work' && !this.data.survey) {
+        this.$message('请先填写教学评估，然后完成大作业。')
+        return
+      }
+      // 教学评估
+      if (data.id === 'teach_evaluation') {
+        const { sid, cid } = this.$route.params
+        this.$router.push({ name: 'survey', params: { sid, cid } })
+        return
+      }
+      this.$router.push({
+        name: 'viewerCourseChapter',
+        params: { id: data.id }
+      })
     }
   }
 }
@@ -62,23 +89,23 @@ export default {
   overflow: hidden;
   .chapter-item {
     h4 {
-      padding: 10px 32px;
+      padding: 10px 22px;
       margin: 0;
       font-size: 15px;
       color: #b0b0b0;
       background-color: #2f2f2f;
     }
     /* 节列表样式 */
-    .knot-list {
+    .chapter-item-list {
       margin: 0;
       padding: 0;
       line-height: 1.6;
       overflow: hidden;
       li {
         position: relative;
-        &.on {
+        &.is-active {
           background: #3c3c3c;
-          a {
+          .chapter-item-list__name {
             color: #b49441;
           }
         }
@@ -110,7 +137,7 @@ export default {
           background: #616161;
         }
       }
-      .knot-name {
+      .chapter-item-list__name {
         display: block;
         padding: 15px 35px 15px 40px;
         font-size: 14px;
@@ -126,6 +153,7 @@ export default {
       right: 10px;
       top: 50%;
       transform: translateY(-50%);
+      color: #a0a0a0;
     }
   }
 }

client/src/modules/viewer/components/aside/aside.vue → client/src/modules/viewer/components/aside/index.vue

@@ -3,12 +3,12 @@
     <el-tabs v-model="activeName">
       <el-tab-pane label="章节" name="0">
         <div class="tab-pane">
-          <aside-chapter :data="chapters"></aside-chapter>
+          <aside-chapter :data="data" :chapters="chapters" :active="active"></aside-chapter>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="讲义" name="1">
+      <el-tab-pane label="讲义" name="1" v-if="active && active.type === 2">
         <div class="tab-pane">
-          <aside-lecture :data="ppts"></aside-lecture>
+          <aside-lecture :ppts="ppts" :pptIndex="pptIndex" v-on="$listeners"></aside-lecture>
         </div>
       </el-tab-pane>
     </el-tabs>
@@ -16,25 +16,31 @@
 </template>
 
 <script>
-import AsideChapter from './asideChapter.vue'
-import AsideLecture from './asideLecture.vue'
+import AsideChapter from './chapter.vue'
+import AsideLecture from './lecture.vue'
 
 export default {
   props: {
-    // 章节
-    chapters: {
-      type: Array,
+    // 课程详情接口返回的数据
+    data: {
+      type: Object,
       default() {
-        return []
+        return {}
       }
     },
+    // 章节
+    chapters: { type: Array, default: () => [] },
     // 讲义
-    ppts: {
-      type: Array,
+    ppts: { type: Array, default: () => [] },
+    // 当前选中的章节
+    active: {
+      type: Object,
       default() {
-        return []
+        return {}
       }
-    }
+    },
+    // 当前选择的PPT
+    pptIndex: { type: Number, default: 0 }
   },
   components: { AsideChapter, AsideLecture },
   data() {

client/src/modules/viewer/components/aside/asideLecture.vue → client/src/modules/viewer/components/aside/lecture.vue

 <template>
   <ul class="lecture-list">
-    <li v-for="item in data" :key="item.id" @click="onClick(item)">
+    <li
+      v-for="(item, index) in ppts"
+      :key="item.id"
+      @click="onClick(index)"
+      :class="{'is-active': index === activeIndex}"
+    >
       <img :src="item.ppt_url" />
     </li>
   </ul>
@@ -9,23 +14,25 @@
 <script>
 export default {
   props: {
-    data: {
-      type: Array,
-      default() {
-        return []
-      }
-    }
+    // 当前选择的PPT
+    pptIndex: { type: Number, default: 0 },
+    ppts: { type: Array, default: () => [] }
   },
   data() {
     return {
-      activeIndex: 0
+      activeIndex: this.pptIndex
+    }
+  },
+  watch: {
+    pptIndex(index) {
+      this.activeIndex = index
     }
   },
   methods: {
     // 点击PPT
-    onClick(data) {
-      this.activeIndex = data.id
-      this.$emit('clickPPT', data)
+    onClick(index) {
+      this.activeIndex = index
+      this.$emit('change-ppt', index)
     }
   }
 }

client/src/modules/viewer/components/common/container.vue

+<template>
+  <div class="course-viewer-content">
+    <div class="course-viewer-content-hd">
+      <slot name="header">
+        <h3 class="course-viewer-content-hd__title">
+          <slot name="title">{{title}}</slot>
+        </h3>
+        <div class="course-viewer-content-hd__aside">
+          <slot name="header-aside"></slot>
+        </div>
+      </slot>
+    </div>
+    <div class="course-viewer-content-bd">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Continaer',
+  props: { title: String }
+}
+</script>

client/src/modules/viewer/components/common/editor.vue

+<template>
+  <div class="editor">
+    <textarea name="editor" :id="textareaElementId" :disabled="disabled"></textarea>
+  </div>
+</template>
+
+<script>
+import { uniqueId } from 'lodash'
+export default {
+  name: 'VEditor',
+  props: {
+    value: { type: String },
+    disabled: { type: Boolean, default: null }
+  },
+  data() {
+    return {
+      textareaElementId: uniqueId('editor_'),
+      ckEditor: null
+    }
+  },
+  watch: {
+    value(val) {
+      if (this.ckEditor && this.ckEditor.getData() !== val) {
+        this.ckEditor.setData(val)
+      }
+    },
+    disabled(val) {
+      if (this.ckEditor && this.ckEditor.instanceReady) {
+        this.ckEditor.setReadOnly(val)
+      }
+    }
+  },
+  methods: {
+    createEditor() {
+      const config = {
+        height: 400,
+        uiColor: '#eeeeee',
+        filebrowserImageUploadUrl: '/api/ckeditor/img/upload',
+        // resize_enabled: typeof this.props.resizable === 'boolean' ? this.props.resizable : true,
+        toolbar: [
+          // { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] },
+          { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
+          { name: 'colors', items: ['TextColor', 'BGColor'] },
+          { name: 'tools', items: ['Maximize', 'ShowBlocks'] },
+          // { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
+          { name: 'editing', items: ['Find', 'Replace'] },
+          // { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
+          '/',
+          {
+            name: 'basicstyles',
+            items: [
+              'Bold',
+              'Italic',
+              'Underline',
+              'Strike',
+              'Subscript',
+              'Superscript',
+              '-',
+              'RemoveFormat'
+            ]
+          },
+          {
+            name: 'paragraph',
+            items: [
+              'NumberedList',
+              'BulletedList',
+              '-',
+              'Outdent',
+              'Indent',
+              '-',
+              'Blockquote',
+              'CreateDiv',
+              '-',
+              'JustifyLeft',
+              'JustifyCenter',
+              'JustifyRight',
+              'JustifyBlock',
+              '-',
+              'BidiLtr',
+              'BidiRtl'
+            ]
+          },
+          { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
+          { name: 'insert', items: ['Image', 'Table', 'HorizontalRule'] }
+        ]
+      }
+      if (this.disabled !== null) {
+        config.readOnly = this.disabled
+      }
+
+      const editor = (this.ckEditor = CKEDITOR.replace(
+        this.textareaElementId,
+        config
+      ))
+      editor.on('instanceReady', () => {
+        const data = this.value
+        editor.fire('lockSnapshot')
+
+        editor.setData(data, {
+          callback: () => {
+            this.bindEvent()
+
+            const newData = editor.getData()
+            // Locking the snapshot prevents the 'change' event.
+            // Trigger it manually to update the bound data.
+            if (data !== newData) {
+              this.$once('input', () => {
+                this.$emit('ready', editor)
+              })
+
+              this.$emit('input', newData)
+            } else {
+              this.$emit('ready', editor)
+            }
+
+            editor.fire('unlockSnapshot')
+          }
+        })
+      })
+    },
+    bindEvent() {
+      const editor = this.ckEditor
+      editor.on('change', evt => {
+        const data = editor.getData()
+        if (this.value !== data) {
+          this.$emit('input', data, evt, editor)
+        }
+      })
+
+      editor.on('focus', evt => {
+        this.$emit('focus', evt, editor)
+      })
+
+      editor.on('blur', evt => {
+        this.$emit('blur', evt, editor)
+      })
+    }
+  },
+  mounted() {
+    this.createEditor()
+  },
+  beforeDestroy() {
+    this.ckEditor && this.ckEditor.destroy()
+    this.ckEditor = null
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+</style>

client/src/modules/viewer/components/common/upload.vue

+<template>
+  <div class="upload">
+    <el-upload action :disabled="disabled" :show-file-list="false" :http-request="httpRequest">
+      <slot></slot>
+      <el-button type="text" icon="el-icon-upload">点击上传</el-button>
+      <template v-slot:tip>
+        <div class="el-upload__tips">
+          <slot name="tip"></slot>
+        </div>
+      </template>
+    </el-upload>
+    <div class="file-list" v-if="fileList.length">
+      <div class="file-list-item" v-for="(fileUrl, index) in fileList" :key="index">
+        <a :href="fileUrl" target="_blank">
+          <i class="el-icon-document"></i>
+          {{ fileUrl | fileName }}
+        </a>
+        <div>
+          <a
+            href="javascript:;"
+            @click="handleRemove(index)"
+            style="margin-right:10px;"
+            v-if="!disabled"
+          >
+            <el-tooltip effect="dark" content="删除">
+              <i class="el-icon-delete"></i>
+            </el-tooltip>
+          </a>
+          <a :href="fileUrl" :download="fileUrl | fileName" target="_blank">
+            <el-tooltip effect="dark" content="下载">
+              <i class="el-icon-download"></i>
+            </el-tooltip>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as api from '../../api'
+
+export default {
+  name: 'VUpload',
+  props: {
+    value: { type: [String, Array] },
+    disabled: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      fileList: []
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(value) {
+        if (value) {
+          if (Array.isArray(value)) {
+            this.fileList = value.map(item => {
+              return item.url || item
+            })
+          } else {
+            this.fileList = [value]
+          }
+        }
+      }
+    }
+  },
+  filters: {
+    fileName(value) {
+      return value ? value.split('/').pop() : ''
+    }
+  },
+  methods: {
+    httpRequest(xhr) {
+      api.uploadFile({ file: xhr.file }).then(response => {
+        if (response.success) {
+          if (Array.isArray(this.value)) {
+            this.fileList.push(response.url)
+            this.$emit('input', this.fileList)
+          } else {
+            this.fileList = [response.url]
+            this.$emit('input', response.url)
+          }
+        }
+      })
+    },
+    handleRemove(index) {
+      this.fileList.splice(index, 1)
+      this.$emit('input', Array.isArray(this.value) ? this.fileList : '')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-list-item {
+  display: flex;
+  margin-bottom: 10px;
+  padding: 0 10px;
+  justify-content: space-between;
+  line-height: 30px;
+  background-color: #fff;
+  border-radius: 4px;
+
+  a {
+    text-decoration: none;
+    color: #333;
+    &:hover {
+      color: #b49441;
+    }
+  }
+}
+</style>

client/src/modules/viewer/components/layout.vue

+<template>
+  <component
+    :is="currentCompoent"
+    :chapter="chapter"
+    v-bind="$attrs"
+    v-on="$listeners"
+    v-if="chapter"
+    :key="pid"
+  />
+</template>
+
+<script>
+// components
+import ChapterPlayer from './player/chapterPlayer.vue' // 章节视频
+import ChapterWork from './work/index.vue' // 章节作业
+import ChapterExam from './work/chapterExam.vue' // 章节考试
+import ChapterRead from './read/chapterRead.vue' // 章节资料
+import ChapterLive from './live/chapterLive.vue' // 章节直播
+import CourseWork from './work/courseWork.vue' // 课程大作业
+import CourseRead from './read/courseRead.vue' // 课程资料
+import CourseExam from './work/courseExam.vue' // 课程考试
+
+export default {
+  name: 'ViewerLayout',
+  components: {
+    ChapterPlayer,
+    ChapterWork,
+    ChapterRead,
+    ChapterExam,
+    ChapterLive,
+    CourseWork,
+    CourseRead,
+    CourseExam
+  },
+  props: {
+    chapter: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    currentCompoent() {
+      const componentNames = {
+        2: 'ChapterPlayer', // 视频
+        3: 'ChapterWork', // 作业
+        4: 'ChapterRead', // 资料
+        5: 'ChapterLive', // 直播
+        9: 'ChapterExam', // 考试
+        99: 'CourseWork', // 课程大作业
+        100: 'CourseRead', // 课程资料
+        101: 'CourseExam' // 课程考试
+      }
+      return this.chapter ? componentNames[this.chapter.type] || '' : ''
+    },
+    pid() {
+      return this.$route.params.id
+    }
+  }
+}
+</script>

client/src/modules/viewer/components/live/chapterLive.vue

+<template>
+  <div style="width:100%;height:100%;">
+    <iframe
+      :src="iframeUrl"
+      frameborder="0"
+      width="100%"
+      height="100%"
+      allow="autoplay;geolocation;microphone;camera;midi;encrypted-media;"
+    ></iframe>
+  </div>
+</template>
+
+<script>
+// 章节视频
+export default {
+  name: 'ChapterLive',
+  props: {
+    // 当前选中的
+    chapter: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 课程详情接口返回的数据
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    user() {
+      return window.G.UserInfo ? window.G.UserInfo.student_info : {}
+    },
+    nickName() {
+      return this.user.personal_name || '匿名'
+    },
+    iframeUrl() {
+      const live = this.chapter.live
+      if (
+        live.live_status === 2 &&
+        live.enable_record === 1 &&
+        live.record_url
+      ) {
+        // enable_record 0:不启用回放 1:开启回放
+        // 查看回放
+        return live.record_url
+      } else {
+        // 直播
+        live.viewer_name = live.viewer_name || this.nickName
+        return `https://view.csslcloud.net/api/view/index?roomid=${live.room_id}&userid=${live.user_id}&autoLogin=true&viewername=${live.viewer_name}&viewertoken=${live.viewer_token}`
+      }
+    }
+  }
+}
+</script>

client/src/modules/viewer/components/player/chapterPlayer.vue

+<template>
+  <div class="player" v-if="chatperResources">
+    <div class="player-main">
+      <div class="player-column" v-show="videoVisible">
+        <!-- 视频 -->
+        <video-player
+          :isSkip="isSkip"
+          :skipTime="skipTime"
+          :video="chatperResources.video"
+          @timeupdate="onTimeupdate"
+          @ready="onReady"
+          ref="videoPlayer"
+        ></video-player>
+      </div>
+      <div class="player-column" v-if="pptVisible">
+        <!-- ppt -->
+        <ppt-player
+          :index="pptIndex"
+          :ppts="chatperResources.ppts"
+          @close="onPPTClose"
+          @fullscreen="onPPTFullscreen"
+          @videoSyncTime="onVideoSyncTime"
+        ></ppt-player>
+      </div>
+    </div>
+    <div class="player-footer">
+      <em class="player-button player-button-download" v-if="chapter.pdf">
+        <a :href="chapter.pdf" download target="_blank">下载PPT</a>
+      </em>
+      <em :class="pptClass" @click="togglePPTVisible" v-if="chatperResources.ppts.length">同步显示PPT</em>
+      <em :class="skipClass" @click="toggleSkip">始终跳过片头</em>
+    </div>
+  </div>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import { throttle } from 'lodash'
+// api
+import * as api from '../../api'
+// components
+import videoPlayer from './videoPlayer.vue'
+import pptPlayer from './pptPlayer.vue'
+
+export default {
+  name: 'ChapterPlayer',
+  components: { videoPlayer, pptPlayer },
+  props: {
+    // 当前章节
+    chapter: { type: Object },
+    // PPT当前选中的索引
+    pptIndex: { type: Number, default: 0 }
+  },
+  data() {
+    // 是否跳过片头
+    const isSkip = window.localStorage.getItem('isSkip') === 'true'
+    return {
+      videoVisible: true,
+      pptVisible: false,
+      isSkip,
+      skipTime: 6,
+      chatperResources: null,
+      throttled: null,
+      throttleWait: 5, // 秒
+      progress: {
+        cpt: 0, // 当前播放时间
+        mpt: 0, // 视频时长
+        progress: 0, // 进度
+        pt: 0 // 累计播放时间
+      },
+      player: null,
+      watchedTimePoint: [], // 视频观看的时间点
+      timer: null,
+      isPlaying: false
+    }
+  },
+  watch: {
+    pptIndex(index) {
+      this.updateVideoCurrentTime(index)
+    }
+  },
+  computed: {
+    // 学期ID
+    sid() {
+      return this.$route.params.sid
+    },
+    // 课程ID
+    cid() {
+      return this.$route.params.cid
+    },
+    // 视频资源ID
+    resourceId() {
+      return this.chapter.resource_id
+    },
+    /**
+     * 视频提供者
+     * @return 1是CC加密; 2是非加密; 3是阿里云
+     */
+    videoProvider() {
+      const video = this.chapter.video || {}
+      return video.video_provider || 3
+    },
+    pptClass() {
+      return {
+        'player-button': true,
+        'player-button-ppt': !this.pptVisible,
+        'player-button-ppt__active': this.pptVisible
+      }
+    },
+    skipClass() {
+      return {
+        'player-button': true,
+        'player-button-skip': !this.isSkip,
+        'player-button-skip__active': this.isSkip
+      }
+    }
+  },
+  methods: {
+    // 同步显示PPT
+    togglePPTVisible() {
+      this.videoVisible = true
+      this.pptVisible = !this.pptVisible
+    },
+    // 始终跳过片头
+    toggleSkip() {
+      this.isSkip = !this.isSkip
+      window.localStorage.setItem('isSkip', this.isSkip)
+    },
+    // 关闭PPT
+    onPPTClose() {
+      this.pptVisible = false
+      this.videoVisible = true
+    },
+    // PPT全屏
+    onPPTFullscreen(value) {
+      this.videoVisible = !value
+    },
+    // 设置视频时间为当前PPT时间
+    onVideoSyncTime(time) {
+      this.player.seek(time)
+    },
+    // 播放器ready
+    onReady(player) {
+      this.player = player
+      // 跳转播放进度
+      if (this.progress.cpt) {
+        this.player.seek(this.progress.cpt)
+      }
+      // 更新视频观看总时长
+      this.updateWatchTime()
+    },
+    // 当前播放时间更新
+    onTimeupdate(time) {
+      this.isPlaying = true
+      const ppts = this.chatperResources.ppts || []
+      let index = this.chatperResources.ppts.findIndex(
+        item => item.ppt_point > time
+      )
+      index = index !== -1 ? index - 1 : ppts.length - 1
+      this.$emit('change-ppt', index)
+      const durations = this.player.getDuration()
+      // 更新视频时间
+      this.progress.cpt = parseInt(time)
+      // 更新视频时长
+      this.progress.mpt = parseInt(durations)
+      const hasTimePoint = this.watchedTimePoint.includes(this.progress.cpt)
+      if (!hasTimePoint) {
+        this.watchedTimePoint.push(this.progress.cpt)
+      }
+      // 更新视频进度，10秒更新一次
+      if (this.throttled) {
+        this.throttled(time, durations)
+      } else {
+        this.throttled = throttle(
+          this.updateChapterVideoProgress,
+          this.throttleWait * 1000
+        )
+      }
+    },
+    // 更新视频当前播放时间
+    updateVideoCurrentTime() {
+      const ppt = this.chatperResources.ppts[this.pptIndex]
+      ppt && this.player.seek(ppt.ppt_point) // 增加2秒
+    },
+    // 获取章节视频详情
+    getChapterVideo() {
+      // 视频播放类型 1是CC加密; 2是非加密; 3是阿里云
+      if (this.videoProvider === 3) {
+        api.getChapterVideoAliyun(this.resourceId).then(response => {
+          this.chatperResources = response
+          Array.isArray(response.ppts) && this.$emit('pptupdate', response.ppts)
+        })
+      } else {
+        api.getChapterVideo(this.resourceId).then(response => {
+          let { video, audio, ppts } = response
+          video = video.reduce(
+            (result, item) => {
+              if (item.quality === '10') {
+                result.LD = item.playurl
+              }
+              if (item.quality === '20') {
+                result.SD = item.playurl
+              }
+              return result
+            },
+            { LD: '', SD: '' }
+          )
+          this.chatperResources = { video, audio, ppts }
+          Array.isArray(ppts) && this.$emit('pptupdate', ppts)
+        })
+      }
+    },
+    // 获取章节视频进度
+    getChapterVideoProgress() {
+      api
+        .getChapterVideoProgress(this.sid, this.resourceId, {
+          device_id: Cookies.get('_idt')
+        })
+        .then(response => {
+          this.progress = response
+          // 跳转播放进度
+          if (this.player && response.cpt) {
+            this.player.seek(response.cpt)
+          }
+        })
+    },
+    // 更新章节视频进度
+    updateChapterVideoProgress(time, durations) {
+      // this.progress.pt += this.throttleWait
+      // 登录用户信息
+      const user = window.G.UserInfo
+      const params = {
+        sid: user.student_info.id,
+        uid: user.uid,
+        d: Cookies.get('_idt'),
+        i: Cookies.get('_idt'),
+        c: this.cid, // 课程ID
+        s: this.sid, // 学期ID
+        v: this.resourceId, // 视频资源ID
+        _p: this.progress.pt, // 累计时间
+        _m: this.progress.mpt, // 当前播放最大时间
+        _c: this.progress.cpt, // 当前播放位置
+        ps: this.watchedTimePoint.join(',') // 播放时，统计帧
+      }
+      api.updateChapterVideoProgress(params)
+      // 清空已经上传过的观看时间点
+      this.watchedTimePoint = []
+    },
+    // 更新观看总时长
+    updateWatchTime() {
+      this.timer && clearInterval(this.timer)
+      // 增加跳过片头时间
+      if (this.isSkip && !this.progress.pt) {
+        this.progress.pt = this.skipTime + this.throttleWait
+      }
+      // 默认增加时间
+      this.progress.pt = this.progress.pt || this.throttleWait
+      this.timer = setInterval(() => {
+        // safair 浏览器下有bug
+        // const status = this.player.getStatus()
+        if (this.isPlaying) {
+          // 播放倍速
+          const speed = this.player._originalPlaybackRate || 1
+          this.progress.pt = this.progress.pt + 1 * speed
+        }
+        this.isPlaying = false
+      }, 1000)
+    }
+  },
+  beforeMount() {
+    // 获取视频
+    this.getChapterVideo()
+    // 获取视频进度
+    this.getChapterVideoProgress()
+  },
+  destroyed() {
+    this.timer && clearInterval(this.timer)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.player {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: #3f3f3f;
+}
+.player-main {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+.player-column {
+  flex: 1;
+  height: 100%;
+}
+.player-footer {
+  display: flex;
+  align-items: center;
+  height: 54px;
+  padding: 0 20px;
+  font-size: 14px;
+  color: #a0a0a0;
+  a {
+    color: #a0a0a0;
+    text-decoration: none;
+  }
+  em {
+    margin-right: 40px;
+    cursor: pointer;
+  }
+}
+.player-button {
+  display: inline-block;
+  color: #a0a0a0;
+  padding-left: 25px;
+  font-size: 14px;
+  line-height: 18px;
+  margin: 0 20px;
+  background: url(../../assets/play-icons.png) no-repeat 0 0;
+  cursor: pointer;
+}
+.player-button-download {
+  background-position: 0 -240px;
+}
+.player-button-ppt {
+  background-position: 0 -240px;
+}
+.player-button-ppt__active {
+  background-position: 0 -280px;
+  color: #b19241;
+}
+.player-button-skip {
+  background-position: 0 -160px;
+}
+.player-button-skip__active {
+  background-position: 0 -200px;
+  color: #b19241;
+}
+</style>

client/src/modules/viewer/components/player/player.vue

-<template>
-  <div class="player">
-    <div class="player-main">
-      <div class="player-column" v-show="videoVisible">
-        <!-- 视频 -->
-        <video-player :video="video"></video-player>
-      </div>
-      <div class="player-column" v-if="pptVisible">
-        <!-- ppt -->
-        <ppt-player :ppts="ppts" @close="pptVisible = false" @fullscreen="onPPTFullscreen"></ppt-player>
-      </div>
-    </div>
-    <div class="player-footer">
-      <em class="player-button player-button-download" v-if="pdf">
-        <a :href="pdf" target="_blank">下载PPT</a>
-      </em>
-      <em :class="pptClass" @click="togglePPTVisible" v-if="ppts.length">同步显示PPT</em>
-      <em :class="skipClass" @click="toggleSkip">始终跳过片头</em>
-    </div>
-  </div>
-</template>
-
-<script>
-import videoPlayer from './videoPlayer.vue'
-import pptPlayer from './pptPlayer.vue'
-export default {
-  name: 'Player',
-  components: { videoPlayer, pptPlayer },
-  props: {
-    video: { type: Object },
-    pdf: { type: String },
-    ppts: {
-      type: Array,
-      default() {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      videoVisible: true,
-      pptVisible: false,
-      isSkip: false
-    }
-  },
-  computed: {
-    pptClass() {
-      return {
-        'player-button': true,
-        'player-button-ppt': !this.pptVisible,
-        'player-button-ppt__active': this.pptVisible
-      }
-    },
-    skipClass() {
-      return {
-        'player-button': true,
-        'player-button-skip': !this.isSkip,
-        'player-button-skip__active': this.isSkip
-      }
-    }
-  },
-  methods: {
-    // 同步显示PPT
-    togglePPTVisible() {
-      this.videoVisible = true
-      this.pptVisible = !this.pptVisible
-    },
-    // 始终跳过片头
-    toggleSkip() {
-      this.isSkip = !this.isSkip
-    },
-    // PPT全屏
-    onPPTFullscreen(value) {
-      this.videoVisible = !value
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.player {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-.player-main {
-  display: flex;
-  flex: 1;
-}
-.player-column {
-  flex: 1;
-  height: 100%;
-}
-.player-footer {
-  display: flex;
-  align-items: center;
-  height: 54px;
-  padding: 0 20px;
-  font-size: 14px;
-  color: #a0a0a0;
-  a {
-    color: #a0a0a0;
-    text-decoration: none;
-  }
-  em {
-    margin-right: 40px;
-    cursor: pointer;
-  }
-}
-.player-button {
-  display: inline-block;
-  color: #a0a0a0;
-  padding-left: 25px;
-  font-size: 14px;
-  line-height: 18px;
-  margin: 0 20px;
-  background: url(../../assets/play-icons.png) no-repeat 0 0;
-  cursor: pointer;
-}
-.player-button-download {
-  background-position: 0 -240px;
-}
-.player-button-ppt {
-  background-position: 0 -240px;
-}
-.player-button-ppt__active {
-  background-position: 0 -280px;
-  color: #b19241;
-}
-.player-button-skip {
-  background-position: 0 -160px;
-}
-.player-button-skip__active {
-  background-position: 0 -200px;
-  color: #b19241;
-}
-</style>

client/src/modules/viewer/components/player/pptPlayer.vue

@@ -19,10 +19,18 @@
           <span>{{ppts.length}}</span>页
         </div>
         <div class="ppt-player-controls__tools">
-          <i :class="['el-icon-self-xuexiao', (currentSync ? 'active' : '')]" @click="onToggleSync"></i>
-          <i class="el-icon-self-quanping" @click="fullscreen"></i>
-          <i class="el-icon-self-shipin" @click="setVideoTime"></i>
-          <i class="el-icon-self-guanbi" @click="$emit('close')"></i>
+          <el-tooltip content="PPT同步视频播放">
+            <i :class="['el-icon-self-xuexiao', (isSync ? 'active' : '')]" @click="onToggleSync"></i>
+          </el-tooltip>
+          <el-tooltip content="放大PPT">
+            <i class="el-icon-self-quanping" @click="fullscreen"></i>
+          </el-tooltip>
+          <el-tooltip content="切换视频到当前PPT页">
+            <i class="el-icon-self-shipin" @click="setVideoTime"></i>
+          </el-tooltip>
+          <el-tooltip content="关闭PPT">
+            <i class="el-icon-self-guanbi" @click="$emit('close')"></i>
+          </el-tooltip>
         </div>
       </div>
     </template>
@@ -34,20 +42,21 @@ export default {
   name: 'ppt-player',
   props: {
     ppts: { type: Array },
-    index: { type: Number, default: 0 },
-    isSync: { type: Boolean, default: false }
+    index: { type: Number, default: 0 }
   },
   data() {
     return {
       currentIndex: this.index,
-      currentSync: this.isSync,
+      isSync: true,
       isFullscreen: false
     }
   },
   watch: {
     index: {
       handler(value) {
-        this.currentIndex = value
+        if (this.isSync) {
+          this.currentIndex = value
+        }
       }
     }
   },
@@ -67,20 +76,18 @@ export default {
     },
     prev() {
       this.currentIndex = this.getIndex(this.currentIndex - 1)
-      this.currentSync = false
+      this.isSync = false
     },
     next(e) {
       this.currentIndex = this.getIndex(this.currentIndex + 1)
-      this.currentSync = false
+      this.isSync = false
     },
     onToggleSync(e) {
-      this.currentSync = !this.currentSync
-      this.currentIndex = this.currentSync
-        ? this.currentIndex
-        : this.currentIndex
+      this.isSync = !this.isSync
     },
     setVideoTime(e) {
-      this.$emit('onVideoSyncTime', this.ppts[this.currentIndex].ppt_point)
+      this.isSync = true
+      this.$emit('videoSyncTime', this.ppts[this.currentIndex].ppt_point)
     },
     // 全屏
     fullscreen() {

client/src/modules/viewer/components/player/videoPlayer.vue

@@ -5,39 +5,48 @@
 <script>
 export default {
   name: 'VideoPlayer',
-  props: { video: Object },
+  props: { isSkip: Boolean, video: Object },
   data() {
     return { player: null }
   },
   methods: {
     createPlayer() {
+      const _this = this
       const { FD, LD, SD } = this.video
+      /*
+        "OD" : "原画"
+        "FD" : "流畅"
+        "LD" : "标清"
+        "SD" : "高清"
+        "HD" : "超清"
+        "2K" : "2K"
+        "4K" : "4K"
+      */
       this.player = new Aliplayer(
         {
           id: 'player',
           source: JSON.stringify({ FD, LD, SD }),
           width: '100%',
           height: '100%',
-          autoplay: true,
+          autoplay: false,
           isLive: false,
+          preload: true,
+          useH5Prism: true,
           controlBarVisibility: 'always',
-          components: [
-            {
-              name: 'QualityComponent',
-              type: AliPlayerComponent.QualityComponent
-            }
-          ]
+          defaultDefinition: 'SD',
+          useHlsPluginForSafari: true
         },
         function(player) {
-          console.log('The player is created')
-          /* Register the sourceloaded of the player, query the resolution of the video, invoke the resolution component, and call the setCurrentQuality method to set the resolution. */
-          player.on('sourceloaded', function(params) {
-            var paramData = params.paramData
-            var desc = paramData.desc
-            var definition = paramData.definition
-            player
-              .getComponent('QualityComponent')
-              .setCurrentQuality(desc, definition)
+          player.on('ready', function() {
+            // 跳过片头
+            _this.isSkip && player.seek(6)
+            _this.$emit('ready', player)
+          })
+          player.on('timeupdate', function(event) {
+            _this.$emit('timeupdate', player.getCurrentTime())
+          })
+          player.on('error', function(event) {
+            console.log(event)
           })
         }
       )

client/src/modules/viewer/components/read/chapterRead.vue

+
+<template>
+  <container :title="chapter.name">
+    <file-list :files="files"></file-list>
+  </container>
+</template>
+
+<script>
+// components
+import Container from '../common/container.vue'
+import FileList from './fileList.vue'
+
+// 章节阅读资料
+export default {
+  name: 'ChapterRead',
+  components: { Container, FileList },
+  props: {
+    // 当前选中的
+    chapter: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 课程详情接口返回的数据
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    files() {
+      const reading = this.chapter.reading
+      const file = {
+        file_name: reading.reading_content,
+        file_url: reading.reading_attachment
+      }
+      return [file]
+    }
+  }
+}
+</script>

client/src/modules/viewer/components/read/courseRead.vue

+
+<template>
+  <container :title="chapter.name">
+    <file-list :files="files"></file-list>
+  </container>
+</template>
+
+<script>
+// components
+import Container from '../common/container.vue'
+import FileList from './fileList.vue'
+
+// 课程阅读资料
+export default {
+  name: 'CourseRead',
+  components: { Container, FileList },
+  props: {
+    // 当前选中的
+    chapter: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 课程详情接口返回的数据
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  computed: {
+    files() {
+      return this.data.files || []
+    }
+  }
+}
+</script>

client/src/modules/viewer/components/read/fileList.vue

+<template>
+  <div>
+    <ul class="file-list" v-if="files.length">
+      <li class="file-list-item" v-for="file in files" :key="file.id">
+        <a :href="file.file_url" target="_blank">
+          <i class="el-icon-document"></i>
+          <div v-html="file.file_name"></div>
+        </a>
+        <!-- <span v-if="file.file_size">{{ file.file_size }}</span> -->
+        <a :href="file.file_url" :download="file.file_name" target="_blank">
+          <el-tooltip effect="dark" content="下载">
+            <i class="el-icon-download"></i>
+          </el-tooltip>
+        </a>
+      </li>
+    </ul>
+    <div class="empty" v-else>
+      <slot name="empty">暂无课程资料</slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FilePanel',
+  props: {
+    // 标题
+    title: { type: String, default: '课程资料' },
+    // 文件列表
+    files: { type: Array, default: () => [] }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-list {
+  padding: 0;
+}
+.file-list-item {
+  display: flex;
+  font-size: 16px;
+  padding: 20px 30px;
+  margin-bottom: 10px;
+  background-color: #fff;
+  list-style: none;
+  border-radius: 32px;
+  justify-content: space-between;
+  a {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: #333;
+    white-space: nowrap;
+    &:hover {
+      color: #b49441;
+    }
+    ::v-deep * {
+      margin: 0;
+      padding: 0;
+    }
+  }
+}
+.empty {
+  font-size: 18px;
+  line-height: 80px;
+  background-color: #fff;
+  text-align: center;
+  border-radius: 40px;
+}
+</style>

client/src/modules/viewer/components/work/chapterExam.vue

+<template>
+  <container :title="detail.paper_title" v-loading="loading">
+    <template v-slot:header-aside v-if="isExamComplete">分数：{{exam.score.total}}分</template>
+    <div class="exam">
+      <template v-if="isSubmited && !isExamComplete">
+        <div class="no-exam">试卷批改中，请耐心等待</div>
+      </template>
+      <template v-else>
+        <!-- 考试期间，未开始考试 -->
+        <div class="exam-welcome" v-if="!isStartExam">
+          <div v-if="detail.paper_deadline">考试截止时间：{{detail.paper_deadline}}</div>
+          <el-button
+            type="primary"
+            :disabled="!isExamTime"
+            @click="onStartExam"
+          >{{startExamButtonText}}</el-button>
+        </div>
+        <!-- 考试试题 -->
+        <div class="exam-form" v-if="isStartExam">
+          <el-form :disabled="isSubmited">
+            <template v-for="items in questions">
+              <exam-item
+                v-for="(item, index) in items"
+                :index="index"
+                :type="item.type"
+                :data="item"
+                :value="item.formModel"
+                :disabled="isSubmited"
+                :key="item.id"
+              ></exam-item>
+            </template>
+            <div class="exam-buttons">
+              <el-tooltip effect="dark" content="提交之后就不能修改了哦" placement="right">
+                <el-button type="primary" @click="onSubmit">{{submitText}}</el-button>
+              </el-tooltip>
+            </div>
+          </el-form>
+        </div>
+      </template>
+    </div>
+  </container>
+</template>
+
+<script>
+import Base64 from 'Base64'
+
+// components
+import Container from '../common/container.vue'
+import ExamItem from './examItem.vue'
+// api
+import * as api from '../../api'
+
+// 章节测试题
+export default {
+  name: 'ChapterExam',
+  components: { Container, ExamItem },
+  props: {
+    // 当前选中的章节
+    chapter: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 课程详情接口返回的数据
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      detail: {},
+      questions: [],
+      messageInstance: null,
+      exam: {},
+      isStartExam: false, // 是否开始考试
+      autoSubmitTimer: null // 自动提交定时器
+    }
+  },
+  watch: {
+    chapter: {
+      immediate: true,
+      handler(data) {
+        this.detail = data.paper
+        this.questions = data.paper
+          ? this.genQuestions(data.paper.examination)
+          : []
+      }
+    }
+  },
+  computed: {
+    // 学期ID
+    sid() {
+      return this.$route.params.sid
+    },
+    // 课程ID
+    cid() {
+      return this.$route.params.cid
+    },
+    // 当前页面的ID
+    pid() {
+      return this.$route.params.id
+    },
+    // 是否是考试时间
+    isExamTime() {
+      if (!this.detail.paper_deadline) {
+        return true
+      }
+      // 大于开始时间，小于结束时间
+      const endTime = +new Date(this.exam.paper_deadline)
+      const currentTime = new Date().getTime()
+      return currentTime < endTime
+    },
+    // 考试按钮
+    startExamButtonText() {
+      return this.isExamTime ? '开始考试' : '考试结束'
+    },
+    // 考试完成
+    isExamComplete() {
+      // 考试完成，批改完成并且公布成绩
+      return this.exam.is_published === 1 && this.exam.type === 2
+    },
+    // 是否提交
+    isSubmited() {
+      return this.exam.type === 1 || this.exam.type === 2
+    },
+    // 提交按钮文本
+    submitText() {
+      return this.isSubmited ? '已提交' : '提交'
+    }
+  },
+  methods: {
+    // 开始考试
+    onStartExam() {
+      this.isStartExam = true
+      // 自动提交答题
+      this.autoSubmit()
+    },
+    // 组装问题数据
+    genQuestions(list) {
+      if (!list) {
+        return []
+      }
+      return list.map(data => {
+        let { radioList, checkboxList, shortAnswerList } = data
+        // 单选
+        radioList = radioList.map(item => {
+          const temp = {
+            type: 1,
+            formModel: { id: item.id, user_answer: item.user_answer || '' }
+          }
+          return Object.assign({}, item, temp)
+        })
+        // 多选
+        checkboxList = checkboxList.map(item => {
+          const temp = {
+            type: 2,
+            formModel: { id: item.id, user_answer: item.user_answer || [] }
+          }
+          return Object.assign({}, item, temp)
+        })
+        // 问答
+        shortAnswerList = shortAnswerList.map(item => {
+          const temp = {
+            type: 3,
+            formModel: {
+              id: item.id,
+              user_answer: item.user_answer
+                ? Base64.decode(item.user_answer.replace(/ /gi, '+'))
+                : '',
+              attachments: item.attachments || []
+            }
+          }
+          return Object.assign({}, item, temp)
+        })
+        return [...radioList, ...checkboxList, ...shortAnswerList]
+      })
+    },
+    // 获取考试结果
+    getExamResult() {
+      api
+        .getCourseExamResult(this.sid, this.cid, this.pid, { paper_type: 0 })
+        .then(response => {
+          // 设置问题列表数据
+          if (response.code !== 8001) {
+            this.isStartExam = true
+            this.exam = response
+            this.questions = this.genQuestions(response.sheet)
+            // 自动提交
+            if (this.isStartExam && !this.isSubmited && !this.isExamComplete) {
+              this.autoSubmit()
+            }
+          }
+        })
+    },
+    // 提交校验
+    checkSubmit() {
+      for (let i = 0; i < this.questions.length; i++) {
+        const questions = this.questions[i]
+        for (let k = 0; k < questions.length; k++) {
+          const value = questions[k].formModel.user_answer
+          if (Array.isArray(value) ? !value.length : !value) {
+            return false
+          }
+        }
+      }
+      return true
+    },
+    // 提交
+    onSubmit() {
+      // 校验
+      if (!this.checkSubmit()) {
+        this.messageInstance && this.messageInstance.close()
+        this.messageInstance = this.$message.error('还有题目未做，不能提交')
+        return
+      }
+      // 提交的答案数据
+      const answers = this.handleSubmitData()
+      // 提交参数
+      const params = { answers: JSON.stringify(answers), type: 1 }
+      // 请求接口
+      this.handleSubmitRequest(params)
+    },
+    // 自动提交
+    autoSubmit() {
+      // 10秒提交一次
+      this.autoSubmitTimer && clearInterval(this.autoSubmitTimer)
+      this.autoSubmitTimer = setInterval(() => {
+        // 提交的答案数据
+        const answers = this.handleSubmitData()
+        const params = { answers: JSON.stringify(answers), type: 0 }
+        // 请求接口
+        this.handleSubmitRequest(params)
+      }, 10000)
+    },
+    // 处理请求接口答案数据
+    handleSubmitData() {
+      return this.questions.map(questions => {
+        return questions.reduce(
+          (result, item) => {
+            // 单选题
+            if (item.type === 1) {
+              result.radioList.push(item.formModel)
+            }
+            // 多选题
+            if (item.type === 2) {
+              result.checkboxList.push(item.formModel)
+            }
+            // 简答题
+            if (item.type === 3) {
+              const formModel = Object.assign({}, item.formModel, {
+                user_answer: Base64.encode(item.formModel.user_answer)
+              })
+              result.shortAnswerList.push(formModel)
+            }
+            return result
+          },
+          { radioList: [], checkboxList: [], shortAnswerList: [] }
+        )
+      })
+    },
+    // 请求提交接口
+    handleSubmitRequest(params) {
+      params.paper_type = 0
+      api
+        .submitCourseExam(this.sid, this.cid, this.pid, params)
+        .then(response => {
+          if (params.type === 0) {
+            console.log('暂存成功')
+            return
+          }
+          if (response.code === 200) {
+            this.$message.success('考试答卷提交成功')
+            this.autoSubmitTimer && clearInterval(this.autoSubmitTimer)
+            this.getExamResult()
+          } else {
+            this.$message.error(response.data.error)
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
+    }
+  },
+  beforeMount() {
+    // 获取考试结果
+    this.getExamResult()
+  },
+  destroyed() {
+    this.autoSubmitTimer && clearInterval(this.autoSubmitTimer)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.exam-buttons {
+  padding: 40px 0;
+  text-align: center;
+  .el-button {
+    width: 240px;
+    margin: 40px auto;
+  }
+}
+.no-exam {
+  padding: 100px;
+  font-size: 30px;
+  text-align: center;
+}
+.exam-welcome {
+  padding: 40px;
+  line-height: 30px;
+  text-align: center;
+  ::v-deep .el-button {
+    margin-top: 30px;
+  }
+}
+</style>

client/src/modules/viewer/components/work/chapterTest.vue

+<template>
+  <container :title="chapter.name" v-loading="loading">
+    <template v-slot:header-aside v-if="isSubmited">正确率：{{detail.score}}%</template>
+    <div class="exam">
+      <div class="exam-form">
+        <el-form :disabled="isSubmited">
+          <exam-item
+            v-for="(item, index) in unorderedQuestions"
+            :index="index"
+            :type="item.question_type"
+            :data="item"
+            :value="item.formModel"
+            :disabled="isSubmited"
+            :key="item.id"
+          ></exam-item>
+          <div class="exam-buttons">
+            <el-tooltip effect="dark" content="提交之后就不能修改了哦" placement="right">
+              <el-button type="primary" @click="onSubmit">{{submitText}}</el-button>
+            </el-tooltip>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </container>
+</template>
+
+<script>
+// libs
+import { shuffle } from 'lodash'
+// components
+import Container from '../common/container.vue'
+import ExamItem from './examItem.vue'
+// api
+import * as api from '../../api'
+
+// 章节测试题
+export default {
+  name: 'ChapterTest',
+  components: { Container, ExamItem },
+  props: {
+    // 当前选中的章节
+    chapter: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      detail: null,
+      questions: [], // 问题列表
+      startTime: new Date().getTime(), // 进入时间
+      messageInstance: null
+    }
+  },
+  watch: {
+    chapter: {
+      immediate: true,
+      handler(data) {
+        this.questions = data.homework
+          ? this.genQuenstions(data.homework.questions)
+          : []
+      }
+    }
+  },
+  computed: {
+    // 学期ID
+    sid() {
+      return this.$route.params.sid
+    },
+    // 课程ID
+    cid() {
+      return this.$route.params.cid
+    },
+    // 当前页面的ID
+    pid() {
+      return this.$route.params.id
+    },
+    // 资源ID
+    resourceId() {
+      return this.chapter.resource_id
+    },
+    // 打乱顺序的问题列表
+    unorderedQuestions() {
+      const ids = this.questions.map(item => item.id)
+      const sortIds = shuffle(ids)
+      return sortIds.map(id => this.questions.find(item => item.id === id))
+    },
+    // 是否提交
+    isSubmited() {
+      return this.detail ? !!this.detail.work_contents : false
+    },
+    // 提交按钮文本
+    submitText() {
+      return this.isSubmited ? '已提交' : '提交'
+    }
+  },
+  methods: {
+    // 获取测试答题详情
+    getDetail() {
+      this.loading = true
+      api
+        .getChapterHomework(this.sid, this.cid, this.resourceId)
+        .then(response => {
+          this.detail = Array.isArray(response) ? null : response
+          if (this.detail) {
+            const parseAnswers = JSON.parse(this.detail.work_contents)
+            // 设置答案
+            this.questions = this.questions.map(item => {
+              const found = parseAnswers.find(
+                answer => answer.question_id === item.id
+              )
+              if (found) {
+                const selectedIds = found.options.reduce((result, item) => {
+                  item.selected && result.push(item.id)
+                  return result
+                }, [])
+                item.user_answer =
+                  item.question_type === 2 ? selectedIds : selectedIds[0]
+              }
+              return item
+            })
+            this.questions = this.genQuenstions(this.questions)
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 组装问题数据
+    genQuenstions(list) {
+      if (!list) {
+        return []
+      }
+      return list.map(item => {
+        let temp = null
+        if (item.question_type === 1) {
+          // 单选
+          temp = {
+            formModel: { id: item.id, user_answer: item.user_answer || '' }
+          }
+        } else if (item.question_type === 2) {
+          // 多选
+          temp = {
+            formModel: { id: item.id, user_answer: item.user_answer || [] }
+          }
+        } else if (item.question_type === 3) {
+          // 简答
+          temp = {
+            formModel: {
+              id: item.id,
+              user_answer: item.user_answer
+                ? Base64.decode(item.user_answer)
+                : '',
+              attachments: item.attachments || ''
+            }
+          }
+        }
+        return Object.assign(
+          {},
+          item,
+          {
+            content: item.question_content,
+            options: item.question_options
+              ? JSON.parse(item.question_options)
+              : []
+          },
+          temp
+        )
+      })
+    },
+    // 提交校验
+    checkSubmit() {
+      const quenstions = this.questions
+      for (let i = 0; i < quenstions.length; i++) {
+        const value = quenstions[i].formModel.user_answer
+        if (Array.isArray(value) ? !value.length : !value) {
+          return false
+        }
+      }
+      return true
+    },
+    // 提交
+    onSubmit() {
+      // 校验
+      if (!this.checkSubmit()) {
+        this.messageInstance && this.messageInstance.close()
+        this.messageInstance = this.$message.error('还有题目未做，不能提交')
+        return
+      }
+      // 计算答题时间
+      const duration = Math.floor(
+        (new Date().getTime() - this.startTime) / 1000
+      )
+      // 答案数据
+      const data = this.handleSubmitData()
+      // 计算分数
+      const score = data.reduce((result, item) => {
+        item.is_correct && result++
+        return result
+      }, 0)
+      const total = this.questions.length
+      const params = {
+        semester_id: this.sid,
+        course_id: this.cid,
+        chapter_id: this.pid,
+        work_id: this.resourceId,
+        work_contents: JSON.stringify(data),
+        duration,
+        score: ((score / total) * 100).toFixed(1)
+      }
+      // 请求接口
+      this.handleSubmitRequest(params)
+    },
+    // 提交的答案数据
+    handleSubmitData() {
+      const result = this.questions.map(item => {
+        // 设置提交选中状态
+        let isCorrect = true
+        const options = item.options.map(option => {
+          // 选择的项
+          const answers = item.formModel.user_answer
+          // 是否选中该项
+          const selected = Array.isArray(answers)
+            ? answers.includes(option.id)
+            : option.id === answers
+          // 是否选择正确
+          if (option.checked !== selected && isCorrect) {
+            isCorrect = false
+          }
+          return {
+            id: option.id,
+            checked: option.checked,
+            option: option.option,
+            selected
+          }
+        })
+        return {
+          question_id: item.id,
+          is_correct: isCorrect ? 1 : 0,
+          options
+        }
+      })
+      return result
+    },
+    // 请求提交接口
+    handleSubmitRequest(params) {
+      api
+        .sbumitChapterHomework(params)
+        .then(response => {
+          if (response.status) {
+            this.getDetail()
+          } else {
+            this.$message.error(response.data.error)
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
+    }
+  },
+  beforeMount() {
+    this.getDetail()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.exam-buttons {
+  padding: 40px 0;
+  text-align: center;
+  .el-button {
+    width: 240px;
+    margin: 40px auto;
+  }
+}
+</style>

client/src/modules/viewer/components/work/chapterWork.vue

+<template>
+  <container :title="chapter.name" v-loading="loading">
+    <div class="exam-form">
+      <el-form :disabled="disabled || !isWorkTime">
+        <exam-item
+          v-for="(item, index) in questions"
+          :index="index"
+          :type="item.question_type"
+          :data="item"
+          :value="item.formModel"
+          :disabled="disabled || !isWorkTime"
+          :key="item.id"
+        ></exam-item>
+      </el-form>
+    </div>
+    <p style="color:red;" v-if="deadline">请于截止日期 {{ deadline }} 前提交</p>
+    <!-- 驳回状态 -->
+    <template v-if="detail && detail.status === 1">
+      <div class="work-bottom">
+        <div class="info">
+          <div class="paper-check">
+            <h4>作业被驳回，点击“重新编辑”按钮重新编辑内容再次提交</h4>
+            <div class="paper-check-item">
+              <b>驳回时间：</b>
+              {{ detail.checker_time }}
+            </div>
+            <div class="paper-check-item">
+              <b>驳回说明：</b>
+              <div class="edit_html" v-html="detail.check_comments"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="buttons">
+        <el-button type="primary" @click="onReEdit" :disabled="!isWorkTime">重新编辑</el-button>
+      </div>
+    </template>
+    <!-- 正常状态 -->
+    <template v-else>
+      <div class="work-bottom" v-if="detail">
+        <div class="info">
+          <template v-if="isRevised">
+            <div class="paper-check">
+              <p>批改时间：{{ detail.checker_time }}</p>
+              <div class="paper-check-item">
+                <b>评分：</b>
+                {{ detail.score }}
+              </div>
+              <div class="paper-check-item">
+                <b>评语：</b>
+                <div class="edit_html" v-html="detail.check_comments"></div>
+              </div>
+            </div>
+          </template>
+          <template v-else-if="detail.created_time">
+            <p class="help">已于 {{ detail.created_time }} 提交，等待老师批改中。</p>
+            <template
+              v-if="
+                detail.updated_time &&
+                  detail.updated_time !== detail.created_time
+              "
+            >
+              <p class="help">最近提交时间： {{ detail.updated_time }}</p>
+            </template>
+          </template>
+        </div>
+      </div>
+      <div class="buttons">
+        <el-tooltip content="在获老师批改之前，可以多次提交，将以最后一次提交为准" placement="right">
+          <el-button
+            type="primary"
+            @click="onSubmit"
+            :disabled="disabled || !isWorkTime"
+          >{{ submitText }}</el-button>
+        </el-tooltip>
+      </div>
+    </template>
+  </container>
+</template>
+
+<script>
+import Base64 from 'Base64'
+
+// componets
+import Container from '../common/container.vue'
+import ExamItem from './examItem.vue'
+// api
+import * as api from '../../api'
+
+// 章节作业
+export default {
+  name: 'ChapterWork',
+  components: { Container, ExamItem },
+  props: {
+    // 当前选中的
+    chapter: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 课程详情接口返回的数据
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      detail: null,
+      questions: [], // 问题列表
+      startTime: new Date().getTime(), // 进入时间
+      messageInstance: null,
+      deadline: '', // 截止时间
+      disabled: false
+    }
+  },
+  watch: {
+    chapter: {
+      immediate: true,
+      handler(data) {
+        this.questions = data.homework
+          ? this.genQuenstions(data.homework.questions)
+          : []
+      }
+    }
+  },
+  computed: {
+    // 学期ID
+    sid() {
+      return this.$route.params.sid
+    },
+    // 课程ID
+    cid() {
+      return this.$route.params.cid
+    },
+    // 当前页面的ID
+    pid() {
+      return this.$route.params.id
+    },
+    // 资源ID
+    resourceId() {
+      return this.chapter.resource_id
+    },
+    // 是否批改
+    isRevised() {
+      return this.detail ? this.detail.status === 0 : false
+    },
+    // 提交按钮文本
+    submitText() {
+      return this.isRevised ? '已批改' : '提交'
+    },
+    // 是否是提交作业时间
+    isWorkTime() {
+      if (!this.deadline) {
+        return true
+      }
+      // 大于开始时间，小于结束时间
+      const endTime = +new Date(this.deadline)
+      const currentTime = new Date().getTime()
+      return currentTime < endTime
+    }
+  },
+  methods: {
+    // 获取作业截止时间
+    getDeadline() {
+      api
+        .getChapterHomeworkDeadline(this.sid, this.cid, this.pid)
+        .then(response => {
+          this.deadline = response.dead_line
+        })
+    },
+    // 获取详情
+    getDetail() {
+      this.loading = true
+      api
+        .getChapterHomework(this.sid, this.cid, this.resourceId)
+        .then(response => {
+          this.detail = Array.isArray(response) ? null : response
+          if (this.detail) {
+            // -1未处理  0已处理   1驳回
+            this.disabled = [0, 1].includes(this.detail.status)
+            const parseAnswers = JSON.parse(this.detail.work_contents)
+            // 设置答案
+            this.questions = this.questions.map(item => {
+              const found = parseAnswers.find(
+                answer => answer.question_id === item.id
+              )
+              if (found) {
+                item.user_answer = found.descreption
+                item.attachments = found.file_url
+              }
+              return item
+            })
+            this.questions = this.genQuenstions(this.questions)
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 组装问题数据
+    genQuenstions(list) {
+      if (!list) {
+        return []
+      }
+      return list.map(item => {
+        let temp = null
+        if (item.question_type === 1) {
+          // 单选
+          temp = {
+            formModel: { id: item.id, user_answer: item.user_answer || '' }
+          }
+        } else if (item.question_type === 2) {
+          // 多选
+          temp = {
+            formModel: { id: item.id, user_answer: item.user_answer || [] }
+          }
+        } else if (item.question_type === 3) {
+          // 简答
+          temp = {
+            formModel: {
+              id: item.id,
+              user_answer: item.user_answer
+                ? Base64.decode(item.user_answer)
+                : '',
+              attachments: item.attachments || ''
+            }
+          }
+        }
+        return Object.assign(
+          {},
+          item,
+          {
+            content: item.question_content,
+            options: item.question_options
+              ? JSON.parse(item.question_options)
+              : []
+          },
+          temp
+        )
+      })
+    },
+    // 提交校验
+    checkSubmit() {
+      const quenstions = this.questions
+      for (let i = 0; i < quenstions.length; i++) {
+        const value = quenstions[i].formModel.user_answer
+        if (Array.isArray(value) ? !value.length : !value) {
+          return false
+        }
+      }
+      return true
+    },
+    // 提交
+    onSubmit() {
+      // 校验
+      if (!this.checkSubmit()) {
+        this.messageInstance && this.messageInstance.close()
+        this.messageInstance = this.$message.error(
+          '答题内容不能为空，请检查并输入内容'
+        )
+        return
+      }
+      // 计算答题时间
+      const duration = Math.floor(
+        (new Date().getTime() - this.startTime) / 1000
+      )
+      // 提交的答案数据
+      const answers = this.questions.map(item => {
+        return {
+          question_id: item.id,
+          descreption:
+            item.question_type === 3
+              ? Base64.encode(item.formModel.user_answer)
+              : item.formModel.user_answer,
+          file_url: item.formModel.attachments,
+          is_encoded: 1
+        }
+      })
+      // 提交参数
+      const params = {
+        semester_id: this.sid,
+        course_id: this.cid,
+        chapter_id: this.pid,
+        work_id: this.resourceId,
+        work_contents: JSON.stringify(answers),
+        duration
+      }
+      // 请求接口
+      this.handleSubmitRequest(params)
+    },
+    // 请求提交接口
+    handleSubmitRequest(params) {
+      api
+        .sbumitChapterHomework(params)
+        .then(response => {
+          if (response.status) {
+            this.$message.success('提交成功，等待批改')
+            this.getDetail()
+          } else {
+            this.$message.error(response.data.error)
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
+    },
+    // 重新编辑
+    onReEdit() {
+      this.disabled = false
+      this.detail.status = -1
+    }
+  },
+  beforeMount() {
+    this.getDetail()
+    this.getDeadline()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.work-bottom {
+  margin-top: 20px;
+  .info {
+    color: #999;
+    line-height: 28px;
+  }
+}
+.buttons {
+  padding: 20px 0;
+  ::v-deep .el-button {
+    width: 120px;
+  }
+}
+.paper-check {
+  padding: 10px;
+  color: #000;
+  border: 1px solid #dedede;
+  h4 {
+    margin: 0 0 10px;
+  }
+}
+.paper-check-item {
+  display: flex;
+  b {
+    white-space: nowrap;
+  }
+}
+</style>

client/src/modules/viewer/components/work/courseWork.vue

+
+<template>
+  <container :title="chapter.name" v-loading="loading">
+    <el-steps direction="vertical" v-if="data.curriculum">
+      <el-step title="阅读大作业要求" status="process">
+        <template v-slot:description>
+          <div v-html="data.curriculum.curriculum_essay"></div>
+          <p>截止日期：{{data.essay_date}}</p>
+        </template>
+      </el-step>
+      <el-step title="填写作业主题、正文，上传附件（点击“提交”保存）" status="process">
+        <template v-slot:description>
+          <el-form
+            :model="ruleForm"
+            :rules="rules"
+            :hide-required-asterisk="true"
+            :disabled="isRevised"
+            label-position="top"
+            ref="ruleForm"
+          >
+            <el-form-item label="主题" prop="essay_name">
+              <el-input v-model="ruleForm.essay_name" placeholder="主题" maxlength="50"></el-input>
+            </el-form-item>
+            <el-form-item label="正文" prop="essay_description">
+              <!-- 编辑器 -->
+              <v-editor :disabled="isRevised" v-model="ruleForm.essay_description"></v-editor>
+            </el-form-item>
+            <el-form-item prop="url">
+              <!-- 文件上传 -->
+              <v-upload v-model="ruleForm.url">
+                请上传对应的文件附件：
+                <!-- <template v-slot:tip>只支持docx格式的文件，文件小于10M</template> -->
+              </v-upload>
+            </el-form-item>
+          </el-form>
+        </template>
+      </el-step>
+      <el-step title="截止日期前提交" status="process">
+        <template v-slot:description>
+          <div class="work-bottom" v-if="detail">
+            <div class="info">
+              <template v-if="isRevised">
+                <div class="paper-check">
+                  <p>批改时间：{{detail.check_date}}</p>
+                  <div class="paper-check-item">
+                    <b>评分：</b>
+                    {{detail.score}}
+                  </div>
+                  <div class="paper-check-item">
+                    <b>评语：</b>
+                    <div class="edit_html" v-html="detail.check_comments"></div>
+                  </div>
+                </div>
+              </template>
+              <template v-else-if="detail.created_time">
+                <p class="help">已于 {{detail.created_time}} 提交，等待老师批改中。</p>
+                <template v-if="detail.updated_time && detail.updated_time !== detail.created_time">
+                  <p class="help">最近提交时间： {{detail.updated_time}}</p>
+                </template>
+              </template>
+            </div>
+          </div>
+          <div class="buttons">
+            <el-tooltip content="在获老师批改之前，可以多次提交，将以最后一次提交为准" placement="right">
+              <el-button type="primary" @click="onSubmit" :disabled="isRevised">{{submitText}}</el-button>
+            </el-tooltip>
+          </div>
+        </template>
+      </el-step>
+    </el-steps>
+  </container>
+</template>
+
+<script>
+// componets
+import Container from '../common/container.vue'
+import VEditor from '../common/editor.vue'
+import VUpload from '../common/upload.vue'
+// api
+import * as api from '../../api'
+
+// 课程大作业
+export default {
+  name: 'CourseWork',
+  components: { Container, VEditor, VUpload },
+  props: {
+    // 当前选中的
+    chapter: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 课程详情接口返回的数据
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      ruleForm: {
+        essay_name: '',
+        essay_description: '',
+        url: ''
+      },
+      rules: {
+        essay_name: [
+          { required: true, message: '请输入主题', trigger: 'blur' }
+        ],
+        essay_description: [
+          { required: true, message: '请输入正文', trigger: 'change' }
+        ],
+        url: [{ required: true, message: '请上传附件', trigger: 'change' }]
+      },
+      detail: null,
+      loading: false,
+      messageInstance: null
+    }
+  },
+  computed: {
+    // 学期ID
+    sid() {
+      return this.$route.params.sid
+    },
+    // 课程ID
+    cid() {
+      return this.$route.params.cid
+    },
+    // 是否批改
+    isRevised() {
+      return this.detail ? !!this.detail.check_date : false
+    },
+    // 提交按钮文本
+    submitText() {
+      return this.isRevised ? '已批改' : '提交'
+    }
+  },
+  methods: {
+    // 获取大作业详情
+    getDetail() {
+      this.loading = true
+      api
+        .getCourseWork(this.sid, this.cid)
+        .then(response => {
+          this.detail = Array.isArray(response) ? null : response
+          if (this.detail) {
+            this.ruleForm.essay_name = this.detail.essay_name
+            this.ruleForm.essay_description = this.detail.essay_description
+            this.ruleForm.url = this.detail.file_url
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    // 提交
+    onSubmit() {
+      this.messageInstance && this.messageInstance.close()
+      if (!this.ruleForm.essay_name) {
+        this.messageInstance = this.$message.error('请输入主题')
+        return
+      }
+      if (!this.ruleForm.essay_description) {
+        this.messageInstance = this.$message.error('请输入正文')
+        return
+      }
+      if (!this.ruleForm.url) {
+        this.messageInstance = this.$message.error('请上传附件')
+        return
+      }
+      const params = Object.assign(this.ruleForm, {
+        semester_id: this.sid,
+        course_id: this.cid
+      })
+      this.handleSubmitRequest(params)
+    },
+    // 请求提交接口
+    handleSubmitRequest(params) {
+      api
+        .updateCourseWork(this.sid, this.cid, params)
+        .then(response => {
+          if (response.status) {
+            this.$message.success('提交成功，等待批改')
+            this.getDetail()
+          } else {
+            this.$message.error(response.data.error)
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.message)
+        })
+    }
+  },
+  beforeMount() {
+    this.getDetail()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+p {
+  margin: 0;
+}
+::v-deep .el-step__title {
+  border-bottom: 1px dashed #cecece;
+}
+::v-deep .el-step__description {
+  padding: 20px 0 30px;
+  font-size: 14px;
+}
+::v-deep .el-form-item__label {
+  font-weight: bold;
+  line-height: 24px;
+  padding: 0 0 5px;
+}
+.work-bottom {
+  .info {
+    color: #999;
+    line-height: 28px;
+  }
+}
+.buttons {
+  padding: 20px 0;
+  ::v-deep .el-button {
+    width: 120px;
+  }
+}
+.paper-check {
+  padding: 10px;
+  color: #000;
+  border: 1px solid #dedede;
+}
+.paper-check-item {
+  display: flex;
+  b {
+    white-space: nowrap;
+  }
+}
+</style>

client/src/modules/viewer/components/work/examItem.vue

+<template>
+  <div class="q-item">
+    <div class="q-item-hd">
+      <div class="q-item-num">{{index + 1}}.</div>
+      <div class="q-item-title" v-html="data.content"></div>
+      <div class="q-item-aside">
+        <template v-if="typeText">({{typeText}})</template>
+        <template v-if="data.hasOwnProperty('score')">({{data.score}}分)</template>
+      </div>
+    </div>
+    <div class="q-item-bd">
+      <!-- 单选 -->
+      <el-radio-group v-model="currentValue.user_answer" v-if="type === 1">
+        <div class="q-option-item" v-for="item in currentOptions" :key="item.id">
+          <el-radio :class="genClass(item)" :label="item.id">{{item.abc_option}}</el-radio>
+        </div>
+      </el-radio-group>
+      <!-- 多选 -->
+      <el-checkbox-group v-model="currentValue.user_answer" v-if="type === 2">
+        <div class="q-option-item" v-for="item in currentOptions" :key="item.id">
+          <el-checkbox :class="genClass(item)" :label="item.id">{{item.abc_option}}</el-checkbox>
+        </div>
+      </el-checkbox-group>
+      <!-- 简答题 -->
+      <template v-if="type === 3">
+        <v-editor v-model="currentValue.user_answer" :disabled="disabled"></v-editor>
+        <v-upload :disabled="disabled" v-model="currentValue.attachments">请上传对应的文件附件：</v-upload>
+      </template>
+    </div>
+    <div class="q-item-ft" v-if="disabled">
+      <template v-if="type === 3">
+        <p v-if="data.check_comment">
+          <span>评语：</span>
+          <span>{{data.check_comment}}</span>
+        </p>
+      </template>
+      <template v-else>
+        <div class="result">
+          <p>
+            <span>学生答案：</span>
+            <span :class="isCorrect ? 'is-success' : 'is-error'">{{submitAnswerText}}</span>
+          </p>
+          <p>
+            <span>正确答案：</span>
+            <span>{{correctAnswerText}}</span>
+          </p>
+        </div>
+      </template>
+      <p v-if="data.hasOwnProperty('get_score')">
+        <span>评分：</span>
+        <span>{{data.get_score}}分</span>
+      </p>
+      <div class="analyze" v-if="data.analysis">
+        <span>解析：</span>
+        <div class="analyze-main">
+          <span style="color:blue;cursor:pointer;" @click="showAnalyze = !showAnalyze">查看解析</span>
+          <div
+            v-html="data.analysis"
+            v-if="data.analysis"
+            v-show="showAnalyze"
+            class="analyze-content"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// components
+import VEditor from '../common/editor.vue'
+import VUpload from '../common/upload.vue'
+
+export default {
+  name: 'ExamItem',
+  components: { VEditor, VUpload },
+  props: {
+    // 索引
+    index: { type: Number },
+    // 问题类型
+    type: { type: Number },
+    // 单条数据
+    data: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 提交的答案
+    value: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 是否禁用，提交过的是禁用状态
+    disabled: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      currentValue: {},
+      showAnalyze: false
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(value) {
+        this.currentValue = value
+      }
+    }
+  },
+  computed: {
+    // 26个英文字母
+    A_Z() {
+      const result = []
+      for (let i = 0; i < 26; i++) {
+        result.push(String.fromCharCode(65 + i))
+      }
+      return result
+    },
+    // 选项类型
+    typeText() {
+      const map = { 1: '单选题', 2: '多选题' }
+      return map[this.type]
+    },
+    // 处理后的options数据
+    currentOptions() {
+      if (!this.data.options) {
+        return []
+      }
+      return this.data.options.map((item, index) => {
+        // 英文字母 + 名称
+        item.abc = this.A_Z[index]
+        item.abc_option = `${this.A_Z[index]}. ${item.option}`
+        // 提交时的选中状态
+        const value = this.value.user_answer || ''
+        item.selected = Array.isArray(value)
+          ? value.includes(item.id)
+          : value === item.id
+        // 处理正确的选中状态
+        const hasChecked = Object.prototype.hasOwnProperty.call(item, 'checked')
+        const rightAnswer = this.data.right_answer || ''
+        if (!hasChecked && rightAnswer) {
+          item.checked = Array.isArray(rightAnswer)
+            ? rightAnswer.includes(item.id)
+            : rightAnswer === item.id
+        }
+        return item
+      })
+    },
+    // 正确答案显示的英文字母
+    correctAnswerText() {
+      const result = this.currentOptions.reduce((result, item) => {
+        item.checked && result.push(item.abc)
+        return result
+      }, [])
+      return result.join('、')
+    },
+    // 提交答案显示的英文字母
+    submitAnswerText() {
+      const result = this.currentOptions.reduce((result, item) => {
+        item.selected && result.push(item.abc)
+        return result
+      }, [])
+      return result.join('、')
+    },
+    // 是否回答正确
+    isCorrect() {
+      const options = this.currentOptions
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].checked !== !!options[i].selected) {
+          return false
+        }
+      }
+      return true
+    }
+  },
+  methods: {
+    // 生成class
+    genClass(item) {
+      if (!this.disabled) {
+        return null
+      }
+      return {
+        'is-error': !this.isCorrect && item.selected,
+        'is-success': this.isCorrect && item.selected
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.q-item {
+  font-size: 16px;
+  padding: 10px 0;
+  border-bottom: 1px solid #c9c9c97a;
+  .upload {
+    font-size: 14px;
+  }
+}
+.q-item-hd {
+  display: flex;
+  padding: 10px 0 20px;
+
+  ::v-deep p {
+    margin: 0;
+    padding: 0;
+  }
+  ::v-deep ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+.q-item-num {
+  width: 20px;
+  text-align: center;
+}
+.q-item-title {
+  flex: 1;
+  ::v-deep img {
+    max-width: 100%;
+  }
+}
+.q-item-aside {
+  padding-left: 20px;
+  // align-self: flex-end;
+}
+.q-option-item {
+  padding-left: 20px;
+  margin-bottom: 14px;
+}
+.is-success {
+  color: #090;
+}
+.is-error {
+  color: #d80000;
+}
+::v-deep .el-radio {
+  &.is-disabled .el-radio__label {
+    color: #3c3c3c;
+  }
+  &.is-error .el-radio__label {
+    color: #d80000;
+  }
+  &.is-success .el-radio__label {
+    color: #090;
+  }
+}
+::v-deep .el-checkbox {
+  &.is-disabled .el-checkbox__label {
+    color: #3c3c3c;
+  }
+  &.is-error .el-checkbox__label {
+    color: #d80000;
+  }
+  &.is-success .el-checkbox__label {
+    color: #090;
+  }
+}
+.q-item-ft {
+  padding: 10px 0;
+  p {
+    font-size: 14px;
+    margin: 0 0 10px 0;
+  }
+  .result {
+    display: flex;
+    justify-content: flex-end;
+    p {
+      padding-left: 20px;
+    }
+  }
+  .analyze {
+    display: flex;
+    font-size: 14px;
+  }
+  .analyze-main {
+    flex: 1;
+    overflow: hidden;
+  }
+  .analyze-content {
+    margin-top: 10px;
+    background-color: #c9c9c97a;
+    border: 1px solid #c9c9c97a;
+    padding: 10px;
+    ::v-deep * {
+      margin: 0;
+      padding: 0;
+      max-width: 100%;
+    }
+  }
+}
+</style>