allMiner.vue 4.1 KB

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