听后训练 预览

src/views/exercise_questions/preview/RepeatPreview.vue

@@ -11,6 +11,16 @@
         <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>
+        <div class="sound-box">
+          <SoundRecordPreview
+            :wav-blob="answer_list[i].audio_file_id"
+            :record-time="answer_list[i].audio_wav_time"
+            :item-index="i"
+            :type="'small'"
+            @deleteWav="deleteWav"
+            @updateWav="updateWav"
+          />
+        </div>
       </li>
     </div>
   </div>
@@ -19,19 +29,47 @@
 <script>
 import PreviewMixin from './components/PreviewMixin';
 import { computeOptionMethods } from '@/views/exercise_questions/data/common';
+import SoundRecordPreview from './components/common/SoundRecordPreview.vue';
 
 export default {
   name: 'RepeatPreview',
+  components: {
+    SoundRecordPreview,
+  },
   mixins: [PreviewMixin],
   data() {
     return {
       computeOptionMethods,
+      answer_list: [],
     };
   },
   created() {
-    console.log(this.data);
+    this.handleData();
+  },
+  methods: {
+    // 初始化数据
+    handleData() {
+      this.answer_list = [];
+      this.data.option_list.forEach((item) => {
+        let obj = {
+          mark: item.mark,
+          audio_file_id: '',
+          audio_wav_time: 0,
+        };
+        this.answer_list.push(obj);
+      });
+    },
+    // 清除录音
+    deleteWav(index) {
+      this.answer_list[index].audio_file_id = '';
+      this.answer_list[index].audio_wav_time = 0;
+    },
+    // 更新录音内容和时间
+    updateWav(wav, time, index) {
+      this.answer_list[index].audio_file_id = wav;
+      this.answer_list[index].audio_wav_time = time;
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -62,6 +100,12 @@ export default {
         background-color: #f9f8f9;
         border-radius: 40px;
       }
+
+      .sound-box {
+        padding: 4px;
+        background: #f9f8f9;
+        border-radius: 40px;
+      }
     }
   }
 }

src/views/exercise_questions/preview/components/common/SoundRecordPreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sound-record-wrapper">
+  <div :class="['sound-record-wrapper', 'sound-record-wrapper-' + type]">
     <div class="sound-item sound-item-luyin">
       <img
         v-if="microphoneStatus"
@@ -8,24 +8,28 @@
         @click="microphone"
       />
       <span v-else class="sound-item-span" @click="microphone">
-        <SvgIcon icon-class="mic-line" :size="24" class="record" />
+        <SvgIcon icon-class="mic-line" :size="type === 'big' ? 24 : 16" class="record" />
       </span>
 
+      <label v-if="type === 'big'" :class="['record-time', microphoneStatus ? 'record-ing' : '']">{{
+        handleDateTime(recordTimes)
+      }}</label>
+    </div>
+    <div v-if="type === 'small'" class="sound-item">
       <label :class="['record-time', microphoneStatus ? 'record-ing' : '']">{{ handleDateTime(recordTimes) }}</label>
     </div>
     <div class="sound-item">
       <span :class="['sound-item-span', wavBlob ? '' : 'not-url']" @click="playMicrophone">
-        <SvgIcon :icon-class="iconClass" :size="24" :class="['audio-play-btn']" />
+        <SvgIcon :icon-class="iconClass" :size="type === 'big' ? 24 : 16" :class="['audio-play-btn']" />
       </span>
-      <label class="tips">回放</label>
+      <label v-if="type === 'big'" class="tips">回放</label>
     </div>
     <div class="sound-item">
       <span :class="['sound-item-span', wavBlob ? '' : 'not-url']" @click="delectWav">
-        <SvgIcon icon-class="delete-back-line" :size="24" :class="['delete-btn']" />
+        <SvgIcon icon-class="delete-back-line" :size="type === 'big' ? 24 : 16" :class="['delete-btn']" />
       </span>
-      <label class="tips">删除</label>
+      <label v-if="type === 'big'" class="tips">删除</label>
     </div>
-
     <audio ref="audio" :src="wavBlob" preload="metadata"></audio>
   </div>
 </template>
@@ -43,6 +47,14 @@ export default {
       type: Number,
       default: 0,
     },
+    itemIndex: {
+      type: Number,
+      default: null,
+    },
+    type: {
+      type: String,
+      default: 'big',
+    },
   },
   data() {
     return {
@@ -137,11 +149,11 @@ export default {
         let reader = new window.FileReader();
         reader.readAsDataURL(wav);
         reader.onloadend = () => {
-          this.$emit('updateWav', reader.result, Math.floor(tolTime));
+          this.$emit('updateWav', reader.result, Math.floor(tolTime), this.itemIndex);
         };
       } else {
         this.hasMicro = '';
-        this.$emit('updateWav', '', 0);
+        this.$emit('updateWav', '', 0, this.itemIndex);
         // 开始录音
         this.recorder.start();
         this.microphoneStatus = true;
@@ -160,7 +172,7 @@ export default {
       this.playtime = 0;
       this.recordTimes = 0;
       clearInterval(this.timer);
-      this.$emit('deleteWav');
+      this.$emit('deleteWav', this.itemIndex);
     },
   },
 };
@@ -169,10 +181,10 @@ export default {
 <style lang="scss" scoped>
 .sound-record-wrapper {
   display: flex;
+  column-gap: 18px;
   align-items: center;
 
   .sound-item {
-    margin-right: 16px;
     text-align: center;
 
     .sound-item-span {
@@ -223,5 +235,28 @@ export default {
     line-height: 20px;
     color: #000;
   }
+
+  &-small {
+    column-gap: 8px;
+
+    .sound-item {
+      .sound-item-span {
+        width: 32px;
+        height: 32px;
+        padding: 8px;
+      }
+
+      .voice-play {
+        width: 32px;
+        height: 32px;
+      }
+    }
+
+    .record-time {
+      min-width: 40px;
+      margin-top: 0;
+      text-align: center;
+    }
+  }
 }
 </style>