对话题预览，录音组件完善

src/styles/font/font.css

@@ -1,4 +0,0 @@
-@font-face {
-  font-family: 'League';
-  src: url('ABeeZee-Regular.ttf');
-}

src/views/exercise_questions/preview/DialoguePreview.vue

@@ -9,15 +9,18 @@
     <div class="dialogue-wrapper">
       <ul>
         <li v-for="(item, i) in dialogue" :key="i" :style="{ flexDirection: item.dir }" class="dialogue-item">
-          <span class="name">{{ item.name }}</span>
+          <span class="name" :style="{ backgroundColor: item.dir === 'row' ? '#4F73F4' : '#3ABD38' }">
+            {{ item.name }}
+          </span>
           <div class="content" :style="{ backgroundColor: item.dir === 'row' ? '#fff' : '#d0f3de' }">
             <template v-if="item.type === 'text'">
               {{ item.content }}
             </template>
             <template v-else>
-              <el-input v-model="item.content" />
+              <el-input v-model="item.content" :class="[item.dir === 'row' ? 'is_left' : 'is_right']" /><span>。</span>
             </template>
           </div>
+          <SoundRecordPreview v-if="item.type === 'input'" :wav-blob.sync="item.audio_file_id" type="small" />
         </li>
       </ul>
     </div>
@@ -26,10 +29,15 @@
 
 <script>
 import { getRandomNumber } from '@/utils';
+
 import PreviewMixin from './components/PreviewMixin';
+import SoundRecordPreview from './components/common/SoundRecordPreview.vue';
 
 export default {
   name: 'DialoguePreview',
+  components: {
+    SoundRecordPreview,
+  },
   mixins: [PreviewMixin],
   data() {
     return {
@@ -62,6 +70,7 @@ export default {
                 name,
                 content: isFill ? '' : content,
                 dir,
+                audio_file_id: '',
                 mark: isFill ? getRandomNumber() : '',
                 type: isFill ? 'input' : 'text',
               };
@@ -75,10 +84,11 @@ export default {
     dialogue: {
       handler() {
         this.answer.answer_list = this.dialogue
-          .map(({ type, mark, content }) => {
+          .map(({ type, mark, content, audio_file_id }) => {
             if (type === 'text') return;
             return {
               content,
+              audio_file_id,
               mark,
             };
           })
@@ -112,10 +122,44 @@ export default {
         display: flex;
         column-gap: 16px;
 
+        .name {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 40px;
+          height: 40px;
+          font-size: 12px;
+          font-weight: bold;
+          color: #fff;
+          border-radius: 50%;
+        }
+
         .content {
+          display: flex;
+          align-items: flex-end;
           padding: 8px 16px;
           color: #000;
           border-radius: 8px;
+
+          .el-input {
+            :deep .el-input__inner {
+              border-width: 0;
+              border-bottom: 1px solid #000;
+              border-radius: 0;
+            }
+
+            &.is_left {
+              :deep .el-input__inner {
+                background-color: #fff;
+              }
+            }
+
+            &.is_right {
+              :deep .el-input__inner {
+                background-color: #d0f3de;
+              }
+            }
+          }
         }
       }
     }

src/views/exercise_questions/preview/ReadAloudPreview.vue

@@ -8,12 +8,7 @@
     <div v-if="isEnable(data.property.is_enable_reference_answer)" class="reference-answer">
       {{ data.reference_answer }}
     </div>
-    <SoundRecordPreview
-      :wav-blob="user_answer.voice_file_id"
-      :record-time="user_answer.audio_wav_time"
-      @deleteWav="deleteWav"
-      @updateWav="updateWav"
-    />
+    <SoundRecordPreview :wav-blob.sync="answer.voice_file_id" />
   </div>
 </template>
 
@@ -28,28 +23,12 @@ export default {
   },
   mixins: [PreviewMixin],
   data() {
-    return {
-      user_answer: {
-        voice_file_id: '', // 录音文件id
-        audio_wav_time: 0, // 录音时间
-      },
-    };
+    return {};
   },
-  watch: {
-    'user_answer.voice_file_id'(val) {
-      this.answer.file_id = val;
-    },
-  },
-  methods: {
-    deleteWav() {
-      this.user_answer.voice_file_id = '';
-      this.user_answer.audio_wav_time = 0;
-    },
-    updateWav(wav, time) {
-      this.user_answer.voice_file_id = wav;
-      this.user_answer.audio_wav_time = time;
-    },
+  created() {
+    this.$set(this.answer, 'voice_file_id', '');
   },
+  methods: {},
 };
 </script>
 

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

@@ -8,25 +8,27 @@
         @click="microphone"
       />
       <span v-else class="sound-item-span" @click="microphone">
-        <SvgIcon icon-class="mic-line" :size="type === 'big' ? 24 : 16" class="record" />
+        <SvgIcon icon-class="mic-line" :size="iconSize" class="record" />
       </span>
 
-      <label v-if="type === 'big'" :class="['record-time', microphoneStatus ? 'record-ing' : '']">{{
-        handleDateTime(recordTimes)
-      }}</label>
+      <label v-if="type === 'big'" :class="['record-time', microphoneStatus ? 'record-ing' : '']">
+        {{ secondFormatConversion(recordTimes) }}
+      </label>
     </div>
     <div v-if="type === 'small'" class="sound-item">
-      <label :class="['record-time', microphoneStatus ? 'record-ing' : '']">{{ handleDateTime(recordTimes) }}</label>
+      <label :class="['record-time', microphoneStatus ? 'record-ing' : '']">
+        {{ secondFormatConversion(recordTimes) }}
+      </label>
     </div>
     <div class="sound-item">
       <span :class="['sound-item-span', wavBlob ? '' : 'not-url']" @click="playMicrophone">
-        <SvgIcon :icon-class="iconClass" :size="type === 'big' ? 24 : 16" :class="['audio-play-btn']" />
+        <SvgIcon :icon-class="iconClass" :size="iconSize" :class="['audio-play-btn']" />
       </span>
       <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="type === 'big' ? 24 : 16" :class="['delete-btn']" />
+        <SvgIcon icon-class="delete-back-line" :size="iconSize" :class="['delete-btn']" />
       </span>
       <label v-if="type === 'big'" class="tips">删除</label>
     </div>
@@ -36,6 +38,9 @@
 
 <script>
 import Recorder from 'js-audio-recorder'; // 录音插件
+
+import { secondFormatConversion } from '@/utils/transform';
+
 export default {
   name: 'SoundRecordPreview',
   props: {
@@ -58,6 +63,7 @@ export default {
   },
   data() {
     return {
+      secondFormatConversion,
       recorder: new Recorder({
         sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
         sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
@@ -77,6 +83,9 @@ export default {
     iconClass() {
       return this.audio.paused ? 'play-fill' : 'pause';
     },
+    iconSize() {
+      return this.type === 'big' ? 24 : 16;
+    },
   },
   mounted() {
     this.$refs.audio.addEventListener('ended', () => {
@@ -120,18 +129,6 @@ export default {
         }
       }
     },
-    // 格式化录音时长
-    handleDateTime(time) {
-      let times = 0;
-      if (parseInt(time / 60) < 10) {
-        times = `${`0${parseInt(time / 60)}`.substring(`0${parseInt(time / 60)}`.length - 2)}:${`0${
-          time % 60
-        }`.substring(`0${time % 60}`.length - 2)}`;
-      } else {
-        times = `${parseInt(time / 60)}:${`0${time % 60}`.substring(`0${time % 60}`.length - 2)}`;
-      }
-      return times;
-    },
     // 开始录音
     microphone() {
       if (!this.audio.paused) {
@@ -150,10 +147,12 @@ export default {
         reader.readAsDataURL(wav);
         reader.onloadend = () => {
           this.$emit('updateWav', reader.result, Math.floor(tolTime), this.itemIndex);
+          this.updateData(reader.result, Math.floor(tolTime));
         };
       } else {
         this.hasMicro = '';
         this.$emit('updateWav', '', 0, this.itemIndex);
+        this.updateData('', 0);
         // 开始录音
         this.recorder.start();
         this.microphoneStatus = true;
@@ -173,6 +172,11 @@ export default {
       this.recordTimes = 0;
       clearInterval(this.timer);
       this.$emit('deleteWav', this.itemIndex);
+      this.updateData('', 0);
+    },
+    updateData(wav, time) {
+      this.$emit('update:wavBlob', wav);
+      this.$emit('update:recordTime', time);
     },
   },
 };