noticeList.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <template>
  2. <view>
  3. <cc-pullScroolView class="pullScrollView" ref="pullScroll" :pullDown="pullDown" :isDownLoading="true">
  4. <view class="notice" v-for="(item,index) in list" :key="index">
  5. <view class="justify-content">
  6. <view class="font-forty">
  7. {{item.noticeTitle}}
  8. </view>
  9. <view class="font-thirty-two black" style="margin: 30rpx 0;">
  10. <rich-text :nodes="item.noticeContent"></rich-text>
  11. </view>
  12. <view class="font-twenty-eight gray">
  13. {{item.createTime}}
  14. </view>
  15. </view>
  16. </view>
  17. </cc-pullScroolView>
  18. <!--
  19. <view v-if="isLoadMore">
  20. <uni-load-more :status="loadStatus"></uni-load-more>
  21. </view>
  22. </view>
  23. </view> -->
  24. </view>
  25. </template>
  26. <script>
  27. // import {
  28. // onPullDownRefresh
  29. // } from '@dcloudio/uni-app' // 下拉刷新
  30. import CCBProjectList from '../../uni_modules/cc-pullScroolView/components/cc-pullScroolView/cc-pullScroolView.vue';
  31. import {
  32. getNoticeList,
  33. } from '@/api/common'
  34. export default {
  35. components: {
  36. CCBProjectList,
  37. },
  38. data() {
  39. return {
  40. list: [],
  41. pageSize: 10, // 条数
  42. totalNum: '',
  43. pageNum: 1, // 页数
  44. }
  45. },
  46. onLoad() {
  47. this.getList()
  48. },
  49. // 上拉加载
  50. onReachBottom() {
  51. // 数据全部加载完
  52. if (this.pageNum * 10 >= this.totalNum) {
  53. } else {
  54. // 显示加载中
  55. this.$refs.pullScroll.showUpLoading();
  56. this.pageNum++;
  57. this.requestData();
  58. }
  59. },
  60. methods: {
  61. goDetails(item) {
  62. uni.navigateTo({
  63. url: '/pages/notice/noticeDetail?params=' + encodeURIComponent(JSON.stringify(
  64. item))
  65. })
  66. },
  67. // 下拉刷新
  68. pullDown(pullScroll) {
  69. this.pageNum = 1;
  70. setTimeout(() => {
  71. this.requestData(pullScroll);
  72. }, 1000);
  73. },
  74. getList() {
  75. let myThis = this;
  76. this.$nextTick(() => {
  77. myThis.$refs.pullScroll.refresh();
  78. });
  79. },
  80. requestData() {
  81. uni.showLoading()
  82. getNoticeList('1', this.pageNum, this.pageSize).then(res => {
  83. this.totalNum = res.total
  84. if (res.code == '200') {
  85. uni.hideLoading()
  86. if (res.rows.length !== 0) {
  87. //首次加载10条数据,后进行拼接
  88. if (this.pageNum == 1) {
  89. this.list = [];
  90. this.list = res.rows
  91. } else {
  92. this.list = this.list.concat(res.rows)
  93. }
  94. // 如果是最后一页
  95. if (this.pageNum * 10 >= this.totalNum) {
  96. this.$refs.pullScroll.finish();
  97. } else {
  98. // 不是最后一页
  99. this.$refs.pullScroll.success();
  100. }
  101. } else {
  102. this.$modal.msg("暂无数据")
  103. }
  104. } else {
  105. this.$modal.msg(res.msg + "")
  106. }
  107. })
  108. }
  109. }
  110. }
  111. </script>
  112. <style lang="scss" scoped>
  113. .container {
  114. display: flex;
  115. margin-left: 10px;
  116. margin-top: 10px;
  117. margin-right: 10px;
  118. align-items: flex-start;
  119. justify-content: space-between;
  120. }
  121. .notice {
  122. margin: 20rpx;
  123. padding: 20rpx;
  124. background: #FFFFFF;
  125. box-shadow: 0rpx 8rpx 17rpx 0rpx rgba(0, 0, 0, 0.04);
  126. border-radius: 10rpx;
  127. }
  128. .text {
  129. border-left: 15rpx solid #3857F3;
  130. padding-left: 20rpx;
  131. }
  132. </style>