生字结构 判断对错

src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

@@ -66,7 +66,7 @@
             <!-- :disabled="TaskModel == 'ANSWER' ? true : items.is_example ? true : false" -->
 
             <draggable
-              v-model="data.Bookanswer[row].answerList"
+              v-model="answer.answer_list[row].answer_list"
               animation="300"
               group="site"
               :disabled="items.is_example"
@@ -75,10 +75,10 @@
             >
               <transition-group>
                 <div
-                  v-for="(answer, i) in data.Bookanswer[row].answerList"
+                  v-for="(answer, i) in answer.answer_list[row].answer_list"
                   :key="'op' + i"
                   class="option_one"
-                  :class="[items.is_example ? 'option_one_example' : classNameJudge(items)]"
+                  :class="[items.is_example ? 'option_one_example' : classNameJudge(items, row)]"
                   :index="'form' + i"
                 >
                   <img
@@ -93,7 +93,12 @@
                     alt=""
                   />
                 </div>
-                <div class="option_one" :key="row" v-if="data.Bookanswer[row].answerList.length == 0"></div>
+                <div
+                  class="option_one"
+                  :class="[isJudgingRightWrong ? 'wrong' : '']"
+                  :key="row"
+                  v-if="answer.answer_list[row].answer_list.length == 0"
+                ></div>
               </transition-group>
             </draggable>
           </div>
@@ -130,43 +135,7 @@ export default {
     };
   },
   //计算属性 类似于data概念
-  computed: {
-    classNameJudge() {
-      return function (item) {
-        let classname = '';
-        // if (this.judgeAnswer == "userAnswer"||this.judgeAnswer == "studentAnswer") {
-        //   if (
-        //     (item.answer != null &&
-        //       this.data.Bookanswer[item.index] &&
-        //       item.answer ==
-        //         this.data.Bookanswer[item.index].answerList[0].id) ||
-        //     (item.answer == 0 &&
-        //       this.data.Bookanswer[item.index] &&
-        //       this.data.Bookanswer[item.index].answerList[0].id == 0)
-        //   ) {
-        //     classname = "userRight";
-        //   } else if (
-        //     (item.answer != null &&
-        //       this.data.Bookanswer[item.index] &&
-        //       this.data.Bookanswer[item.index].answerList[0] &&
-        //       item.answer !=
-        //         this.data.Bookanswer[item.index].answerList[0].id) ||
-        //     (item.answer != null &&
-        //       item.answer == 0 &&
-        //       this.data.Bookanswer[item.index].answerList[0] &&
-        //       this.data.Bookanswer[item.index].answerList[0].id != 0) ||
-        //     (item.answer != null &&
-        //       item.answer != 0 &&
-        //       this.data.Bookanswer[item.index].answerList[0] &&
-        //       this.data.Bookanswer[item.index].answerList[0].id == 0)
-        //   ) {
-        //     classname = "userError";
-        //   }
-        // }
-        return classname;
-      };
-    },
-  },
+  computed: {},
   watch: {
     'data.option_list': {
       handler(val) {
@@ -203,16 +172,17 @@ export default {
       this.drag = false;
       let formIndex = e.to.firstChild.attributes[1].value[4] * 1;
       if (`${formIndex}` != 'NaN') {
-        if (this.data.Bookanswer[formIndex].answerList.length > 1) {
+        if (this.answer.answer_list[formIndex].answer_list.length > 1) {
           let arr = [];
           this.data.option_list.forEach((item) => {
             if (item.id == this.currentId) {
               arr.push(item);
             }
           });
-          this.data.Bookanswer[formIndex].answerList = JSON.parse(JSON.stringify(arr));
+          this.answer.answer_list[formIndex].answer_list = JSON.parse(JSON.stringify(arr));
         }
       }
+
       this.SortArr = JSON.parse(JSON.stringify(this.dragData));
     },
     handleData() {
@@ -237,24 +207,11 @@ export default {
             userAnswerJudge: 'example',
           };
           this.single.push({
-            answerList: [obj],
+            answer_list: [obj],
           });
         } else {
           this.single.push({
-            answerList: [],
-          });
-        }
-        if (items.answer) {
-          let obj = {
-            id: items.answer,
-            img_list: [],
-          };
-          this.correctArr.push({
-            answerList: [obj],
-          });
-        } else {
-          this.correctArr.push({
-            answerList: [],
+            answer_list: [],
           });
         }
       });
@@ -262,10 +219,25 @@ export default {
         item.id = i;
         this.SortArr.push(item);
       });
-      if (!this.data.Bookanswer) {
-        this.$set(this.data, 'Bookanswer', this.single);
+      if (!this.isJudgingRightWrong) {
+        this.$set(this.answer, 'answer_list', this.single);
       }
     },
+    classNameJudge(item, index) {
+      let classname = '';
+      if (!this.isJudgingRightWrong && !this.isShowRightAnswer) {
+        return '';
+      }
+      if (item.answer && this.isJudgingRightWrong) {
+        if (item.answer === this.answer.answer_list[index].answer_list[0].file_id) {
+          classname = 'right';
+        } else {
+          classname = 'wrong';
+        }
+      }
+
+      return classname;
+    },
   },
 };
 </script>
@@ -393,6 +365,15 @@ export default {
         border: 2px solid #346cda;
         border-radius: 8px;
 
+        &.right {
+          background: #e9f7f2;
+          border-color: $right-color;
+        }
+
+        &.wrong {
+          border-color: $error-color;
+        }
+
         img {
           max-width: 100%;
           max-height: 100%;