team.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <!-- 页面 -->
  2. <template>
  3. <s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
  4. <view
  5. class="header-box"
  6. :style="[
  7. {
  8. marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
  9. paddingTop: Number(statusBarHeight + 108) + 'rpx',
  10. },
  11. ]"
  12. >
  13. <!-- 推荐人 -->
  14. <view v-if="userInfo.parent_user" class="referrer-box ss-flex ss-col-center">
  15. 推荐人:
  16. <image
  17. class="referrer-avatar ss-m-r-10"
  18. :src="sheep.$url.cdn(userInfo.parent_user.avatar)"
  19. mode="aspectFill"
  20. >
  21. </image>
  22. {{ userInfo.parent_user.nickname }}
  23. </view>
  24. <!-- 团队数据总览 -->
  25. <view class="team-data-box ss-flex ss-col-center ss-row-between">
  26. <view class="data-card">
  27. <view class="total-item">
  28. <view class="item-title">团队总人数(人)</view>
  29. <view class="total-num">{{ agentInfo.child_user_count_all || 0 }}</view>
  30. </view>
  31. <view class="category-item ss-flex">
  32. <view class="ss-flex-1">
  33. <view class="item-title">一级成员</view>
  34. <view class="category-num">{{ agentInfo.child_user_count_1 || 0 }}</view>
  35. </view>
  36. <view class="ss-flex-1">
  37. <view class="item-title">二级成员</view>
  38. <view class="category-num">{{ agentInfo.child_user_count_2 || 0 }}</view>
  39. </view>
  40. </view>
  41. </view>
  42. <view class="data-card">
  43. <view class="total-item">
  44. <view class="item-title">团队分销商人数(人)</view>
  45. <view class="total-num">{{ agentInfo.child_agent_count_all || 0 }}</view>
  46. </view>
  47. <view class="category-item ss-flex">
  48. <view class="ss-flex-1">
  49. <view class="item-title">一级分销商</view>
  50. <view class="category-num">{{ agentInfo.child_agent_count_1 || 0 }}</view>
  51. </view>
  52. <view class="ss-flex-1">
  53. <view class="item-title">二级分销商</view>
  54. <view class="category-num">{{ agentInfo.child_agent_count_2 || 0 }}</view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. <view class="list-box">
  61. <uni-list :border="false">
  62. <uni-list-chat
  63. v-for="item in state.pagination.data"
  64. :key="item.id"
  65. :avatar-circle="true"
  66. :title="item.nickname"
  67. :avatar="sheep.$url.cdn(item.avatar)"
  68. :note="filterUserNum(item.agent?.child_user_count_1)"
  69. >
  70. <view class="chat-custom-right">
  71. <view v-if="item.agent?.level_info" class="tag-box ss-flex ss-col-center">
  72. <image
  73. class="tag-img"
  74. :src="sheep.$url.cdn(item.agent.level_info.image)"
  75. mode="aspectFill"
  76. >
  77. </image>
  78. <text class="tag-title">{{ item.agent.level_info.name }}</text>
  79. </view>
  80. <text class="time-text">{{ item.create_time }}</text>
  81. </view>
  82. </uni-list-chat>
  83. </uni-list>
  84. </view>
  85. <s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无团队信息">
  86. </s-empty>
  87. </s-layout>
  88. </template>
  89. <script setup>
  90. import sheep from '@/sheep';
  91. import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  92. import { computed, reactive } from 'vue';
  93. import _ from 'lodash';
  94. import { onPageScroll } from '@dcloudio/uni-app';
  95. const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
  96. const agentInfo = computed(() => sheep.$store('user').agentInfo);
  97. const userInfo = computed(() => sheep.$store('user').userInfo);
  98. onPageScroll((e) => {
  99. if (e.scrollTop > 100) {
  100. state.scrollTop = false;
  101. } else {
  102. state.scrollTop = true;
  103. }
  104. });
  105. const state = reactive({
  106. pagination: {
  107. data: [],
  108. current_page: 1,
  109. total: 1,
  110. last_page: 1,
  111. },
  112. loadStatus: '',
  113. });
  114. function filterUserNum(num) {
  115. if (_.isNil(num)) {
  116. return '';
  117. }
  118. return `下级团队${num}人`;
  119. }
  120. async function getTeamList(page = 1, list_rows = 8) {
  121. state.loadStatus = 'loading';
  122. let res = await sheep.$api.commission.team({
  123. list_rows,
  124. page,
  125. });
  126. if (res.error === 0) {
  127. if (page >= 2) {
  128. let orderList = _.concat(state.pagination.data, res.data.data);
  129. state.pagination = {
  130. ...res.data,
  131. data: orderList,
  132. };
  133. } else {
  134. state.pagination = res.data;
  135. }
  136. if (state.pagination.current_page < state.pagination.last_page) {
  137. state.loadStatus = 'more';
  138. } else {
  139. state.loadStatus = 'noMore';
  140. }
  141. }
  142. }
  143. onLoad(async () => {
  144. getTeamList();
  145. });
  146. // 加载更多
  147. function loadmore() {
  148. if (state.loadStatus !== 'noMore') {
  149. getTeamList(state.pagination.current_page + 1);
  150. }
  151. }
  152. // 上拉加载更多
  153. onReachBottom(() => {
  154. loadmore();
  155. });
  156. </script>
  157. <style lang="scss" scoped>
  158. .header-box {
  159. box-sizing: border-box;
  160. padding: 0 20rpx 20rpx 20rpx;
  161. width: 750rpx;
  162. z-index: 3;
  163. position: relative;
  164. background: v-bind("sheep.$url.css('/static/img/shop/user/withdraw_bg.png')") no-repeat,
  165. linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
  166. background-size: 750rpx 100%;
  167. // 团队信息总览
  168. .team-data-box {
  169. .data-card {
  170. width: 305rpx;
  171. background: #ffffff;
  172. border-radius: 20rpx;
  173. padding: 20rpx;
  174. .item-title {
  175. font-size: 22rpx;
  176. font-weight: 500;
  177. color: #999999;
  178. line-height: 30rpx;
  179. margin-bottom: 10rpx;
  180. }
  181. .total-item {
  182. margin-bottom: 30rpx;
  183. }
  184. .total-num {
  185. font-size: 38rpx;
  186. font-weight: 500;
  187. color: #333333;
  188. font-family: OPPOSANS;
  189. }
  190. .category-num {
  191. font-size: 26rpx;
  192. font-weight: 500;
  193. color: #333333;
  194. font-family: OPPOSANS;
  195. }
  196. }
  197. }
  198. }
  199. .list-box {
  200. z-index: 3;
  201. position: relative;
  202. }
  203. .chat-custom-right {
  204. .time-text {
  205. font-size: 22rpx;
  206. font-weight: 400;
  207. color: #999999;
  208. }
  209. .tag-box {
  210. background: rgba(0, 0, 0, 0.2);
  211. border-radius: 21rpx;
  212. line-height: 30rpx;
  213. padding: 5rpx 10rpx;
  214. width: 140rpx;
  215. .tag-img {
  216. width: 34rpx;
  217. height: 34rpx;
  218. margin-right: 6rpx;
  219. border-radius: 50%;
  220. }
  221. .tag-title {
  222. font-size: 18rpx;
  223. font-weight: 500;
  224. color: rgba(255, 255, 255, 1);
  225. line-height: 20rpx;
  226. }
  227. }
  228. }
  229. // 推荐人
  230. .referrer-box {
  231. font-size: 28rpx;
  232. font-weight: 500;
  233. color: #ffffff;
  234. padding: 20rpx;
  235. .referrer-avatar {
  236. width: 34rpx;
  237. height: 34rpx;
  238. border-radius: 50%;
  239. }
  240. }
  241. </style>