音频播放 点击暂停

src/views/exercise_questions/create/components/common/AudioPlay.vue

@@ -12,7 +12,7 @@
         class="voice-play"
       />
     </span>
-    <audio ref="audio" :src="url" preload="metadata"></audio>
+    <audio :id="fileId" :ref="fileId" :src="url" preload="metadata"></audio>
   </div>
 </template>
 
@@ -56,24 +56,30 @@ export default {
     },
   },
   mounted() {
-    this.$refs.audio.addEventListener('ended', () => {
+    this.$refs[this.fileId].addEventListener('ended', () => {
       this.audio.paused = true;
     });
-    this.$refs.audio.addEventListener('pause', () => {
+    this.$refs[this.fileId].addEventListener('pause', () => {
       this.audio.paused = true;
     });
-    this.$refs.audio.addEventListener('play', () => {
+    this.$refs[this.fileId].addEventListener('play', () => {
       this.audio.paused = false;
     });
   },
   methods: {
     playAudio() {
       if (!this.url) return;
-      const audio = this.$refs.audio;
+      const audio = this.$refs[this.fileId];
       let audioArr = document.getElementsByTagName('audio');
       if (audioArr && audioArr.length > 0) {
         for (let i = 0; i < audioArr.length; i++) {
-          audioArr[i].pause();
+          if (audioArr[i].src === this.url) {
+            if (audioArr[i].id !== this.fileId) {
+              audioArr[i].pause();
+            }
+          } else {
+            audioArr[i].pause();
+          }
         }
       }
       audio.paused ? audio.play() : audio.pause();

src/views/exercise_questions/create/components/exercises/RepeatQuestion.vue

@@ -36,12 +36,12 @@
             </div>
             <UploadAudio
               :key="item.audio_file_id || i"
-              :file-id="item.file_id_list?.[0]"
+              :file-id="item.audio_file_id"
               :item-index="i"
               @upload="uploads"
               @deleteFile="deleteFiles"
             />
-            <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i)" />
+            <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
           </li>
         </ul>
       </div>
@@ -146,13 +146,17 @@ export default {
       this.data.option_list.push(getOption());
     },
     uploads(file_id, index) {
-      this.data.option_list[index].file_id_list.push(file_id);
+      this.data.option_list[index].audio_file_id = file_id;
+      this.data.file_id_list.push(file_id);
     },
     deleteFiles(file_id, itemIndex) {
-      let index = this.data.option_list[itemIndex].file_id_list.indexOf(file_id);
-      if (index !== -1) {
-        this.data.option_list[itemIndex].file_id_list.splice(index, 1);
-      }
+      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);
     },
   },
 };

src/views/exercise_questions/data/repeat.js

@@ -2,7 +2,7 @@ import { optionTypeList, stemTypeList, scoreTypeList, questionNumberTypeList } f
 import { getRandomNumber } from '@/utils/index';
 
 export function getOption(content = '') {
-  return { content, mark: getRandomNumber(), file_id_list: [] };
+  return { content, mark: getRandomNumber(), audio_file_id: '' };
 }
 
 // 听后训练数据模板
@@ -12,17 +12,17 @@ export const repeatData = {
   option_number_show_mode: optionTypeList[0].value, // 选项类型
   description: '', // 描述
   option_list: [
-    { content: '', mark: getRandomNumber(), file_id_list: [] },
-    { content: '', mark: getRandomNumber(), file_id_list: [] },
-    { content: '', mark: getRandomNumber(), file_id_list: [] },
+    { content: '', mark: getRandomNumber(), audio_file_id: '' },
+    { content: '', mark: getRandomNumber(), audio_file_id: '' },
+    { content: '', mark: getRandomNumber(), audio_file_id: '' },
   ], // 选项
-
-  answer: { answer_list: [], score: 0, score_type: scoreTypeList[0].value }, // 答案
+  file_id_list: [],
+  answer: { score: 0, score_type: scoreTypeList[0].value }, // 答案
   // 题型属性
   property: {
     stem_type: stemTypeList[0].value, // 题干类型
     question_number: 1, // 题号
-    is_enable_description: false, // 描述
+    is_enable_description: 'false', // 描述
     score: 1, // 分值
     score_type: scoreTypeList[0].value, // 分值类型
   },

src/views/exercise_questions/preview/ChooseTonePreview.vue

@@ -266,7 +266,7 @@ export default {
 
   .option-list {
     display: flex;
-    flex-flow: column wrap;
+    flex-wrap: wrap;
     row-gap: 16px;
 
     .option-item {

src/views/exercise_questions/preview/RepeatPreview.vue

@@ -6,17 +6,30 @@
       <span v-html="sanitizeHTML(data.stem)"></span>
     </div>
     <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
+    <div class="option-list">
+      <li v-for="(item, i) in data.option_list" :key="i" :class="['option-item']">
+        <span>{{ computeOptionMethods[data.option_number_show_mode](i) }}. </span>
+        <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" />
+        <div class="option-content" v-html="sanitizeHTML(item.content)"></div>
+      </li>
+    </div>
   </div>
 </template>
 
 <script>
 import PreviewMixin from './components/PreviewMixin';
+import { computeOptionMethods } from '@/views/exercise_questions/data/common';
 
 export default {
   name: 'RepeatPreview',
   mixins: [PreviewMixin],
   data() {
-    return {};
+    return {
+      computeOptionMethods,
+    };
+  },
+  created() {
+    console.log(this.data);
   },
   methods: {},
 };
@@ -27,5 +40,29 @@ export default {
 
 .repeat-preview {
   @include preview;
+
+  .option-list {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 16px;
+
+    .option-item {
+      display: flex;
+      column-gap: 16px;
+      align-items: center;
+      min-width: 40%;
+      max-width: 50%;
+      padding-right: 24px;
+
+      .option-content {
+        flex: 1;
+        max-width: 306px;
+        padding: 12px 24px;
+        color: #706f78;
+        background-color: #f9f8f9;
+        border-radius: 40px;
+      }
+    }
+  }
 }
 </style>