汉字-描红

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

@@ -3,12 +3,7 @@
     <template #content>
       <!-- eslint-disable max-len -->
       <div class="fill-wrapper">
-        <el-input
-          v-model="data.content"
-          placeholder="输入汉字"
-          @blur="handleChineseStrokes(data)"
-          v-if="isEnable(data.property.is_enable_pinyin)"
-        ></el-input>
+        <el-input v-model="data.content" placeholder="输入汉字" @blur="handleChineseStrokes(data)"></el-input>
         <el-input
           v-model="data.pinyin"
           placeholder="输入拼音"
@@ -17,11 +12,12 @@
           v-if="isEnable(data.property.is_enable_pinyin)"
         ></el-input>
         <el-input v-model="data.definition" placeholder="输入释义或描述" type="textarea"></el-input>
-        <div v-if="data.audio_file_id">
-          <SoundRecord :wav-blob.sync="data.audio_file_id" />
-        </div>
-        <template v-else>
-          <template v-if="isEnable(data.property.is_enable_voice)">
+
+        <template v-if="isEnable(data.property.is_enable_voice)">
+          <div v-if="data.audio_file_id">
+            <SoundRecord :wav-blob.sync="data.audio_file_id" />
+          </div>
+          <template v-else>
             <div :class="['upload-audio-play']">
               <UploadAudio
                 v-if="data.property.audio_generation_method === 'upload'"

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

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="character-preview" :style="getAreaStyle()">
+  <div class="character-preview" :style="getAreaStyle()" v-if="show_preview">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
@@ -9,17 +9,61 @@
         <span class="pinyin" v-if="isEnable(data.property.is_enable_pinyin)">{{ data.pinyin }}</span>
       </div>
       <div class="strock-chinese-box">
-        <Strockplayredline
-          v-for="(items, indexs) in data.hz_strokes_list"
-          :key="indexs"
-          :play-storkes="true"
-          :book-text="data.content"
-          :target-div="'pre' + data.content + indexs"
-          :book-strokes="items.strokes"
-          :class="['strock-chinese', indexs !== data.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
-          :bg-type="data.property.frame_type"
-          :frame-color="data.property.frame_color"
-        />
+        <template v-if="data.property.fun_type === 'show'">
+          <Strockplayredline
+            v-for="(items, indexs) in data.hz_strokes_list"
+            :key="indexs"
+            :play-storkes="true"
+            :book-text="data.content"
+            :target-div="'pre' + data.content + indexs"
+            :book-strokes="items.strokes"
+            :class="['strock-chinese', indexs !== data.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
+            :bg-type="data.property.frame_type"
+            :frame-color="data.property.frame_color"
+          />
+        </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>
+          <!-- <Strockred
+            v-if="data.answer.answer_list[0]"
+            :class="[
+              'strock-red',
+              data.answer.answer_list[0].strokes_content_list[active_col_index] &&
+              data.answer.answer_list[0].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="data.answer.answer_list[0].strokes_content_list[active_col_index]"
+            ref="strockRed"
+          /> -->
+        </template>
       </div>
       <p class="words-right" v-if="data.definition">{{ data.definition }}</p>
       <template v-if="isEnable(data.property.is_enable_voice_answer)">
@@ -42,6 +86,7 @@ import { getCharacterBaseData } from '@/views/book/courseware/data/characterBase
 import PreviewMixin from '../common/PreviewMixin';
 import AudioPlay from './components/AudioPlay.vue';
 import Strockplayredline from './components/Strockplayredline.vue';
+import Strockred from './components/Strockred.vue';
 import SoundRecord from '../../common/SoundRecord.vue';
 
 export default {
@@ -50,26 +95,138 @@ export default {
     AudioPlay,
     Strockplayredline,
     SoundRecord,
+    Strockred,
   },
   mixins: [PreviewMixin],
   data() {
     return {
       data: getCharacterBaseData(),
+      if_free_show: false,
+      active_col_index: null,
+      current_hz: '', // 当前汉字
+      current_hz_data: null, // 当前汉字数据
+      play_status: false, // 播放状态
+      active_mark: '',
+      option_list: [],
+      show_preview: false,
+      miao_arr: [],
+      if_miao_show: false, // 描红模块
+      show_preview: false,
+      hanzi_color: '#404040', // 描红汉字底色
     };
   },
   watch: {
     'data.record_list'(val) {
       this.data.record_list = val;
     },
+    'data.content': {
+      handler(val) {
+        if (val) {
+          this.handleData();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    isJudgingRightWrong: {
+      handler(val) {
+        if (!val) return;
+        this.handleData();
+      },
+      immediate: true,
+    },
   },
   computed: {},
-  created() {
-    console.log(this.data);
-  },
+  created() {},
   methods: {
     handleWav(data) {
       this.data.record_list = data;
     },
+    handleData() {
+      this.show_preview = false;
+      if (!this.isJudgingRightWrong) {
+        this.data.answer.answer_list = [];
+      }
+      this.miao_arr = [];
+      this.miao_arr.push([]);
+      let arr = [];
+      this.data.hz_strokes_list.forEach((items) => {
+        if (this.data.property.fun_type === 'write' && this.isEnable(this.data.property.is_enable_miao)) {
+          this.miao_arr[0].push({
+            strokes: items && items.strokes ? items.strokes : null,
+            length: this.data.hz_strokes_list.length,
+          });
+        }
+        arr.push(null);
+      });
+      this.data.imgArr = arr;
+      if (this.isJudgingRightWrong) {
+        this.data.imgArr = this.data.answer.answer_list[0].strokes_content_list;
+      }
+      let obj = {
+        mark: this.data.mark,
+        strokes_content_list: arr,
+      };
+      if (!this.isJudgingRightWrong) {
+        this.data.answer.answer_list.push(obj);
+      }
+      this.show_preview = true;
+    },
+    changePraShow() {
+      this.if_free_show = false;
+    },
+    closeIfFreeShow(data, rowIndex, colIndex, mark) {
+      this.option_list[rowIndex].imgArr[colIndex] = JSON.stringify(data);
+      this.if_free_show = false;
+      this.freeWrite(data, rowIndex, colIndex, mark);
+      this.$forceUpdate();
+    },
+    freeWrite(imgUrl, index, indexs, mark) {
+      this.if_free_show = true;
+      this.active_col_index = indexs;
+      this.active_mark = mark;
+
+      this.current_hz = this.data.content;
+      this.current_hz_data = imgUrl;
+    },
+    // 删除记录
+    deleteWriteRecord(rowIndex, colIndex) {
+      this.$set(this.option_list[rowIndex].imgArr, colIndex, JSON.stringify({}));
+      this.changeCurQue(null, colIndex, this.active_mark);
+      this.current_hz_data = null;
+      this.active_mark = '';
+      this.$forceUpdate();
+    },
+    changeCurQue(answer, colIndex, mark) {
+      if (answer) {
+        let write_model = [];
+        this.answer.answer_list.forEach((itema) => {
+          if (itema.mark === mark) {
+            write_model = itema.strokes_content_list;
+          }
+        });
+        write_model[colIndex] = JSON.stringify(answer);
+      }
+    },
+    // 点击描红模块
+    miaoStorkes(index, indexs, mark, content, storkes) {
+      this.if_miao_show = true;
+      this.active_col_index = indexs;
+      this.active_mark = mark;
+      this.current_hz = content;
+      this.current_hz_data = storkes;
+    },
+    // 保存描红
+    saveComplete(flag) {
+      this.answer.answer_list[0].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);
+    },
   },
 };
 </script>

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

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="bookText" class="strockplay-redInner" :style="{ borderColor: frameColor }">
+  <div
+    v-if="bookText"
+    class="strockplay-redInner"
+    :style="{ borderColor: frameColor, borderWidth: bgType === 'none' ? '0px' : '1px' }"
+  >
     <div v-if="playStorkes" :class="['strock-play-box']" @click="playHanzi" :style="{ color: frameColor }">
       <SvgIcon icon-class="hanzi-strock-play" class="strock-play-btn" />
     </div>