汉字组件预览

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

@@ -39,10 +39,33 @@ export default {
         let contentList = [];
         contentArr.forEach((item, index) => {
           if (item.trim()) {
+            let content_arr = item.trim().split('');
+            let content_arrs = [];
+            let content_arr_strokes = [];
+            content_arr.forEach((itemc) => {
+              if (itemc.trim()) {
+                content_arrs.push(itemc.trim());
+              }
+            });
+            content_arrs.forEach((itemc, indexc) => {
+              content_arr_strokes.push(null);
+              let MethodName = 'hz_resource_manager-GetHZStrokesContent';
+              let data = {
+                hz: itemc,
+              };
+              GetStaticResources(MethodName, data).then((res) => {
+                let obj = {
+                  hz: itemc.trim(),
+                  strokes: res,
+                };
+                content_arr_strokes[indexc] = obj;
+              });
+            });
             contentList.push({
               con: item.trim(),
               pinyin: cnchar.spell(item.trim(), 'array', 'low', 'tone').join(' '),
               audio_file_id: '',
+              hz_strokes_list: content_arr_strokes,
             });
             this.handleMatic(item.trim(), contentList.length - 1);
           }

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

@@ -252,14 +252,14 @@ export const bookTypeOption = [
         set: NotesSetting,
         preview: NotesPreview,
       },
-      {
-        value: 'other_word',
-        label: '其他词汇',
-        icon: '',
-        component: OtherWord,
-        set: OtherWordSetting,
-        preview: OtherWordPreview,
-      },
+      // {
+      //   value: 'other_word',
+      //   label: '其他词汇',
+      //   icon: '',
+      //   component: OtherWord,
+      //   set: OtherWordSetting,
+      //   preview: OtherWordPreview,
+      // },
       {
         value: 'character',
         label: '汉字组件',

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

@@ -1,29 +1,44 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="select-preview" :style="getAreaStyle()">
+  <div class="character-preview">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
-    <div class="main" :style="getMainStyle()">预览开发中</div>
+    <div class="main">
+      <div class="content-box" v-for="(item, index) in data.content_list" :key="index">
+        <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 class="pinyin" v-if="isEnable(data.property.is_enable_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"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import {
-  getCharacterData,
-  fillFontList,
-  arrangeTypeList,
-  audioPositionList,
-} from '@/views/book/courseware/data/character';
+import { getCharacterData } from '@/views/book/courseware/data/character';
 
 import PreviewMixin from '../common/PreviewMixin';
-import AudioFill from '../fill/components/AudioFillPlay.vue';
-import SoundRecord from '../../common/SoundRecord.vue';
+import AudioPlay from '../character_base/components/AudioPlay.vue';
+import Strockplayredline from '../character_base/components/Strockplayredline.vue';
 
 export default {
   name: 'CharacterPreview',
   components: {
-    AudioFill,
-    SoundRecord,
+    AudioPlay,
+    Strockplayredline,
   },
   mixins: [PreviewMixin],
   data() {
@@ -31,111 +46,97 @@ export default {
       data: getCharacterData(),
     };
   },
-  computed: {
-    fontFamily() {
-      return fillFontList.find(({ value }) => this.data.property.fill_font === value).font;
-    },
-  },
-  created() {
-    // this.answer.answer_list = this.data.model_essay
-    //   .map((item) => {
-    //     return item
-    //       .map(({ type, content, mark }) => {
-    //         if (type === 'input') {
-    //           return {
-    //             value: content,
-    //             mark,
-    //           };
-    //         }
-    //       })
-    //       .filter((item) => item);
-    //   })
-    //   .flat();
-  },
-  methods: {
-    getMainStyle() {
-      // const isRow = this.data.property.arrange_type === arrangeTypeList[0].value;
-      // const isFront = this.data.property.audio_position === audioPositionList[0].value;
-      // const isEnableVoice = this.data.property.is_enable_voice_answer === 'true';
-      // let _list = [
-      //   { name: 'audio', value: '24px' },
-      //   { name: 'fill', value: '1fr' },
-      // ];
-      // if (!isFront) {
-      //   _list = _list.reverse();
-      // }
-      // let grid = isRow
-      //   ? `"${_list[0].name} ${_list[1].name}${isEnableVoice ? ' record' : ''}" auto / ${_list[0].value} ${_list[1].value}${isEnableVoice ? ' 160px' : ''}`
-      //   : `"${_list[0].name}" ${_list[0].value} "${_list[1].name}" ${_list[1].value}${isEnableVoice ? `" record" 32px ` : ''} / 1fr`;
-      // let style = {
-      //   'grid-auto-flow': isRow ? 'column' : 'row',
-      //   'column-gap': isRow ? '16px' : undefined,
-      //   'row-gap': isRow ? undefined : '8px',
-      //   grid,
-      // };
-      // return style;
-    },
-  },
+  watch: {},
+  computed: {},
+  created() {},
+  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
 @use '@/styles/mixin.scss' as *;
 
-.select-preview {
+.character-preview {
   @include preview-base;
 
+  display: block;
+
   .main {
-    display: grid;
-    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 16px;
+    justify-content: start;
   }
 
-  .fill-wrapper {
-    grid-area: fill;
-    font-size: 16pt;
+  .content-box {
+    width: max-content;
+  }
+
+  .audio-wrapper-nobg {
+    height: 16px;
 
-    p {
-      margin: 0;
+    :deep .audio-play {
+      width: 16px;
+      height: 16px;
+      color: #000;
+      background-color: initial;
     }
 
-    .el-input {
-      display: inline-flex;
-      align-items: center;
-      width: 120px;
-      margin: 0 2px;
-
-      &.pinyin :deep input.el-input__inner {
-        font-family: 'PINYIN-B', sans-serif;
-      }
-
-      &.chinese :deep input.el-input__inner {
-        font-family: 'arial', sans-serif;
-      }
-
-      &.english :deep input.el-input__inner {
-        font-family: 'arial', sans-serif;
-      }
-
-      :deep input.el-input__inner {
-        padding: 0;
-        font-size: 16pt;
-        color: $font-color;
-        text-align: center;
-        background-color: #fff;
-        border-width: 0;
-        border-bottom: 1px solid $font-color;
-        border-radius: 0;
-      }
+    :deep .audio-play.not-url {
+      color: #a1a1a1;
+    }
+
+    :deep .voice-play {
+      width: 16px;
+      height: 16px;
     }
   }
 
-  .record-box {
-    padding: 6px 12px;
-    background-color: $fill-color;
+  .main-top {
+    display: flex;
+    column-gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pinyin {
+    font-family: 'League';
+    font-size: 12px;
+    font-weight: 500;
+    color: #000;
+  }
+
+  .strock-chinese-box {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 8px 0;
+  }
 
-    :deep .record-time {
-      width: 100px;
+  .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;
   }
 }
 </style>