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

<template>
  <ModuleBase :type="data.type">
    <template #content>
      <UploadFile
        :id="id"
        ref="audioUploadFile"
        :module-data="data"
        :label-text="labelText"
        :accept-file-type="acceptFileType"
        :upload-tip="uploadTip"
        :icon-class="iconClass"
        @saveDate="saveDate"
      />
      <!-- <ul>
        <li v-for="(file, i) in file_list" :key="i">
          <audio
            :id="file.file_id"
            :src="file.file_url"
            controls
            @error=""
            @play=""
            @pause=""
            @timeupdate=""
            @ended=""
          ></audio>
        </li>
      </ul> -->
    </template>
  </ModuleBase>
</template>

<script>
import { getAudioData } from '@/views/book/courseware/data/audio';
import { GetCoursewareComponentContent_View } from '@/api/book';
import ModuleMixin from '../../common/ModuleMixin';
import UploadFile from '../common/UploadFile.vue';

export default {
  name: 'AudioPage',
  components: { UploadFile },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getAudioData(),
      componentId: this.id,
      coursewareId: this.courseware_id,
      file_list: [
        {
          file_id: '1',
          file_url:
            'https://file-kf.helxsoft.cn/CSFileServer/URL/002/69F3878866F2A1B7DF04C4EFE9ACD04120240402145413PKA8LLFPXRT1BKURSBNIFXGK8EV5VCBIVL9WGCFB_00201-20240402-14-UAG696HY.mp3',
        },
        {
          file_id: '2',
          file_url:
            'https://file-kf.helxsoft.cn/CSFileServer/URL/002/69F3878866F2A1B7DF04C4EFE9ACD04120240402145413PKA8LLFPXRT1BKURSBNIFXGK8EV5VCBIVL9WGCFB_00201-20240402-14-UAG696HY.mp3',
        },
        {
          file_id: '3',
          file_url:
            'https://file-kf.helxsoft.cn/CSFileServer/URL/002/69F3878866F2A1B7DF04C4EFE9ACD04120240402145413PKA8LLFPXRT1BKURSBNIFXGK8EV5VCBIVL9WGCFB_00201-20240402-14-UAG696HY.mp3',
        },
        {
          file_id: '4',
          file_url:
            'https://file-kf.helxsoft.cn/CSFileServer/URL/002/69F3878866F2A1B7DF04C4EFE9ACD04120240402145413PKA8LLFPXRT1BKURSBNIFXGK8EV5VCBIVL9WGCFB_00201-20240402-14-UAG696HY.mp3',
        },
        {
          file_id: '5',
          file_url:
            'https://file-kf.helxsoft.cn/CSFileServer/URL/002/69F3878866F2A1B7DF04C4EFE9ACD04120240402145413PKA8LLFPXRT1BKURSBNIFXGK8EV5VCBIVL9WGCFB_00201-20240402-14-UAG696HY.mp3',
        },
        {
          file_id: '6',
          file_url:
            'https://file-kf.helxsoft.cn/CSFileServer/URL/002/69F3878866F2A1B7DF04C4EFE9ACD04120240402145413PKA8LLFPXRT1BKURSBNIFXGK8EV5VCBIVL9WGCFB_00201-20240402-14-UAG696HY.mp3',
        },
        {
          file_id: '7',
          file_url:
            'https://file-kf.helxsoft.cn/CSFileServer/URL/002/69F3878866F2A1B7DF04C4EFE9ACD04120240402145413PKA8LLFPXRT1BKURSBNIFXGK8EV5VCBIVL9WGCFB_00201-20240402-14-UAG696HY.mp3',
        },
        {
          file_id: '8',
          file_url:
            'https://file-kf.helxsoft.cn/CSFileServer/URL/002/69F3878866F2A1B7DF04C4EFE9ACD04120240402145413PKA8LLFPXRT1BKURSBNIFXGK8EV5VCBIVL9WGCFB_00201-20240402-14-UAG696HY.mp3',
        },
        {
          file_id: '9',
          file_url:
            'https://file-kf.helxsoft.cn/CSFileServer/URL/002/69F3878866F2A1B7DF04C4EFE9ACD04120240402145413PKA8LLFPXRT1BKURSBNIFXGK8EV5VCBIVL9WGCFB_00201-20240402-14-UAG696HY.mp3',
        },
      ],
      labelText: '音频',
      acceptFileType: '.mp3,.acc,.wma',
      uploadTip: '支持上传mp3、acc、wma，等格式音频文件，单个文件最大100MB，总文件体积不超1G。',
      iconClass: 'note',
    };
  },
  created() {
    this.getCoursewareComponentContent_View();
  },
  methods: {
    saveDate(file) {
      this.data.id = this.componentId;
      this.data.file_list.push(file);
      this.data.file_id_list.push(file.file_id);
    },
    getCoursewareComponentContent_View() {
      GetCoursewareComponentContent_View({ courseware_id: this.coursewareId, component_id: this.componentId }).then(
        ({ content }) => {
          if (content) this.data = JSON.parse(content);
        },
      );
    },
  },
};
</script>

<style lang="scss" scoped></style>