WordPhrase

src/components/Adult/preview/AudioLine.vue

@@ -13,11 +13,14 @@
           :format-tooltip="formatProcessToolTip"
           @change="changeCurrentTime"
         />
-        <span>{{
-          audio.maxTime
-            ? realFormatSecond(audio.maxTime - audio.currentTime)
-            : ""
-        }}</span>
+        <span
+          ><template v-if="audio.playing">-</template
+          >{{
+            audio.maxTime
+              ? realFormatSecond(audio.maxTime - audio.currentTime)
+              : ""
+          }}</span
+        >
       </template>
       <audio
         ref="audio"
@@ -35,7 +38,7 @@
 export default {
   // import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ["mp3", "getCurTime", "stopAudio", "width", "isRepeat","themeColor"],
+  props: ["mp3", "getCurTime", "stopAudio", "width", "isRepeat", "themeColor"],
   data() {
     // 这里存放数据
     return {
@@ -54,7 +57,7 @@ export default {
   },
   // 计算属性 类似于data概念
   computed: {
-    sliderWidth () {
+    sliderWidth() {
       let width = 0;
       if (this.width) {
         width = this.width;
@@ -67,7 +70,7 @@ export default {
   // 监控data中数据变化
   watch: {
     stopAudio: {
-      handler (val, oldVal) {
+      handler(val, oldVal) {
         const _this = this;
         if (val) {
           _this.$refs.audio.pause();
@@ -77,11 +80,11 @@ export default {
       // 深度观察监听
       deep: true,
     },
-    'audio.playing': {
-      handler (val) {
-        this.$emit('playChange', val);
-      }
-    }
+    "audio.playing": {
+      handler(val) {
+        this.$emit("playChange", val);
+      },
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -216,7 +219,7 @@ export default {
           result = "0" + result;
         }
       } else {
-        result = "00:" + result;
+        //result = "00:" + result;
       }
       return result;
     },
@@ -234,7 +237,7 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .Audio {
-  width:100%;
+  width: 100%;
   .audioLine {
     display: flex;
     align-items: center;
@@ -267,7 +270,7 @@ export default {
       color: #000;
       margin-left: 8px;
       margin-right: 12px;
-      min-width: 70px;
+      min-width: 56px;
       text-align: right;
     }
   }
@@ -315,23 +318,23 @@ export default {
     }
   }
 }
-.NNPE-Big-Book-preview-green{
+.NNPE-Big-Book-preview-green {
   .Audio {
     .el-slider__bar {
-      background: #24B99E !important;
+      background: #24b99e !important;
     }
     .el-slider__button {
-      background: #24B99E !important;
+      background: #24b99e !important;
     }
   }
 }
-.NNPE-Big-Book-preview-brown{
+.NNPE-Big-Book-preview-brown {
   .Audio {
     .el-slider__bar {
-      background: #BD8865 !important;
+      background: #bd8865 !important;
     }
     .el-slider__button {
-      background: #BD8865 !important;
+      background: #bd8865 !important;
     }
   }
 }

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

@@ -177,18 +177,35 @@
                 </div>
               </div>
               <div class="clearFix"></div>
-              <div class="input-record" v-if="item.isRecord">
-                <Soundrecord
-                  @handleWav="handleWav"
-                  type="mini"
-                  class="mini-box"
-                />
-              </div>
-              <div
-                class="input-record"
-                v-if="curQue.fn_list && curQue.fn_list[1].isFn"
-              >
-                <div v-if="item.timeList"></div>
+              <div class="answer-box">
+                <div class="input-record" v-if="item.isRecord">
+                  <Soundrecord
+                    @handleWav="handleWav"
+                    type="mini"
+                    class="mini-box"
+                  />
+                </div>
+                <template
+                  class="input-record"
+                  v-if="curQue.fn_list && curQue.fn_list[1].isFn"
+                >
+                  <div class="judge-box">
+                    <a
+                      :class="[
+                        'right-btn',
+                        Bookanswer[index] == 'right' ? 'active' : '',
+                      ]"
+                      @click="handleSelectJudge('right', index)"
+                    ></a>
+                    <a
+                      :class="[
+                        'error-btn',
+                        Bookanswer[index] == 'error' ? 'active' : '',
+                      ]"
+                      @click="handleSelectJudge('error', index)"
+                    ></a>
+                  </div>
+                </template>
               </div>
             </div>
           </div>
@@ -246,12 +263,35 @@
                 </div>
               </div>
               <div class="clearFix"></div>
-              <div class="input-record" v-if="item.isRecord">
-                <Soundrecord
-                  @handleWav="handleWav"
-                  type="mini"
-                  class="mini-box"
-                />
+              <div class="answer-box">
+                <div class="input-record" v-if="item.isRecord">
+                  <Soundrecord
+                    @handleWav="handleWav"
+                    type="mini"
+                    class="mini-box"
+                  />
+                </div>
+                <template
+                  class="input-record"
+                  v-if="curQue.fn_list && curQue.fn_list[1].isFn"
+                >
+                  <div class="judge-box">
+                    <a
+                      :class="[
+                        'right-btn',
+                        Bookanswer[index] == 'right' ? 'active' : '',
+                      ]"
+                      @click="handleSelectJudge('right', index)"
+                    ></a>
+                    <a
+                      :class="[
+                        'error-btn',
+                        Bookanswer[index] == 'error' ? 'active' : '',
+                      ]"
+                      @click="handleSelectJudge('error', index)"
+                    ></a>
+                  </div>
+                </template>
               </div>
             </div>
           </div>
@@ -275,7 +315,7 @@ import RemarkChs from "./RemarkChs.vue";
 import Soundrecord from "../Soundrecord.vue";
 export default {
   name: "DialogueNormalModelChs",
-  props: ["curQue", "pyPosition", "colorBox"],
+  props: ["curQue", "pyPosition", "colorBox", "saveBookanswer", "listIndex"],
   components: {
     AudioLine,
     RoleChs,
@@ -323,10 +363,27 @@ export default {
       answer: [],
     };
   },
-  computed: {},
+  computed: {
+    Bookanswer: function () {
+      let arr = [];
+      this.curQue.detail.forEach((item) => {
+        arr.push("");
+      });
+      return arr;
+    },
+  },
   watch: {},
   //方法集合
   methods: {
+    // 判断题选择
+    handleSelectJudge(obj, index) {
+      let _this = this;
+      this.$set(this.Bookanswer, index, obj);
+      this.$forceUpdate();
+      if (_this.saveBookanswer) {
+        _this.saveBookanswer(this.Bookanswer, this.listIndex);
+      }
+    },
     handleWav() {},
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
@@ -745,7 +802,7 @@ export default {
         display: block;
       }
       .input-record {
-        margin-top: 8px;
+        margin-right: 8px;
         .mini-box {
           width: 64px;
           border: 1px solid rgba(0, 0, 0, 0.1);
@@ -775,4 +832,40 @@ export default {
     height: 28px;
   }
 }
+.judge-box {
+  display: flex;
+  justify-content: center;
+
+  a {
+    width: 32px;
+    height: 32px;
+    background: #fff url("../../../../assets/newImage/common/right-btn.png")
+      center no-repeat;
+    background-size: 24px;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    &:hover,
+    &.active {
+      background-color: #e5fff0;
+      border-color: #00c850;
+    }
+  }
+  a.error-btn {
+    background: #fff url("../../../../assets/newImage/common/error-btn.png")
+      center no-repeat;
+    background-size: 24px;
+    margin-left: 4px;
+    &:hover,
+    &.active {
+      background-color: #ffe5e5;
+      border-color: #de4444;
+    }
+  }
+}
+.answer-box {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 8px;
+}
 </style>

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

@@ -97,6 +97,8 @@
               :curQue="item"
               :pyPosition="curQue.pyPosition"
               :colorBox="colorBox"
+              :listIndex="index"
+              :saveBookanswer="saveBookanswer"
             />
           </div>
           <template
@@ -143,6 +145,9 @@ export default {
   //方法集合
   methods: {
     handleChange() {},
+    saveBookanswer(answer, listIndex) {
+      this.curQue.Bookanswer[listIndex] = answer;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -150,6 +155,15 @@ export default {
   mounted() {
     console.log("对话答题预览");
     console.log(this.curQue);
+    if (this.curQue) {
+      let BookAnswer = [];
+      this.curQue.list.forEach((item) => {
+        let answer = [];
+        BookAnswer.push(answer);
+      });
+      this.$set(this.curQue, "Bookanswer", BookAnswer);
+      console.log(this.curQue);
+    }
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

src/components/Adult/preview/WordPhrase.vue

@@ -131,6 +131,7 @@ export default {
       mp3_index: -1,
       playWord: null,
       optionRes: [],
+      mp3List: [],
     };
   },
   //计算属性 类似于data概念
@@ -237,20 +238,22 @@ export default {
     playNewwords() {
       let _this = this;
       let mp3_index = 0;
-      _this.mp3_index = mp3_index;
-      let leg = this.optionRes.length;
-      let mp3 = this.optionRes[mp3_index].mp3_list[0].id;
+      let leg = _this.mp3List.length;
+      let mp3 = _this.mp3List[mp3_index].mp3_list[0].id;
+      _this.mp3_index = _this.mp3List[mp3_index].sIndex;
       _this.handlePlayVoice(mp3);
       _this.audio.addEventListener("ended", function () {
         if (mp3_index < leg - 1) {
           mp3_index = mp3_index + 1;
-          _this.mp3_index = mp3_index;
+          _this.mp3_index = _this.mp3List[mp3_index].sIndex;
           mp3 =
-            _this.optionRes[mp3_index].mp3_list.length > 0 &&
-            _this.optionRes[mp3_index].mp3_list[0].id;
+            _this.mp3List[mp3_index].mp3_list.length > 0 &&
+            _this.mp3List[mp3_index].mp3_list[0].id;
           if (mp3) {
             _this.handlePlayVoice(mp3);
           }
+        } else {
+          _this.mp3_index = -1;
         }
       });
     },
@@ -277,11 +280,10 @@ export default {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    console.log(this.curQue);
-
     if (this.curQue.type == "NewWord_chs") {
       let resIndex = 0;
       let optionRes = [];
+      let mp3List = [];
       this.curQue.option.forEach((item, index) => {
         optionRes = optionRes.concat(item);
         item.index = index + 1;
@@ -292,13 +294,16 @@ export default {
             sItem.definition_list.length > 0
               ? sItem.definition_list.join("；")
               : "";
+          if (sItem.mp3_list[0]) {
+            mp3List.push(sItem);
+          }
         });
       });
       this.optionRes = JSON.parse(JSON.stringify(optionRes));
-      console.log("======console.log(this.optionRes);");
-      console.log(this.optionRes);
+      this.mp3List = mp3List;
+      console.log("this.mp3List");
+      console.log(this.mp3List);
     }
-    console.log(this.curQue);
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {

src/styles/index.scss

@@ -304,6 +304,22 @@ input:-ms-input-placeholder {
                 }
             }
         }
+        .Repeat-16 {
+          background: url("../assets/icon/Repeat-16-normal-Green.png") no-repeat left top;
+          background-size: 100% 100%;
+          &.disabled {
+              background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
+              background-size: 100% 100%;
+          }
+      }
+      .pinyin-16 {
+          background: url("../assets/icon/pinyin-16-normal-Green.png") no-repeat left top;
+          background-size: 100% 100%;
+          &.disabled {
+              background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
+              background-size: 100% 100%;
+          }
+      }
     }
     &.NNPE-Big-Book-preview-brown {
         .Audio {
@@ -321,6 +337,22 @@ input:-ms-input-placeholder {
                 }
             }
         }
+        .Repeat-16 {
+          background: url("../assets/icon/Repeat-16-normal-Brown.png") no-repeat left top;
+          background-size: 100% 100%;
+          &.disabled {
+              background: url("../assets/icon/Repeat-16-disable-Black.png") no-repeat left top;
+              background-size: 100% 100%;
+          }
+      }
+      .pinyin-16 {
+          background: url("../assets/icon/pinyin-16-normal-Brown.png") no-repeat left top;
+          background-size: 100% 100%;
+          &.disabled {
+              background: url("../assets/icon/pinyin-16-disable-Black.png") no-repeat left top;
+              background-size: 100% 100%;
+          }
+      }
     }
 }
 

src/views/adultInput.vue

@@ -857,6 +857,28 @@ export default {
       FatherTreeData: null,
       themeColor: "", // 主题颜色
       loading: false,
+      NumberList: [
+        "①",
+        "②",
+        "③",
+        "④",
+        "⑤",
+        "⑥",
+        "⑦",
+        "⑧",
+        "⑨",
+        "⑩",
+        "⑪",
+        "⑫",
+        "⑬",
+        "⑭",
+        "⑮",
+        "⑯",
+        "⑰",
+        "⑱",
+        "⑲",
+        "⑳",
+      ],
     };
   },
   computed: {
@@ -1203,7 +1225,7 @@ export default {
       item.queList.splice(queIndex, 1);
     },
     saveNewwordAndSentences() {
-      let question_list = this.question_list;
+      let question_list = JSON.parse(JSON.stringify(this.question_list));
       let sentence_list = [];
       let new_word_list = [];
       question_list.cur_fn_data.forEach((curItem) => {
@@ -1214,10 +1236,13 @@ export default {
               topicIitem.type == "dialogue_article_chs"
             ) {
               topicIitem.data.detail.forEach((item) => {
-                sentence_list = sentence_list.concat(item.sentences);
+                let list = this.handleSentences(item.sentences);
+                sentence_list = sentence_list.concat(list);
               });
             } else if (topicIitem.type == "NewWord_chs") {
-              new_word_list = topicIitem.data.option;
+              topicIitem.data.option.forEach((item) => {
+                new_word_list = new_word_list.concat(item);
+              });
             }
           });
         });
@@ -1227,7 +1252,21 @@ export default {
         sentence_list,
       };
     },
+    handleSentences(list) {
+      let res = list.map((Litem) => {
+        Litem = Litem.replace(/#/g, "");
+        this.NumberList.forEach((nitem) => {
+          if (Litem.indexOf(nitem) > -1) {
+            let reg = new RegExp(nitem, g);
+            Litem = Litem.replace(reg, "");
+          }
+        });
+        return Litem;
+      });
+      return res;
+    },
     onSave() {
+      debugger;
       let question_list_str = JSON.stringify(this.question_list);
       console.log(this.question_list);
       localStorage.setItem("question_list", question_list_str);