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

<template>
  <ModuleBase :type="data.type">
    <template #content>
      <!-- eslint-disable max-len -->
      <div class="fill-wrapper">
        <el-input v-model="data.content" placeholder="输入" type="textarea" @change="handleChangeContent"></el-input>
        <span class="tips">输入字或词请一字一行</span>
      </div>
    </template>
  </ModuleBase>
</template>

<script>
import ModuleMixin from '../../common/ModuleMixin';
import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';

import { getCharacterData } from '@/views/book/courseware/data/character';
import { GetStaticResources } from '@/api/app';
import cnchar from 'cnchar';

export default {
  name: 'CharacterPage',
  components: {
    SoundRecord,
    UploadAudio,
  },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getCharacterData(),
    };
  },
  methods: {
    // 解析输入内容
    handleChangeContent() {
      if (this.data.content.trim()) {
        let contentArr = this.data.content.split('\n');
        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);
          }
        });
        this.data.content_list = contentList;
      } else {
        this.data.content_list = [];
      }
    },
    // 自动生成音频
    handleMatic(con, index) {
      GetStaticResources('tool-TextToVoiceFile', {
        text: con.replace(/<[^>]+>/g, ''),
      })
        .then(({ status, file_id }) => {
          if (status === 1) {
            this.data.content_list[index].audio_file_id = file_id;
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.fill-wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  align-items: flex-start;

  :deep .rich-wrapper {
    width: 100%;
  }

  .tips {
    font-size: 12px;
    color: #999;
  }

  .auto-matic,
  .upload-audio-play {
    :deep .upload-wrapper {
      margin-top: 0;
    }

    .audio-wrapper {
      :deep .audio-play {
        width: 16px;
        height: 16px;
        color: #000;
        background-color: initial;
      }

      :deep .audio-play.not-url {
        color: #a1a1a1;
      }

      :deep .voice-play {
        width: 16px;
        height: 16px;
      }
    }
  }

  .auto-matic {
    display: flex;
    flex-shrink: 0;
    column-gap: 12px;
    align-items: center;
    width: 200px;
    padding: 5px 12px;
    background-color: $fill-color;
    border-radius: 2px;

    .auto-btn {
      font-size: 16px;
      font-weight: 400;
      line-height: 22px;
      color: #1d2129;
      cursor: pointer;
    }
  }

  .correct-answer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .el-input {
      width: 180px;

      :deep &__prefix {
        display: flex;
        align-items: center;
        color: $text-color;
      }
    }
  }
}
</style>