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

<template>
  <div class="audio_area" :style="getAreaStyle()">
    <div class="sn-position" :style="getJustifyContentStyle()">
      {{ data.property.serial_number }}
    </div>
    <div class="main">
      <ul v-if="'list' === data.property.view_method" class="view_list">
        <li v-for="(file, i) in data.file_list" :key="i">
          <AudioPlay view-size="small" :file-id="file.file_id" :audio-index="i" view-method="list" />
        </li>
      </ul>
      <div
        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"
          :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"
              @changeFile="changeFile"
            />
          </el-carousel-item>
        </el-carousel>
        <ul class="view_independent_list">
          <li v-for="(file, i) in data.file_list" :key="i" @click="handleAudioClick(i)">
            <AudioPlay
              view-size="small"
              :file-id="file.file_id"
              :show-slider="false"
              :audio-index="i"
              :cur-audio-index="curAudioIndex"
            />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getAudioData } from '@/views/book/courseware/data/audio';

import PreviewMixin from '../common/PreviewMixin';
import AudioPlay from '../common/AudioPlay.vue';

export default {
  name: 'AudioPreview',
  components: { AudioPlay },
  mixins: [PreviewMixin],
  data() {
    return {
      data: getAudioData(),
      curAudioIndex: 0,
    };
  },
  methods: {
    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;
      }
    },
    /**
     * 得到序号外部样式
     */
    getAreaStyle() {
      const position = this.data.property.sn_position;
      let grid = '';

      if (position.includes('right')) {
        grid = `"main position" / 1fr auto`;
      } else if (position.includes('left')) {
        grid = `"position main" / auto 1fr`;
      } else if (position.includes('top')) {
        grid = `"position" auto "main" 1fr`;
      } else if (position.includes('bottom')) {
        grid = `"main" 1fr "position" auto`;
      }

      return {
        grid,
      };
    },
    /**
     * 得到序号位置样式
     */
    getJustifyContentStyle() {
      const position = this.data.property.sn_position;
      let placeSelf = '';

      if (position.includes('start')) {
        placeSelf = 'flex-start';
      } else if (position.includes('end')) {
        placeSelf = 'flex-end';
      } else {
        placeSelf = 'center';
      }

      return {
        placeSelf,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.audio_area {
  display: grid;
  gap: 6px;
  padding: 8px;

  .sn-position {
    grid-area: position;
  }

  > .main {
    display: flex;
    margin: 4px auto;

    > span {
      display: flex;
    }
  }

  .main {
    grid-area: main;
    width: 100%;

    .view_list {
      display: flex;
      flex-wrap: wrap;
      gap: 32px 28px;
      width: 100%;

      > li {
        width: 23%;
        height: 46px;
      }
    }

    .view_independent {
      display: flex;
      flex: 1;
      column-gap: 12px;

      :deep .el-carousel {
        flex: 1;
        max-height: 500px;
        padding: 20% 13px;
        background-color: #d9d9d9;

        &__container {
          max-width: 500px;
          height: 100px;
          max-height: 500px;
          margin: 0 auto;
        }

        &__item {
          transition: none !important;
        }
      }

      .view_independent_list {
        display: flex;
        flex-direction: column;
        row-gap: 2px;
        width: 20%;
        min-width: 110px;
        max-height: 500px;
        overflow-y: auto;
      }
    }
  }
}
</style>