拼音

src/views/book/courseware/create/components/base/pinyin_base/PinyinBase.vue

@@ -3,19 +3,26 @@
     <template #content>
       <!-- eslint-disable max-len -->
       <div class="fill-wrapper">
-        <el-input v-model="data.character" :placeholder="'汉字'" style="flex-shrink: 0; width: 80px" />
-        <el-input
-          v-model="data.content"
-          placeholder="拼音间用空格隔开，如：ni3 hao3"
-          @blur="handleItemAnswer(data)"
-          @change="changePinyin(data)"
-        />
-        <el-input
-          v-model="matically_pinyin_str[data.mark]"
-          :placeholder="'拼音预览'"
-          :readonly="true"
-          style="width: 200px"
-        />
+        <div class="content-box">
+          <el-input
+            v-if="data.property.audio_generation_method === 'auto'"
+            v-model="data.character"
+            :placeholder="'汉字'"
+            style="flex-shrink: 0; width: 80px"
+          />
+          <el-input
+            v-model="data.content"
+            placeholder="拼音间用空格隔开，如：ni3 hao3"
+            @blur="handleItemAnswer(data)"
+            @change="changePinyin(data)"
+          />
+          <el-input
+            v-model="matically_pinyin_str[data.mark]"
+            :placeholder="'拼音预览'"
+            :readonly="true"
+            style="width: 200px"
+          />
+        </div>
         <div v-if="data.audio_file_id">
           <SoundRecord :wav-blob.sync="data.audio_file_id" />
         </div>
@@ -62,6 +69,14 @@ export default {
     UploadAudio,
   },
   mixins: [ModuleMixin],
+  watch: {
+    'data.property.answer_mode': {
+      handler(val) {
+        this.handleChangeType();
+      },
+      deep: true,
+    },
+  },
   data() {
     return {
       data: getPinyinBaseData(),
@@ -158,6 +173,7 @@ export default {
       this.res_arr = [];
       this.$set(this.matically_pinyin_obj, item.mark, []);
       this.$set(this.matically_pinyin_str, item.mark, '');
+      this.data.answer.answer_list = [];
       content_arr.forEach((items, index) => {
         let items_trim = items.trim();
         if (items_trim) {
@@ -192,7 +208,11 @@ export default {
           }
         });
       }
-      this.data.answer.answer_list[0].value = select_item.split(' ');
+      let obj = {
+        mark: item.mark,
+        value: select_item.split(' '),
+      };
+      this.data.answer.answer_list.push(obj);
       item.content_view = content_preview.trim().split(' ');
       // item.matically_pinyin = matically_pinyin.trim().split(' ').join(',');
     },
@@ -202,7 +222,7 @@ export default {
     },
     // 修改拼音
     changePinyin(item) {
-      if (this.data.other.audio_generation_method === 'auto') {
+      if (this.data.property.audio_generation_method === 'auto') {
         item.audio_file_id = '';
       }
     },
@@ -286,4 +306,9 @@ export default {
     }
   }
 }
+
+.content-box {
+  display: flex;
+  column-gap: 8px;
+}
 </style>

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -1,19 +1,14 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="select-preview" :style="getAreaStyle()">
+  <div class="pinyin-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
-    <div class="main" :style="getMainStyle()">预览开发中</div>
+    <div class="main">拼音预览开发中</div>
   </div>
 </template>
 
 <script>
-import {
-  getPinyinBaseData,
-  fillFontList,
-  arrangeTypeList,
-  audioPositionList,
-} from '@/views/book/courseware/data/pinyinBase';
+import { getPinyinBaseData, arrangeTypeList, audioPositionList } from '@/views/book/courseware/data/pinyinBase';
 
 import PreviewMixin from '../common/PreviewMixin';
 import AudioFill from '../fill/components/AudioFillPlay.vue';
@@ -26,63 +21,32 @@ export default {
     SoundRecord,
   },
   mixins: [PreviewMixin],
+  watch: {
+    'data.content': {
+      handler(val) {
+        console.log(this.data);
+      },
+      immediate: true,
+    },
+  },
   data() {
     return {
       data: getPinyinBaseData(),
+      arrangeTypeList,
+      audioPositionList,
     };
   },
-  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;
-    },
+    console.log(this.data);
   },
+  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
 @use '@/styles/mixin.scss' as *;
 
-.select-preview {
+.pinyin-preview {
   @include preview-base;
 
   .main {

src/views/book/create.vue

@@ -75,7 +75,7 @@
             v-model="form.description"
             type="textarea"
             :autosize="{ minRows: 12 }"
-            :maxlength="500"
+            :maxlength="1500"
             show-word-limit
             placeholder="请输入更多内容"
           />