保存答案

src/components/Adult/Preview.vue

@@ -115,9 +115,13 @@
       </span>
     </div>
     <div v-if="cur" class="NNPE-Book-content-inner">
-      <div v-for="(item, index) in cur.cur_fn_data" :key="index"
-          class="title-box-preview">
-        <div class="title-big"
+      <div
+        v-for="(item, index) in cur.cur_fn_data"
+        :key="index"
+        class="title-box-preview"
+      >
+        <div
+          class="title-big"
           v-if="item.number || item.z_title || item.f_title"
         >
           <b v-if="item.number">{{ item.number }}</b>
@@ -133,9 +137,14 @@
             ></h3>
           </div>
         </div>
-        <div class="title-little" :class="[item.little_title_number||item.little_title?'marginTop':'']">
-            <b v-html="item.little_title_number"></b>
-            <p v-html="item.little_title"></p>
+        <div
+          class="title-little"
+          :class="[
+            item.little_title_number || item.little_title ? 'marginTop' : '',
+          ]"
+        >
+          <b v-html="item.little_title_number"></b>
+          <p v-html="item.little_title"></p>
         </div>
         <div
           :class="['NNPE-tableList', item.is_bg ? 'NNPE-tableList-hasBg' : '']"
@@ -254,6 +263,16 @@
                 <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
                   <TextInputRecord
                     :cur-que="itemss.data"
+                    :Bookanswer="
+                      answerData.length > 0 &&
+                      answerData[index].table_list &&
+                      answerData[index].table_list.length > 0 &&
+                      answerData[index].table_list[indexs].length > 0 &&
+                      answerData[index].table_list[indexs][indexss].data
+                        ? answerData[index].table_list[indexs][indexss].data
+                            .Bookanswer
+                        : []
+                    "
                     :theme-color="themeColor"
                     v-if="refresh"
                   />
@@ -507,10 +526,12 @@ export default {
     "changeId",
     "themeColor",
     "isShowTitle",
+    "bookAnswerContent",
   ],
   data() {
     return {
       contextData: null,
+      answerData: [], //获取的答案数据
       queIndex: -1, // 题目的索引
       cur: null, // 当前的题目
       watchIndex: -1, // 监听的值
@@ -589,6 +610,10 @@ export default {
         this.seekCurrentTree(item);
       });
     }
+
+    if (_this.bookAnswerContent) {
+      _this.answerData = JSON.parse(_this.bookAnswerContent);
+    }
   },
   beforeCreate() {}, // 生命周期 - 创建之前
   beforeMount() {}, // 生命周期 - 挂载之前
@@ -621,7 +646,7 @@ export default {
     initContextData() {
       const _this = this;
       //_this.$root.isRecording = false;
-      
+
       _this.contextData = JSON.parse(JSON.stringify(_this.context));
       _this.queIndex = 0;
       _this.NNPENewWordList = [];
@@ -741,6 +766,9 @@ export default {
         _this.cur = _this.queList[_this.queIndex];
       }
     },
+    saveAnswer() {
+      console.log(JSON.parse(JSON.stringify(this.contextData)));
+    },
   }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
@@ -873,8 +901,8 @@ export default {
   .NNPE-Book-content-inner {
     padding: 0 40px;
     > div.title-box-preview {
-        padding-top: 32px;
-       .title-big{
+      padding-top: 32px;
+      .title-big {
         display: flex;
         b {
           min-width: 39px;
@@ -910,22 +938,23 @@ export default {
           padding-left: 51px;
         }
       }
-      .title-little{
-          display: flex;
-          margin-bottom: 24px;
-          &.marginTop{
-              margin-top: 24px;
-          }
-          b,p{
-            color: #000000;
-            font-size: 16px;
-            line-height: 150%;
-            font-weight: normal;
-            margin: 0;
-            white-space: pre-wrap;
-            word-break: break-word;
-            padding-right: 3px;
-          }
+      .title-little {
+        display: flex;
+        margin-bottom: 24px;
+        &.marginTop {
+          margin-top: 24px;
+        }
+        b,
+        p {
+          color: #000000;
+          font-size: 16px;
+          line-height: 150%;
+          font-weight: normal;
+          margin: 0;
+          white-space: pre-wrap;
+          word-break: break-word;
+          padding-right: 3px;
+        }
       }
     }
     .NNPE-tableList {

src/components/Adult/preview/Soundrecord.vue

@@ -14,7 +14,8 @@
           selectIndex || selectIndex == 0 ? 'record-black' : '',
           type && type == 'normal' ? 'record-time-flex' : '',
         ]"
-      >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span>
+        >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
+      >
       <div v-if="type && type == 'normal'" class="line" />
       <div
         :class="['playBack', hasMicro]"
@@ -71,7 +72,8 @@
           microphoneStatus ? 'record-ing' : '',
           selectIndex || selectIndex == 0 ? 'record-black' : '',
         ]"
-      >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span>
+        >{{ isPlaying ? "-" : "" }}{{ handleDateTime(recordtime) }}</span
+      >
       <el-select
         v-model="selectIndex"
         placeholder="无录音"
@@ -106,7 +108,7 @@
 import Recorder from "js-audio-recorder"; // 录音插件
 export default {
   components: {},
-  props: ["wavData", "type", "fileName", "selectData"],
+  props: ["wavData", "type", "fileName", "selectData", "tmIndex"],
   data() {
     return {
       recorder: new Recorder({
@@ -167,12 +169,12 @@ export default {
     // 开始录音
     microphone() {
       let _this = this;
-      
+
       if (!_this.microphoneStatus) {
         _this.hasMicro = "";
         _this.$root.isRecording = true;
         _this.$emit("getWavblob", null);
-        this.$emit("getSelectData", { type: '' });
+        this.$emit("getSelectData", { type: "" });
         // 开始录音
         this.recorder.start();
         this.microphoneStatus = true;
@@ -191,6 +193,7 @@ export default {
         };
         if (this.selectData) obj.selectData = this.selectData;
         _this.recordList.push(obj);
+
         _this.recordFile++;
         _this.selectIndex = _this.recordList.length - 1;
       } else {
@@ -225,13 +228,22 @@ export default {
           //   ) {
           _this.wavblob = _this.recordList[_this.selectIndex].wavData;
           _this.$emit("getWavblob", _this.wavblob);
-          if (this.recordList[this.selectIndex].selectData) this.$emit("getSelectData", this.recordList[this.selectIndex].selectData);
+          _this.$emit(
+            "handleWav",
+            JSON.parse(JSON.stringify(_this.recordList)),
+            _this.tmIndex
+          );
+          if (this.recordList[this.selectIndex].selectData)
+            this.$emit(
+              "getSelectData",
+              this.recordList[this.selectIndex].selectData
+            );
           //   }
         };
       }
     },
     playmicrophone(totalTimes) {
-      if(this.hasMicro){
+      if (this.hasMicro) {
         this.isPlaying = true;
         if (this.selectIndex || this.selectIndex == 0) {
           let totalTime = totalTimes;
@@ -310,29 +322,36 @@ export default {
       this.audio.pause();
       this.oldIndex = null;
       this.$emit("getWavblob", this.wavblob);
-      if (this.recordList[index].selectData) this.$emit("getSelectData", this.recordList[index].selectData);
+      if (this.recordList[index].selectData)
+        this.$emit("getSelectData", this.recordList[index].selectData);
       this.$emit("sentPause", false);
     },
     handleDelete() {
-      if(this.hasMicro){
-        if (this.selectIndex || this.selectIndex == 0) {
-          this.recordList.splice(this.selectIndex, 1);
-          this.selectIndex =
-            this.recordList.length > 0 ? this.recordList.length - 1 : null;
-          this.hasMicro = this.recordList.length > 0 ? "normal" : "";
-          this.recordtime =
-            this.recordList.length > 0
-              ? this.recordList[this.selectIndex].toltime
+      let _this = this;
+      if (_this.hasMicro) {
+        if (_this.selectIndex || _this.selectIndex == 0) {
+          _this.recordList.splice(_this.selectIndex, 1);
+          _this.$emit(
+            "handleWav",
+            JSON.parse(JSON.stringify(_this.recordList)),
+            _this.tmIndex
+          );
+          _this.selectIndex =
+            _this.recordList.length > 0 ? _this.recordList.length - 1 : null;
+          _this.hasMicro = _this.recordList.length > 0 ? "normal" : "";
+          _this.recordtime =
+            _this.recordList.length > 0
+              ? _this.recordList[_this.selectIndex].toltime
               : 0;
-          this.audio.pause();
-          this.audio = new window.Audio();
-          this.wavblob =
-            this.recordList.length > 0
-              ? this.recordList[this.selectIndex].wavData
+          _this.audio.pause();
+          _this.audio = new window.Audio();
+          _this.wavblob =
+            _this.recordList.length > 0
+              ? _this.recordList[_this.selectIndex].wavData
               : null;
-          this.oldIndex = null;
-          this.isPlaying = false;
-          clearInterval(this.timer);
+          _this.oldIndex = null;
+          _this.isPlaying = false;
+          clearInterval(_this.timer);
         }
       }
     },

src/components/Adult/preview/TextInputRecord.vue

@@ -36,7 +36,12 @@
               ? 'active'
               : '',
           ]"
-          @click="handleChangeTime(curQue.wordTime[indexs].bg,curQue.wordTime[indexs].ed)"
+          @click="
+            handleChangeTime(
+              curQue.wordTime[indexs].bg,
+              curQue.wordTime[indexs].ed
+            )
+          "
         ></a>
         <b v-if="items.number">{{ items.number }}</b>
         <span
@@ -47,14 +52,19 @@
           >{{ items.con }}</span
         >
         <input
-          @input="handleInput"
+          @blur="handleInput"
           :class="['item-input']"
-          v-model="curQue.Bookanswer[indexs]"
+          v-model="curQue.Bookanswer[indexs].answer"
           @keyup.enter="handleReplaceTone($event, indexs)"
           placeholder="输入"
         />
         <template v-if="items.IsRecord">
-          <Soundrecord @handleWav="handleWav" type="pro" class="luyin-box" />
+          <Soundrecord
+            @handleWav="handleWav"
+            :tmIndex="indexs"
+            type="pro"
+            class="luyin-box"
+          />
         </template>
       </li>
     </ul>
@@ -68,7 +78,7 @@ import AudioLine from "../preview/AudioLine.vue";
 
 export default {
   components: { Soundrecord, Audio, AudioLine },
-  props: ["curQue", "themeColor"],
+  props: ["curQue", "themeColor", "Bookanswer"],
   data() {
     return {
       resArr: [],
@@ -94,12 +104,12 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    handleChangeTime(time,edTime) {
+    handleChangeTime(time, edTime) {
       let _this = this;
       _this.curTime = time;
-      _this.stopAudio = true
+      _this.stopAudio = true;
       _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
-      _this.ed = edTime
+      _this.ed = edTime;
     },
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
@@ -113,15 +123,25 @@ export default {
     },
     // 处理数据
     handleData() {
-      // if(!this.curQue.Bookanswer){
-      let curCorrect = [];
-      this.curQue.option.forEach((item) => {
-        curCorrect.push("");
-      });
-      this.$set(this.curQue, "Bookanswer", curCorrect);
-      // }
+      if (!this.curQue.Bookanswer) {
+        let curCorrect = [];
+        this.curQue.option.forEach((item) => {
+          curCorrect.push({
+            answer: "",
+            recordList: [],
+          });
+        });
+        this.$set(this.curQue, "Bookanswer", curCorrect);
+      } else {
+        let curCorrect = JSON.parse(JSON.stringify(this.Bookanswer));
+        this.$set(this.curQue, "Bookanswer", curCorrect);
+      }
+    },
+    handleWav(list, tmIndex) {
+      tmIndex = tmIndex ? tmIndex : 0;
+      this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
+      console.log(this.curQue.Bookanswer);
     },
-    handleWav(data) {},
     handleReplaceTone(e, index) {
       let _this = this;
       _this.resArr = [];
@@ -152,7 +172,7 @@ export default {
               }
             });
           });
-          _this.$set(_this.curQue.Bookanswer, index, str.trim());
+          _this.$set(_this.curQue.Bookanswer[index], "answer", str.trim());
         }, 1000);
       }
     },
@@ -217,9 +237,9 @@ export default {
       }
       return con;
     },
-    emptyEd(){
-        this.ed = null;
-    }
+    emptyEd() {
+      this.ed = null;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {

src/views/adultInput.vue

@@ -1020,6 +1020,7 @@ export default {
   activated() {},
   // 方法集合
   methods: {
+    handleSaveAnswer(Bookanswer){console.log(Bookanswer)},
     forupdata() {
       this.$forceUpdate();
     },

src/views/courseView.vue

@@ -22,6 +22,9 @@
         <!-- 显示答案按钮 -->
         <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
         <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
+        <a v-if="chapterId" :class="['answerShow']" @click="handleAnswerShow"
+          >保存答案</a
+        >
         <div v-if="chapterId" class="title-box">
           <img
             v-if="!treeFlag"
@@ -43,6 +46,7 @@
           /> -->
         </div>
         <Preview
+          ref="preview"
           :context="context"
           :que-index="queIndex"
           :currentTreeID="chapterId"
@@ -50,6 +54,7 @@
           :change-id="changeId"
           :themeColor="themeColor"
           :isShowTitle="true"
+          :bookAnswerContent="bookAnswerContent"
         />
       </div>
       <a
@@ -86,7 +91,21 @@ export default {
       treeFlag: true, // tree是否显示
       switchvalue: true, // 生词模式
       isAnswerShow: false, // 是否显示答案
-      bookAnswerContent: "[[6],[],[9]]",
+      answer: [
+        //假数据
+        {
+          table_list: [
+            [
+              {
+                data: {
+                  Bookanswer: [],
+                },
+              },
+            ],
+          ],
+        },
+      ],
+      bookAnswerContent: JSON.stringify(this.answer),
       TaskModel: "Task",
       category: "",
       FatherTreeData: null,
@@ -155,6 +174,7 @@ export default {
               };
             } else if (this.category == "NPC") {
               _this.context = JSON.parse(res.content);
+              console.log(_this.context);
             }
           } else {
             _this.context = null;
@@ -192,6 +212,9 @@ export default {
         document.getElementById("content-tree").style.display = "none";
       }
     },
+    saveAnswer() {
+      console.log(this.$refs.preview.saveAnswer());
+    },
   },
 };
 </script>