team.vue 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500
  1. <template>
  2. <view class="content">
  3. <view class="content-money">
  4. <view class="status_bar">
  5. <!-- 这里是状态栏 -->
  6. </view>
  7. <view class="body-title">
  8. <view class="goback-box" @click="toBack">
  9. <image class="goback" src="../../static/icon/fanhui.png" mode=""></image>
  10. </view>
  11. <view class="header">我的推广</view>
  12. </view>
  13. <view class="content-bg">
  14. <image src="../../static/img/team-bg.png" mode=""></image>
  15. </view>
  16. <view class="money-box">
  17. <view class="money">{{ all|| '0' }}</view>
  18. <view>我的推广人数</view>
  19. </view>
  20. <!-- <view class="money-box" style="padding-top: 20rpx;" v-if="order*1 > 0">
  21. <view>直推:{{zt_order}}单</view>
  22. <view>间推:{{jt_order}}单</view>
  23. </view> -->
  24. </view>
  25. <!-- <view class="flex buttom-box">
  26. <view class="buttom" @click="tabClick(0)">
  27. <view class="money">{{all || 0}}</view>
  28. <text class="text" :class="{ current: tabCurrentIndex === 0 }">一级推广</text>
  29. </view>
  30. <view class="buttom" @click="tabClick(1)">
  31. <view class="money">{{totalLevel || 0}}</view>
  32. <text class="text" :class="{ current: tabCurrentIndex === 1 }">二级推广</text>
  33. </view>
  34. </view> -->
  35. <swiper :current="tabCurrentIndex" :style="{ height: maxheight }" class="swiper-box" duration="300"
  36. @change="changeTab">
  37. <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
  38. <scroll-view class="list-scroll-content" :style="{ height: maxheight }" scroll-y
  39. @scrolltolower="loadData">
  40. <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
  41. <view v-for="(item, index) in tabItem.orderList" :key="index" class="order-item flex">
  42. <view class="title-box flex_item">
  43. <view class="title-avatar">
  44. <image :src="item.avatar"></image>
  45. </view>
  46. <view class="list_tpl">
  47. <view class="title">
  48. <view class="title-name clamp">{{ item.nickname }}</view>
  49. </view>
  50. <view class="time">
  51. <text>{{ item.time }}</text>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <uni-load-more :status="tabItem.loadingType"></uni-load-more>
  57. </scroll-view>
  58. </swiper-item>
  59. </swiper>
  60. </view>
  61. </template>
  62. <script>
  63. import {
  64. myspread
  65. } from '@/api/user.js';
  66. import empty from '@/components/empty';
  67. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  68. import {
  69. mapState,
  70. mapMutations
  71. } from 'vuex';
  72. export default {
  73. components: {
  74. empty,
  75. uniLoadMore
  76. },
  77. onReady(res) {
  78. var _this = this;
  79. uni.getSystemInfo({
  80. success: resu => {
  81. const query = uni.createSelectorQuery();
  82. query.select('.swiper-box').boundingClientRect();
  83. query.exec(function(res) {
  84. _this.maxheight = resu.windowHeight - res[0].top + 'px';
  85. console.log('打印页面的剩余高度', _this.height);
  86. });
  87. },
  88. fail: res => {}
  89. });
  90. },
  91. data() {
  92. return {
  93. // 头部图高度
  94. maxheight: '',
  95. tabCurrentIndex: 0,
  96. navList: [{
  97. state: 0,
  98. text: '直接推荐',
  99. loadingType: 'more',
  100. orderList: [],
  101. page: 1, //当前页数
  102. limit: 10 //每次信息条数
  103. },
  104. // {
  105. // state: 1,
  106. // text: '间接推荐',
  107. // loadingType: 'more',
  108. // orderList: [],
  109. // page: 1, //当前页数
  110. // limit: 10 //每次信息条数
  111. // }
  112. ],
  113. all: '',
  114. list: '',
  115. totalLevel: '',
  116. order: '',
  117. zt_order: '',
  118. jt_order: ''
  119. };
  120. },
  121. computed: {
  122. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
  123. ...mapState(['baseURL'])
  124. },
  125. onLoad(options) {},
  126. onShow() {
  127. this.loadData();
  128. },
  129. methods: {
  130. // 页面跳转
  131. navto(e) {
  132. uni.navigateTo({
  133. url: e
  134. });
  135. },
  136. //获取收入支出信息
  137. async loadData(source) {
  138. //这里是将订单挂载到tab列表下
  139. let index = this.tabCurrentIndex;
  140. let navItem = this.navList[index];
  141. let state = navItem.state;
  142. if (source === 'tabChange' && navItem.loaded === true) {
  143. //tab切换只有第一次需要加载数据
  144. return;
  145. }
  146. if (navItem.loadingType === 'loading') {
  147. //防止重复加载
  148. return;
  149. }
  150. if (navItem.loadingType === 'noMore') {
  151. //防止重复加载
  152. return;
  153. }
  154. // 修改当前对象状态为加载中
  155. navItem.loadingType = 'loading';
  156. myspread({
  157. page: navItem.page,
  158. limit: navItem.limit,
  159. grade: state,
  160. uid: this.userInfo.uid
  161. })
  162. .then(({
  163. data
  164. }) => {
  165. console.log(data);
  166. this.order = data.order
  167. this.zt_order = data.zt_order
  168. this.jt_order = data.jt_order
  169. this.all = data.total;
  170. this.totalLevel = data.totalLevel
  171. if (data.list.length > 0) {
  172. this.list = data.list;
  173. navItem.orderList = navItem.orderList.concat(data.list);
  174. navItem.page++;
  175. }
  176. this.$nextTick(function() {
  177. if (navItem.limit == data.list.length) {
  178. //判断是否还有数据, 有改为 more, 没有改为noMore
  179. navItem.loadingType = 'more';
  180. return;
  181. } else {
  182. //判断是否还有数据, 有改为 more, 没有改为noMore
  183. navItem.loadingType = 'noMore';
  184. }
  185. });
  186. this.$set(navItem, 'loaded', true);
  187. })
  188. .catch(e => {
  189. console.log(e);
  190. });
  191. },
  192. //swiper 切换
  193. changeTab(e) {
  194. this.tabCurrentIndex = e.target.current;
  195. this.loadData('tabChange');
  196. },
  197. //顶部tab点击
  198. tabClick(index) {
  199. this.tabCurrentIndex = index;
  200. },
  201. // 点击返回 我的页面
  202. toBack() {
  203. uni.switchTab({
  204. url: '/pages/user/user'
  205. });
  206. }
  207. }
  208. };
  209. </script>
  210. <style lang="scss">
  211. page {
  212. background: #f8f8f8;
  213. height: 100%;
  214. }
  215. .status_bar {
  216. height: var(--status-bar-height);
  217. width: 100%;
  218. background: #5dbc7c;
  219. }
  220. .content-money {
  221. position: relative;
  222. height: 480rpx;
  223. .content-bg {
  224. position: absolute;
  225. top: 0;
  226. left: 0;
  227. right: 0;
  228. width: 750rpx;
  229. height: 480rpx;
  230. image {
  231. width: 100%;
  232. height: 100%;
  233. }
  234. }
  235. .body-title {
  236. height: 80rpx;
  237. text-align: center;
  238. font-size: 35rpx;
  239. position: relative;
  240. .header {
  241. position: absolute;
  242. left: 0;
  243. top: 0;
  244. width: 100%;
  245. font-size: 36rpx;
  246. font-family: PingFang SC;
  247. font-weight: bold;
  248. color: #fffeff;
  249. height: 80rpx;
  250. font-size: 36rpx;
  251. font-weight: 700;
  252. z-index: 9;
  253. display: flex;
  254. justify-content: center;
  255. align-items: center;
  256. }
  257. .goback-box {
  258. position: absolute;
  259. left: 18rpx;
  260. top: 0;
  261. height: 80rpx;
  262. display: flex;
  263. align-items: center;
  264. }
  265. .goback {
  266. z-index: 100;
  267. width: 34rpx;
  268. height: 34rpx;
  269. }
  270. }
  271. }
  272. .money-box {
  273. position: relative;
  274. z-index: 2;
  275. padding-top: 90rpx;
  276. color: #ffffff;
  277. text-align: center;
  278. .money {
  279. font-size: 72rpx;
  280. font-family: PingFang SC;
  281. font-weight: bold;
  282. color: #ffffff;
  283. }
  284. .text {
  285. font-size: 30rpx;
  286. }
  287. }
  288. .order-item {
  289. padding: 20rpx 30rpx;
  290. line-height: 1.5;
  291. background-color: #fff;
  292. .title-box {
  293. width: 100%;
  294. .title-avatar {
  295. flex-shrink: 0;
  296. width: 100rpx;
  297. height: 100rpx;
  298. margin-right: 25rpx;
  299. border-radius: 100%;
  300. image {
  301. width: 100%;
  302. height: 100%;
  303. border-radius: 100%;
  304. }
  305. }
  306. .list_tpl {
  307. width: 85%;
  308. .title {
  309. display: flex;
  310. justify-content: flex-start;
  311. font-size: $font-lg;
  312. color: $font-color-base;
  313. overflow: hidden; //超出的文本隐藏
  314. text-overflow: ellipsis; //溢出用省略号显示
  315. white-space: nowrap;
  316. line-height: 1;
  317. text-align: center;
  318. .title-name {
  319. max-width: 40%;
  320. }
  321. .dl {
  322. margin-left: 10rpx;
  323. width: 93rpx;
  324. height: 32rpx;
  325. border-radius: 16rpx;
  326. image {
  327. width: 93rpx;
  328. height: 32rpx;
  329. border-radius: 16rpx;
  330. }
  331. }
  332. .class {
  333. display: inline-block;
  334. margin-left: 10rpx;
  335. padding: 6rpx;
  336. text-align: center;
  337. border: 1px solid #2e58ff;
  338. border-radius: 16rpx;
  339. font-size: 20rpx;
  340. font-family: PingFang SC;
  341. font-weight: 500;
  342. color: #2e58ff;
  343. }
  344. }
  345. .time {
  346. font-size: $font-lg;
  347. color: $font-color-light;
  348. }
  349. }
  350. }
  351. .money {
  352. width: 50%;
  353. text-align: right;
  354. color: #db1935;
  355. font-size: $font-lg;
  356. }
  357. }
  358. .yeji {
  359. position: relative;
  360. margin: -72rpx auto 0;
  361. width: 690rpx;
  362. height: 143rpx;
  363. background: #ffffff;
  364. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
  365. border-radius: 10rpx;
  366. display: flex;
  367. align-items: center;
  368. .yeji-a {
  369. width: 50%;
  370. display: flex;
  371. flex-direction: column;
  372. justify-content: center;
  373. align-items: center;
  374. .yeji-top {
  375. font-size: 28rpx;
  376. font-family: PingFang SC;
  377. font-weight: bold;
  378. color: #333333;
  379. }
  380. .yeji-buttom {
  381. font-size: 42rpx;
  382. font-family: PingFang SC;
  383. font-weight: bold;
  384. color: #333333;
  385. }
  386. }
  387. .border {
  388. width: 1rpx;
  389. height: 51rpx;
  390. background: #dddddd;
  391. }
  392. }
  393. .navbar {
  394. margin-top: 20rpx;
  395. display: flex;
  396. height: 88rpx;
  397. padding: 0 5px;
  398. background: #fff;
  399. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  400. position: relative;
  401. z-index: 10;
  402. .nav-item {
  403. flex: 1;
  404. display: flex;
  405. justify-content: center;
  406. align-items: center;
  407. height: 100%;
  408. font-size: 15px;
  409. color: #999999;
  410. position: relative;
  411. &.current {
  412. color: #000;
  413. &:after {
  414. content: '';
  415. position: absolute;
  416. left: 50%;
  417. bottom: 0;
  418. transform: translateX(-50%);
  419. width: 44px;
  420. height: 0;
  421. border-bottom: 2px solid #fe5b38;
  422. }
  423. }
  424. }
  425. }
  426. .buttom-box {
  427. position: relative;
  428. background-color: #ffffff;
  429. text-align: center;
  430. padding: 30rpx 0;
  431. .buttom {
  432. flex-grow: 1;
  433. }
  434. .money {
  435. font-size: 32rpx;
  436. font-weight: bold;
  437. color: #ff4173;
  438. }
  439. .text {
  440. padding-bottom: 26rpx;
  441. font-size: 28rpx;
  442. font-weight: 500;
  443. color: #666666;
  444. &.current {
  445. border-bottom: 2px solid #ff4173;
  446. }
  447. }
  448. .icon {
  449. height: 50rpx;
  450. width: 48rpx;
  451. margin: 0 auto;
  452. .icon-img {
  453. width: 100%;
  454. height: 100%;
  455. }
  456. }
  457. }
  458. </style>