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" />
    <GzhQr :src="qrCodeImage" v-show="isQrCodeShow" />
  </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 GzhQr from '../../component/GzhQr'
import { conetntAuth } from '../NewsView/NewsViewUtil'
import axios from 'axios'

export default {
  name: 'NewsViewDetailAudio',
  components: {
    Header,
    Footer,
    Loading,
    Nav,
    GzhQr
  },
  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: [],
      userData: null,
      qrCodeImage: '',
      isQrCodeShow: false
    }
  },
  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
        // conetntAuth(vueSelf.$router, data);
        conetntAuth(vueSelf, data, function () {
          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>