allMiner.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <template>
  2. <view class="container">
  3. <view class="info-box">
  4. <view class="nav flex">
  5. <view class="next" @click="last" v-if="page != 1">
  6. 上一页
  7. </view>
  8. <view class="next" v-else>
  9. 已经是第一页了
  10. </view>
  11. <view class="next" @click="next">
  12. 下一页
  13. </view>
  14. </view>
  15. <view class="list-cell" v-if="list.length > 0">
  16. <view class="cell-name flex">
  17. <view class="title">成员信息</view>
  18. <view class="title-box flex">
  19. <view class="title">等待算力</view>
  20. <view class="title">算力</view>
  21. <view class="title">等级</view>
  22. </view>
  23. </view>
  24. <view class="cell-box flex" v-for="(ls,index) in list" :key='index'>
  25. <view class="cell-tit flex_item">
  26. <image :src="ls.avatar"></image>
  27. <view class="tit-box">
  28. <view class="tit-tpl clamp">{{ls.nickname}}</view>
  29. <view class="tit-tip">{{ls.phone}}</view>
  30. </view>
  31. </view>
  32. <view class="flex num-box">
  33. <view class="num clamp">{{ls.wait_mining}}T</view>
  34. <view class="num clamp">{{ls.mining}}T</view>
  35. <view class="level">V{{ls.level}}</view>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="empty-box" v-show="list.length === 0"><empty></empty></view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. import { miner } from '@/api/finance.js';
  45. import empty from '@/components/empty';
  46. export default {
  47. components: {
  48. empty
  49. },
  50. data() {
  51. return {
  52. loadingType: 'more',
  53. data:'',
  54. list:'',
  55. page: 1,
  56. limit: 5,
  57. };
  58. },
  59. onLoad(option){
  60. this.loadData("add");
  61. },
  62. onShow() {
  63. },
  64. methods: {
  65. // 请求载入数据
  66. async loadData(type = "add",loading) {
  67. let obj = this;
  68. // if (type === 'add'){
  69. // if (obj.loadingType === 'nomore'){
  70. // return;
  71. // }
  72. // obj.loadingType = 'loading';
  73. // }else {
  74. // obj.loadingType = 'more';
  75. // }
  76. miner({
  77. page: obj.page,
  78. limit: obj.limit,
  79. }).then(({ data }) => {
  80. console.log(data);
  81. obj.data = data;
  82. obj.list = data.list;
  83. });
  84. },
  85. next(){
  86. this.page = this.page + 1;
  87. if(this.list.length != this.limit){
  88. this.page = 1;
  89. }
  90. this.loadData();
  91. },
  92. last(){
  93. if(this.page != 1){
  94. this.page = this.page - 1;
  95. }
  96. this.loadData();
  97. }
  98. }
  99. }
  100. </script>
  101. <style lang="scss">
  102. page {
  103. min-height: 100%;
  104. background-color: #ffffff;
  105. .container {
  106. width: 100%;
  107. }
  108. }
  109. .info-box{
  110. .info-name{
  111. padding: 40rpx 0rpx;
  112. .info-cell{
  113. width: 33.33%;
  114. text-align: center;
  115. .cell{
  116. font-size: 38rpx;
  117. font-weight: bold;
  118. color: #333333;
  119. }
  120. .cell-title{
  121. font-size: 26rpx;
  122. font-weight: 500;
  123. color: #999999;
  124. padding-top: 20rpx;
  125. }
  126. }
  127. }
  128. .list-cell{
  129. padding: 10rpx 25rpx;
  130. .cell-name{
  131. padding:50rpx 50rpx;
  132. .title-box{
  133. width: 60%;
  134. }
  135. }
  136. .cell-box{
  137. margin-bottom: 94rpx;
  138. .cell-tit{
  139. width: 40%;
  140. image{
  141. width: 80rpx;
  142. height: 80rpx;
  143. border-radius: 100%;
  144. }
  145. .tit-box{
  146. padding-left: 15rpx;
  147. width: 70%;
  148. .tit-tpl{
  149. font-size: 30rpx;
  150. font-weight: 500;
  151. color: #333333;
  152. }
  153. .tit-tip{
  154. font-size: 24rpx;
  155. font-weight: 500;
  156. color: #999999;
  157. padding-top: 20rpx;
  158. }
  159. }
  160. }
  161. .num-box{
  162. width: 60%;
  163. .num{
  164. width: 33.33%;
  165. text-align: center;
  166. }
  167. .level{
  168. background-color: #FED82F;
  169. border-radius: 25rpx;
  170. padding: 8rpx 50rpx;
  171. font-size: 26rpx;
  172. }
  173. }
  174. }
  175. }
  176. }
  177. .empty-box{
  178. margin-top: 60rpx;
  179. width: 100%;
  180. height: 500rpx;
  181. }
  182. .next{
  183. width: 50%;
  184. text-align: center;
  185. padding: 20rpx;
  186. }
  187. </style>