JenkinsTest/page/zt/boxofficePlus.vue

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

<template>
    <div :class='["page-zt-boxofficePlus",{"is-ch":type=="1"}]'>
        <div class="box-rank">
            <section class="boxoffice-hd">
                <ul class="hd-row1">
                    <li>
                        <a :class='{active:type=="1"}' @click='changeNav(1)'>中国</a>
                    </li>
                    <li>
                        <a :class='{active:type=="2"||type=="3"||type=="4"}' @click='changeNav(2)'>北美</a>
                    </li>
                    <li>
                        <a :class='{active:type=="5"}' @click='changeNav(5)'>全球</a>
                    </li>
                </ul>
                <div class="hd-row2" v-if='type!="1"'>
                    <p>
                        <template v-if='type=="5"'>
                            <a class="active">&nbsp;总榜&nbsp;</a>
                        </template>
                        <template v-else>
                            <a :class='{active:type=="2"}' @click='changeNav(2)'>日榜&nbsp;</a>
                            <a :class='{active:type=="3"}' @click='changeNav(3)'>/&nbsp;月榜&nbsp;</a>
                            <a :class='{active:type=="4"}' @click='changeNav(4)'>/&nbsp;总榜&nbsp;</a>
                        </template>
                    </p>
                    <p class="tip">{{updataTip}}</p>
                </div>
                <template v-else>
                    <div class="boxoffice-ch-detail">
                        <h2>今日大盘: <span><em>{{totalBoxOffice | parseBoxOffice}}</em> </span></h2>
                        <p>每小时更新，上次更新：北京时间{{upDate |　parseUpdateTime}}</p>
                        <span class="date">{{curDay}}</span>
                    </div>
                    <ul class="boxoffice-tab-thead">
                        <li>影片名称</li>
                        <li>实时票房</li>
                        <li>票房占比</li>
                        <li>排片占比</li>
                        <li>上座率</li>
                    </ul>
                </template>
            </section>
            <section class="boxoffice-bd boxoffice-tab-tbody" v-if='type=="1"'>
                <ul class="tab-row" v-for="(article,index) in articles" :key="index" @click="showBoxofficeDetail(article.boxAId)">
                    <li>
                        <h3>{{article.name}}</h3>
                        <p>
                            <b v-html="article.releaseDateStr"></b></p>
                    </li>
                    <li><span>{{article.boxOffice | parseBoxOffice}}</span></li>
                    <li>{{article.boxPer}}%</li>
                    <li>{{article.showPer}}%</li>
                    <li>{{article.attendance}}%</li>
                </ul>
            </section>
            <section class="boxoffice-bd" v-else>

                <ul class="zt-list-film ext-list">
                    <li class="item-film" v-for="(article,index) in articles" :key="index" @click="toVideoDetail(article.articleId)">
                        <div :class='"item-rank item-rank"+(index+1)'><em>{{index+1}}</em></div>
                        <div class="item-fl">
                            <img :src="article.cover" :alt="article.name">
                        </div>
                        <div class="item-fr">
                            <h2>{{article.name}}<em>{{article.rate}}</em><span v-if="article.newMoiveFlag==1" class="tag-new"></span></h2>

                            <template v-if="type==2 || type==3">
                                <p>
                                    {{type==2?"今日票房":"当月票房"}}<em>${{article.boxOffice | parseBoxOffice}}</em>
                                </p>
                                <p>
                                    累计票房${{article.sumBoxOffice | parseBoxOffice}}，已上映{{article.releaseDate | parseReleaseDate}}
                                </p>
                            </template>
                            <template v-else>
                                <p>
                                    累计票房<em>${{article.boxOffice | parseBoxOffice}}</em>
                                </p>
                                <p v-if="article.filmmakers">
                                    <span v-if="article.filmmakers.directors">导演：</span><span v-for="(director,index) in article.filmmakers.directors" :key="index">{{director.name}}&nbsp;</span>  
                                    <span v-if="article.filmmakers.actors">演员：</span><span v-for="actor in article.filmmakers.actors">{{actor.name}}/</span> 
                                </p>
                            </template>

                            <div class="item-btns2">
                                <span class="btn btn-preview" v-if="article.trailerCount>0" @click.stop.prevent="toVideoPreview(article.articleId)">预告片</span>
                                <span class="btn btn-post" v-if="article.commentaryCount>0" @click.stop.prevent="toCommentaryDetail(article.commentaryId)">解说视频</span>
                            </div>
                        </div>
                    </li>
                </ul>

            </section>
            <loading 
                :nextFlag = "nextFlag"
                :loading = "isloading"
                @getLoadMore = "getBoxOfficeList"></loading>
        </div>
    </div>
</template>

<script>
    import boxoffice from './js/boxofficePlus.js'
    export default boxoffice
</script>