Acontlist.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <view>
  3. <view class="content" v-if="list.length" >
  4. <view class="list_box" v-for="(item,index) in list" :key="index">
  5. <view class="list_left">
  6. <view class="name">{{item.title}}</view>
  7. <view class="data">{{item.createTime}}</view>
  8. </view>
  9. <view class="list_right" style="color: red;" v-if="item.type==2">- {{item.money}}</view>
  10. <view class="list_right" style="color: #33D442;" v-if="item.type==1">+ {{item.money}}</view>
  11. </view>
  12. </view>
  13. <empty v-else></empty>
  14. </view>
  15. </template>
  16. <script>
  17. import empty from '@/components/empty'
  18. export default {
  19. components: {
  20. empty
  21. },
  22. data() {
  23. return {
  24. list: [],
  25. page: 1,
  26. totalCount: 0
  27. }
  28. },
  29. onLoad() {
  30. this.taskData()
  31. },
  32. methods: {
  33. // 获取任务数据
  34. taskData() {
  35. let data = {
  36. classify: 3,
  37. page:this.page,
  38. limit:15
  39. };
  40. this.$Request.getT('/app/userinfo/findMoneyDetails',data).then(res => {
  41. if(res.code==0){
  42. // this.list = res.data.list
  43. if (this.page == 1) {
  44. this.list = res.data.list
  45. } else {
  46. this.list = this.list.concat(res.data.list)
  47. }
  48. this.totalCount = res.data.totalPage
  49. }
  50. console.log('res',res)
  51. uni.stopPullDownRefresh();
  52. });
  53. },
  54. },
  55. // 上拉加载
  56. onReachBottom: function() {
  57. if (this.page < this.totalCount) {
  58. this.page += 1;
  59. this.taskData();
  60. } else {
  61. uni.showToast({
  62. title: '已经最后一页啦',
  63. icon: 'none'
  64. })
  65. }
  66. },
  67. onPullDownRefresh: function() {
  68. this.page = 1;
  69. this.taskData();
  70. },
  71. }
  72. </script>
  73. <style>
  74. body {
  75. background: #F5F5F5;
  76. }
  77. .content {
  78. width: 100%;
  79. background: #FFFFFF;
  80. /* margin-top: 20rpx; */
  81. padding-bottom: 50rpx;
  82. padding-top: 20rpx;
  83. }
  84. .list_box {
  85. width: 90%;
  86. margin: 0 auto;
  87. display: flex;
  88. line-height: 45rpx;
  89. padding-top: 20rpx;
  90. }
  91. .list_left {
  92. flex: 2;
  93. }
  94. .name {
  95. font-size: 26rpx;
  96. color: #333333;
  97. font-weight: bold;
  98. letter-spacing: 2rpx;
  99. }
  100. .data {
  101. color: #999999;
  102. font-size: 24rpx;
  103. }
  104. .list_right {
  105. flex: 1;
  106. display: flex;
  107. justify-content: flex-end;
  108. align-items: center;
  109. font-size: 31rpx;
  110. }
  111. </style>