书写

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/data/character.js

@@ -79,7 +79,7 @@ export function getCharacterProperty() {
     is_enable_stroke: showList[0].value,
     is_enable_voice: showList[0].value,
 
-    model: modelList[1].value,
+    model: modelList[0].value,
     is_enable_shiyi: showList[0].value,
     miao_number: 5,
     write_number: 5,

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

@@ -119,18 +119,26 @@
           </div>
         </div>
       </template>
-      <!-- <template v-else>
+      <template v-else>
         <div :class="['words-box']">
           <div v-for="(item, index) in data.option_list" :key="index" :class="['words-item']">
+            <div class="words-top">
+              <div class="words-left" :style="{}">
+                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+                <span class="pinyin">{{ item.pinyin }}</span>
+              </div>
+            </div>
             <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"
+                  :Book_text="items.con"
+                  :playStorkes="isEnable(data.property.is_enable_stroke)"
+                  :curItem="null"
+                  :targetDiv="'newWordTemplate' + items.con + index + indexs"
+                  :hz_json="items.hz_info[0].hzDetail.hz_json"
+                  class="hanzi-storck"
                   :class="['strock-chinese', 'border-right-none']"
                 />
               </template>
@@ -139,52 +147,53 @@
                 v-for="(itemI, indexI) in item.miao_arr"
                 :key="indexI + index"
                 style="display: flex"
-                @click="miaoStorkes(index, indexI, item.mark, item.con, itemI.strokes)"
+                @click="miaoStorkes(index, indexI, item.mark, item.content, itemI.strokes)"
               >
-                <Strockplayredline
-                  v-if="item.imgArr[indexI] && item.imgArr[indexI] === 'true'"
+                <Strockplayredlines
+                  v-if="
+                    userAnswer[index].strokes_content_list[indexI] &&
+                    userAnswer[index].strokes_content_list[indexI].flag === 'true'
+                  "
                   :play-storkes="false"
-                  :book-text="item.con"
-                  :target-div="'write-praT' + item.con + itemI + Math.random().toString(36).substring(2, 10)"
+                  :book-text="item.content"
+                  :target-div="'write-praT' + 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'
-                      : '',
-                  ]"
+                  :class="['strock-chinese']"
                 />
-                <Strockplayredline
+                <Strockplayredlines
                   v-else
                   :play-storkes="false"
-                  :book-text="item.con"
-                  :target-div="'write-praT' + item.con + itemI + Math.random().toString(36).substring(2, 10)"
+                  :book-text="item.content"
+                  :target-div="'write-praT' + 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'
-                      : '',
-                  ]"
+                  :class="['strock-chinese']"
                 />
               </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)"
+                  :class="['strockplay-newWord']"
+                  @click="
+                    freeWrite(
+                      userAnswer[index].strokes_content_list[indexs].imgArr
+                        ? userAnswer[index].strokes_content_list[indexs].imgArr
+                        : null,
+                      index,
+                      indexs,
+                    )
+                  "
                 >
                   <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
                   <img
-                    v-if="!play_status && items && JSON.parse(items).strokes_image"
+                    v-if="
+                      !play_status &&
+                      items &&
+                      userAnswer[index].strokes_content_list[indexs].imgArr &&
+                      userAnswer[index].strokes_content_list[indexs].imgArr.strokes_image
+                    "
                     class="hanzi-writer-img"
-                    :src="JSON.parse(items).strokes_image"
+                    :src="userAnswer[index].strokes_content_list[indexs].imgArr.strokes_image"
                     alt=""
                   />
                 </div>
@@ -192,7 +201,7 @@
             </div>
           </div>
         </div>
-      </template> -->
+      </template>
       <div v-if="if_free_show" class="practiceBox practice-box-strock">
         <FreewriteLettle
           ref="freePaint"
@@ -212,10 +221,10 @@
       <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
+          <Strockplayredlines
             v-if="
-              (data.answer.answer_list[active_index].strokes_content_list[active_col_index] &&
-                data.answer.answer_list[active_index].strokes_content_list[active_col_index] === 'true') ||
+              (userAnswer[active_index].strokes_content_list[active_col_index].flag &&
+                userAnswer[active_index].strokes_content_list[active_col_index].flag === 'true') ||
               disabled
             "
             :play-storkes="false"
@@ -224,9 +233,9 @@
             :book-strokes="current_hz_data"
             :stroke-color="
               disabled &&
-              (!data.answer.answer_list[active_index].strokes_content_list[active_col_index] ||
-                (data.answer.answer_list[active_index].strokes_content_list[active_col_index] &&
-                  data.answer.answer_list[active_index].strokes_content_list[active_col_index] === 'false'))
+              (!userAnswer[active_index].strokes_content_list[active_col_index].flag ||
+                (userAnswer[active_index].strokes_content_list[active_col_index].flag &&
+                  userAnswer[active_index].strokes_content_list[active_col_index].flag === 'false'))
                 ? '#ddd'
                 : ''
             "
@@ -235,8 +244,8 @@
             ref="strockRed"
             :class="[
               'strock-red',
-              data.answer.answer_list[active_index].strokes_content_list[active_col_index] &&
-              data.answer.answer_list[active_index].strokes_content_list[active_col_index] === 'true'
+              userAnswer[active_index].strokes_content_list[active_col_index].flag &&
+              userAnswer[active_index].strokes_content_list[active_col_index].flag === 'true'
                 ? 'strock-red-zindex'
                 : '',
             ]"
@@ -244,7 +253,7 @@
             :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[active_index].strokes_content_list[active_col_index]"
+            :is-answer.sync="userAnswer[active_index].strokes_content_list[active_col_index].flag"
             :show-error-tip="isEnable(data.property.is_enable_error)"
           />
           <div v-if="!disabled" :class="['reset-box']" @click="resetHanzi">
@@ -262,6 +271,7 @@ import { getCharacterData } from '@/views/book/courseware/data/character';
 import PreviewMixin from '../common/PreviewMixin';
 import AudioPlay from '../character_base/components/AudioPlay.vue';
 import Strockplayredline from '../newWord_template/components/Strockplayredline.vue';
+import Strockplayredlines from '../character_base/components/Strockplayredline.vue';
 import Strockred from '../character_base/components/Strockred.vue';
 import FreewriteLettle from '../character_base/components/FreewriteLettle.vue';
 
@@ -272,6 +282,7 @@ export default {
     Strockplayredline,
     Strockred,
     FreewriteLettle,
+    Strockplayredlines,
   },
   mixins: [PreviewMixin],
   data() {
@@ -332,7 +343,7 @@ export default {
           if (item.content.trim()) {
             for (let i = 0; i < this.data.property.write_number; i++) {
               item.content_list.forEach((items) => {
-                arr.push(null);
+                arr.push({ imgArr: null, flag: null });
               });
             }
             for (let i = 0; i < this.data.property.miao_number; i++) {
@@ -346,7 +357,7 @@ export default {
             item.imgArr = arr;
             item.miao_arr = miao_arr;
             // if (this.isJudgingRightWrong) {
-            //   item.imgArr = this.data.answer.answer_list.find(
+            //   item.imgArr = this.userAnswer.find(
             //     (items) => items.mark === item.mark,
             //   )?.strokes_content_list;
             // }
@@ -357,7 +368,7 @@ export default {
             miao_arr: miao_arr,
           };
           // if (!this.isJudgingRightWrong) {
-          //   this.data.answer.answer_list.push(obj);
+          //   this.userAnswer.push(obj);
           // }
           answer_list.push(obj);
         }
@@ -391,7 +402,12 @@ export default {
     },
     changeCurQue(answer, rowIndex, colIndex) {
       if (answer) {
-        this.userAnswer[rowIndex][colIndex].imgArr = answer;
+        if (this.data.property.model === 'write') {
+          this.userAnswer[rowIndex][colIndex].imgArr = answer;
+        } else {
+          this.userAnswer[rowIndex].strokes_content_list[colIndex].imgArr = answer;
+        }
+
         this.$forceUpdate();
       }
     },
@@ -400,7 +416,6 @@ export default {
       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;
     },
@@ -686,5 +701,29 @@ export default {
       }
     }
   }
+
+  .card-box {
+    display: flex;
+    flex-flow: wrap;
+    gap: 5px;
+  }
+
+  .words-left {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 5px;
+  }
+
+  :deep .strockplay-redInner {
+    width: 80px;
+    height: 80px;
+    border: 2px solid #346cda !important;
+    border-radius: 8px;
+  }
+
+  .words-item {
+    margin-bottom: 10px;
+  }
 }
 </style>