优化预览

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

@@ -24,6 +24,69 @@
           </transition-group>
         </draggable>
       </div>
+      <div class="one-box">
+        <div
+          v-for="(items, row) in data.option_list"
+          :key="'row' + row"
+          class="one"
+          :class="[!items.pinyin ? 'one_nopy' : '']"
+          :style="{ marginRight: (row + 1) % 3 == 0 ? '' : '16px' }"
+        >
+          <div class="number">
+            {{ row + 1 }}
+          </div>
+          <div class="hzpinyin">
+            <div class="pinyin" v-if="isEnable(data.property.is_enable_pinyin)">
+              {{ items.pinyin }}
+            </div>
+            <template v-if="items.hz_info.length > 0">
+              <!-- @click="writeWord(conItem, items.pinyin)" -->
+              <div class="strockplay-newWord">
+                <Strockplay
+                  class-name="adult-strockplay"
+                  :Book_text="items.hz_info[0].con"
+                  :play-storkes="true"
+                  :stroke-play-color="'#f44444'"
+                  :stroke-color="'#000000'"
+                  :paly-width="'18px'"
+                  :BoxbgType="'0'"
+                  :cur-item="items.hz_info[0].hzDetail.hz_json"
+                  :target-div="'writeTops-item-' + '-' + items.hz_info[0].con"
+                  class="writeTop-item"
+                  :style="{ borderColor: '#f44444' }"
+                />
+              </div>
+            </template>
+          </div>
+          <div class="image">
+            <img src="@/assets/drag-arrows.png" alt="" />
+          </div>
+          <div class="answer">
+            <!-- :disabled="TaskModel == 'ANSWER' ? true : items.is_example ? true : false" -->
+            <draggable
+              v-model="data.Bookanswer[row].answerList"
+              animation="300"
+              group="site"
+              :disabled="items.is_example"
+              class="content-box"
+              :move="onMove"
+            >
+              <transition-group>
+                <div
+                  v-for="(answer, i) in data.Bookanswer[row].answerList"
+                  :key="'op' + i"
+                  class="option_one"
+                  :class="[items.is_example ? 'option_one_example' : classNameJudge(items)]"
+                  :index="'form' + i"
+                >
+                  <img v-if="answer.img_url" :src="answer.img_url" alt="" />
+                </div>
+                <div class="option_one" :key="row" v-if="data.Bookanswer[row].answerList.length == 0"></div>
+              </transition-group>
+            </draggable>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -33,11 +96,12 @@ import { getCharacterStructureData } from '@/views/book/courseware/data/characte
 
 import PreviewMixin from '../common/PreviewMixin';
 import draggable from 'vuedraggable';
+import Strockplay from '../new_word/components/Strockplay.vue';
 
 export default {
   name: 'CharacterStructurePreview',
 
-  components: { draggable },
+  components: { draggable, Strockplay },
   mixins: [PreviewMixin],
   data() {
     return {
@@ -53,6 +117,44 @@ export default {
       correctArr: [],
     };
   },
+  //计算属性 类似于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;
+      };
+    },
+  },
   watch: {
     'data.option_list': {
       handler(val) {
@@ -89,22 +191,25 @@ export default {
       this.drag = false;
       let formIndex = e.to.firstChild.attributes[1].value[4] * 1;
       if (`${formIndex}` != 'NaN') {
-        if (this.curQue.Bookanswer[formIndex].answerList.length > 1) {
+        if (this.data.Bookanswer[formIndex].answerList.length > 1) {
           let arr = [];
-          this.curQue.option.forEach((item) => {
+          this.data.option.forEach((item) => {
             if (item.id == this.currentId) {
               arr.push(item);
             }
           });
-          this.curQue.Bookanswer[formIndex].answerList = JSON.parse(JSON.stringify(arr));
+          this.data.Bookanswer[formIndex].answerList = JSON.parse(JSON.stringify(arr));
         }
       }
       this.SortArr = JSON.parse(JSON.stringify(this.dragData));
     },
     handleData() {
+      console.log(this.data);
       this.data.structure_select_list.forEach((item) => {
         let items = this.data.file_list.find((p) => p.file_id === item.file_id);
-        item.value = items.file_url;
+        if (items) {
+          item.value = items.file_url;
+        }
       });
       this.data.option_list.forEach((items) => {
         if (items.is_example) {
@@ -135,6 +240,9 @@ export default {
           });
         }
       });
+      if (!this.data.Bookanswer) {
+        this.$set(this.data, 'Bookanswer', this.single);
+      }
     },
   },
 };
@@ -144,11 +252,18 @@ export default {
 @use '@/styles/mixin.scss' as *;
 
 .structure-preview {
+  .content-box {
+    span {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  }
+
   .option {
     display: flex;
     flex-wrap: wrap;
-    padding: 22px 30px;
-    background: rgba(10, 75, 149, 15%);
+    padding: 10px 15px;
+    background: #deebff;
     border-radius: 8px;
 
     .option_one {
@@ -157,10 +272,10 @@ export default {
       justify-content: center;
       width: 72px;
       height: 72px;
-      margin: 10px 20px;
+      margin: 10px 15px;
       overflow: hidden;
       cursor: pointer;
-      border: 2px solid;
+      background: #9dcaff;
       border-radius: 8px;
 
       img {
@@ -176,5 +291,102 @@ export default {
     .option_one:hover {
     }
   }
+
+  .strockplay-newWord {
+    position: relative;
+    box-sizing: border-box;
+    width: 80px;
+    height: 80px;
+
+    // padding: 5px;
+    overflow: hidden;
+    background: #fff;
+    background-size: cover;
+    border: 2px solid rgb(244, 68, 68);
+    border-radius: 8px;
+  }
+
+  .one {
+    display: flex;
+    align-items: center;
+    margin: 35px 0 32px;
+
+    &.one_nopy {
+      margin: 16px 0;
+    }
+
+    .number {
+      display: block;
+      width: 24px;
+      height: 24px;
+      margin-right: 16px;
+      font-family: 'arial';
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 24px;
+      color: #fff;
+      text-align: center;
+      background: rgb(244, 68, 68);
+      border-radius: 100%;
+    }
+
+    .hzpinyin {
+      position: relative;
+
+      .pinyin {
+        position: absolute;
+        top: -28px;
+        width: 100%;
+        font-family: 'League';
+        font-size: 16px;
+        font-weight: 400;
+        color: rgba($color: #000, $alpha: 50%);
+        text-align: center;
+      }
+    }
+
+    .image {
+      img {
+        width: 15px;
+        margin: 0 9px;
+      }
+    }
+
+    .answer {
+      width: 80px;
+      height: 80px;
+
+      .option_one {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 80px;
+        height: 80px;
+        overflow: hidden;
+        border: 2px solid rgb(244, 68, 68);
+        border-radius: 8px;
+
+        img {
+          max-width: 100%;
+          max-height: 100%;
+
+          // position: relative;
+          // left: -2px;
+          opacity: 0.8;
+        }
+      }
+    }
+
+    .answer:hover {
+      // @include background_color("theme_color");
+    }
+  }
+
+  .one-box {
+    display: flex;
+    flex-flow: wrap;
+    column-gap: 16px;
+    padding: 20px 0;
+  }
 }
 </style>