汉字-书写

src/views/book/courseware/create/components/base/character_base/CharacterBaseSetting.vue

@@ -57,14 +57,15 @@
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="错误提示" v-if="isEnable(property.is_enable_miao)">
+        <!-- <el-form-item label="错误提示" v-if="isEnable(property.is_enable_miao)">
           <el-radio-group v-model="property.is_enable_error">
             <el-radio v-for="{ value, label } in switchOption" :key="value" :label="value" :value="value">
               {{ label }}
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="笔迹回放" v-else>
+        <el-form-item label="笔迹回放" v-else> -->
+        <el-form-item label="笔迹回放" v-if="!isEnable(property.is_enable_miao)">
           <el-radio-group v-model="property.is_enable_play_back">
             <el-radio v-for="{ value, label } in switchOption" :key="value" :label="value" :value="value">
               {{ label }}

src/views/book/courseware/preview/components/character_base/CharacterBasePreview.vue

@@ -23,30 +23,49 @@
           />
         </template>
         <template v-else>
-          <div
-            v-for="(itemI, indexI) in miao_arr[0]"
-            :key="indexI + data.property.fun_type + 0"
-            style="display: flex"
-            @click="miaoStorkes(0, indexI, data.mark, data.content, itemI.strokes)"
-          >
-            <Strockplayredline
-              v-if="data.imgArr[indexI] && data.imgArr[indexI] === 'true'"
-              :play-storkes="false"
-              :book-text="data.content"
-              :target-div="'write-praT' + data.content + itemI + Math.random().toString(36).substring(2, 10)"
-              :book-strokes="itemI.strokes"
-              :class="['strock-chinese', indexI !== miao_arr[0].length - 1 ? 'border-right-none' : '']"
-            />
-            <Strockplayredline
-              v-else
-              :play-storkes="false"
-              :book-text="data.content"
-              :target-div="'write-praT' + data.content + itemI + Math.random().toString(36).substring(2, 10)"
-              :book-strokes="itemI.strokes"
-              :strokeColor="'#ddd'"
-              :class="['strock-chinese', indexI !== miao_arr[0].length - 1 ? 'border-right-none' : '']"
-            />
-          </div>
+          <template v-if="isEnable(data.property.is_enable_miao)">
+            <div
+              v-for="(itemI, indexI) in miao_arr[0]"
+              :key="indexI + data.property.fun_type + 0"
+              style="display: flex"
+              @click="miaoStorkes(0, indexI, data.mark, data.content, itemI.strokes)"
+            >
+              <Strockplayredline
+                v-if="data.imgArr[indexI] && data.imgArr[indexI] === 'true'"
+                :play-storkes="false"
+                :book-text="data.content"
+                :target-div="'write-praT' + data.content + itemI + Math.random().toString(36).substring(2, 10)"
+                :book-strokes="itemI.strokes"
+                :class="['strock-chinese', indexI !== miao_arr[0].length - 1 ? 'border-right-none' : '']"
+              />
+              <Strockplayredline
+                v-else
+                :play-storkes="false"
+                :book-text="data.content"
+                :target-div="'write-praT' + data.content + itemI + Math.random().toString(36).substring(2, 10)"
+                :book-strokes="itemI.strokes"
+                :strokeColor="'#ddd'"
+                :class="['strock-chinese', indexI !== miao_arr[0].length - 1 ? 'border-right-none' : '']"
+              />
+            </div>
+          </template>
+          <template v-else>
+            <div v-for="(items, indexs) in data.imgArr" :key="indexs" class="con-box">
+              <div
+                :class="['strockplay-newWord', indexs !== data.imgArr.length - 1 ? 'border-right-none' : '']"
+                @click="freeWrite(items ? JSON.parse(items) : null, 0, indexs, data.mark)"
+                :style="{ borderColor: data.property.frame_color }"
+              >
+                <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+                <img
+                  v-if="!play_status && items && JSON.parse(items).strokes_image"
+                  class="hanzi-writer-img"
+                  :src="JSON.parse(items).strokes_image"
+                  alt=""
+                />
+              </div>
+            </div>
+          </template>
           <!-- <Strockred
             v-if="data.answer.answer_list[0]"
             :class="[
@@ -83,8 +102,9 @@
         :current-tree-i-d="'1234456'"
         :current-hz="current_hz"
         :curren-hz-data="current_hz_data"
-        :row-index="active_index"
+        :row-index="0"
         :col-index="active_col_index"
+        :showPlay="isEnable(data.property.is_enable_play_back)"
         :disabled="disabled"
         @closeIfFreeShow="closeIfFreeShow"
         @changePraShow="changePraShow"
@@ -113,6 +133,7 @@
               ? '#ddd'
               : ''
           "
+          :showErrorTip="isEnable(data.property.is_enable_error)"
         />
         <Strockred
           :class="[
@@ -145,6 +166,7 @@ import AudioPlay from './components/AudioPlay.vue';
 import Strockplayredline from './components/Strockplayredline.vue';
 import Strockred from './components/Strockred.vue';
 import SoundRecord from '../../common/SoundRecord.vue';
+import FreewriteLettle from './components/FreewriteLettle.vue';
 
 export default {
   name: 'CharacterBasePreview',
@@ -153,6 +175,7 @@ export default {
     Strockplayredline,
     SoundRecord,
     Strockred,
+    FreewriteLettle,
   },
   mixins: [PreviewMixin],
   data() {
@@ -233,7 +256,7 @@ export default {
       this.if_free_show = false;
     },
     closeIfFreeShow(data, rowIndex, colIndex, mark) {
-      this.option_list[rowIndex].imgArr[colIndex] = JSON.stringify(data);
+      this.data.imgArr[colIndex] = JSON.stringify(data);
       this.if_free_show = false;
       this.freeWrite(data, rowIndex, colIndex, mark);
       this.$forceUpdate();
@@ -248,7 +271,7 @@ export default {
     },
     // 删除记录
     deleteWriteRecord(rowIndex, colIndex) {
-      this.$set(this.option_list[rowIndex].imgArr, colIndex, JSON.stringify({}));
+      this.$set(this.data.imgArr, colIndex, JSON.stringify({}));
       this.changeCurQue(null, colIndex, this.active_mark);
       this.current_hz_data = null;
       this.active_mark = '';
@@ -349,6 +372,29 @@ export default {
     border-radius: 2px;
   }
 
+  .strockplay-newWord {
+    position: relative;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    width: 64px;
+    height: 64px;
+    border: 1px solid #e81b1b;
+
+    .character-target-bg,
+    .hanzi-writer-img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      color: #dedede;
+    }
+
+    .hanzi-writer-img {
+      z-index: 1;
+    }
+  }
+
   .border-right-none {
     border-right: none;
   }

src/views/book/courseware/preview/components/character_base/components/FreewriteLettle.vue

@@ -23,8 +23,10 @@
           <SvgIcon icon-class="reset" class="reset-btn" />
         </a>
       </div>
-      <ul class="nav-list">
-        <li :class="currenHzData && currenHzData.strokes_content ? '' : 'disabled'" @click="play()">播放</li>
+      <ul class="nav-list" :class="[showPlay ? '' : 'nav-list-line']">
+        <li :class="currenHzData && currenHzData.strokes_content ? '' : 'disabled'" @click="play()" v-if="showPlay">
+          播放
+        </li>
         <li :class="disabled ? 'disabled' : ''" @click="handleWriteImg">保存</li>
       </ul>
     </div>
@@ -65,6 +67,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showPlay: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -318,6 +324,10 @@ export default {
       margin-top: 16px;
       list-style: none;
 
+      &-line {
+        justify-content: center;
+      }
+
       > li {
         width: 140px;
         height: 34px;

src/views/book/courseware/preview/components/character_base/components/Strockplayredline.vue

@@ -47,6 +47,10 @@ export default {
       type: String,
       default: '#F13232',
     },
+    showErrorTip: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -88,6 +92,7 @@ export default {
         padding: 5,
         showOutline: true,
         strokeColor: this.strokeColor ? this.strokeColor : '#000',
+        showHintAfterMisses: this.showErrorTip,
       });
     },
     playHanzi(event) {