汉字组件分类

src/views/book/courseware/create/components/question/character/Character.vue

@@ -3,7 +3,7 @@
     <template #content>
       <!-- eslint-disable max-len -->
       <div class="character-wrapper">
-        <div class="fun-type">
+        <!-- <div class="fun-type">
           <a
             v-for="{ value, label } in modelList"
             :key="value"
@@ -11,7 +11,7 @@
             @click="data.property.model = value"
             >{{ label }}</a
           >
-        </div>
+        </div> -->
         <div class="content-box" v-for="(item, index) in data.option_list" :key="index">
           <div class="content-item">
             <el-input

src/views/book/courseware/data/bookType.js

@@ -351,14 +351,14 @@ export const bookTypeOption = [
         set: CharacterStructureSetting,
         preview: CharacterStructurePreview,
       },
-      // {
-      //   value: 'write',
-      //   label: '书写组件',
-      //   icon: '',
-      //   component: Write,
-      //   set: WriteSetting,
-      //   preview: WritePreview,
-      // },
+      {
+        value: 'write',
+        label: '书写组件',
+        icon: '',
+        component: Write,
+        set: WriteSetting,
+        preview: WritePreview,
+      },
       // {
       //   value: 'math',
       //   label: '公式组件',

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -119,25 +119,80 @@
           </div>
         </div>
       </template>
-      <!-- <div v-for="(item, index) in data.option_list" :key="index" class="content-box">
-        <div class="main-top" :style="{ width: item.hz_strokes_list.length * 64 + 'px' }">
-          <AudioPlay v-if="isEnable(data.property.is_enable_voice)" :file-id="item.audio_file_id" theme-color="gray" />
-          <span v-if="isEnable(data.property.is_enable_pinyin)" class="pinyin">{{ item.pinyin }}</span>
-        </div>
-        <div class="strock-chinese-box">
-          <Strockplayredline
-            v-for="(items, indexs) in item.hz_strokes_list"
-            :key="indexs"
-            :play-storkes="isEnable(data.property.is_enable_stroke)"
-            :book-text="item.con"
-            :target-div="'pre' + item.con + indexs"
-            :book-strokes="items.strokes"
-            :class="['strock-chinese', indexs !== item.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
-            :bg-type="data.property.frame_type"
-            :frame-color="data.property.frame_color"
-          />
+      <!-- <template v-else>
+        <div :class="['words-box']">
+          <div v-for="(item, index) in data.option_list" :key="index" :class="['words-item']">
+            <div class="card-box">
+             
+              <template v-for="(items, indexs) in item.content_list">
+                <Strockplayredline
+                  :key="'miao' + indexs"
+                  :play-storkes="true"
+                  :book-text="item.con"
+                  :target-div="'pre' + item.con + index + indexs + Math.random().toString(36).substring(2, 10)"
+                  :book-strokes="items.strokes"
+                  :class="['strock-chinese', 'border-right-none']"
+                />
+              </template>
+
+              <div
+                v-for="(itemI, indexI) in item.miao_arr"
+                :key="indexI + index"
+                style="display: flex"
+                @click="miaoStorkes(index, indexI, item.mark, item.con, itemI.strokes)"
+              >
+                <Strockplayredline
+                  v-if="item.imgArr[indexI] && item.imgArr[indexI] === 'true'"
+                  :play-storkes="false"
+                  :book-text="item.con"
+                  :target-div="'write-praT' + item.con + 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.con"
+                  :target-div="'write-praT' + item.con + itemI + Math.random().toString(36).substring(2, 10)"
+                  :book-strokes="itemI.strokes"
+                  :stroke-color="'#ddd'"
+                  :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'
+                      : '',
+                  ]"
+                />
+              </div>
+             
+              <div v-for="(items, indexs) in item.imgArr" :key="'write' + indexs" class="con-box">
+                <div
+                  :class="[
+                    'strockplay-newWord',
+                    (indexs + item.hz_strokes_list.length) % writer_number_yuan !== 0 ? 'border-left-none' : '',
+                  ]"
+                  @click="freeWrite(items ? JSON.parse(items) : null, index, indexs, item.mark)"
+                >
+                  <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>
+            </div>
+          </div>
         </div>
-      </div> -->
+      </template> -->
       <div v-if="if_free_show" class="practiceBox practice-box-strock">
         <FreewriteLettle
           ref="freePaint"
@@ -258,10 +313,10 @@ export default {
     handleData() {
       console.log(this.data.option_list);
       let answer_list = [];
-      this.data.option_list.forEach((item) => {
-        let arr = [];
-        item.content_list.forEach((items) => {
-          if (this.data.property.model === 'write') {
+      this.data.option_list.forEach((item, index) => {
+        if (this.data.property.model === 'write') {
+          let arr = [];
+          item.content_list.forEach((items) => {
             let obj = null;
             if (items.type === 'write') {
               obj = {
@@ -269,10 +324,43 @@ export default {
               };
             }
             arr.push(obj);
-          } else {
+          });
+          answer_list.push(arr);
+        } else {
+          let miao_arr = [];
+          let arr = [];
+          if (item.content.trim()) {
+            for (let i = 0; i < this.data.property.write_number; i++) {
+              item.content_list.forEach((items) => {
+                arr.push(null);
+              });
+            }
+            for (let i = 0; i < this.data.property.miao_number; i++) {
+              item.content_list.forEach((items) => {
+                miao_arr.push({
+                  strokes: items && items.hz_info && items.hz_info[0] ? items.hz_info[0].hzDetail.hz_json : null,
+                  length: item.content_list.length,
+                });
+              });
+            }
+            item.imgArr = arr;
+            item.miao_arr = miao_arr;
+            // if (this.isJudgingRightWrong) {
+            //   item.imgArr = this.data.answer.answer_list.find(
+            //     (items) => items.mark === item.mark,
+            //   )?.strokes_content_list;
+            // }
           }
-        });
-        answer_list.push(arr);
+          let obj = {
+            // mark: item.mark,
+            strokes_content_list: arr,
+            miao_arr: miao_arr,
+          };
+          // if (!this.isJudgingRightWrong) {
+          //   this.data.answer.answer_list.push(obj);
+          // }
+          answer_list.push(obj);
+        }
       });
       this.userAnswer = answer_list;
     },