team.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  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/promotion-bg.png" mode=""></image>
  15. </view>
  16. <view class="money-box">
  17. <view class="money">{{ navList.count||0 }}</view>
  18. <view>我的推广人数</view>
  19. </view>
  20. </view>
  21. <view class="info-box flex">
  22. <view class="info-item">
  23. <view class="info-font">参与人数</view>
  24. <view class="info-num">{{navList.count||0}}</view>
  25. </view>
  26. <view class="shu"></view>
  27. <view class="info-item">
  28. <view class="info-font">累计参与积分</view>
  29. <view class="info-num">{{navList.user_price||0}}</view>
  30. </view>
  31. </view>
  32. <view class="content-box" v-for="item in navList.user_list">
  33. <view class="content-box-left">
  34. <view class="left-img">
  35. <image :src="item.avatar" mode=""></image>
  36. </view>
  37. <view class="right-title">
  38. <view class="top">
  39. {{item.nickname}}
  40. </view>
  41. <view class="bottom">
  42. ID:{{item.uid}}
  43. </view>
  44. <view class="bottom " style="font-size: 24rpx;">
  45. 手机号:{{item.phone}}
  46. </view>
  47. </view>
  48. </view>
  49. <view class="content-box-right">
  50. <view class="state">
  51. {{item.zt==0?'间推':'直推'}}
  52. </view>
  53. <view class="box-right">
  54. 参与积分:<span>{{item.price}}</span>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. import {
  62. myspread,tuiguang
  63. } from '@/api/user.js';
  64. import {
  65. mapState,
  66. mapMutations
  67. } from 'vuex';
  68. export default {
  69. onReady(res) {
  70. var _this = this;
  71. uni.getSystemInfo({
  72. success: resu => {
  73. const query = uni.createSelectorQuery();
  74. query.select('.swiper-box').boundingClientRect();
  75. query.exec(function(res) {
  76. _this.maxheight = resu.windowHeight - res[0].top + 'px';
  77. console.log('打印页面的剩余高度', _this.height);
  78. });
  79. },
  80. fail: res => {}
  81. });
  82. },
  83. data() {
  84. return {
  85. // 头部图高度
  86. maxheight: '',
  87. tabCurrentIndex: 0,
  88. navList: [{
  89. state: 0,
  90. text: '直接推荐',
  91. loadingType: 'more',
  92. orderList: [],
  93. page: 1, //当前页数
  94. limit: 10 //每次信息条数
  95. }],
  96. all: '',
  97. list: '',
  98. };
  99. },
  100. computed: {
  101. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
  102. getPhone(){
  103. let reg=/(\d{3})\d{4}(\d{4})/;
  104. this.navList.user_list.forEach(e=>{
  105. return e.phone.replace(reg, "$1****$2")
  106. console.log(e.phone.replace(reg, "$1****$2"));
  107. })
  108. }
  109. },
  110. onLoad(options) {},
  111. onShow() {
  112. this.loadData();
  113. },
  114. methods: {
  115. // 页面跳转
  116. navto(e) {
  117. uni.navigateTo({
  118. url: e
  119. });
  120. },
  121. //获取收入支出信息
  122. async loadData(source) {
  123. tuiguang().then(res=>{
  124. console.log(res,'data');
  125. this.navList = res.data
  126. })
  127. },
  128. // 点击返回 我的页面
  129. toBack() {
  130. uni.switchTab({
  131. url: '/pages/user/user'
  132. });
  133. }
  134. }
  135. };
  136. </script>
  137. <style lang="scss">
  138. page {
  139. background: #f8f8f8;
  140. height: 100%;
  141. }
  142. .info-box {
  143. width: 670rpx;
  144. height: 186rpx;
  145. background: #ffffff;
  146. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  147. border-radius: 20rpx;
  148. margin: -100rpx auto 0;
  149. position: relative;
  150. z-index: 2;
  151. .info-item {
  152. width: 50%;
  153. display: flex;
  154. flex-direction: column;
  155. align-items: center;
  156. line-height: 1;
  157. .info-font {
  158. font-size: 30rpx;
  159. font-family: PingFang SC;
  160. font-weight: bold;
  161. color: #999999;
  162. }
  163. .info-num {
  164. margin-top: 30rpx;
  165. font-size: 30rpx;
  166. font-family: PingFang SC;
  167. font-weight: bold;
  168. color: #181818;
  169. }
  170. }
  171. .shu {
  172. width: 2rpx;
  173. height: 74rpx;
  174. background: #dcdfe6;
  175. }
  176. }
  177. .status_bar {
  178. height: var(--status-bar-height);
  179. width: 100%;
  180. background: #5dbc7c;
  181. }
  182. .content-money {
  183. position: relative;
  184. height: 480rpx;
  185. .content-bg {
  186. position: absolute;
  187. top: 0;
  188. left: 0;
  189. right: 0;
  190. width: 750rpx;
  191. height: 480rpx;
  192. image {
  193. width: 100%;
  194. height: 100%;
  195. }
  196. }
  197. .body-title {
  198. height: 80rpx;
  199. text-align: center;
  200. font-size: 35rpx;
  201. position: relative;
  202. .header {
  203. position: absolute;
  204. left: 0;
  205. top: 0;
  206. width: 100%;
  207. font-size: 36rpx;
  208. font-family: PingFang SC;
  209. font-weight: bold;
  210. color: #fffeff;
  211. height: 80rpx;
  212. font-size: 36rpx;
  213. font-weight: 700;
  214. z-index: 9;
  215. display: flex;
  216. justify-content: center;
  217. align-items: center;
  218. }
  219. .goback-box {
  220. position: absolute;
  221. left: 18rpx;
  222. top: 0;
  223. height: 80rpx;
  224. display: flex;
  225. align-items: center;
  226. }
  227. .goback {
  228. z-index: 100;
  229. width: 34rpx;
  230. height: 34rpx;
  231. }
  232. }
  233. }
  234. .money-box {
  235. position: relative;
  236. z-index: 2;
  237. padding-top: 90rpx;
  238. color: #ffffff;
  239. text-align: center;
  240. .money {
  241. font-size: 72rpx;
  242. font-family: PingFang SC;
  243. font-weight: bold;
  244. color: #ffffff;
  245. }
  246. .text {
  247. font-size: 30rpx;
  248. }
  249. }
  250. .order-item {
  251. padding: 20rpx 30rpx;
  252. line-height: 1.5;
  253. .title-box {
  254. width: 100%;
  255. .title-avatar {
  256. flex-shrink: 0;
  257. width: 100rpx;
  258. height: 100rpx;
  259. margin-right: 25rpx;
  260. border-radius: 100%;
  261. image {
  262. width: 100%;
  263. height: 100%;
  264. border-radius: 100%;
  265. }
  266. }
  267. .list_tpl {
  268. width: 85%;
  269. .title {
  270. display: flex;
  271. justify-content: flex-start;
  272. font-size: $font-lg;
  273. color: $font-color-base;
  274. overflow: hidden; //超出的文本隐藏
  275. text-overflow: ellipsis; //溢出用省略号显示
  276. white-space: nowrap;
  277. line-height: 1;
  278. text-align: center;
  279. .title-name {
  280. max-width: 40%;
  281. }
  282. .dl {
  283. margin-left: 10rpx;
  284. width: 93rpx;
  285. height: 32rpx;
  286. border-radius: 16rpx;
  287. image {
  288. width: 93rpx;
  289. height: 32rpx;
  290. border-radius: 16rpx;
  291. }
  292. }
  293. .class {
  294. display: inline-block;
  295. margin-left: 10rpx;
  296. padding: 6rpx;
  297. text-align: center;
  298. border: 1px solid #2e58ff;
  299. border-radius: 16rpx;
  300. font-size: 20rpx;
  301. font-family: PingFang SC;
  302. font-weight: 500;
  303. color: #2e58ff;
  304. }
  305. }
  306. .time {
  307. font-size: $font-base;
  308. color: $font-color-light;
  309. }
  310. }
  311. }
  312. .money {
  313. width: 50%;
  314. text-align: right;
  315. color: #db1935;
  316. font-size: $font-lg;
  317. }
  318. }
  319. .yeji {
  320. position: relative;
  321. margin: -72rpx auto 0;
  322. width: 690rpx;
  323. height: 143rpx;
  324. background: #ffffff;
  325. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
  326. border-radius: 10rpx;
  327. display: flex;
  328. align-items: center;
  329. .yeji-a {
  330. width: 50%;
  331. display: flex;
  332. flex-direction: column;
  333. justify-content: center;
  334. align-items: center;
  335. .yeji-top {
  336. font-size: 28rpx;
  337. font-family: PingFang SC;
  338. font-weight: bold;
  339. color: #333333;
  340. }
  341. .yeji-buttom {
  342. font-size: 42rpx;
  343. font-family: PingFang SC;
  344. font-weight: bold;
  345. color: #333333;
  346. }
  347. }
  348. .border {
  349. width: 1rpx;
  350. height: 51rpx;
  351. background: #dddddd;
  352. }
  353. }
  354. .content-box {
  355. display: flex;
  356. justify-content: space-between;
  357. align-items: center;
  358. margin: 30rpx;
  359. .content-box-left {
  360. display: flex;
  361. .left-img {
  362. width: 100rpx;
  363. height: 100rpx;
  364. border-radius: 50%;
  365. overflow: hidden;
  366. image {
  367. width: 100%;
  368. height: 100%;
  369. }
  370. }
  371. .right-title {
  372. margin-left: 15rpx;
  373. display: flex;
  374. flex-direction: column;
  375. justify-content: space-around;
  376. .top {
  377. font-weight: 500;
  378. font-size: 30rpx;
  379. }
  380. .bottom {
  381. color: #999999;
  382. }
  383. }
  384. }
  385. .content-box-right {
  386. display: flex;
  387. flex-direction: column;
  388. width: 230rpx;
  389. color: #999999;
  390. .state{
  391. color: red;
  392. }
  393. span{
  394. color: red;
  395. font-size: 28rpx;
  396. }
  397. }
  398. }
  399. </style>