|
|
@@ -25,7 +25,40 @@
|
|
|
|
|
|
<div class="content">
|
|
|
<label class="title-little">题目：</label>
|
|
|
- <el-input v-model="data.content" rows="3" resize="none" type="textarea" placeholder="输入汉字，用空格分开" />
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, i) in data.option_list" :key="i" class="content-item">
|
|
|
+ <el-input v-model="item.content" maxlength="1" placeholder="输入一个汉字" />
|
|
|
+ <el-input v-model="item.pinyin" placeholder="输入拼音" />
|
|
|
+ <UploadAudio
|
|
|
+ v-if="data.other.audio_generation_method === 'upload'"
|
|
|
+ :key="item.audio_file_id || i"
|
|
|
+ :file-id="item.audio_file_id"
|
|
|
+ :item-index="i"
|
|
|
+ :show-upload="!item.audio_file_id"
|
|
|
+ @upload="uploads"
|
|
|
+ @deleteFile="deleteFiles"
|
|
|
+ />
|
|
|
+ <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
|
|
|
+ <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
|
|
|
+ <span class="auto-btn" @click="handleMatically">自动生成</span>
|
|
|
+ </div>
|
|
|
+ <SoundRecord
|
|
|
+ v-else
|
|
|
+ :wav-blob="item.audio_wav"
|
|
|
+ :record-time="item.audio_wav_time"
|
|
|
+ :item-index="i"
|
|
|
+ @deleteWav="deleteWav"
|
|
|
+ @updateWav="updateWav"
|
|
|
+ />
|
|
|
+ <el-input v-if="data.property.learn_type !== 'learn'" v-model="item.definition" placeholder="输入释义" />
|
|
|
+ <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <span class="add-option" @click="addOption">
|
|
|
+ <SvgIcon icon-class="add-circle" size="14" /> <span>增加选项</span>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -87,6 +120,16 @@
|
|
|
{{ label }}
|
|
|
</el-radio>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="音频">
|
|
|
+ <el-radio
|
|
|
+ v-for="{ value, label } in audioGenerationMethodList"
|
|
|
+ :key="value"
|
|
|
+ v-model="data.other.audio_generation_method"
|
|
|
+ :label="value"
|
|
|
+ >
|
|
|
+ {{ label }}
|
|
|
+ </el-radio>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
</template>
|
|
|
</QuestionBase>
|
|
|
@@ -94,22 +137,124 @@
|
|
|
|
|
|
<script>
|
|
|
import QuestionMixin from '../common/QuestionMixin.js';
|
|
|
+import UploadAudio from '../common/UploadAudio.vue';
|
|
|
+import SoundRecord from '../common/SoundRecord.vue';
|
|
|
|
|
|
import { changeOptionType } from '@/views/exercise_questions/data/common';
|
|
|
-import { chineseData, learnTypeList } from '@/views/exercise_questions/data/chinese';
|
|
|
+import {
|
|
|
+ chineseData,
|
|
|
+ learnTypeList,
|
|
|
+ audioGenerationMethodList,
|
|
|
+ getOption,
|
|
|
+} from '@/views/exercise_questions/data/chinese';
|
|
|
|
|
|
export default {
|
|
|
name: 'ChineseQuestion',
|
|
|
+ components: {
|
|
|
+ UploadAudio,
|
|
|
+ SoundRecord,
|
|
|
+ },
|
|
|
mixins: [QuestionMixin],
|
|
|
data() {
|
|
|
return {
|
|
|
learnTypeList,
|
|
|
+ audioGenerationMethodList,
|
|
|
changeOptionType,
|
|
|
data: JSON.parse(JSON.stringify(chineseData)),
|
|
|
};
|
|
|
},
|
|
|
- methods: {},
|
|
|
+ methods: {
|
|
|
+ addOption() {
|
|
|
+ this.data.option_list.push(getOption());
|
|
|
+ },
|
|
|
+ uploads(file_id, index) {
|
|
|
+ this.data.option_list[index].audio_file_id = file_id;
|
|
|
+ this.data.file_id_list.push(file_id);
|
|
|
+ },
|
|
|
+ deleteFiles(file_id, itemIndex) {
|
|
|
+ this.data.option_list[itemIndex].audio_file_id = '';
|
|
|
+ this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
|
|
|
+ },
|
|
|
+ // 删除小题
|
|
|
+ deleteOption(i, file_id) {
|
|
|
+ this.data.option_list.splice(i, 1);
|
|
|
+ this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
|
|
|
+ },
|
|
|
+ // 自动生成音频
|
|
|
+ handleMatically() {},
|
|
|
+ // 清除录音
|
|
|
+ deleteWav(index) {
|
|
|
+ this.data.option_list[index].audio_wav = '';
|
|
|
+ this.data.option_list[index].audio_wav_time = 0;
|
|
|
+ },
|
|
|
+ // 更新录音内容和时间
|
|
|
+ updateWav(index, wav, time) {
|
|
|
+ this.data.option_list[index].audio_wav = wav;
|
|
|
+ this.data.option_list[index].audio_wav_time = time;
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .content-item {
|
|
|
+ .upload-wrapper {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep .file-name {
|
|
|
+ width: 205px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .auto-matically {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 233px;
|
|
|
+ padding: 5px 12px;
|
|
|
+ background-color: $fill-color;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ .audio-wrapper {
|
|
|
+ margin-right: 12px;
|
|
|
+
|
|
|
+ :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-btn {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #1d2129;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
