index.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <view class="list">
  3. <view class="item" v-for="(item, index) in list" :key="index" @click="go('/pages/notice/detail?id=' + item.id)">
  4. <view class="title omit">
  5. <text class="icon" v-if="item.top === 1">&#xe61f;</text>
  6. <text>{{ item.title }}</text>
  7. </view>
  8. <view class="desc">
  9. <text>发布于 {{ item.createTime }}</text>
  10. </view>
  11. </view>
  12. <view class="loading" v-if="loadMore"><u-loadmore :status="loadMore ? 'loading' : 'nomore'" /></view>
  13. <u-empty v-if="!loadMore && list.length == 0"></u-empty>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. list: [],
  21. param: { pageNum: 1, pageSize: 10, type: '小程序通知' },
  22. loadMore: true
  23. };
  24. },
  25. onLoad(e) {
  26. this.getData();
  27. },
  28. methods: {
  29. getData() {
  30. this.http.request({
  31. url: '/app/notice/list',
  32. data: this.param,
  33. loading: 'false',
  34. success: (res) => {
  35. this.loadMore = res.data.pages > this.param.pageNum ? true : false;
  36. res.data.rows.forEach((item) => {
  37. item.createTime = uni.$u.timeFrom(Date.parse(item.createTime));
  38. this.list.push(item);
  39. });
  40. }
  41. });
  42. },
  43. go(url) {
  44. uni.navigateTo({ url: url });
  45. },
  46. //刷新数据
  47. refresh() {
  48. this.loadMore = true;
  49. this.param.pageNum = 1;
  50. this.list = [];
  51. this.getData();
  52. }
  53. },
  54. //下拉刷新
  55. onPullDownRefresh() {
  56. setTimeout(() => {
  57. this.refresh();
  58. uni.stopPullDownRefresh();
  59. }, 1000);
  60. },
  61. //上拉加载
  62. onReachBottom() {
  63. if (this.loadMore) {
  64. this.param.pageNum++;
  65. this.getData();
  66. }
  67. }
  68. };
  69. </script>
  70. <style lang="scss">
  71. .list {
  72. padding: 5px 12px 12px 12px;
  73. .item {
  74. background-color: white;
  75. border-radius: 5px;
  76. padding: 12px;
  77. margin-bottom: 10px;
  78. .title {
  79. font-size: 15px;
  80. font-weight: bold;
  81. .icon {
  82. color: orangered;
  83. padding-right: 3px;
  84. }
  85. }
  86. .desc {
  87. font-size: 14px;
  88. color: $font-c;
  89. padding-top: 7px;
  90. text {
  91. padding-right: 20px;
  92. }
  93. }
  94. }
  95. }
  96. </style>