myteam.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. <template>
  2. <view class="content">
  3. <view class="content-money">
  4. <view class="money-box">
  5. <view class="bg"><image src="../../static/img/team.png" mode=""></image></view>
  6. <view class="body-title">
  7. <view class="goback-box" @click="toBack"><image class="goback" src="../../static/icon/fanhui.png" mode=""></image></view>
  8. <view class="header">我的团队</view>
  9. </view>
  10. <view>
  11. <view class="money">共<text>{{ all }}</text>人</view>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="navbar">
  16. <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
  17. <text>{{ item.num }}</text>
  18. <text>{{ item.text }}</text>
  19. </view>
  20. </view>
  21. <swiper :current="tabCurrentIndex" :style="{ height: maxheight + 'px' }" class="swiper-box" duration="300" @change="changeTab">
  22. <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
  23. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
  24. <!-- 空白页 -->
  25. <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
  26. <!-- 订单列表 -->
  27. <view v-for="(item, index) in tabItem.orderList" :key="item.uid" class="andr-mt-flex andr-mt-lBox">
  28. <!-- 订单列表 -->
  29. <image :src="item.avatar" class="andr-mt-avatar andr-mt-marR20"></image>
  30. <view class="andr-mt-flex andr-mt-fdC">
  31. <text class="andr-mt-lname">{{ item.nickname }}</text>
  32. <text class="andr-mt-ltime">{{ item.time }}</text>
  33. </view>
  34. </view>
  35. <uni-load-more :status="tabItem.loadingType"></uni-load-more>
  36. </scroll-view>
  37. </swiper-item>
  38. </swiper>
  39. </view>
  40. </template>
  41. <script>
  42. import { spreadPeople } from '@/api/myteam.js';
  43. import { userinfo } from '@/api/user.js';
  44. import { mapState, mapMutations } from 'vuex';
  45. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  46. import empty from '@/components/empty';
  47. export default {
  48. components: {
  49. empty,
  50. uniLoadMore
  51. },
  52. onReady(res) {
  53. var _this = this;
  54. uni.getSystemInfo({
  55. success: resu => {
  56. console.log(resu,'11111');
  57. const query = uni.createSelectorQuery();
  58. query.select('.swiper-box').boundingClientRect();
  59. query.exec(function(res) {
  60. console.log(res, 'ddddddddddddd');
  61. _this.maxheight = resu.windowHeight - res[0].top;
  62. console.log('打印页面的剩余高度', _this.maxheight);
  63. });
  64. },
  65. fail: res => {}
  66. });
  67. },
  68. data() {
  69. return {
  70. userInfo: {},
  71. // 头部图高度
  72. maxheight: '',
  73. tabCurrentIndex: 0,
  74. navList: [
  75. {
  76. state: 0,
  77. text: '一级推广',
  78. loadingType: 'more',
  79. num: 0, //人数
  80. orderList: [],
  81. page: 1, //当前页数
  82. limit: 10 //每次信息条数
  83. },
  84. {
  85. state: 1,
  86. text: '二级推广',
  87. num: 0, //团队人数
  88. loadingType: 'more',
  89. orderList: [],
  90. page: 1, //当前页数
  91. limit: 10 //每次信息条数
  92. }
  93. ],
  94. all: '0'
  95. };
  96. },
  97. onLoad(options) {},
  98. onShow() {
  99. this.loadData();
  100. // 获取用户积分
  101. let obj = this;
  102. userinfo({})
  103. .then(({ data }) => {
  104. console.log(data);
  105. obj.userInfo = data;
  106. })
  107. .catch(e => {});
  108. },
  109. methods: {
  110. // 页面跳转
  111. navto(e) {
  112. uni.navigateTo({
  113. url: e
  114. });
  115. },
  116. //返回上一页面
  117. toBack() {
  118. console.log(111);
  119. uni.navigateBack({});
  120. },
  121. //获取收入支出信息
  122. async loadData(source) {
  123. let obj = this;
  124. //这里是将订单挂载到tab列表下
  125. let index = obj.tabCurrentIndex;
  126. let navItem = obj.navList[index];
  127. let state = navItem.state;
  128. if (source === 'tabChange' && navItem.loaded === true) {
  129. //tab切换只有第一次需要加载数据
  130. return;
  131. }
  132. if (navItem.loadingType === 'loading') {
  133. //防止重复加载
  134. return;
  135. }
  136. // 修改当前对象状态为加载中
  137. navItem.loadingType = 'loading';
  138. spreadPeople({
  139. page: navItem.page,
  140. limit: navItem.limit,
  141. grade: state,
  142. keyword: '',
  143. sort: ''
  144. })
  145. .then(({ data }) => {
  146. obj.navList[0].num = data.total;
  147. obj.navList[1].num = data.totalLevel;
  148. if (data.list.length > 0) {
  149. navItem.orderList = navItem.orderList.concat(data.list);
  150. console.log(navItem.orderList);
  151. navItem.page++;
  152. }
  153. if (navItem.limit == data.list.length) {
  154. //判断是否还有数据, 有改为 more, 没有改为noMore
  155. navItem.loadingType = 'more';
  156. return;
  157. } else {
  158. //判断是否还有数据, 有改为 more, 没有改为noMore
  159. navItem.loadingType = 'noMore';
  160. }
  161. uni.hideLoading();
  162. obj.$set(navItem, 'loaded', true);
  163. })
  164. .catch(e => {
  165. console.log(e);
  166. });
  167. },
  168. //swiper 切换
  169. changeTab(e) {
  170. this.tabCurrentIndex = e.target.current;
  171. this.loadData('tabChange');
  172. },
  173. //顶部tab点击
  174. tabClick(index) {
  175. this.tabCurrentIndex = index;
  176. }
  177. }
  178. };
  179. </script>
  180. <style lang="scss">
  181. page {
  182. background: #ffffff;
  183. height: 100%;
  184. }
  185. .content-money {
  186. background: $page-color-base;
  187. }
  188. .money-box {
  189. background-color: $base-color;
  190. padding-top: var(--status-bar-height);
  191. height: 468rpx;
  192. color: #ffffff;
  193. text-align: center;
  194. justify-content: center;
  195. position: relative;
  196. .body-title {
  197. height: 80rpx;
  198. text-align: center;
  199. font-size: 35rpx;
  200. position: relative;
  201. .header {
  202. position: absolute;
  203. left: 0;
  204. top: 0;
  205. width: 100%;
  206. font-size: 36rpx;
  207. font-family: PingFang SC;
  208. font-weight: bold;
  209. color: #fffeff;
  210. height: 80rpx;
  211. font-size: 32rpx;
  212. font-weight: 700;
  213. z-index: 9;
  214. display: flex;
  215. justify-content: center;
  216. align-items: center;
  217. }
  218. .goback-box {
  219. position: absolute;
  220. z-index: 10;
  221. left: 24rpx;
  222. top: 0;
  223. height: 80rpx;
  224. display: flex;
  225. align-items: center;
  226. }
  227. .goback {
  228. width: 30rpx;
  229. height: 36rpx;
  230. }
  231. }
  232. .bg {
  233. position: absolute;
  234. top: 0;
  235. left: 0;
  236. width: 100%;
  237. height: 100%;
  238. image {
  239. width: 100%;
  240. height: 100%;
  241. }
  242. }
  243. .money {
  244. position: relative;
  245. z-index: 10;
  246. font-size: 36rpx;
  247. height: 388rpx;
  248. line-height: 288rpx;
  249. text{
  250. font-size: 82rpx;
  251. }
  252. }
  253. }
  254. .navbar {
  255. width: 700rpx;
  256. margin: -60rpx auto 0;
  257. display: flex;
  258. height: 120rpx;
  259. padding: 0 5px;
  260. background: #fff;
  261. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  262. position: relative;
  263. z-index: 10;
  264. .nav-item {
  265. flex: 1;
  266. display: flex;
  267. flex-direction: column;
  268. justify-content: center;
  269. align-items: center;
  270. height: 100%;
  271. font-size: 15px;
  272. color: $font-color-dark;
  273. position: relative;
  274. &.current {
  275. color: $base-color;
  276. &:after {
  277. content: '';
  278. position: absolute;
  279. left: 50%;
  280. bottom: 0;
  281. transform: translateX(-50%);
  282. width: 44px;
  283. height: 0;
  284. border-bottom: 2px solid $base-color;
  285. }
  286. }
  287. }
  288. }
  289. // 列表
  290. .swiper-box {
  291. padding-top: 30rpx;
  292. .order-item {
  293. padding: 20rpx 30rpx;
  294. line-height: 1.5;
  295. .title-box {
  296. .title {
  297. font-size: $font-lg;
  298. color: $font-color-base;
  299. }
  300. .time {
  301. font-size: $font-base;
  302. color: $font-color-light;
  303. }
  304. }
  305. .money {
  306. color: #fd5b23;
  307. font-size: $font-lg;
  308. }
  309. }
  310. }
  311. .list-scroll-content {
  312. height: 100%;
  313. }
  314. .content {
  315. height: 100%;
  316. .empty-content {
  317. background-color: #ffffff;
  318. }
  319. }
  320. .andr-mt-avatar {
  321. width: 78rpx;
  322. height: 78rpx;
  323. border-radius: 50rpx;
  324. }
  325. .andr-mt-avatarBd {
  326. border: 2px solid #ffffff;
  327. }
  328. .andr-mt-cname {
  329. font-size: 28rpx;
  330. color: #ffffff;
  331. }
  332. .andr-mt-flex {
  333. display: flex;
  334. }
  335. .andr-mt-lBox {
  336. background-color: #ffffff;
  337. height: 130rpx;
  338. padding: 20rpx 20rpx;
  339. border-bottom: 1px solid #f0f0f0;
  340. }
  341. .andr-mt-marR20 {
  342. margin-right: 20rpx;
  343. }
  344. .andr-mt-fdC {
  345. flex-direction: column;
  346. }
  347. .andr-mt-lname {
  348. font-size: 30rpx;
  349. color: #3f454b;
  350. }
  351. .andr-mt-ltime {
  352. font-size: 22rpx;
  353. color: #999999;
  354. }
  355. </style>