fund.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <template>
  2. <view>
  3. <navbar v-model="screenHeight" :scroll="scrollNum" :iSimmersive="false" :placeholder="true" title="资金明细"></navbar>
  4. <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :height="screenHeight+'px'">
  5. <view class="list-wrap clear">
  6. <view class="list-box clear">
  7. <view class="list-item clear" v-for="(item, index) in result" :key="index">
  8. <view class="t">
  9. <view>{{item.action}}</view>
  10. <view></view>
  11. </view>
  12. <view class="box clear">
  13. <view class="box-item">
  14. <view><text class="icon iconfont">&#xe619;</text>申请时间</view>
  15. <view>{{item.time}}</view>
  16. </view>
  17. <view class="box-item">
  18. <view><text class="icon iconfont">&#xe610;</text>操作状态</view>
  19. <view>{{item.operation}}¥{{item.amount}}</view>
  20. </view>
  21. <view class="box-item clear" v-if="item.description">{{item.description}}</view>
  22. </view>
  23. </view>
  24. </view>
  25. </view>
  26. </mescroll-body>
  27. </view>
  28. </template>
  29. <script>
  30. import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  31. import navbar from "@/components/navbar/navbar";
  32. export default {
  33. mixins: [MescrollMixin],
  34. components: {
  35. navbar
  36. },
  37. data() {
  38. return {
  39. screenHeight: 0,
  40. scrollNum: 0,
  41. result: []
  42. };
  43. },
  44. onPageScroll(obj){
  45. this.scrollNum = obj.scrollTop;
  46. },
  47. methods: {
  48. downCallback(){
  49. setTimeout(()=>{
  50. this.mescroll.resetUpScroll();
  51. },1200);
  52. },
  53. triggerDownScroll(){
  54. this.mescroll.triggerDownScroll();
  55. },
  56. upCallback(page) {
  57. this.$http.getWalletFund({
  58. page: page.num
  59. }).then((result)=>{
  60. this.mescroll.endByPage(result.data.list.length, result.data.total);
  61. if(result.status==1){
  62. if(page.num == 1) this.result = [];
  63. this.result = this.result.concat(result.data.list);
  64. }else if(result.status == -1){
  65. this.mescroll.endErr();
  66. }
  67. }).catch(error=>{
  68. this.mescroll.endErr();
  69. });
  70. }
  71. }
  72. }
  73. </script>
  74. <style lang="scss" scoped>
  75. .list-wrap{
  76. width: 100%;
  77. margin-top: 20rpx;
  78. .list-item{
  79. width: 100%;
  80. height: auto !important;
  81. height: 220rpx;
  82. min-height: 220rpx;
  83. background-color: #fff;
  84. font-size: 26rpx;
  85. margin-bottom: 20rpx;
  86. .t {
  87. height: 80rpx;
  88. line-height: 80rpx;
  89. border-bottom: 2rpx solid #ebebeb;
  90. view { display:inline-block; font-size: 32rpx; color: #333; }
  91. view:first-child {
  92. padding-left: 32rpx; float: left;
  93. }
  94. view:last-child {
  95. padding-right: 32rpx; float: right;
  96. }
  97. }
  98. .box {
  99. height: auto !important;
  100. height: 136rpx;
  101. min-height: 136rpx;
  102. width: 100%;
  103. .box-item {
  104. width: 100%;
  105. height: 32rpx;
  106. float: left;
  107. font-size: 28rpx; color: #888;
  108. padding-top: 20rpx;
  109. view {
  110. display: inline-block;
  111. text { padding-right: 10rpx; position: relative; top: 2rpx; }
  112. }
  113. view:first-child { padding-left: 32rpx; float: left; }
  114. view:last-child { padding-right: 32rpx; float: right; }
  115. &:nth-child(3) {
  116. width: 90%;
  117. padding: 20rpx 32rpx;
  118. height: auto !important;
  119. height: 60rpx;
  120. min-height: 60rpx;
  121. font-size: 26rpx;
  122. }
  123. }
  124. }
  125. }
  126. }
  127. </style>