JenkinsTest/page/video/detail.vue

<style lang="sass">
@import "./scss/detail.scss";
</style>

<template>
    <div class="page-video-detail">
        <section class="v-mod-detail">
            <div class="detail-wrap">
                <div class="detail-fl">
                    <img :src="article.cover" alt="">
                </div>
                <div class="detail-fm">
                    <h2>{{article.name}}</h2>
                    <p>上映时间：{{article.releaseDate | parseReleaseDate}}</p>

                    <p v-if="articleType==2">{{article.episode}}集/单集片长：{{article.duration}}min</p>
                    <p v-else>片长：{{article.duration}}min</p>

                    <p>
                        <span v-for="area in areas" :key="area">{{area}}</span>/
                        <span v-for="categorie in categories" :key="categorie">{{categorie}}</span>
                    </p>
                    <p>别名：<span v-for="alia in alias" :key="alia">{{alia}}</span></p>
                </div>
                <div class="detail-fr">
                    <div class="rate-wrap">
                        <span>{{article.dbRate?article.dbRate:0}}</span>
                        <p>豆瓣评分</p>
                        <div class="imdb-wrap">IMDB: {{article.imdbRate?article.imdbRate:0}}</div>
                    </div>
                </div>
            </div>
            <div class="detail-filmmakers">
                <h2>影人和剧情</h2>
                <div :class='{"intro":true,"is-open":isShowSynopsis==1}'>
                    <p v-html="article.synopsis"></p>
                    <span class="btn-open" @click="showSynopsis()">{{isShowSynopsis==1?"收起":"展开"}}</span>
                </div>
                <ul class="list-filmmakers">
                    <li v-for="(filmmaker,index) in filmmakers" :key="index" @click="previewImage(1,0,index)">
                        <div class="cover" :style="{backgroundImage : 'url('+filmmaker.pic+'?imageview/4/0/w/400/h/400/format/)'}"></div>
                        <h3>{{filmmaker.name}}</h3>
                        <p>{{filmmaker.type == 1 ? "导演" : ""}}</p>
                    </li>
                    <li class="item-more" v-if="filmmakers.length>8">
                        <a :href="downloadUrl">
                            <div class="cover"></div>
                            <h3>全部影人</h3>
                            <p>{{filmmakers.length}}人</p>
                        </a>
                    </li>
                </ul>
                <a :href="downloadUrl" class="btn-app"  v-if="watchOnline.count>0">{{watchOnline.count}}个片源登录App可看</a>
                <p class="ticket" v-if="boxOffice!=0">{{boxOffice | parseBoxOffice}}</p>
            </div>
        </section>

        <section class="v-mod-jieshuo mt-16">
            <h2>解说视频</h2>
            <ul class="list-ups">
                <li v-for="(up,upIndex) in ups" :key="upIndex" @click="changeUpList(upIndex)" :class='upIndex==0?"active":""'>
                    {{up.up.nick}}
                </li>
            </ul>
            <ul class="list-jieshuo">
                <li v-for="(commentarie,index) in curUpsCommentaries" :key="index">
                    <a :data-href='"/?page=video-post&cid="+commentarie.id'>
                        <div class="item-fl">
                            <img :src="commentarie.cover" :alt="commentarie.title">
                            <em v-if="commentarie.serialType==1">{{index+1}}</em>
                        </div>
                        <div class="item-fr">
                            <h3>{{commentarie.title}}</h3>
                            <p><img :src="commentarie.up.head">{{commentarie.up.nick}}</p>
                        </div>
                    </a>
                </li>
            </ul>
            <a class="btn-more" :href="downloadUrl" v-if="commentaryCount>1">（还有{{commentaryCount-1}}个解说登录APP可看）</a>
        </section>

        <section class="mod-album">
            <h2>{{trailers.count?"预告片与":""}}剧照</h2>
            <ul class="list-album">
                <li v-if="trailers.count" class="item-preview" :style="{backgroundImage : 'url('+firstTrailer.cover+')'}">
                    <a :data-href='"/?page=video-preview&articleId="+article.id'>
                        <div class="mask"></div>
                        <h3>预告片</h3>
                        <p>{{trailers.count}}</p>
                    </a>
                </li>
                <li v-for="(img,index) in images" :key="index" :style="{backgroundImage : 'url('+img.smallUrl+')'}" v-if="index<8" @click="previewImage(2,0,index)"></li>
            </ul>
            <a class="btn-more" :href="downloadUrl">全部{{images.length}}张剧照登录APP可看</a>
        </section>

        <section class="v-mod-comment mt-16 pb-150">
            <div class="comment-hd comment-hd2">
                <h2><span>用户辣评</span></h2>
                <p>(<em id="commentNum">0</em>)</p>
            </div>
            <comment 
                :type="1" 
                :id="articleId" 
                :hasPlayer="false">
            </comment>
        </section>

        <dlfooter></dlfooter>
        <photoswipe></photoswipe>
        
    </div>
</template>

<script>
    import detail from './js/detail.js'
    export default detail
</script>