teamList.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <view class="content">
  3. <empty v-if="list && list.length == 0"></empty>
  4. <view class="" style="background-color: #fff;">
  5. <view class="content-box" v-for="item in list">
  6. <view class="content-box-left">
  7. <view class="left-img">
  8. <image :src="item.avatar" mode=""></image>
  9. </view>
  10. <view class="right-title">
  11. <!-- <view class="top">{{ item.nickname }}</view> -->
  12. <view class="bottom">ID:{{ item.uid }}</view>
  13. <view class="bottom " style="font-size: 24rpx;">手机号:{{ item.phone }}</view>
  14. </view>
  15. </view>
  16. <!-- <view class="content-box-right">
  17. <view class="state">{{ item.zt == 0 ? '间推' : '直推' }}</view>
  18. <view class="box-right">
  19. 参与积分:
  20. <span>{{ item.price }}</span>
  21. </view>
  22. </view> -->
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. import {
  29. myspread,
  30. tuiguang
  31. } from '@/api/user.js';
  32. import empty from '@/components/empty';
  33. import {
  34. mapState,
  35. mapMutations
  36. } from 'vuex';
  37. export default {
  38. components: {
  39. empty
  40. },
  41. data() {
  42. return {
  43. list: [],
  44. key: ''
  45. }
  46. },
  47. computed: {
  48. ...mapState(['wlgsbList']),
  49. },
  50. onLoad(opt) {
  51. this.key = opt.key
  52. },
  53. onShow() {
  54. this.loadData();
  55. },
  56. onReachBottom() {
  57. },
  58. onReady() {
  59. },
  60. methods: {
  61. ...mapMutations(['setSbList']),
  62. //获取收入支出信息
  63. async loadData(source) {
  64. let obj = this
  65. tuiguang().then(res => {
  66. console.log(res, 'data');
  67. obj.setSbList(res.data)
  68. obj.list = res.data[obj.key]
  69. console.log(obj.list, 'ddddd')
  70. });
  71. },
  72. }
  73. }
  74. </script>
  75. <style lang="scss">
  76. .content-box {
  77. display: flex;
  78. justify-content: space-between;
  79. align-items: center;
  80. margin: 30rpx 0;
  81. background-color: #fff;
  82. .content-box-left {
  83. display: flex;
  84. .left-img {
  85. width: 100rpx;
  86. height: 100rpx;
  87. border-radius: 50%;
  88. overflow: hidden;
  89. image {
  90. width: 100%;
  91. height: 100%;
  92. }
  93. }
  94. .right-title {
  95. margin-left: 15rpx;
  96. display: flex;
  97. flex-direction: column;
  98. justify-content: space-around;
  99. .top {
  100. font-weight: 500;
  101. font-size: 30rpx;
  102. }
  103. .bottom {
  104. color: #999999;
  105. }
  106. }
  107. }
  108. .content-box-right {
  109. display: flex;
  110. flex-direction: column;
  111. width: 230rpx;
  112. color: #999999;
  113. .state {
  114. color: red;
  115. }
  116. span {
  117. color: red;
  118. font-size: 28rpx;
  119. }
  120. }
  121. }
  122. </style>