boxoffice.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <style lang="sass">
  2. @import "./scss/schedule.scss";
  3. </style>
  4. <template>
  5. <div class="page-video-schedule">
  6. <section class="schedule-hd">
  7. <ul class="hd-row1">
  8. <li>
  9. <a :class='{active:area=="CN"}' @click='changeNav("CN",timeType,true)'>中国</a>
  10. </li>
  11. <li>
  12. <a :class='{active:area=="USA"}' @click='changeNav("USA",timeType,true)'>北美</a>
  13. </li>
  14. <li>
  15. <a :class='{active:area=="WORLD"}' @click='changeNav("WORLD",5,true)'>全球</a>
  16. </li>
  17. </ul>
  18. <div class="hd-row2">
  19. <p>
  20. <template v-if='area=="CN" || area=="USA"'>
  21. <a :class='{active:timeType=="1"}' @click='changeNav(area,1)'>{{area=="CN"?"实时":"日榜"}}&nbsp;</a>
  22. <a :class='{active:timeType=="3"}' @click='changeNav(area,3)'>/&nbsp;月榜&nbsp;</a>
  23. <a :class='{active:timeType=="4"}' @click='changeNav(area,4)'>/&nbsp;总榜&nbsp;</a>
  24. </template>
  25. <template v-else>
  26. <a class="active">&nbsp;总榜&nbsp;</a>
  27. </template>
  28. </p>
  29. <p class="tip">{{updataTip}}</p>
  30. </div>
  31. </section>
  32. <section class="schedule-bd">
  33. <ul class="zt-list-film ext-list">
  34. <li class="item-film" v-for="(article,index) in articles" :key="index" @click="toVideoDetail(article.articleId)">
  35. <div :class='"item-rank item-rank"+(index+1)'><em>{{index+1}}</em></div>
  36. <div class="item-fl">
  37. <img :src="article.cover" :alt="article.name">
  38. </div>
  39. <div class="item-fr">
  40. <h2>{{article.name}}<em>{{article.rate}}</em><span v-if="article.newMoiveFlag==1" class="tag-new"></span></h2>
  41. <template v-if="timeType==1 || timeType==3">
  42. <p>
  43. {{timeType==1?"今日票房":"当月票房"}}<em>{{area=="CN"?"¥":"$"}}{{article.boxOffice | parseBoxOffice}}</em>
  44. </p>
  45. <p>
  46. 累计票房{{area=="CN"?"¥":"$"}}{{article.sumBoxOffice | parseBoxOffice}},已上映{{article.releaseDate | parseReleaseDate}}
  47. </p>
  48. </template>
  49. <template v-else>
  50. <p>
  51. 累计票房<em>{{area=="CN"?"¥":"$"}}{{article.boxOffice | parseBoxOffice}}</em>
  52. </p>
  53. <p v-if="article.filmmakers">
  54. <span v-if="article.filmmakers.directors">导演:</span><span v-for="(director,index) in article.filmmakers.directors" :key="index">{{director.name}}&nbsp;</span>
  55. <span v-if="article.filmmakers.actors">演员:</span><span v-for="actor in article.filmmakers.actors">{{actor.name}}/</span>
  56. </p>
  57. </template>
  58. <div class="item-btns2">
  59. <span class="btn btn-preview" v-if="article.trailerCount>0" @click.stop.prevent="toVideoPreview(article.articleId)">预告片</span>
  60. <span class="btn btn-post" v-if="article.commentaryCount>0" @click.stop.prevent="toCommentaryDetail(article.commentaryId)">解说视频</span>
  61. </div>
  62. </div>
  63. </li>
  64. </ul>
  65. </section>
  66. <loading
  67. :nextFlag = "nextFlag"
  68. :loading = "isloading"
  69. @getLoadMore = "getBoxOfficeList"></loading>
  70. </div>
  71. </template>
  72. <script>
  73. import boxoffice from './js/boxoffice.js'
  74. export default boxoffice
  75. </script>