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() {
        return {
            isLoading: false,
            navs: [
                {
                    to: this.$route.query.navPath,
                    name: this.$route.query.navTitle
                },
                {
                    name: '详情'
                }
            ],
            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/banner/culture/banner.jpg`
        },
    },
    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>