ktadmin.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <view class="content">
  3. <scroll-view scroll-y="true" class="list-wrap" :style="{'height': maxheight}">
  4. <view class="user-item flex">
  5. <image src="" mode="" class="item-logo"></image>
  6. <view class="item-info flex">
  7. <view class="info-name">
  8. 李丹丹 13523025369
  9. </view>
  10. <view class="info-address">
  11. 椒江区东海大道400号
  12. </view>
  13. <view class="info-t">
  14. 空桶型号:小瓶330ML
  15. </view>
  16. <view class="info-info flex">
  17. <view class="">
  18. 押桶:<text>0</text>
  19. </view>
  20. <view class="">
  21. 押金:<text>0</text>元
  22. </view>
  23. <view class="">
  24. 借桶:<text>0</text>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </scroll-view>
  30. </view>
  31. </template>
  32. <script>
  33. import {
  34. getUserList
  35. } from "@/api/user.js"
  36. export default {
  37. data() {
  38. return {
  39. maxheight: '',
  40. };
  41. },
  42. onLoad(opt) {
  43. this.getUserList()
  44. },
  45. onShow() {
  46. },
  47. onReady(res) {
  48. var that = this;
  49. uni.getSystemInfo({
  50. success: resu => {
  51. const query = uni.createSelectorQuery();
  52. query.select('.list-wrap').boundingClientRect();
  53. query.exec(function(res) {
  54. that.maxheight = resu.windowHeight - res[0].top + 'px';
  55. });
  56. },
  57. fail: res => {}
  58. });
  59. },
  60. onReachBottom() {
  61. },
  62. methods: {
  63. getUserList() {
  64. getUserList().then(res => {
  65. console.log(res);
  66. })
  67. }
  68. }
  69. };
  70. </script>
  71. <style lang="scss" scoped>
  72. .user-item {
  73. width: 750rpx;
  74. height: 277rpx;
  75. align-items: flex-start;
  76. padding: 42rpx 35rpx;
  77. background-color: #fff;
  78. margin-bottom: 15rpx;
  79. .item-logo {
  80. width: 115rpx;
  81. height: 115rpx;
  82. border-radius: 50%;
  83. background-color: #eee;
  84. flex-shrink: 0;
  85. margin-right: 24rpx;
  86. }
  87. .item-info {
  88. flex-grow: 1;
  89. height: 100%;
  90. flex-direction: column;
  91. align-items: flex-start;
  92. justify-content: space-between;
  93. .info-name {
  94. font-size: 34rpx;
  95. font-weight: bold;
  96. color: #333333;
  97. }
  98. .info-address {
  99. font-size: 28rpx;
  100. font-weight: 500;
  101. color: #333333;
  102. }
  103. .info-t {
  104. font-size: 26rpx;
  105. font-weight: 500;
  106. color: #333333;
  107. }
  108. .info-info {
  109. width: 100%;
  110. font-size: 30rpx;
  111. font-weight: bold;
  112. color: #333333;
  113. text {
  114. color: #FF4C4C;
  115. }
  116. }
  117. }
  118. }
  119. </style>