tnbapp/src/views/home/AudioPage.vue

<template>
  <el-row class="movie-list">
    <el-col :md="12">
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-row>
              <span v-html="audio.title" />
            </el-row>
          </div>
          <div class="text item">
            <el-row>
              <audio-player
                ref="audioPlayer"
                :show-prev-button="false"
                :show-next-button="false"
                :show-playback-rate="false"
                :audio-list="audioList.map(elm => elm.url)"
                :before-play="handleBeforePlay"
                @playing="onPlaying"
                theme-color="#87CEFA"
              />
            </el-row>
            <el-divider v-if="audio.description !== undefined && audio.description !== null"/>
            <el-row>
              <span v-html="audio.description" />
            </el-row>
            <el-divider/>
            <el-row>
              发布于 <span v-html="audio.publishAt" />
            </el-row>
            <el-divider/>
            <el-row>
              <span>
                <span>
                  <i :class=collectedIcon @click="collectItem"/>
                </span>
              </span>
            </el-row>
          </div>
        </el-card>
      </el-row>
    </el-col>
    <el-col :md="6">
      <user-avatar-card :userAvatar="user" />
    </el-col>
  </el-row>
</template>

<script>
import UserAvatarCard from '@/components/card/UserAvatarCard'
import { getAudio } from "@/api/audio";
import {getUserInfo} from "@/api/user";

export default {
  name: 'AudioPage',
  components: { UserAvatarCard },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      const max = 20
      if (value.length > max) {
        return value.slice(0, max) + '...'
      }
      return value
    }
  },
  data() {
    return {
      currentAudioName: '',
      audio: null,
      audioList: [],
      user: null,
      collected: false,
      collectedIcon: 'el-icon-star-off'
    }
  },
  created() {
    const audioId = this.$route.params.audioId
    getAudio(audioId).then(res => {
      if (res.code === 0) {
        this.audio = res.data
        this.audioList = [
          { name: this.audio.title, url: this.audio.audioUrl }
        ]

        document.title = '文章 - ' + this.audio.title
      } else {
      }

      getUserInfo(10001).then(res => {
        if (res.code === 0) {
          this.user = res.data
        }
      })
    })
  },
  methods: {
    // 播放前做的事
    handleBeforePlay(next) {
      // 这里可以做一些事情...
      this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
      this.$refs.audioPlayer.$refs.audio.currentTime = 20
      // 开始播放
      next()
    },
    handlePlaySpecify() {
      this.$refs.audioPlayer.currentPlayIndex = 1
      this.$nextTick(() => {
        this.$refs.audioPlayer.play()
        this.title = this.audioList[
          this.$refs.audioPlayer.currentPlayIndex
          ].name
      })
    },
    onPlaying() {
      console.log('正在播放 ' + this.$refs.audioPlayer.$refs.audio.currentTime)
    },
    collectItem() {
      if (this.collected) {
        console.log('取消收藏音频')
        this.collected = false
        this.collectedIcon = 'el-icon-star-off'
      } else {
        console.log('收藏音频')
        this.collected = true
        this.collectedIcon = 'el-icon-star-on'
      }
    }
  }
}
</script>

<style scoped>
.movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}

/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>