Merge branch 'master' of http://60.205.254.193:3000/GCLS/GCLS_Page_Exercise

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -17,7 +17,13 @@
     <div :class="['words-box', 'words-box-' + data.property.learn_type]">
       <div v-for="(item, index) in option_list" :key="index" :class="['words-item']">
         <template
-          v-if="item.content && item.content.trim() && item.hz_strokes_list[0] && item.hz_strokes_list[0].strokes"
+          v-if="
+            item.content &&
+            item.content.trim() &&
+            item.hz_strokes_list &&
+            item.hz_strokes_list[0] &&
+            item.hz_strokes_list[0].strokes
+          "
         >
           <div
             class="words-top"
@@ -54,13 +60,29 @@
               v-for="(itemI, indexI) in miao_arr[index]"
               :key="indexI + data.property.learn_type + index"
               style="display: flex"
+              @click="miaoStorkes(index, indexI, item.mark, item.content, itemI.strokes)"
             >
-              <Strockred
+              <Strockplayredline
+                v-if="item.imgArr[indexI] && item.imgArr[indexI] === 'true'"
+                :play-storkes="false"
+                :book-text="item.content"
+                :target-div="'write-praT' + item.content + itemI + Math.random().toString(36).substring(2, 10)"
+                :book-strokes="itemI.strokes"
+                :class="[
+                  'strock-chinese',
+                  'strock-chinese' + ((indexI + itemI.length + 1) % writer_number_yuan),
+                  (indexI + itemI.length + 1) % writer_number_yuan !== 0 && indexI !== miao_arr[index].length - 1
+                    ? 'border-right-none'
+                    : '',
+                ]"
+              />
+              <Strockplayredline
+                v-else
+                :play-storkes="false"
                 :book-text="item.content"
-                :hanzi-color="hanzi_color"
-                :reset="true"
                 :target-div="'write-praT' + item.content + itemI + Math.random().toString(36).substring(2, 10)"
                 :book-strokes="itemI.strokes"
+                :strokeColor="'#ddd'"
                 :class="[
                   'strock-chinese',
                   'strock-chinese' + ((indexI + itemI.length + 1) % writer_number_yuan),
@@ -119,6 +141,48 @@
         @deleteWriteRecord="deleteWriteRecord"
       />
     </div>
+    <div v-if="if_miao_show" class="practiceBox practice-box-strock">
+      <div class="miao-box">
+        <i class="el-icon-close close-icon" @click="if_miao_show = false"></i>
+        <Strockplayredline
+          v-if="
+            (answer.answer_list[active_index].strokes_content_list[active_col_index] &&
+              answer.answer_list[active_index].strokes_content_list[active_col_index] === 'true') ||
+            disabled
+          "
+          :play-storkes="false"
+          :book-text="current_hz"
+          :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+          :book-strokes="current_hz_data"
+          :strokeColor="
+            disabled &&
+            (!answer.answer_list[active_index].strokes_content_list[active_col_index] ||
+              (answer.answer_list[active_index].strokes_content_list[active_col_index] &&
+                answer.answer_list[active_index].strokes_content_list[active_col_index] === 'false'))
+              ? '#ddd'
+              : ''
+          "
+        />
+        <Strockred
+          :class="[
+            'strock-red',
+            answer.answer_list[active_index].strokes_content_list[active_col_index] &&
+            answer.answer_list[active_index].strokes_content_list[active_col_index] === 'true'
+              ? 'strock-red-zindex'
+              : '',
+          ]"
+          :book-text="current_hz"
+          :hanzi-color="hanzi_color"
+          :target-div="'write-praT' + current_hz + active_col_index + Math.random().toString(36).substring(2, 10)"
+          :book-strokes="current_hz_data"
+          :is-answer.sync="answer.answer_list[active_index].strokes_content_list[active_col_index]"
+          ref="strockRed"
+        />
+        <div v-if="!disabled" :class="['reset-box']" @click="resetHanzi">
+          <SvgIcon icon-class="reset" class="reset-btn" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -150,49 +214,11 @@ export default {
       current_hz: '', // 当前汉字
       current_hz_data: null, // 当前汉字数据
       play_status: false, // 播放状态
-      hz_data: [
-        '你',
-        '最',
-        '近',
-        '怎',
-        '么',
-        '样',
-        '我',
-        '很',
-        '好',
-        '再',
-        '见',
-        '吃',
-        '饭',
-        '天',
-        '启',
-        '扫',
-        '描',
-        '以',
-        '平',
-        '太',
-        '效',
-        '国',
-        '是',
-        '称',
-        '需',
-        '值',
-        '复',
-        '包',
-        '头',
-        '条',
-        '够',
-        '关',
-        '放',
-        '发',
-        '补',
-        '快',
-        '素',
-      ],
       active_mark: '',
       option_list: [],
       show_preview: false,
       miao_arr: [],
+      if_miao_show: false, // 描红模块
     };
   },
   watch: {
@@ -244,7 +270,7 @@ export default {
             item.hz_strokes_list.forEach((items) => {
               if (this.data.property.learn_type === 'paint') {
                 this.miao_arr[index].push({
-                  strokes: items.strokes,
+                  strokes: items && items.strokes ? items.strokes : null,
                   length: item.hz_strokes_list.length,
                 });
               }
@@ -312,6 +338,28 @@ export default {
         write_model[colIndex] = JSON.stringify(answer);
       }
     },
+    // 点击描红模块
+    miaoStorkes(index, indexs, mark, content, storkes) {
+      this.if_miao_show = true;
+      this.active_index = index;
+      this.active_col_index = indexs;
+      this.active_mark = mark;
+      this.current_hz = content;
+      this.current_hz_data = storkes;
+    },
+    // 保存描红
+    saveComplete(flag) {
+      this.answer.answer_list[this.active_index].strokes_content_list[this.active_col_index] = flag;
+    },
+    resetHanzi() {
+      this.$refs.strockRed.resetHanzi();
+    },
+    updateColor(color) {
+      this.writer.updateColor('strokeColor', color);
+      this.writer.updateColor('drawingColor', color);
+    },
+    // 保存
+    handleSave() {},
   },
 };
 </script>
@@ -489,6 +537,63 @@ export default {
       justify-content: center;
       padding-top: 0;
     }
+
+    .miao-box {
+      position: relative;
+      width: 320px;
+      height: 316px;
+      padding: 30px 20px;
+      margin: 0 auto;
+      background: #f3f3f3;
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 15%);
+
+      .close-icon {
+        position: absolute;
+        top: 0;
+        right: 8px;
+        z-index: 2;
+        width: 32px;
+        height: 32px;
+        padding: 8px;
+        cursor: pointer;
+      }
+
+      .strockredBox,
+      .strockplay-redInner {
+        width: 256px;
+        height: 256px;
+        margin: 0 auto;
+      }
+
+      .strock-red {
+        position: absolute;
+        top: 30px;
+        left: 32px;
+
+        &-zindex {
+          z-index: -1;
+        }
+      }
+
+      .reset-box {
+        position: absolute;
+        right: 22px;
+        bottom: 22px;
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 11px;
+        height: 11px;
+        color: $text-color;
+        cursor: pointer;
+
+        &:hover {
+          color: #000;
+        }
+      }
+    }
   }
 }
 </style>

src/views/exercise_questions/preview/WritePictruePreview.vue

@@ -229,7 +229,7 @@ export default {
   }
 
   :deep .el-textarea .el-input__count {
-    bottom: 15px;
+    bottom: 5px;
     font-size: 14px;
     background-color: #f2f3f5;
   }

src/views/exercise_questions/preview/components/common/Strockred.vue

@@ -5,9 +5,9 @@
         <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
         <div :id="targetDiv" class="character-target-div"></div>
       </div>
-      <div v-if="reset" :class="['reset-box']" @click="resetHanzi">
+      <!-- <div v-if="reset" :class="['reset-box']" @click="resetHanzi">
         <SvgIcon icon-class="reset" class="reset-btn" />
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -38,6 +38,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    isAnswer: {
+      type: String,
+      default: 'false',
+    },
   },
   data() {
     return {
@@ -80,10 +84,16 @@ export default {
         drawingWidth: 6,
       };
       this.writer = HanziWriter.default.create(this.targetDiv, this.Book_text, options);
-      this.writer.quiz();
+      this.writer.quiz({
+        onComplete: function (summaryData) {
+          // 禁用操作 清除后传参给父级保存答案
+          _this.$emit('update:isAnswer', 'true');
+        },
+      });
     },
     resetHanzi() {
       this.writer.quiz();
+      this.$emit('update:isAnswer', 'false');
     },
     updateColor(color) {
       this.writer.updateColor('strokeColor', color);