音频切换

src/views/book/courseware/create/components/common/ModuleMixin.js

@@ -41,7 +41,6 @@ const mixin = {
     GetCoursewareComponentContent({ courseware_id: this.courseware_id, component_id: this.id }).then(({ content }) => {
       if (content) {
         this.$nextTick(() => {
-          console.log(this.id);
           // 数据加载完成后的操作
           this.data = JSON.parse(content);
         });

src/views/book/courseware/preview/components/audio/Audio.vue

@@ -24,9 +24,21 @@
         v-if="'independent' === data.property.view_method || 'icon' === data.property.view_method"
         class="view_independent"
       >
-        <el-carousel ref="audio_carousel" indicator-position="none" direction="vertical" :autoplay="false">
+        <el-carousel
+          ref="audio_carousel"
+          indicator-position="none"
+          direction="vertical"
+          :autoplay="false"
+          :interval="0"
+        >
           <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
-            <AudioPlay view-size="big" :file-id="file.file_id" :show-slider="true" :cur-audio-index="curAudioIndex" />
+            <AudioPlay
+              view-size="big"
+              :file-id="file.file_id"
+              :show-slider="true"
+              :cur-audio-index="curAudioIndex"
+              @changeFile="changeFile"
+            />
           </el-carousel-item>
         </el-carousel>
         <ul class="view_independent_list">
@@ -78,10 +90,28 @@ export default {
     handleAudioClick(index) {
       // 获取 Carousel 实例
       const carousel = this.$refs.audio_carousel;
-      // 切换到对应索引的图片
+      // 切换到对应索引的文件
       carousel.setActiveItem(index);
       this.curAudioIndex = index;
     },
+    changeFile(type) {
+      // 获取 Carousel 实例
+      const carousel = this.$refs.audio_carousel;
+      // 切换到对应索引的文件
+      if (type === 'prev') {
+        carousel.prev();
+        this.curAudioIndex += -1;
+      } else {
+        carousel.next();
+        this.curAudioIndex += 1;
+      }
+      if (this.curAudioIndex >= this.data.file_id_list.length) {
+        this.curAudioIndex = 0;
+      }
+      if (this.curAudioIndex < 0) {
+        this.curAudioIndex = this.data.file_id_list.length - 1;
+      }
+    },
   },
 };
 </script>
@@ -139,6 +169,10 @@ export default {
           height: 150px;
           margin: 0 auto;
         }
+
+        &__item {
+          transition: none !important;
+        }
       }
 
       .view_independent_list {

src/views/book/courseware/preview/components/common/AudioPlay.vue

@@ -2,9 +2,9 @@
   <div class="audio-wrapper">
     <template v-if="'big' === viewSize">
       <div class="audio-icon">
-        <SvgIcon icon-class="pre" />
+        <SvgIcon icon-class="pre" @click="changeFile('prev')" />
         <SvgIcon :icon-class="iconClass" size="30" @click="playAudio" />
-        <SvgIcon icon-class="next" />
+        <SvgIcon icon-class="next" @click="changeFile('next')" />
         <SvgIcon icon-class="1x" size="12" />
       </div>
       <div v-if="showSlider" class="slider-area">
@@ -187,6 +187,9 @@ export default {
     oncanplaythrough() {
       this.audio.loading = false;
     },
+    changeFile(type) {
+      this.$emit('changeFile', type);
+    },
   },
 };
 </script>
@@ -229,7 +232,7 @@ export default {
 
       :deep .el-slider__bar {
         height: 4px;
-        background-color: #1853c6;
+        background-color: #076aff;
       }
 
       :deep .el-slider__button-wrapper {