xzrkz-web/src/pages/NewsViewDetail/NewsViewDetailAudio.vue

<template>
  <div>
    <Header/>
    <Nav :navs="navs"/>
    <div class="container">
      <div class="title">{{ title }}</div>
      <div class="player" v-show="playFileId">
        <div class="video">
          <video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
        </div>
        <div class="list">
          <div class="play-title">目录</div>
          <div class="play-buttons">
            <a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
          </div>
        </div>
      </div>
    </div>
    <Footer/>
    <loading v-show="isLoading"/>
  </div>
</template>

<script>
import Header from '@/common/components/Header'
import Footer from '@/common/components/Footer'
import common from '@/common/components/common.js'
import Loading from '../../component/Loading'
import Nav from '../../component/Nav'
import axios from 'axios'

export default {
  name: 'NewsViewDetailAudio',
  components: {
    Header,
    Footer,
    Loading,
    Nav
  },
  data () {
    let navs = [{name: '详情'}];
    if(this.$route.query.navTitle && this.$route.query.navTitle) {
        navs.splice(0, 0, {
            to: this.$route.query.navPath,
            name: this.$route.query.navTitle
        })
    }
    return {
      isLoading: false,
      navs,
      title: '',
      playFileId: '',
      coverFileId: '',
      fileList: []
    }
  },
  methods: {
    onVideoPlayClick (file) {
      this.playFileId = file.contentFileFileId
    },
    init () {
      let vueSelf = this
      vueSelf.isLoading = true
      axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
        let data = resp.data
        vueSelf.title = data.newsContentTitle
        vueSelf.playFileId = data.fileList[0].contentFileFileId
        if (data.newsContentCoverList.length > 0 &&
          data.newsContentCoverList[0].contentCoverId) {
          vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
        }
        vueSelf.fileList = data.fileList
      }).catch(resp => {
        console.error(resp)
      }).finally(() => {
        vueSelf.isLoading = false
      })
    }
  },
  computed: {
    getSrc () {
      return `${common.url}route/file/download/true/${this.playFileId}`
    },
    getPosterSrc () {
      return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-audio.jpeg`
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  min-height 450px
  margin 0 auto
  display flex
  flex-direction column
  align-items center
  font-family '宋体'
  background-color #3e3e3e

  .title
    font-size 20px
    color #fff
    font-weight normal
    line-height 35px
    text-align center
    padding 10px 0

  .player
    display flex
    justify-content center

    .video
      video
        width 100%
        height 100%
        background-color #000
        outline none

    .list
      background-color #343434
      display flex
      flex-direction column

      .play-title
        font-size 18px
        color #f9f6f6
        text-align center
        border-bottom 2px solid #797777
        padding 10px

      .play-buttons
        display flex
        flex-wrap wrap
        padding 5px 0 5px 5px

        a
          width 44px
          height 34px
          line-height 34px
          text-align center
          background-color #3a3a3a
          color #FFF
          margin 0 5px 5px 0

        a:hover
          background-color #A0333B

        .active
          background-color #A0333B

@media (min-width: 1200px)
  .title
    width 1200px

  .player
    width 1200px
    flex-direction row

    .video
      width 800px
      height 600px

    .list
      width 300px
      min-height 600px

@media (max-width: 1200px)
  .title
    width 600px

  .player
    width 600px
    flex-direction column

    .video
      width 100%
      height 450px

    .list
      width 100%
      min-height 150px
</style>