对话判断

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() {}, //生命周期 - 挂载之前