update.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543
  1. <template>
  2. <view class="app-layout">
  3. <app-layout>
  4. <view :class="success ? 'preventTouchMove' : ' '">
  5. <view class="user" :style="{'background-image': `url(${stock.update})`}">
  6. <view class="dir-left-nowrap cross-center user-info">
  7. <image :src="user.avatar"></image>
  8. <view>{{user.nickname}}</view>
  9. </view>
  10. <view class="level">{{user.level_name}}</view>
  11. <view v-if="up_type > 0" class="about main-center">
  12. <view class="about-item">
  13. <view class="info">{{user.level_rate}}%</view>
  14. <view>{{setting.form.level_rate ? setting.form.level_rate : '分红比例'}}</view>
  15. </view>
  16. <view class="line"></view>
  17. <view class="about-item">
  18. <view class="info">{{user.condition}}
  19. <text v-if="up_type == 1">人</text>
  20. <text v-else-if="up_type == 4">单</text>
  21. <text v-else>元</text>
  22. </view>
  23. <view v-if="up_type == 1">下线总人数</view>
  24. <view v-if="up_type == 2">累计佣金总额</view>
  25. <view v-if="up_type == 3">已提现佣金总额</view>
  26. <view v-if="up_type == 4">分销订单总数</view>
  27. <view v-if="up_type == 5">分销订单总金额</view>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="cross-center" style="background-color: #ffa854;" v-if="user.is_big_rate == 1">
  32. <view class="dir-top-nowrap cross-center max-area">
  33. <image class="max-logo" :src="stock.max"></image>
  34. <view class="max-title">恭喜</view>
  35. <view>您已成为最高等级股东</view>
  36. </view>
  37. </view>
  38. <view v-else class="all-level">
  39. <view class="level-item dir-left-nowrap" v-for="(item,index) in list" :key="item.id">
  40. <view class="level-left">
  41. <view class="can-update" v-if="item.up">可升级</view>
  42. <view class="level-long">
  43. <view :id="'item' + index" class="about-level" :style="{'left': `${user.condition / item.condition < 1 ? (user.condition / item.condition *100) + '%' : '100%'}`,'margin-left': `${width + 'rpx'}`}" v-if="!item.up">{{user.condition}}
  44. <text v-if="up_type == 1">人</text>
  45. <text v-else-if="up_type == 4">单</text>
  46. <text v-else>元</text>
  47. </view>
  48. <view class="triangle" :style="{'left': `${user.condition / item.condition < 1 ? (user.condition / item.condition *100) + '%' : '100%'}`}" v-if="!item.up"></view>
  49. <view :class="[user.condition / item.condition < 0.05 ? `level-rate small` : `level-rate big`]" :style="{'width': `${user.condition / item.condition < 1 ? (user.condition / item.condition *100) + '%' : '100%'}`,'background-color':`${user.condition / item.condition < 1 ? '#ff4544': '#25bb3e'}`}"></view>
  50. </view>
  51. <view :class="[user.condition / item.condition < 0.75 ? user.condition / item.condition > 0.25 ? `level-condition` : `level-condition left` : `level-condition right`]" :style="{'left': `${user.condition / item.condition < 0.75 ? user.condition / item.condition > 0.25 ? (user.condition / item.condition *100) + '%' : '25%' : '75%'}`}">
  52. <text v-if="up_type == 1">下线总人数</text>
  53. <text v-if="up_type == 2">累计佣金总额</text>
  54. <text v-if="up_type == 3">已提现佣金总额</text>
  55. <text v-if="up_type == 4">分销订单总数</text>
  56. <text v-if="up_type == 5">分销订单总金额</text>
  57. </view>
  58. </view>
  59. <view class="level-right cross-center main-center dir-top-nowrap">
  60. <view>
  61. <text class="level-condition">{{item.condition}}</text>
  62. <text v-if="up_type == 1">人</text>
  63. <text v-else-if="up_type == 4">单</text>
  64. <text v-else>元</text>
  65. </view>
  66. <view style="text-align: center">{{setting.form.level_rate ? setting.form.level_rate : '分红比例'}}<text class="level-rate">{{item.bonus_rate}}</text>%</view>
  67. <view class="level-name t-omit">{{item.name}}</view>
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. <view v-if="user.is_big_rate == 0 && canUp" :class="['bottom', `${iphone_x?'iphone_x':''}`]">
  73. <view @click="toUpdate" class="update-btn">立即升级</view>
  74. </view>
  75. <view v-if="success" class="dialog cross-center main-center">
  76. <view class="dialog-content dir-top-nowrap cross-center">
  77. <image :src="stock.success"></image>
  78. <view>成功升级为{{up.name}}</view>
  79. <view @click="getList" class="isee">我知道了</view>
  80. </view>
  81. </view>
  82. </app-layout>
  83. </view>
  84. </template>
  85. <script>
  86. import { mapState } from "vuex";
  87. export default {
  88. data() {
  89. return {
  90. iphone_x: false,
  91. user: {},
  92. up_type: '',
  93. loading: false,
  94. canUp: false,
  95. up: {},
  96. success: false,
  97. page: 2,
  98. width: -25,
  99. setting: {},
  100. page_count: 1,
  101. list: []
  102. }
  103. },
  104. computed: {
  105. ...mapState({
  106. stock: state => state.mallConfig.__wxapp_img.stock,
  107. mall: state => state.mallConfig.mall,
  108. userInfo: state => state.user.info,
  109. })
  110. },
  111. methods: {
  112. getList() {
  113. let that = this;
  114. that.$request({
  115. url: that.$api.stock.level,
  116. }).then(response=>{
  117. if(response.code == 0) {
  118. that.user = response.data.user;
  119. that.up_type = response.data.up_type;
  120. let list = response.data.list;
  121. that.page_count = response.data.pagination.page_count;
  122. let condition = that.user.condition.toString();
  123. that.width = -20 - (condition.length*5);
  124. let canUp = 0;
  125. that.success = false;
  126. if(list.length == 0) {
  127. that.$hideLoading();
  128. }else {
  129. for(let i in list) {
  130. list[i].up = true;
  131. canUp++;
  132. if(+list[i].condition > +that.user.condition) {
  133. list[i].up = false;
  134. canUp--;
  135. }
  136. if(i == list.length-1) {
  137. setTimeout(function(){
  138. that.list = list;
  139. that.$hideLoading();
  140. },200)
  141. }
  142. }
  143. }
  144. if(canUp > 0) {
  145. that.canUp = true;
  146. }
  147. }else {
  148. that.$hideLoading();
  149. uni.showToast({
  150. title: response.msg,
  151. icon: 'none',
  152. duration: 1000
  153. });
  154. }
  155. }).catch(response => {
  156. that.$hideLoading();
  157. });
  158. },
  159. toUpdate() {
  160. let that = this;
  161. uni.showLoading({
  162. mask: true,
  163. title: '加载中...'
  164. });
  165. that.$request({
  166. url: that.$api.stock.up,
  167. }).then(response=>{
  168. uni.hideLoading();
  169. if(response.code == 0) {
  170. that.up = response.data;
  171. this.success = true;
  172. this.canUp = false;
  173. }else {
  174. uni.showToast({
  175. title: response.msg,
  176. icon: 'none',
  177. duration: 1000
  178. });
  179. }
  180. })
  181. },
  182. getMore() {
  183. if(this.loading) {
  184. return false;
  185. }
  186. if(this.page > this.page_count) {
  187. return false;
  188. }
  189. let that = this;
  190. uni.showLoading({
  191. mask: true,
  192. title: '加载中...'
  193. });
  194. that.loading = true;
  195. that.$request({
  196. url: that.$api.stock.level,
  197. data: {
  198. page: this.page
  199. }
  200. }).then(response=>{
  201. this.loading = false;
  202. if(response.code == 0) {
  203. let list = response.data.list;
  204. let canUp = 0;
  205. if(list.length == 0) {
  206. uni.hideLoading();
  207. }else {
  208. that.page++;
  209. for(let i in list) {
  210. list[i].up = true;
  211. canUp++;
  212. if(+list[i].condition > +that.user.condition) {
  213. list[i].up = false;
  214. canUp--;
  215. }
  216. if(i == list.length-1) {
  217. setTimeout(function(){
  218. that.list = that.list.concat(list);
  219. that.$forceUpdate();
  220. uni.hideLoading();
  221. },200)
  222. }
  223. }
  224. }
  225. if(canUp > 0) {
  226. that.canUp = true;
  227. }
  228. }else {
  229. uni.hideLoading();
  230. uni.showToast({
  231. title: response.msg,
  232. icon: 'none',
  233. duration: 1000
  234. });
  235. }
  236. }).catch(response => {
  237. this.loading = false;
  238. uni.hideLoading();
  239. });
  240. },
  241. getSetting() {
  242. let that = this;
  243. that.$showLoading({
  244. type: 'global',
  245. text: '加载中...'
  246. });
  247. that.$request({
  248. url: that.$api.stock.setting,
  249. }).then(response=>{
  250. that.getList();
  251. if(response.code == 0) {
  252. that.setting = response.data;
  253. }else {
  254. uni.showToast({
  255. title: response.msg,
  256. icon: 'none',
  257. duration: 1000
  258. });
  259. }
  260. }).catch(response => {
  261. that.$hideLoading();
  262. uni.hideLoading();
  263. });
  264. },
  265. },
  266. onReachBottom() {
  267. this.getMore();
  268. },
  269. onLoad(options) { this.$commonLoad.onload(options);
  270. let that = this;
  271. uni.getSystemInfo({
  272. success: function (res) {
  273. if(res.model.indexOf('iPhone X') > -1 || res.model.indexOf('iPhone 11') > -1 || res.model.indexOf('iPhone11') > -1 || res.model.indexOf('iPhone12') > -1 || res.model.indexOf('Unknown Device') > -1) {
  274. that.iphone_x = true;
  275. }
  276. }
  277. })
  278. that.getSetting();
  279. }
  280. }
  281. </script>
  282. <style scoped lang="scss">
  283. .preventTouchMove{
  284. top: 0;
  285. left: 0;
  286. width: 100%;
  287. overflow: hidden;
  288. position: fixed;
  289. z-index: 0;
  290. }
  291. .app-layout {
  292. background-color: #ffa854;
  293. position: absolute;
  294. top: 0;
  295. left: 0;
  296. height: 100%;
  297. width: 100%;
  298. }
  299. .user {
  300. width: 100%;
  301. height: #{360rpx};
  302. background-size: 100% 100%;
  303. padding: #{40rpx};
  304. color: #fff;
  305. .user-info {
  306. height: #{56rpx};
  307. font-size: #{28rpx};
  308. image {
  309. height: #{56rpx};
  310. width: #{56rpx};
  311. border-radius: #{28rpx};
  312. display: block;
  313. margin-right: #{20rpx};
  314. }
  315. }
  316. .level {
  317. margin-top: #{16rpx};
  318. font-size: #{40rpx};
  319. text-align: center;
  320. }
  321. .about {
  322. font-size: #{26rpx};
  323. padding-top: #{54rpx};
  324. position: relative;
  325. .about-item {
  326. width: 50%;
  327. text-align: center;
  328. .info {
  329. font-size: #{40rpx};
  330. font-family: DIN;
  331. margin-bottom: #{6rpx};
  332. }
  333. }
  334. .line {
  335. position: absolute;
  336. left: 50%;
  337. top: #{70rpx};
  338. width: #{1rpx};
  339. height: #{40rpx};
  340. opacity: 0.5;
  341. background-color: #fff;
  342. margin-left: #{-1rpx};
  343. }
  344. }
  345. }
  346. .all-level {
  347. background-color: #ffa854;
  348. padding: #{66rpx} #{24rpx} #{180rpx};
  349. .level-item {
  350. background-color: #fff;
  351. border-radius: #{16rpx};
  352. height: #{184rpx};
  353. width: #{702rpx};
  354. position: relative;
  355. margin-bottom: #{24rpx};
  356. .level-left {
  357. width: #{450rpx};
  358. padding-left: #{40rpx};
  359. .level-condition {
  360. font-size: #{24rpx};
  361. color: #999999;
  362. margin-top: #{6rpx};
  363. width: #{200rpx};
  364. text-align: center;
  365. margin-left: #{-100rpx};
  366. position: relative;
  367. }
  368. .level-condition.left {
  369. text-align: left;
  370. }
  371. .level-condition.right {
  372. text-align: right;
  373. margin-left: #{-115rpx};
  374. }
  375. .can-update {
  376. position: absolute;
  377. top: 0;
  378. left: 0;
  379. height: #{48rpx};
  380. width: #{110rpx};
  381. line-height: #{48rpx};
  382. padding: 0 #{16rpx};
  383. border-top-left-radius: #{16rpx};
  384. border-top-right-radius: 0;
  385. border-bottom-left-radius: 0;
  386. border-bottom-right-radius: #{16rpx};
  387. color: #fff;
  388. font-size: #{26rpx};
  389. background-color: #25bb3e;
  390. }
  391. .level-long {
  392. margin-top: #{74rpx};
  393. width: #{400rpx};
  394. height: #{16rpx};
  395. border-radius: #{8rpx};
  396. background-color: #e3e3e3;
  397. position: relative;
  398. .level-rate {
  399. background-color: #ff4544;
  400. height: #{16rpx};
  401. position: absolute;
  402. top: 0;
  403. left: 0;
  404. }
  405. .level-rate.big {
  406. border-radius: #{8rpx};
  407. }
  408. .level-rate.small {
  409. border-top-left-radius: #{8rpx};
  410. border-bottom-left-radius: #{8rpx};
  411. }
  412. .about-level {
  413. padding: #{2rpx} #{8rpx};
  414. background-color: #ff4544;
  415. color: #fff;
  416. font-size: #{22rpx};
  417. border-radius: #{4rpx};
  418. position: absolute;
  419. top: #{-50rpx};
  420. white-space: nowrap;
  421. z-index: 2;
  422. }
  423. .triangle {
  424. width: 0;
  425. height: 0;
  426. border-left: #{24rpx} solid transparent;
  427. border-right: #{24rpx} solid transparent;
  428. border-top: #{24rpx} solid #ff4544;
  429. position: absolute;
  430. top: #{-30rpx};
  431. margin-left: #{-24rpx};
  432. }
  433. }
  434. }
  435. .level-right {
  436. font-size: #{24rpx};
  437. width: #{252rpx};
  438. color: #353535;
  439. .level-name {
  440. font-size: #{28rpx};
  441. color: #999999;
  442. text-align: center;
  443. width: 90%;
  444. }
  445. .level-rate {
  446. font-family: DIN;
  447. font-size: #{32rpx};
  448. color: #ff4544;
  449. }
  450. .level-condition {
  451. font-family: DIN;
  452. font-size: #{36rpx};
  453. color: #ff4544;
  454. }
  455. }
  456. }
  457. }
  458. .max-area {
  459. width: #{702rpx};
  460. margin: 0 auto;
  461. padding: #{80rpx} 0 #{75rpx};
  462. border-radius: #{16rpx};
  463. font-size: #{28rpx};
  464. color: #999999;
  465. background-color: #fff;
  466. .max-logo {
  467. height: #{300rpx};
  468. width: #{300rpx};
  469. margin-bottom: #{32rpx};
  470. display: block;
  471. }
  472. .max-title {
  473. font-size: #{40rpx};
  474. color: #353535;
  475. margin-bottom: #{6rpx};
  476. }
  477. }
  478. .bottom {
  479. position: fixed;
  480. bottom: 0;
  481. left: 0;
  482. z-index: 10;
  483. width: 100%;
  484. height: #{128rpx};
  485. background-color: #fff;
  486. .update-btn {
  487. width: #{702rpx};
  488. height: #{80rpx};
  489. line-height: #{80rpx};
  490. margin: #{24rpx};
  491. border-radius: #{40rpx};
  492. background-color: #ff4544;
  493. text-align: center;
  494. color: #fff;
  495. font-size: #{32rpx};
  496. }
  497. }
  498. .bottom.iphone_x {
  499. height: #{178rpx};
  500. padding-bottom: #{50rpx};
  501. }
  502. .dialog {
  503. position: fixed;
  504. top: 0;
  505. left: 0;
  506. background-color: rgba(0,0,0,.3);
  507. width: 100%;
  508. height: 100%;
  509. z-index: 100;
  510. .dialog-content {
  511. width: #{504rpx};
  512. font-size: #{32rpx};
  513. color: #353535;
  514. background-color: #fff;
  515. border-bottom-left-radius: #{16rpx};
  516. border-bottom-right-radius: #{16rpx};
  517. image {
  518. width: #{504rpx};
  519. height: #{246rpx};
  520. display: block;
  521. margin-bottom: #{30rpx};
  522. margin-top: -20%;
  523. }
  524. .isee {
  525. width: #{300rpx};
  526. height: #{80rpx};
  527. line-height: #{80rpx};
  528. text-align: center;
  529. border-radius: #{40rpx};
  530. font-size: #{32rpx};
  531. color: #fff;
  532. background-color: #ff4544;
  533. margin-top: #{40rpx};
  534. margin-bottom: #{48rpx};
  535. }
  536. }
  537. }
  538. </style>