list2detail-list.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <template>
  2. <view>
  3. <view class="banner" @click="goDetail(banner)">
  4. <image class="banner-img" :src="banner.cover"></image>
  5. <view class="banner-title">{{ banner.title }}</view>
  6. </view>
  7. <view class="uni-list">
  8. <block v-for="(value, index) in listData" :key="index">
  9. <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
  10. <view class="uni-media-list">
  11. <image class="uni-media-list-logo" :src="value.cover"></image>
  12. <view class="uni-media-list-body">
  13. <view class="uni-media-list-text-top">{{ value.title }}</view>
  14. <view class="uni-media-list-text-bottom">
  15. <text>{{ value.author_name }}</text>
  16. <text>{{ value.published_at }}</text>
  17. </view>
  18. </view>
  19. </view>
  20. </view>
  21. <!-- #ifdef APP-PLUS -->
  22. <view class="ad-view" v-if="(index > 0 && (index+1) % 10 == 0)">
  23. <ad :adpid="adpid" @error="aderror"></ad>
  24. </view>
  25. <!-- #endif -->
  26. </block>
  27. </view>
  28. <uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
  29. </view>
  30. </template>
  31. <script>
  32. import { dateUtils } from '../../../common/util.js';
  33. export default {
  34. data() {
  35. return {
  36. banner: {},
  37. listData: [],
  38. last_id: '',
  39. reload: false,
  40. status: 'more',
  41. adpid: '',
  42. contentText: {
  43. contentdown: '上拉加载更多',
  44. contentrefresh: '加载中',
  45. contentnomore: '没有更多'
  46. }
  47. };
  48. },
  49. onLoad() {
  50. this.adpid = this.$adpid;
  51. this.getBanner();
  52. this.getList();
  53. },
  54. onPullDownRefresh() {
  55. this.reload = true;
  56. this.last_id = '';
  57. this.getBanner();
  58. this.getList();
  59. },
  60. onReachBottom() {
  61. this.status = 'more';
  62. this.getList();
  63. },
  64. methods: {
  65. getBanner() {
  66. let data = {
  67. column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
  68. };
  69. uni.request({
  70. url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
  71. data: data,
  72. success: data => {
  73. uni.stopPullDownRefresh();
  74. if (data.statusCode == 200) {
  75. this.banner = data.data;
  76. }
  77. },
  78. fail: (data, code) => {
  79. console.log('fail' + JSON.stringify(data));
  80. }
  81. });
  82. },
  83. getList() {
  84. var data = {
  85. column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
  86. };
  87. if (this.last_id) {
  88. //说明已有数据,目前处于上拉加载
  89. this.status = 'loading';
  90. data.minId = this.last_id;
  91. data.time = new Date().getTime() + '';
  92. data.pageSize = 10;
  93. }
  94. uni.request({
  95. url: 'https://unidemo.dcloud.net.cn/api/news',
  96. data: data,
  97. success: data => {
  98. if (data.statusCode == 200) {
  99. let list = this.setTime(data.data);
  100. this.listData = this.reload ? list : this.listData.concat(list);
  101. this.last_id = list[list.length - 1].id;
  102. this.reload = false;
  103. }
  104. },
  105. fail: (data, code) => {
  106. console.log('fail' + JSON.stringify(data));
  107. }
  108. });
  109. },
  110. goDetail: function(e) {
  111. // if (!/前|刚刚/.test(e.published_at)) {
  112. // e.published_at = dateUtils.format(e.published_at);
  113. // }
  114. let detail = {
  115. author_name: e.author_name,
  116. cover: e.cover,
  117. id: e.id,
  118. post_id: e.post_id,
  119. published_at: e.published_at,
  120. title: e.title
  121. };
  122. uni.navigateTo({
  123. url: '../list2detail-detail/list2detail-detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
  124. });
  125. },
  126. setTime: function(items) {
  127. var newItems = [];
  128. items.forEach(e => {
  129. newItems.push({
  130. author_name: e.author_name,
  131. cover: e.cover,
  132. id: e.id,
  133. post_id: e.post_id,
  134. published_at: dateUtils.format(e.published_at),
  135. title: e.title
  136. });
  137. });
  138. return newItems;
  139. },
  140. aderror(e) {
  141. console.log("aderror: " + JSON.stringify(e.detail));
  142. }
  143. }
  144. };
  145. </script>
  146. <style>
  147. .banner {
  148. height: 360rpx;
  149. overflow: hidden;
  150. position: relative;
  151. background-color: #ccc;
  152. }
  153. .banner-img {
  154. width: 100%;
  155. }
  156. .banner-title {
  157. max-height: 84rpx;
  158. overflow: hidden;
  159. position: absolute;
  160. left: 30rpx;
  161. bottom: 30rpx;
  162. width: 90%;
  163. font-size: 32rpx;
  164. font-weight: 400;
  165. line-height: 42rpx;
  166. color: white;
  167. z-index: 11;
  168. }
  169. .uni-media-list-logo {
  170. width: 180rpx;
  171. height: 140rpx;
  172. }
  173. .uni-media-list-body {
  174. height: auto;
  175. justify-content: space-around;
  176. }
  177. .uni-media-list-text-top {
  178. height: 74rpx;
  179. font-size: 28rpx;
  180. overflow: hidden;
  181. }
  182. .uni-media-list-text-bottom {
  183. display: flex;
  184. flex-direction: row;
  185. justify-content: space-between;
  186. }
  187. </style>