update

src/api/course.js

@@ -98,3 +98,13 @@ export function addCourseWorksPl(data) {
     hideloading: false
   })
 }
+
+// 添加问答作业
+export function addCourseWorks(data) {
+  return request({
+    url: '/addCourseWorks',
+    method: 'post',
+    data,
+    hideloading: false
+  })
+}

src/store/modules/user.js

@@ -75,9 +75,9 @@ const actions = {
           resolve(_user.userid)
         })
         .catch(error => {
-          //   var _user = { userid: '5943e08c-b7d4-11ed-8d51-005056b86db5' }
-          //   setToken(_user.userid)
-          //   resolve(_user.userid)
+          // var _user = { userid: '5943e08c-b7d4-11ed-8d51-005056b86db5' }
+          // setToken(_user.userid)
+          // resolve(_user.userid)
           reject(error)
         })
     })

src/views/course/components/answerPanel.vue

@@ -2,10 +2,12 @@
   <div class="cp-container" v-if="panelVisible">
     <div class="cp-title">
       <span class="back" @click="back"></span>
-      <span class="title">问答作业</span>
+      <span class="title" v-if="isTeacher">问答作业</span>
+      <span class="title" v-else>问答作业-{{ sStudent.student }}</span>
       <span class="btn" v-if="type == 1" @click="addPz(type)">提交</span>
     </div>
     <div class="cp-box">
+      <div class="cp-quest">提问：{{ answerQ }}</div>
       <div class="cp-conent" v-if="type == 1">
         <van-field v-model="message" rows="20" autosize type="textarea" placeholder="请输入..." />
       </div>
@@ -14,7 +16,7 @@
 </template>
 
 <script>
-import { addPz2 } from '@/api/course'
+import { addCourseWorks, addCourseWorksTeacher } from '@/api/course'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -33,6 +35,18 @@ export default {
     taskCount: {
       type: Number,
       default: 0
+    },
+    toolindex: {
+      type: Number
+    },
+    isTeacher: {
+      type: Boolean
+    },
+    answerQ: {
+      type: String
+    },
+    sStudent: {
+      type: Object
     }
   },
   components: {},
@@ -57,34 +71,45 @@ export default {
       this.imgList = imgList
       this.$forceUpdate()
     },
-    addPz(type, content) {
-      var a = ''
-      if (type === 1 && this.message === '') {
-        this.$toast({ message: '批注不能为空！', type: 'fail' })
-        return
-      }
-      if (type === 1 && this.message !== '') {
-        var img = ''
-        for (var i = 0; i < this.imgList.length; i++) {
-          img += "<img src='" + this.imgList[i] + "' />"
-        }
-        a = this.message.replaceAll(/%/g, '%25') + img
-      }
-      const params = [
+    addPz() {
+      const fun = [addCourseWorks, addCourseWorksTeacher]
+      const answerList = [
         {
-          cid: this.courseid,
-          uid: this.userinfo.userid,
-          s: this.courseType,
-          t: this.taskCount,
-          c: type === 1 ? a : content,
-          type: type
+          answerTitle: this.answerQ.replaceAll(/%/g, '%25'),
+          answer: this.message.replaceAll(/%/g, '%25')
         }
       ]
-
-      addPz2(params)
+      let params = []
+      if (this.isTeacher) {
+        params = [
+          {
+            uid: this.userinfo.userid,
+            cid: this.courseid,
+            stage: this.courseType,
+            task: this.taskCount,
+            tool: this.toolindex,
+            content: JSON.stringify(answerList),
+            type: 3
+          }
+        ]
+      } else {
+        params = [
+          {
+            uid: this.sStudent.userid,
+            cid: this.courseid,
+            stage: this.courseType,
+            task: this.taskCount,
+            tool: this.toolindex,
+            content: JSON.stringify(answerList),
+            type: 3,
+            ateacher: this.userinfo.userid
+          }
+        ]
+      }
+      fun[this.isTeacher ? 0 : 1](params)
         .then(res => {
           this.$toast({
-            message: '添加成功',
+            message: '上传成功',
             type: 'success'
           })
           this.$emit('setPanelVisible', false)
@@ -103,6 +128,7 @@ export default {
   height: 100vh;
   position: fixed;
   top: 0;
+  left: 0;
   background: #fff;
   z-index: 2;
   .cp-title {
@@ -141,6 +167,7 @@ export default {
   .cp-box {
     width: 100%;
     height: calc(100% - 1.5rem);
+    overflow: auto;
     .type-nav {
       height: 60px;
       width: 100%;
@@ -166,14 +193,21 @@ export default {
         }
       }
     }
+    .cp-quest {
+      width: 100%;
+      padding: 10px 15px;
+      font-size: 18px;
+      word-break: break-all;
+      box-sizing: border-box;
+    }
     .cp-conent {
-      margin-top: 20px;
-      height: calc(100% - 20px);
+      // margin-top: 10px;
+      height: auto;
       overflow: auto;
       font-size: 14px;
       width: 100%;
       /deep/ .van-field__control {
-        height: 399px !important;
+        // height: auto !important;
       }
     }
     .cp-audio {

src/views/course/components/commentPanel.vue

@@ -73,8 +73,8 @@ export default {
       this.type = type
     },
     getImage(imgList) {
-      this.imgList = imgList;
-      this.$forceUpdate();
+      this.imgList = imgList
+      this.$forceUpdate()
     },
     addPz(type, content) {
       var a = ''
@@ -82,7 +82,7 @@ export default {
         this.$toast({ message: '批注不能为空！', type: 'fail' })
         return
       }
-      if (type === 1 && this.message != '') {
+      if (type === 1 && this.message !== '') {
         var img = ''
         for (var i = 0; i < this.imgList.length; i++) {
           img += "<img src='" + this.imgList[i] + "' />"

src/views/course/components/stepsBox.vue

@@ -33,6 +33,14 @@
           v-else
         />
       </div>
+      <div
+        class="tool-box"
+        v-else-if="tools[step.tool[0]] && canWork2.indexOf(step.tool[0]) !== -1"
+        @click="addWork(step.tool[0], stepI, step)"
+      >
+        <div class="tool-img"><img :src="tools[step.tool[0]].img" /></div>
+        <div class="tool-name">{{ tools[step.tool[0]].name }}</div>
+      </div>
       <div class="tool-box" v-else-if="tools[step.tool[0]]">
         <div class="tool-img"><img :src="tools[step.tool[0]].img" /></div>
         <div class="tool-name">{{ tools[step.tool[0]].name }}</div>
@@ -64,7 +72,7 @@
             v-for="(student, noI) in noWorksS[stepI]"
             :key="stepI + '-' + noI"
             class="student"
-            @click="teacherSubmit(step.tool[0], student, $event)"
+            @click="teacherSubmit(step.tool[0], student, $event, step)"
           >
             {{ student.student }}
             <input
@@ -96,6 +104,18 @@
         ></el-progress>
       </div>
     </div>
+    <answerPanel
+      v-if="answerPanelVisible"
+      @setPanelVisible="setPanelVisible"
+      :panelVisible="answerPanelVisible"
+      :courseid="courseid"
+      :courseType="courseType"
+      :taskCount="taskCount"
+      :toolindex="toolindex"
+      :isTeacher="isTeacher"
+      :answerQ="answerQ"
+      :sStudent="sStudent"
+    ></answerPanel>
   </div>
 </template>
 
@@ -113,6 +133,7 @@ import {
 import { tools } from '@/const/index'
 import Works from './works.vue'
 import { mapGetters } from 'vuex'
+import answerPanel from './answerPanel.vue'
 
 export default {
   props: {
@@ -146,10 +167,14 @@ export default {
     },
     isLoading: {
       type: Boolean
+    },
+    answerPanelVisible: {
+      type: Boolean
     }
   },
   components: {
-    Works
+    Works,
+    answerPanel
   },
   data() {
     return {
@@ -159,6 +184,7 @@ export default {
       noWorksS: [],
       isWorkTool: [16, 32, 57, 4, 45, 15, 1, 3, 6, 7, 26, 41, 47, 48, 52, 50, 40, 63], //, 49
       canWork: [16, 50], //, 49
+      canWork2: [15],
       fileType: 0,
       tools: tools,
       proVisible: false,
@@ -167,7 +193,10 @@ export default {
       isFinishSize: 0,
       isAllSize: 0,
       sTool: 0,
-      sStudent: {}
+      sStudent: {},
+      isTeacher: false,
+      toolindex: 0,
+      answerQ: ''
     }
   },
   watch: {
@@ -184,6 +213,11 @@ export default {
       if (newValue) {
         this.getWorks()
       }
+    },
+    answerPanelVisible(newValue) {
+      if (!newValue) {
+        this.getWorks()
+      }
     }
   },
   computed: {
@@ -199,6 +233,9 @@ export default {
     }
   },
   methods: {
+    setPanelVisible(bool) {
+      this.$emit('update:answerPanelVisible', bool)
+    },
     arrayToArray(arrayo, arrayt) {
       const array1 = arrayo
       const array2 = arrayt
@@ -1216,7 +1253,7 @@ export default {
           console.error(err)
         })
     },
-    teacherSubmit(tool, studnet, e) {
+    teacherSubmit(tool, studnet, e, content) {
       this.sStudent = studnet
       this.sTool = tool
       if (this.userinfo.type === 1) {
@@ -1224,8 +1261,21 @@ export default {
           var el = e.currentTarget
           el.getElementsByTagName('input')[0].click()
           e.target.value = ''
+        } else if (tool === 15) {
+          this.isTeacher = false
+          this.answerQ = content.answerQ
+          this.setPanelVisible(true)
         }
       }
+    },
+    addWork(tool, toolindex, content) {
+      this.sStudent = {}
+      this.toolindex = toolindex
+      if (tool === 15) {
+        this.isTeacher = true
+        this.answerQ = content.answerQ
+        this.setPanelVisible(true)
+      }
     }
   },
   mounted() {

src/views/course/components/works.vue

@@ -6,6 +6,10 @@
       <div class="work" v-else-if="work.type == 3" @click="mediaPreview(work.works)">
         <img src="@/assets/images/works/isVideo.png" alt="" />
       </div>
+      <div class="work" v-else-if="work.type == 2" @click="checkAnswer(work.works)">
+        <img src="@/assets/images/works/answerBgNew.png" alt="" />
+        <div class="anwerBox">{{ JSON.parse(work.works)[0].answer }}</div>
+      </div>
       <div class="work" v-else><img src="@/assets/images/works/noImg.png" alt="" /></div>
     </div>
     <div class="s-name">
@@ -24,6 +28,17 @@
         ></video-player>
       </div>
     </van-overlay>
+    <van-overlay :show="answerShow" @click="overlayAnswerShow" style="display: flex; align-items: center">
+      <div class="wrapper" @click.stop>
+        <div class="answerBox">
+          <div class="cancel" @click="overlayAnswerShow"></div>
+          <div class="box">
+            <div class="answerTitle">提问: {{ answerJson.answerTitle }}</div>
+            <div class="answerContent">{{ answerJson.answer }}</div>
+          </div>
+        </div>
+      </div>
+    </van-overlay>
   </div>
 </template>
 
@@ -63,7 +78,9 @@ export default {
         }
       },
       show: false,
-      playerO: {}
+      playerO: {},
+      answerShow: false,
+      answerJson: {}
     }
   },
   computed: {
@@ -93,8 +110,15 @@ export default {
       this.show = false
       this.$refs.videoPlayer.player.pause()
     },
+    overlayAnswerShow() {
+      this.answerShow = false
+    },
     onPlayerCanplay() {},
-    onPlayerPlay() {}
+    onPlayerPlay() {},
+    checkAnswer(work) {
+      this.answerJson = JSON.parse(work)[0]
+      this.answerShow = true
+    }
   }
 }
 </script>
@@ -115,10 +139,27 @@ export default {
     .work {
       width: 100%;
       height: 100%;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       > img {
         width: 100%;
         height: 100%;
         object-fit: cover;
+        position: absolute;
+      }
+      > .anwerBox {
+        text-align: center;
+        max-height: 95%;
+        width: 100%;
+        position: absolute;
+        color: #fff;
+        font-size: 14px;
+        word-break: break-all;
+        padding: 0px 13px;
+        box-sizing: border-box;
+        @include textoverflow(4);
       }
     }
   }
@@ -141,6 +182,41 @@ export default {
     align-items: center;
     justify-content: center;
     width: 100%;
+    .answerBox {
+      background: #fff;
+      width: 95%;
+      margin: 0 auto;
+      border-radius: 5px;
+      height: 500px;
+      padding: 30px 15px;
+      box-sizing: border-box;
+      position: relative;
+      .cancel {
+        width: 20px;
+        height: 20px;
+        background-image: url(../../../assets/images/works/cancel.png);
+        background-size: 100% 100%;
+        position: absolute;
+        right: 15px;
+        top: 15px;
+      }
+      > .box {
+        margin-top: 10px;
+        height: calc(100% - 15px);
+        overflow: auto;
+        .answerTitle {
+          font-size: 23px;
+          font-weight: 700;
+          width: 100%;
+          word-break: break-all;
+        }
+        .answerContent {
+          word-break: break-all;
+          font-size: 18px;
+          margin-top: 15px;
+        }
+      }
+    }
   }
 }
 </style>

src/views/course/index.vue

@@ -12,7 +12,7 @@
       </template>
     </head-bar>
     <div class="course-box" ref="cBox">
-      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="panelVisible">
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="panelVisible || answerPanelVisible">
         <course-title :chapInfo="chapInfo" :courseType="courseType" :taskCount="taskCount"></course-title>
         <course-content-list v-if="false"></course-content-list>
         <div class="course-type-box">
@@ -30,6 +30,7 @@
           </div>
           <steps-box
             v-show="type == 1"
+            :answerPanelVisible.sync="answerPanelVisible"
             :courseDetail="courseDetail"
             :chapInfo="chapInfo"
             :courseType="courseType"
@@ -113,7 +114,8 @@ export default {
       tcid2: this.$route.query.tcid,
       navVisible: false,
       isLoading: false,
-      panelVisible: false
+      panelVisible: false,
+      answerPanelVisible: false
     }
   },
   methods: {
@@ -171,7 +173,7 @@ export default {
     },
     back() {
       // eslint-disable-next-line prettier/prettier
-      this.$router.push({ path: '/courseDetail', query: { courseid: this.courseid } })
+      this.$router.push({ path: '/courseDetail', query: { courseid: this.courseid }})
     },
     onRefresh() {
       this.getCourse()