播放音频暂停其他

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

@@ -70,6 +70,12 @@ export default {
     playAudio() {
       if (!this.url) return;
       const audio = this.$refs.audio;
+      let audioArr = document.getElementsByTagName('audio');
+      if (audioArr && audioArr.length > 0) {
+        for (let i = 0; i < audioArr.length; i++) {
+          audioArr[i].pause();
+        }
+      }
       audio.paused ? audio.play() : audio.pause();
     },
   },

src/views/exercise_questions/preview/ChooseTonePreview.vue

@@ -7,20 +7,54 @@
     </div>
     <div v-if="data.property.is_enable_description" class="description">{{ data.description }}</div>
 
-    <div class="option-list"></div>
+    <div class="option-list">
+      <li v-for="(item, i) in data.option_list" :key="i" :class="['option-item', { active: isAnswer(item.mark) }]">
+        <span>{{ computeOptionMethods[data.option_number_show_mode](i) }}. </span>
+        <AudioPlay :file-id="item.audio_file_id" />
+        <div class="option-content" v-html="sanitizeHTML(item.content)"></div>
+        <span
+          v-for="({ img, value }, j) in toneList"
+          :key="j"
+          :class="['tone', item.tone === value ? 'active' : '']"
+          @click="chooseTone(item, value)"
+        >
+          <SvgIcon :icon-class="img" />
+        </span>
+      </li>
+    </div>
   </div>
 </template>
 
 <script>
+import { computeOptionMethods } from '@/views/exercise_questions/data/common';
 import PreviewMixin from './components/PreviewMixin';
 
 export default {
   name: 'ChooseTonePreview',
   mixins: [PreviewMixin],
   data() {
-    return {};
+    return {
+      computeOptionMethods,
+      toneList: [
+        { value: 'first', label: '一声', img: 'first-tone' },
+        { value: 'second', label: '二声', img: 'second-tone' },
+        { value: 'third', label: '三声', img: 'third-tone' },
+        { value: 'fourth', label: '四声', img: 'fourth-tone' },
+        { value: 'neutral', label: '轻声', img: 'neutral-tone' },
+      ],
+    };
+  },
+  created() {
+    console.log(this.data);
+  },
+  methods: {
+    isAnswer(mark, option_type) {
+      return this.answer.select_list.some((li) => li.mark === mark && li.option_type === option_type);
+    },
+    chooseTone(item, value) {
+      item.tone = value;
+    },
   },
-  methods: {},
 };
 </script>
 
@@ -29,5 +63,41 @@ export default {
 
 .choosetone-preview {
   @include preview;
+
+  .option-list {
+    display: flex;
+    flex-direction: column;
+    flex-flow: wrap;
+    row-gap: 16px;
+
+    .option-item {
+      display: flex;
+      column-gap: 16px;
+      align-items: center;
+      width: 45%;
+      margin-right: 5%;
+
+      .option-content {
+        padding: 12px 24px;
+        color: #706f78;
+        background-color: #f9f8f9;
+        border-radius: 40px;
+      }
+
+      .tone {
+        width: 32px;
+        height: 32px;
+        padding: 8px;
+        font-size: 0;
+        text-align: center;
+        cursor: pointer;
+
+        &.active {
+          background: #dfe9fd;
+          border-radius: 16px;
+        }
+      }
+    }
+  }
 }
 </style>