对话答题

src/components/Adult/preview/DialogueArticleViewChs/AnswerModel.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="NNPE-ArticleView" v-if="curQue">
+  <div class="NNPE-ArticleView" v-if="curQue && Bookanswer">
     <div
       class="aduioLine-box"
       v-if="
@@ -91,15 +91,10 @@
                             >
                           </template>
                           <template v-else>
-                            <!-- <input
-                              v-model="pItem.answer"
-                              class="answer-input"
-                            /> -->
-                            <div
-                              class="answer-input"
-                              contenteditable="true"
-                              v-html="pItem.answer"
-                            ></div>
+                            <Vedit
+                              v-model="Bookanswer.input[pItem.hengIndex - 1]"
+                              :canEdit="TaskModel == 'ANSWER' ? false : true"
+                            />
                           </template>
                           <span
                             v-if="pyPosition == 'bottom'"
@@ -196,10 +191,24 @@
                           >
                         </template>
                         <template v-else>
-                          <!-- <input v-model="pItem.answer" class="answer-input" /> -->
-                          <div class="answer-input" contenteditable="true">
-                            {{ pItem.answer }}
-                          </div>
+                          <Vedit
+                            v-model="Bookanswer.input[pItem.hengIndex - 1]"
+                            :canEdit="TaskModel == 'ANSWER' ? false : true"
+                          />
+                          <!-- <Mcontenteditable
+                            :child="{
+                              txt: Bookanswer.input[pItem.hengIndex - 1],
+                              isEdit: TaskModel == 'ANSWER' ? false : true,
+                            }"
+                            :hengIndex="pItem.hengIndex - 1"
+                            :listIndex="listIndex"
+                            @saveAnswer="saveBookanswer"
+                          /> -->
+                          <!-- <div
+                            class="answer-input"
+                            contenteditable="true"
+                            v-html="Bookanswer[pItem.hengIndex - 1]"
+                          ></div> -->
                         </template>
                         <span
                           v-if="pyPosition == 'bottom'"
@@ -231,9 +240,12 @@
               <div class="answer-box">
                 <div class="input-record" v-if="item.isRecord">
                   <Soundrecord
-                    @handleWav="handleWav"
                     type="normal"
                     class="normal-box"
+                    :TaskModel="TaskModel"
+                    :answerRecordList="Bookanswer.recordList[index]"
+                    :tmIndex="index"
+                    @handleWav="handleWav"
                   />
                 </div>
                 <template
@@ -312,10 +324,24 @@
                     }}</span>
                   </template>
                   <template v-else>
-                    <!-- <input v-model="pItem.answer" class="answer-input" /> -->
-                    <div class="answer-input" contenteditable="true">
-                      {{ pItem.answer }}
-                    </div>
+                    <Vedit
+                      v-model="Bookanswer.input[pItem.hengIndex - 1]"
+                      :canEdit="TaskModel == 'ANSWER' ? false : true"
+                    />
+                    <!-- <Mcontenteditable
+                      :child="{
+                        txt: Bookanswer.input[pItem.hengIndex - 1],
+                        isEdit: TaskModel == 'ANSWER' ? false : true,
+                      }"
+                      :hengIndex="pItem.hengIndex - 1"
+                      :listIndex="listIndex"
+                      @saveAnswer="saveBookanswer"
+                    /> -->
+                    <!-- <div
+                      class="answer-input"
+                      contenteditable="true"
+                      v-html="Bookanswer[pItem.hengIndex - 1]"
+                    ></div> -->
                   </template>
                 </div>
                 <div v-if="item.enwords" class="enwords">
@@ -326,9 +352,12 @@
               <div class="answer-box">
                 <div class="input-record" v-if="item.isRecord">
                   <Soundrecord
-                    @handleWav="handleWav"
                     type="normal"
                     class="normal-box"
+                    :TaskModel="TaskModel"
+                    :answerRecordList="Bookanswer.recordList[index]"
+                    :tmIndex="index"
+                    @handleWav="handleWav"
                   />
                 </div>
                 <template
@@ -379,14 +408,26 @@ import AudioLine from "../AudioLine.vue";
 import RoleChs from "./RoleChs.vue";
 import RemarkChs from "./RemarkChs.vue";
 import Soundrecord from "../Soundrecord.vue";
+// import Mcontenteditable from "../components/Mcontenteditable.vue";
+import Vedit from "../components/Vedit.vue";
 export default {
   name: "DialogueNormalModelChs",
-  props: ["curQue", "pyPosition", "colorBox", "saveBookanswer", "listIndex"],
+  props: [
+    "curQue",
+    "pyPosition",
+    "colorBox",
+    "saveBookanswer",
+    "listIndex",
+    "Bookanswer",
+    "TaskModel",
+  ],
   components: {
     AudioLine,
     RoleChs,
     RemarkChs,
     Soundrecord,
+    Vedit,
+    // Mcontenteditable,
   },
   filters: {
     handlePinyin(wordsList) {
@@ -440,15 +481,7 @@ export default {
       answer: [],
     };
   },
-  computed: {
-    Bookanswer: function () {
-      let arr = [];
-      this.curQue.detail.forEach((item) => {
-        arr.push("");
-      });
-      return arr;
-    },
-  },
+  computed: {},
   watch: {},
   //方法集合
   methods: {
@@ -461,7 +494,10 @@ export default {
         _this.saveBookanswer(this.Bookanswer, this.listIndex);
       }
     },
-    handleWav() {},
+    handleWav(list, tmIndex) {
+      tmIndex = tmIndex ? tmIndex : 0;
+      this.$set(this.Bookanswer.recordList, tmIndex, list);
+    },
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
     },
@@ -643,6 +679,7 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    console.log(this.Bookanswer);
     if (this.curQue) {
       if (this.curQue.font == "cn" || !this.curQue.font) {
         this.handleData();
@@ -821,7 +858,7 @@ export default {
         padding: 0 10px;
         box-sizing: border-box;
         color: #000000;
-        line-height: 27px;
+        line-height: 26px;
       }
     }
     .enwords {

src/components/Adult/preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue

@@ -1,6 +1,9 @@
 <!--  -->
 <template>
-  <div class="dialogue-answer-view NPC-zhedie">
+  <div
+    class="dialogue-answer-view NPC-zhedie"
+    v-if="curQue && curQue.Bookanswer"
+  >
     <!-- 标题 -->
     <template v-if="curQue.title">
       <div class="topTitle">
@@ -53,8 +56,11 @@
             <div class="dialogue-answer-model">
               <AnswerModel
                 :curQue="item"
+                :Bookanswer="curQue.Bookanswer[index]"
                 :pyPosition="curQue.pyPosition"
                 :colorBox="colorBox"
+                :TaskModel="TaskModel"
+                :listIndex="index"
               />
             </div>
             <template
@@ -95,10 +101,11 @@
           <div class="dialogue-answer-model">
             <AnswerModel
               :curQue="item"
+              :Bookanswer="curQue.Bookanswer[index]"
               :pyPosition="curQue.pyPosition"
               :colorBox="colorBox"
               :listIndex="index"
-              :saveBookanswer="saveBookanswer"
+              :TaskModel="TaskModel"
             />
           </div>
           <template
@@ -125,6 +132,7 @@ import RemarkChs from "./RemarkChs.vue";
 import Soundrecord from "../Soundrecord.vue";
 import AnswerModel from "./AnswerModel.vue";
 import OptionModel from "./OptionModel.vue";
+
 export default {
   name: "DialogueAnswerViewChs",
   components: {
@@ -135,7 +143,7 @@ export default {
     AnswerModel,
     OptionModel,
   },
-  props: ["curQue", "colorBox"],
+  props: ["curQue", "colorBox", "TaskModel"],
   data() {
     return {
       wordShow: true,
@@ -151,33 +159,38 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    saveBookanswer(answer, listIndex) {
-      this.curQue.Bookanswer[listIndex] = answer;
+    saveBookanswer(answer, listIndex, hengIndex) {
+      this.curQue.Bookanswer[listIndex].input[hengIndex] = answer;
     },
     handleChangeTab() {
       this.wordShow = !this.wordShow;
     },
     initAnswer() {
-      this.curQue.list.forEach((item, index) => {
-        item.article;
+      let reg = /_{2,}/g;
+      let BookAnswer = [];
+      let list = JSON.parse(JSON.stringify(this.curQue.list));
+      list.forEach((item, index) => {
+        let arr = item.article.match(reg);
+        let userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
+        arr.forEach((aItem) => {
+          userAnswer.input.push("");
+        });
+        let paraLeg = item.detail.length;
+        for (let i = 0; i < paraLeg; i++) {
+          userAnswer.recordList.push(null);
+        }
+        BookAnswer.push(userAnswer);
       });
+      this.$set(this.curQue, "Bookanswer", BookAnswer);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    console.log("对话答题预览");
-    console.log(this.curQue);
-
     if (this.curQue) {
       if (!this.curQue.Bookanswer) {
-        let BookAnswer = [];
-        this.curQue.list.forEach((item) => {
-          let userAnswer = JSON.parse(JSON.stringify(this.userAnswer));
-          BookAnswer.push(userAnswer);
-        });
-        this.$set(this.curQue, "Bookanswer", BookAnswer);
+        this.initAnswer();
       }
     }
   },

src/components/Adult/preview/DialogueArticleViewChs/NormalModelChs.vue

@@ -535,8 +535,6 @@ export default {
         resArr.push(paraObj);
       });
       this.resArr = resArr;
-      console.log("Normal");
-      console.log(this.resArr);
 
       // 循环文章图片
       if (curQue.img_list) {
@@ -675,8 +673,6 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    console.log(this.curQue);
-    console.log(this.NNPEAnnotationList);
     if (this.curQue) {
       this.handleData();
       $(window).resize(() => {

src/components/Adult/preview/Soundrecorddiff.vue

@@ -12,8 +12,12 @@
         }}</span>
       </div>
     </div>
+
     <div
-      v-if="!microphoneStatus && recordList.length > 0"
+      v-if="
+        (TaskModel != 'ANSWER' && !microphoneStatus && recordList.length > 0) ||
+        TaskModel == 'ANSWER'
+      "
       :class="[
         'hasRecord',
         bgIndex == 1 ? 'hasRecord-white' : '',
@@ -30,7 +34,9 @@
           )
         "
       />
-      <span class="record-time"
+      <span
+        class="record-time"
+        :class="[TaskModel == 'ANSWER' ? 'disabled' : '']"
         >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
       >
       <el-select
@@ -119,6 +125,10 @@ export default {
         );
       }
       _this.$forceUpdate();
+    } else {
+      if (_this.TaskModel == "ANSWER") {
+        _this.hasMicro = "disabled";
+      }
     }
     _this.audio.addEventListener("play", function () {
       _this.changeStatus("active");
@@ -374,8 +384,16 @@ export default {
         no-repeat;
       background-size: 100%;
     }
+    &.disabled {
+      background: url("../../../assets/icon/play-16-disable-Black.png") center
+        no-repeat;
+      background-size: 100%;
+    }
     .record-time {
       color: #fff;
+      &.disabled {
+        color: rgba(0, 0, 0, 0.3);
+      }
     }
   }
   .line {
@@ -426,6 +444,9 @@ export default {
     font-size: 16px;
     line-height: 24px;
     margin-left: 16px;
+    &.disabled {
+      color: rgba(0, 0, 0, 0.3);
+    }
   }
   .hasRecord {
     display: flex;
@@ -442,6 +463,9 @@ export default {
       width: 46px;
       color: #000000;
       text-align: center;
+      &.disabled {
+        color: rgba(0, 0, 0, 0.3);
+      }
     }
 
     .el-select {

src/components/Adult/preview/Voicefullscreen.vue

@@ -440,7 +440,12 @@
           isBottomShow ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden',
         ]"
       >
-        <div class="bottom-left">
+        <div
+          :class="[
+            'bottom-left',
+            TaskModel == 'ANSWER' ? 'bottom-left-margin' : '',
+          ]"
+        >
           <Soundrecorddiff
             ref="Soundrecorddiff"
             @handleWav="handleWav"
@@ -453,10 +458,11 @@
             :bgIndex="bgIndex"
             :TaskModel="TaskModel"
             :answerRecordList="
-              curQue.Bookanswer.practiceModel[sentIndex] &&
-              curQue.Bookanswer.practiceModel[sentIndex].recordList
+              curQue.Bookanswer.practiceModel[curSentIndex] &&
+              curQue.Bookanswer.practiceModel[curSentIndex].recordList
             "
-            :tmIndex="sentIndex"
+            :tmIndex="curSentIndex"
+            :key="'Soundrecorddiff' + curSentIndex"
           />
           <div
             :class="['compare-box', bgIndex == 1 ? 'compare-box-white' : '']"
@@ -1718,6 +1724,9 @@ export default {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+      &-margin {
+        margin-left: 40px;
+      }
       .compare-box {
         height: 56px;
         padding: 16px 16px;