special.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <!-- +---------------------------------------------------------------------- -->
  2. <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
  3. <!-- +---------------------------------------------------------------------- -->
  4. <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
  5. <!-- +---------------------------------------------------------------------- -->
  6. <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
  7. <!-- +---------------------------------------------------------------------- -->
  8. <!-- | Author: CRMEB Team <admin@crmeb.com> -->
  9. <!-- +---------------------------------------------------------------------- -->
  10. {extend name="public/container"}
  11. {block name='title'}专题推广{/block}
  12. {block name="head_top"}
  13. <script src="/wap/first/zsff/js/scroll.js"></script>
  14. <script src="/wap/first/zsff/js/navbarscroll.js"></script>
  15. <style>
  16. body {
  17. background-color: #f5f5f5;
  18. }
  19. .loading {
  20. font-size: .4rem;
  21. text-align: center;
  22. color: #999;
  23. }
  24. .loaded {
  25. font-size: .28rem;
  26. line-height: .72rem;
  27. text-align: center;
  28. color: #999;
  29. }
  30. .nothing {
  31. position: absolute;
  32. top: 30%;
  33. left: 50%;
  34. width: 4.14rem;
  35. height: 3.36rem;
  36. -webkit-transform: translate(-50%, -50%);
  37. transform: translate(-50%, -50%);
  38. }
  39. </style>
  40. {/block}
  41. {block name="content"}
  42. <div class="thematic-promotion" id="app" v-cloak ref="app">
  43. <div class="goodsClass">
  44. <div class="header" style="height: 1.0rem">
  45. <div class="wrapper" id="wrapper">
  46. <div class="scroller">
  47. <ul>
  48. <li v-for="item in gradeList" :data-id="item.id">
  49. <a href="javascript:void(0)" v-text="item.name"></a>
  50. </li>
  51. </ul>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="swiper-details" v-for="item in specialList" ref="list" v-if="item.list.length">
  57. <div class="title line1 acea-row row-middle" v-text="item.name"></div>
  58. <div class="video-listn">
  59. <div class="item acea-row" v-for="val in item.list">
  60. <div class="pictrue"><img :src="val.image"></div>
  61. <div class="text acea-row row-between row-column">
  62. <div class="name line1" v-text="val.title"></div>
  63. <div class="num acea-row row-middle">
  64. <div class="money">¥<span>{{val.money}}</span></div>
  65. <div class="earn" v-if="val.spread_money>0">赚¥{{val.spread_money}}</div>
  66. </div>
  67. <a class="toPromote acea-row row-center-wrapper" :href="goSpreadUrl(val)">去推广</a>
  68. </div>
  69. </div>
  70. </div>
  71. </div>
  72. <div v-show="loading" class="loading">
  73. <span class="fa fa-spinner"></span>
  74. </div>
  75. <div v-if="loadend && where.page > 2" class="loaded">已全部加载</div>
  76. <div v-if="!specialList.length && !loading">
  77. <img class="nothing" src="/wap/first/zsff/images/no_data_available.png">
  78. </div>
  79. <quick-menu></quick-menu>
  80. </div>
  81. {/block}
  82. {block name="foot"}
  83. <script>
  84. require(['vue', 'helper', 'store', '{__WAP_PATH}zsff/js/quick.js'], function (Vue, $h, app) {
  85. new Vue({
  86. el: '#app',
  87. data: {
  88. gradeList: [{ name: '全部', id: 0 }],
  89. where: {
  90. grade_id: 0,
  91. page: 1,
  92. limit: 10,
  93. },
  94. specialList: [],
  95. loadend: false,
  96. loading: false
  97. },
  98. watch: {
  99. 'where.grade_id': function (n) {
  100. this.loadend = false;
  101. this.where.page = 1;
  102. this.$set(this, 'specialList', []);
  103. this.getSpecialSpread();
  104. }
  105. },
  106. mounted: function () {
  107. this.get_grade_list();
  108. this.getSpecialSpread();
  109. },
  110. methods: {
  111. goSpreadUrl: function (value) {
  112. return $h.U({ c: 'Spread', a: 'poster_special', q: { special_id: value.id } });
  113. },
  114. get_grade_list: function () {
  115. var that = this;
  116. app.baseGet($h.U({ c: 'Spread', a: 'get_grade_list' }), function (res) {
  117. var list = res.data.data;
  118. var gradeList = $h.SplitArray(list, that.gradeList);
  119. that.$set(that, 'gradeList', gradeList);
  120. that.$nextTick(function () {
  121. $('#wrapper').navbarscroll({
  122. defaultSelect: 0,
  123. scrollerWidth: 5,
  124. fingerClick: 1,
  125. endClickScroll: function (obj) {
  126. that.where.grade_id = obj.data('id');
  127. }
  128. });
  129. })
  130. });
  131. },
  132. getSpecialSpread: function () {
  133. var that = this;
  134. if (that.loadend) return;
  135. if (that.loading) return;
  136. that.loading = true;
  137. app.baseGet($h.U({ c: 'Spread', a: 'getSpecialSpread', q: that.where }), function (res) {
  138. var list = res.data.data.data;
  139. var specialList = $h.SplitArray(list, that.specialList);
  140. that.loadend = list.length < that.where.limit;
  141. that.where.page = res.data.data.page;
  142. that.loading = false;
  143. that.$set(that, 'specialList', specialList);
  144. that.$nextTick(function () {
  145. that.bScrollInit();
  146. });
  147. }, function () {
  148. that.loading = false;
  149. });
  150. },
  151. //滑动底部加载
  152. bScrollInit: function () {
  153. var that = this;
  154. $h.EventUtil.listenTouchDirection(document, function () {
  155. that.loading == false && that.getSpecialSpread();
  156. }, false);
  157. }
  158. }
  159. });
  160. })
  161. </script>
  162. {/block}