collect.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <view class="">
  3. <navbar :config="config" backColor="#999999"></navbar>
  4. <view class="content-box">
  5. <view class="card-box">
  6. <!-- <block v-for="item in dataList">
  7. <discovery :data-val="item" idName="collectSourceId" />
  8. </block> -->
  9. <u-waterfall v-model="dataList">
  10. <template v-slot:left="{leftList}">
  11. <view class="card-left-item" v-for="(item, index) in leftList" :key="`left_${index}`">
  12. <discovery :data-val="item" idName="collectSourceId"/>
  13. </view>
  14. </template>
  15. <template v-slot:right="{rightList}">
  16. <view class="card-right-item" v-for="(item, index) in rightList" :key="`right_${index}`">
  17. <discovery :data-val="item" idName="collectSourceId" />
  18. </view>
  19. </template>
  20. </u-waterfall>
  21. </view>
  22. <loadMore v-if="dataList.length > 0 || loadingStatus === 'loading' " :status="loadingStatus">
  23. </loadMore>
  24. <view class="empty-data" v-if="(!dataList || dataList.length===0) && loadingStatus=== 'noMore' ">
  25. <EmptyDate />
  26. </view>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. import Mixin from "./Mixin.js"
  32. import {
  33. getUserCollectList
  34. } from "@/api/government.js"
  35. export default {
  36. mixins: [Mixin],
  37. data() {
  38. return {
  39. config: {
  40. back: true,
  41. title: '收藏',
  42. color: 'black',
  43. backgroundColor: [1, '#fff'],
  44. statusBarFontColor: 'black'
  45. },
  46. dataList: [],
  47. pageNum: 0,
  48. pageSize: 10,
  49. loadingStatus: ''
  50. }
  51. },
  52. onLoad() {
  53. this.init();
  54. },
  55. onReachBottom() {
  56. if (this.loadingStatus === "more") {
  57. this.getUserCollect();
  58. }
  59. },
  60. onPullDownRefresh() {
  61. this.init();
  62. },
  63. methods: {
  64. init() {
  65. this.dataList = [];
  66. this.pageNum = 0;
  67. this.pageSize = 10;
  68. this.loadingStatus = '';
  69. this.getUserCollect();
  70. },
  71. getUserCollect() {
  72. if (this.loadingStatus === 'noMore' || this.loadingStatus === 'loading') return
  73. this.loadingStatus = 'loading';
  74. this.pageNum++;
  75. getUserCollectList({
  76. pageNum: this.pageNum,
  77. pageSize: this.pageSize,
  78. collectType: 0
  79. }).then(res => {
  80. if (res.code === 200) {
  81. this.dataList = this.dataList.concat(res.rows || []);
  82. };
  83. this.setLoadingStatus(this.$mUtil.pagination(res.total, this.pageNum, this.pageSize))
  84. }).catch(err => {
  85. this.setLoadingStatus("noMore")
  86. })
  87. },
  88. setLoadingStatus(status) {
  89. setTimeout(() => {
  90. this.loadingStatus = status
  91. }, 300)
  92. }
  93. }
  94. }
  95. </script>
  96. <style>
  97. page {
  98. background-color: #F9F9F9;
  99. }
  100. </style>
  101. <style lang="scss" scoped>
  102. .content-box {
  103. // padding: 30rpx;
  104. .card-box {
  105. padding: 0 20rpx;
  106. /deep/ .u-column{
  107. width: 50%;
  108. }
  109. // display: flex;
  110. // flex-direction: row;
  111. // justify-content: space-between;
  112. // align-items: stretch;
  113. // flex-wrap: wrap;
  114. .card-left-item {
  115. padding-right: 10rpx;
  116. }
  117. .card-right-item {
  118. padding-left: 10rpx;
  119. }
  120. }
  121. .empty-data {
  122. padding-top: 80rpx;
  123. }
  124. }
  125. </style>