partner.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <view class="container">
  3. <navbar :config="config" backColor="#666666"></navbar>
  4. <view class="partner">
  5. <image class="top-bg" :src="imgUrl+'/distribution-top-bg.png'"></image>
  6. <view class="userInfo">
  7. <view class="u-plr30">
  8. <view class="head u-flex-sb">
  9. <view class="u-flex">
  10. <image v-if="accountInfo.head_photo" v-else :src="accountInfo.head_photo"></image>
  11. <image v-else :src="imgUrl+'/head-on.png'" mode=""></image>
  12. <view class="u-ml30 u-mt10">
  13. <view class="u-font30 u-1A1A1A nickname u-text1" >{{accountInfo.nickname}}</view>
  14. <view class="u-mt5 u-02331F u-font24" v-if="accountInfo.role_name != null ">{{accountInfo.role_name}}</view>
  15. </view>
  16. </view>
  17. <view class="u-font24 u-999 u-mt10">直接伙伴:<text class="u-FF0000">{{num}}</text>人 </view>
  18. </view>
  19. </view>
  20. <view class="partner-list">
  21. <image class="partner-bg" :src="imgUrl+'/partner-bg.png'"></image>
  22. <view class="position-ab">
  23. <view v-if="partnerList.length>0">
  24. <view class="item u-plr30" v-for="(item,index) in partnerList" :key="item.id">
  25. <view class="u-flex-sb u-border-one-one pd44">
  26. <image class="u-avatar106" v-if="item.head_photo" :src="item.head_photo"></image>
  27. <image class="u-avatar106" v-else :src="imgUrl+'/head-on.png'"></image>
  28. <view class="u-font24 u-999">
  29. <view class="u-font28 u-1A1A1A ht36 u-text-width">{{item.nickname}}</view>
  30. <view>
  31. <rich-text :nodes="'*******'+$mUtil.cutOut(item.mobile)"></rich-text>
  32. </view>
  33. <view>绑定时间:{{item.register_time}}</view>
  34. </view>
  35. <view class="u-font24 u-FF0000">{{item.role_name}}</view>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="nogoods u-mt30 u-flex-column-center" v-if="partnerList.length==0">
  40. <nodata :config="{top:5,content:'暂无数据~'}"></nodata>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </template>
  48. <script>
  49. export default {
  50. data() {
  51. return {
  52. config: {
  53. back: true, //false是tolbar页面 是则不写
  54. title: '我的伙伴',
  55. color: '#1A1A1A',
  56. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  57. backgroundColor: [1, "#FFFFFF"],
  58. statusBarFontColor: '#1A1A1A'
  59. },
  60. num:0,
  61. partnerList:[],
  62. accountInfo:{},
  63. imgUrl: this.$mConfig.staticUrl
  64. }
  65. },
  66. onLoad() {
  67. //获取用户信息
  68. this.$http.get('/account/getAccountInfo',).then(res => {
  69. if(res&&res.code==200){
  70. this.accountInfo = res.data
  71. }
  72. })
  73. //获取伙伴列表
  74. this.$http.get('/account/myPartner',).then(res => {
  75. if(res&&res.code==200){
  76. this.num = res.num
  77. this.partnerList=res.data
  78. }
  79. })
  80. },
  81. methods: {
  82. }
  83. }
  84. </script>
  85. <style lang="scss">
  86. .nickname{
  87. width: 300rpx;
  88. }
  89. .u-flex-sb {
  90. display: flex;
  91. justify-content: space-between;
  92. }
  93. .ht36{
  94. height: 36rpx;
  95. line-height: 36rpx;
  96. }
  97. .partner {
  98. position: relative;
  99. .top-bg {
  100. width: 100%;
  101. height: 238rpx;
  102. }
  103. .userInfo {
  104. position: absolute;
  105. top: 68rpx;
  106. width: 100%;
  107. .head {
  108. background-color: #FFFAEE;
  109. padding: 40rpx 30rpx 36rpx;
  110. border-radius: 20rpx;
  111. z-index: -1;
  112. image {
  113. width: 106rpx;
  114. height: 106rpx;
  115. border: 4rpx solid #FFFFFF;
  116. border-radius: 50%;
  117. }
  118. }
  119. }
  120. .partner-list {
  121. margin-top: -48rpx;
  122. position: relative;
  123. .partner-bg {
  124. height: 70vh;
  125. width: 100%;
  126. }
  127. .position-ab {
  128. position: absolute;
  129. top: 50rpx;
  130. width: 100%;
  131. }
  132. .pd44 {
  133. padding: 44rpx 0rpx;
  134. }
  135. }
  136. }
  137. </style>