definite.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view>
  3. <scroll-view class="floor-list" style="height: 95vh;"
  4. :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower"
  5. :refresher-enabled="false">
  6. <view class="money">
  7. <view class="moneysize">{{userinfo.member_points}}</view>
  8. <view>我的圈币</view>
  9. </view>
  10. <van-cell v-for="(item,index) in point_list" :key="index" use-label-slot :title="'圈币来源:'+item.pl_desc" >
  11. <template>
  12. {{item.pl_stage == "payment" ? "-" : "+"}}{{item.pl_points}}
  13. </template>
  14. <template slot="label">
  15. {{item.pl_addtime}}
  16. </template>
  17. </van-cell>
  18. </scroll-view>
  19. <Gobacktop @getop="getop" v-if="isTop" />
  20. </view>
  21. </template>
  22. <script>
  23. import Gobacktop from '@/component/Gobacktop.vue'
  24. export default {
  25. components: {
  26. Gobacktop
  27. },
  28. onReady: function() {
  29. uni.setNavigationBarColor({
  30. frontColor: '#ffffff',
  31. backgroundColor: '#D9332E',
  32. animation: {
  33. duration: 400,
  34. timingFunc: 'easeIn'
  35. }
  36. })
  37. },
  38. data() {
  39. return{
  40. page: 1,
  41. ispull: true,
  42. point_list:[],
  43. userinfo:{},
  44. scrollTop: 0,
  45. isTop: false,
  46. old: {
  47. scrollTop: 0
  48. },
  49. }
  50. },
  51. onLoad() {
  52. this.getuserinfo();
  53. this.getlist();
  54. },
  55. methods:{
  56. // 滚动到顶部
  57. upper(e) {
  58. },
  59. getop() {
  60. // setTimeout( () => {
  61. // uni.pageScrollTo({
  62. // duration:0, //过渡时间必须为0,uniapp bug,否则运行到手机会报错
  63. // scrollTop: 0,
  64. // })
  65. // },300)
  66.    this.scrollTop = this.old.scrollTop
  67.                 this.$nextTick(function(){
  68.                     this.scrollTop=0;
  69.                 });
  70. this.isTop = false;
  71. },
  72. // 滚到底部
  73. lower(e) {
  74. this.page = this.page + 1;
  75. if(this.ispull) {
  76. this.getlist();
  77. }
  78. },
  79. // 滚动时触发
  80. scroll(e) {
  81. if(e.detail.scrollTop > 400) {
  82. this.isTop = true;
  83. }else{ //当距离小于500时显示回到顶部按钮
  84. this.isTop = false;
  85. }
  86. this.old.scrollTop = e.detail.scrollTop
  87. },
  88. getuserinfo() {
  89. this.request({
  90. url:'/v2/member/info',
  91. method:'GET',
  92. success:(res)=>{
  93. let { data } = res.data;
  94. this.userinfo = data;
  95. }
  96. })
  97. },
  98. // 获取圈币明细
  99. getlist() {
  100. this.request({
  101. url: '/v2/member/points',
  102. method: 'post',
  103. data: {
  104. page: this.page,
  105. page_size: 10
  106. },
  107. success: (res) => {
  108. // ispull
  109. let { data } = res.data;
  110. if(data.point_list.length < 10) {
  111. this.ispull = false;
  112. }
  113. this.point_list = this.point_list.concat(data.point_list);
  114. }
  115. })
  116. }
  117. }
  118. }
  119. </script>
  120. <style lang="scss">
  121. .money {
  122. height: 140upx;
  123. color: #fff;
  124. text-align: center;
  125. background-color: #D9332E;
  126. font-size: 28upx;
  127. padding: 20upx 0 40upx 0;
  128. .moneysize {
  129. font-size: 42upx;
  130. padding-top: 25upx;
  131. }
  132. }
  133. </style>