notice.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <view clas="notice">
  3. <view class="notice-item" v-for="item in announceList" :key="item.id">
  4. <text class="time">{{ item.created_at | time }}</text>
  5. <view
  6. class="content"
  7. @tap="navTo(`/pages/index/notice/detail?id=${item.id}`)"
  8. >
  9. <text class="title">{{ item.title }}</text>
  10. <view class="img-wrapper" v-if="item.cover">
  11. <rf-image
  12. class="pic"
  13. :preview="false"
  14. :mode="'aspectFit'"
  15. :src="item.cover"
  16. ></rf-image>
  17. </view>
  18. <text class="introduce" v-if="item.synopsis">
  19. {{ item.synopsis }}
  20. </text>
  21. <view class="bot b-t">
  22. <text>查看详情</text>
  23. <i class="more-icon iconfont iconyou"></i>
  24. </view>
  25. </view>
  26. </view>
  27. <rf-load-more
  28. class="load-more"
  29. :status="loadingType"
  30. v-if="announceList.length > 0"
  31. ></rf-load-more>
  32. <!--加载动画-->
  33. <!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
  34. </view>
  35. </template>
  36. <script>
  37. import { notifyAnnounceIndex } from '@/api/basic';
  38. import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
  39. import moment from '@/common/moment';
  40. export default {
  41. components: { rfLoadMore },
  42. data() {
  43. return {
  44. announceList: [], // 公告列表
  45. loadingType: 'more',
  46. loading: true,
  47. page: 1
  48. };
  49. },
  50. filters: {
  51. // 时间格式化
  52. time(val) {
  53. return moment(val * 1000).format('YYYY-MM-DD HH:mm');
  54. }
  55. },
  56. // 加载更多
  57. onReachBottom() {
  58. if (this.loadingType === 'nomore') return;
  59. this.page++;
  60. this.getNotifyAnnounceIndex();
  61. },
  62. onLoad() {
  63. this.initData();
  64. },
  65. methods: {
  66. // 数据初始化
  67. initData() {
  68. this.getNotifyAnnounceIndex();
  69. },
  70. // 获取通知列表
  71. async getNotifyAnnounceIndex(type) {
  72. await this.$http
  73. .get(`${notifyAnnounceIndex}`, { page: this.page })
  74. .then(r => {
  75. this.loading = false;
  76. if (type === 'refresh') {
  77. uni.stopPullDownRefresh();
  78. }
  79. this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
  80. this.announceList = [...this.announceList, ...r.data];
  81. })
  82. .catch(() => {
  83. if (type === 'refresh') {
  84. uni.stopPullDownRefresh();
  85. }
  86. this.loading = false;
  87. });
  88. },
  89. navTo(route) {
  90. this.$mRouter.push({ route });
  91. }
  92. }
  93. };
  94. </script>
  95. <style lang="scss">
  96. page {
  97. background-color: $page-color-base;
  98. padding-bottom: 30upx;
  99. }
  100. .notice-item {
  101. display: flex;
  102. flex-direction: column;
  103. align-items: center;
  104. }
  105. .time {
  106. display: flex;
  107. align-items: center;
  108. justify-content: center;
  109. height: 80upx;
  110. padding-top: 10upx;
  111. font-size: 26upx;
  112. color: #7d7d7d;
  113. }
  114. .content {
  115. width: 710upx;
  116. padding: 0 24upx;
  117. background-color: #fff;
  118. border-radius: 4upx;
  119. }
  120. .title {
  121. display: flex;
  122. align-items: center;
  123. height: 90upx;
  124. font-size: 32upx;
  125. color: #303133;
  126. }
  127. .img-wrapper {
  128. width: 100%;
  129. height: 260upx;
  130. position: relative;
  131. }
  132. .pic {
  133. display: block;
  134. width: 100%;
  135. height: 100%;
  136. border-radius: 6upx;
  137. }
  138. .cover {
  139. display: flex;
  140. justify-content: center;
  141. align-items: center;
  142. position: absolute;
  143. left: 0;
  144. top: 0;
  145. width: 100%;
  146. height: 100%;
  147. background-color: rgba(0, 0, 0, 0.5);
  148. font-size: 36upx;
  149. color: #fff;
  150. }
  151. .introduce {
  152. display: inline-block;
  153. padding: 16upx 0;
  154. font-size: 28upx;
  155. color: #606266;
  156. line-height: 38upx;
  157. }
  158. .bot {
  159. display: flex;
  160. align-items: center;
  161. justify-content: space-between;
  162. height: 80upx;
  163. font-size: 24upx;
  164. color: #707070;
  165. position: relative;
  166. }
  167. .more-icon {
  168. font-size: 32upx;
  169. }
  170. </style>