JenkinsTest/page/zt/boxofficeDetail.vue

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

<template>
    <div class="page-zt-boxofficePlus">
        <div class="box-detail active">
            <section class="box-detail_hd">
                <div class="film-detail" @click="toCommentary(detailFilm.commentaryId,detailFilm.articleId)">
                    <div class="detail-bg" :style='"background-image:url("+detailFilm.cover+")"'></div>
                    <div class="detail-info">
                        <div class="info-cover" :style='"background-image:url("+detailFilm.cover+")"'></div>
                        <div class="info-cont">
                            <h1>{{detailFilm.name}}</h1>
                            <p>
                                <template v-for="item in detailFilm.categories">{{item}} / </template>
                            </p>
                            <p>上映日期: {{detailFilm.releaseDate | parseDate}}（中国大陆） {{detailFilm.duration}}分钟</p>
                            <p>评分：{{detailFilm.rate}}</p>
                        </div>
                    </div>
                    <div class="detail-boxoffice">
                        <ul>
                            <li>
                                <p>上映天数</p>{{detailFilm.releaseDate | parseReleaseDate}}
                            </li>
                            <li>
                                <p>累计票房</p>{{detailFilm.sumBoxOffice | parseBoxOffice}}
                            </li>
                            <li>
                                <p>首日票房</p>{{detailFilm.boxOfficeFirstDay | parseBoxOffice}}
                            </li>
                            <li>
                                <p>首周票房</p>{{detailFilm.boxOfficeFirstWeek | parseBoxOffice}}
                            </li>
                            <li>
                                <p>首周末票房</p>{{detailFilm.boxOfficeWeekEnd | parseBoxOffice}}
                            </li>
                        </ul>
                    </div>
                </div>
                <ul class="boxoffice-tab-thead">
                    <li>日期</li>
                    <li>实时票房</li>
                    <li>票房占比</li>
                    <li>排片占比</li>
                    <li>上座率</li>
                </ul>
            </section>
            <section class="box-detail_bd boxoffice-tab-tbody" v-on:scroll.passive="onScroll" ref="filmDetailBoxScroller">
                <div ref="filmDetailBoxList">
                    <ul class="tab-row" v-for="(article,index) in detailArticles" :key="index">
                        <li>
                            <h3>{{article.deadline | parseDate}}</h3>
                            <p>{{article.deadline | parseReleaseDateStr}}</p>
                        </li>
                        <li>{{article.boxOffice | parseBoxOffice}}</li>
                        <li>{{article.boxPer}}%</li>
                        <li>{{article.showPer}}%</li>
                        <li>{{article.attendance}}%</li>
                    </ul>
                </div>
                <div v-if="detailNextFlag">
                    <div class="weui-loadmore" v-if="detailIsloading">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips"><img src="../../img/loading.gif"></span>
                    </div>
                    <div class="loading-com" v-else @click="getBoxOfficeDetails">
                        <div>加载更多</div>
                    </div>
                </div>
                <div v-else class="weui-loadmore weui-loadmore_line">
                    <span class="weui-loadmore__tips">没有更多了~~</span>
                </div>
            </section>
        </div>
    </div>
</template>

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