extension.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. <template>
  2. <view class="content">
  3. <view class="status_bar"><!-- 这里是状态栏 --></view>
  4. <view class="content-money">
  5. <view class="money-box">
  6. <view class="goback-box" @click="toBack"><image class="goback" src="../../static/img/fanhui.png" mode=""></image></view>
  7. <view class="header">我的推广</view>
  8. <image class="tuiguang_bg" src="../../static/img/share-bg.png"></image>
  9. <!-- <view class="money_img"><image :src="list.avatar || img"></image></view> -->
  10. <view class="money-frame">
  11. <!-- <view class="money_name">我的推广</view> -->
  12. <view class="money_num">
  13. {{ team || '0' }}
  14. <text class="money_ren">人</text>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. <view class="main">
  20. <view class="main-box flex">
  21. <view class="item">
  22. <view class="num">{{myPerformance || 0}}</view>
  23. <view class="font ">我的业绩</view>
  24. </view>
  25. <view class="item">
  26. <view class="num">{{plotPerformance || 0}}</view>
  27. <view class="font ">小区业绩</view>
  28. </view>
  29. </view>
  30. <view class="main-box bottom flex">
  31. <view class="item">
  32. <view class="num">{{push || 0}}</view>
  33. <view class="font ">直推人数</view>
  34. </view>
  35. <view class="item">
  36. <view class="num">{{team || 0}}</view>
  37. <view class="font ">团队人数</view>
  38. </view>
  39. </view>
  40. </view>
  41. <view class="box">
  42. <view class="box-item flex">
  43. <view class="box-left">昨日拼购奖励</view>
  44. <view class="box-right">{{yesterday.pink || 0}}USDT</view>
  45. </view>
  46. <view class="box-item flex">
  47. <view class="box-left">昨日分享奖励</view>
  48. <view class="box-right">{{yesterday.recommend || 0}}USDT</view>
  49. </view>
  50. <view class="box-item flex">
  51. <view class="box-left">昨日团队奖励</view>
  52. <view class="box-right">{{yesterday.group || 0}}USDT</view>
  53. </view>
  54. </view>
  55. <view class="box">
  56. <view class="box-item flex">
  57. <view class="box-left">累计拼购奖励</view>
  58. <view class="box-right">{{all.pink || 0}}USDT</view>
  59. </view>
  60. <view class="box-item flex">
  61. <view class="box-left">累计分享奖励</view>
  62. <view class="box-right">{{all.recommend || 0}}USDT</view>
  63. </view>
  64. <view class="box-item flex">
  65. <view class="box-left">累计团队奖励</view>
  66. <view class="box-right">{{all.group || 0}}USDT</view>
  67. </view>
  68. </view>
  69. <view class="liebiao flex" @click="navto('/pages/user/extensionList')">
  70. <view class="left flex">
  71. <image src="../../static/img/myTeam.png" mode=""></image>
  72. <view class="leibiao-font">推广列表</view>
  73. </view>
  74. <image src="../../static/img/jiantou.png" mode=""></image>
  75. </view>
  76. </view>
  77. </template>
  78. <script>
  79. import { spread } from '@/api/finance.js';
  80. import { mapState, mapMutations } from 'vuex';
  81. import { gitExtension } from '@/api/user.js';
  82. export default {
  83. onReady() {
  84. // 初始化获取页面宽度
  85. uni.createSelectorQuery()
  86. .select('.content')
  87. .fields(
  88. {
  89. size: true
  90. },
  91. data => {
  92. // console.log(data);
  93. // console.log(Math.floor((data.width / 750) * 300));
  94. // 保存头部高度
  95. this.maxheight = data.height - Math.floor((data.width / 750) * 470) - 44;
  96. // console.log(this.maxheight);
  97. }
  98. )
  99. .exec();
  100. },
  101. data() {
  102. return {
  103. // 头部图高度
  104. maxheight: '',
  105. myPerformance:'',//我的业绩
  106. plotPerformance:'',//小区业绩
  107. push:'',//直推人数
  108. team:'',//团队人数
  109. all: '', //累计奖励
  110. yesterday:'',//昨日
  111. };
  112. },
  113. onLoad(options) {
  114. this.loadData(); //onload只是在第一次进入页面会刷新数据,从二级页面回来不会重新加载数据
  115. },
  116. onShow() {
  117. //onShow没有参数
  118. this.loadData(); //onshow在每次打开页面都会加载数据,可以用于数据在需要刷新的环境下
  119. },
  120. methods: {
  121. async loadData() {
  122. gitExtension({}).then(({data}) => {
  123. console.log(data)
  124. this.myPerformance = data.achievement;
  125. this.plotPerformance = data.small_achivement;
  126. this.push = data.recommend_num;
  127. this.team = data.group_num;
  128. this.all = data.all;
  129. this.yesterday = data.yesterday;
  130. })
  131. },
  132. // 页面跳转
  133. navto(e) {
  134. uni.navigateTo({
  135. url: e
  136. });
  137. },
  138. // 点击返回 我的页面
  139. toBack() {
  140. uni.switchTab({
  141. url: '/pages/user/user'
  142. });
  143. },
  144. }
  145. };
  146. </script>
  147. <style lang="scss">
  148. .status_bar {
  149. height: var(--status-bar-height);
  150. width: 100%;
  151. background: linear-gradient(90deg, #60bab0, #45969b);
  152. }
  153. page {
  154. background: #f8f8f8;
  155. height: 100%;
  156. }
  157. .content-money {
  158. padding-bottom: 30rpx;
  159. background: $page-color-base;
  160. .buttom-box {
  161. position: relative;
  162. background-color: #ffffff;
  163. text-align: center;
  164. margin: 0 30rpx;
  165. padding: 30rpx 0;
  166. border-radius: $border-radius-sm;
  167. margin-top: -80rpx;
  168. .buttom {
  169. font-size: $font-lg;
  170. flex-grow: 1;
  171. .money {
  172. font-weight: bold;
  173. font-size: 32rpx;
  174. color: #ff0000;
  175. }
  176. }
  177. .text {
  178. color: #666666;
  179. }
  180. .interval {
  181. width: 2rpx;
  182. height: 60rpx;
  183. background-color: #eeeeee;
  184. }
  185. .icon {
  186. height: 50rpx;
  187. width: 48rpx;
  188. margin: 0 auto;
  189. .icon-img {
  190. width: 100%;
  191. height: 100%;
  192. }
  193. }
  194. }
  195. }
  196. .money-box {
  197. // background: $base-color;
  198. height: 424rpx;
  199. color: #ffffff;
  200. text-align: center;
  201. font-size: 35rpx;
  202. position: relative;
  203. // padding-top: 60rpx;
  204. .header {
  205. position: absolute;
  206. left: 0;
  207. top: 0;
  208. width: 100%;
  209. height: 80rpx;
  210. font-size: 32rpx;
  211. font-weight: 700;
  212. z-index: 99;
  213. display: flex;
  214. justify-content: center;
  215. align-items: center;
  216. }
  217. .goback-box {
  218. position: absolute;
  219. left: 18rpx;
  220. top: 0;
  221. height: 80rpx;
  222. display: flex;
  223. align-items: center;
  224. }
  225. .goback {
  226. z-index: 100;
  227. width: 34rpx;
  228. height: 34rpx;
  229. }
  230. .tuiguang_bg {
  231. width: 100%;
  232. height: 424rpx;
  233. position: relative;
  234. }
  235. .money_img {
  236. width: 100%;
  237. height: 120rpx;
  238. text-align: center;
  239. padding-top: 50rpx;
  240. padding-bottom: 135rpx;
  241. image {
  242. width: 120rpx;
  243. height: 120rpx;
  244. border: 4rpx solid #fd5f6f;
  245. border-radius: 50%;
  246. }
  247. }
  248. .money-frame {
  249. position: absolute;
  250. top: 0;
  251. width: 100%;
  252. padding-top: 120rpx;
  253. // left: 30rpx;
  254. // height: 460rpx;
  255. // display: flex;
  256. // align-items: flex-start;
  257. // flex-direction: column;
  258. // justify-content: center;
  259. }
  260. .money_name {
  261. width: 100%;
  262. text-align: center;
  263. font-size: 32rpx;
  264. font-family: PingFang SC;
  265. font-weight: bold;
  266. color: #ffffff;
  267. }
  268. .money_num {
  269. font-size: 72rpx;
  270. font-family: PingFang SC;
  271. font-weight: bold;
  272. color: #ffffff;
  273. .money_ren {
  274. font-size: 36rpx;
  275. }
  276. }
  277. }
  278. .navbar {
  279. display: flex;
  280. height: 40px;
  281. padding: 0 5px;
  282. background: #fff;
  283. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  284. position: relative;
  285. z-index: 10;
  286. .nav-item {
  287. flex: 1;
  288. display: flex;
  289. justify-content: center;
  290. align-items: center;
  291. height: 100%;
  292. font-size: 15px;
  293. color: $font-color-dark;
  294. position: relative;
  295. &.current {
  296. color: #ff0000;
  297. &:after {
  298. content: '';
  299. position: absolute;
  300. left: 50%;
  301. bottom: 0;
  302. transform: translateX(-50%);
  303. width: 44px;
  304. height: 0;
  305. border-bottom: 2px solid #ff0000;
  306. }
  307. }
  308. }
  309. }
  310. .main {
  311. position: relative;
  312. z-index: 10;
  313. width: 691rpx;
  314. height: auto;
  315. background: #ffffff;
  316. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  317. border-radius: 20rpx;
  318. margin: -160rpx auto 0;
  319. padding: 40rpx 100rpx;
  320. .bottom {
  321. margin-top: 50rpx;
  322. }
  323. .main-box {
  324. justify-content: space-between;
  325. align-items: center;
  326. .item {
  327. display: flex;
  328. flex-direction: column;
  329. align-items: center;
  330. .num {
  331. font-size: 38rpx;
  332. font-family: PingFang SC;
  333. font-weight: bold;
  334. color: #0f253a;
  335. }
  336. .font {
  337. font-size: 24rpx;
  338. font-family: PingFang SC;
  339. font-weight: bold;
  340. color: #6d7c88;
  341. margin-top: 18rpx;
  342. }
  343. }
  344. }
  345. }
  346. .box {
  347. width: 690rpx;
  348. background: #FFFFFF;
  349. box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
  350. border-radius: 20rpx;
  351. margin: 20rpx auto;
  352. padding: 34rpx;
  353. .box-item:first-child{
  354. margin-top: 0;
  355. }
  356. .box-item {
  357. margin-top: 20rpx;
  358. justify-content: space-between;
  359. align-items: center;
  360. .box-left {
  361. font-size: 26rpx;
  362. font-family: PingFang SC;
  363. font-weight: 500;
  364. color: #6D7C88;
  365. }
  366. .box-right {
  367. font-size: 26rpx;
  368. font-family: PingFang SC;
  369. font-weight: bold;
  370. color: #0F253A;
  371. }
  372. }
  373. }
  374. .liebiao {
  375. width: 692rpx;
  376. background: #FFFFFF;
  377. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
  378. border-radius: 20rpx;
  379. padding: 34rpx;
  380. margin: 24rpx auto 0;
  381. align-items: center;
  382. .left {
  383. justify-content: flex-start;
  384. align-items: center;
  385. image {
  386. width: 46rpx;
  387. height: 36rpx;
  388. }
  389. .leibiao-font{
  390. margin-left: 10rpx;
  391. font-size: 32rpx;
  392. font-family: PingFang SC;
  393. font-weight: bold;
  394. color: #333333;
  395. }
  396. }
  397. image {
  398. width: 15rpx;
  399. height: 27rpx;
  400. }
  401. }
  402. </style>