level.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. <template>
  2. <view class="app-layout">
  3. <app-layout>
  4. <view class="app-level" :style="bg" v-if="list">
  5. <!--<view class="title" v-if="list.length > 0">
  6. {{list.length > 1 ? (list.length == 2 ? '两' : '三') + '者满足其一即可升级' : '满足以下条件即可升级'}}
  7. </view>-->
  8. <view class="title">等级说明</view>
  9. <view class="list">
  10. <block v-for="(item, index) in list" :key="index">
  11. <view class="item dir-left-nowrap">
  12. <template v-if="index != 0">
  13. <image src="./../image/shuxian.png" class="shuxian left"></image>
  14. <image src="./../image/shuxian.png" class="shuxian right"></image>
  15. </template>
  16. <view class="content box-grow-1" v-if="item.condition_type == 1">下线人数达到
  17. <text>{{item.condition}}</text>
  18. </view>
  19. <view class="content box-grow-1" v-else-if="item.condition_type == 2">当月业绩累计
  20. <text class="price">{{item.condition}}</text> {{userLevel==2?'即可升级':'即可保持'}}
  21. </view>
  22. <!-- <view class="content box-grow-1" v-else-if="item.condition_type == 3">已提现佣金达到
  23. <text class="price">{{item.condition}}</text>
  24. </view>
  25. <view class="content box-grow-1" v-else-if="item.condition_type == 4">累计消费金额达到
  26. <text class="price">{{item.condition}}</text>
  27. </view>-->
  28. <view class="box-grow-0 dir-left-nowrap cross-center right" @click="ruleClick(item)">
  29. <view class="box-grow-0">等级说明</view>
  30. <image class="box-grow-0 arrow-right" src="/static/image/icon/arrow-right.png"></image>
  31. </view>
  32. </view>
  33. </block>
  34. </view>
  35. <block v-if="!review">
  36. <view class="level-btn" @click="levelUp" v-if="autoLevelUp">
  37. 立即升级
  38. </view>
  39. </block>
  40. <block v-else-if="review">
  41. <view class="level-btn">
  42. 请等待审核
  43. </view>
  44. </block>
  45. <view class="dialog dir-left-nowrap main-center cross-center" v-if="dialog.show">
  46. <view class="content dir-top-nowrap cross-center" :style="dialogBg">
  47. <view class="dialog-title">{{dialog.condition_text}}</view>
  48. <view>{{dialog.level_name}}</view>
  49. <view class="btn" :class="'btn-' + dialog.status" @click="cancel">我知道了</view>
  50. </view>
  51. </view>
  52. <view class="dialog dir-left-nowrap main-center cross-center" v-if="rule.show">
  53. <view class="rule dir-top-nowrap cross-center">
  54. <image class="box-grow-0 close" @click="rule.show = false" src="/static/image/icon/icon-close.png"></image>
  55. <view class="rule-title">等级说明</view>
  56. <text class="rule-content">{{rule.content}}</text>
  57. <view class="btn" @click="rule.show = false">我知道了</view>
  58. </view>
  59. </view>
  60. </view>
  61. </app-layout>
  62. </view>
  63. </template>
  64. <script>
  65. import {mapState} from 'vuex';
  66. export default {
  67. name: "level",
  68. onLoad() {
  69. this.loadData();
  70. },
  71. data() {
  72. return {
  73. list: null,
  74. dialog: {
  75. show: false,
  76. status: 0,
  77. level_name: '',
  78. condition_text: '',
  79. },
  80. rule: {
  81. show: false,
  82. content: ''
  83. },
  84. autoLevelUp:false,
  85. review:false,
  86. userLevel:0,
  87. };
  88. },
  89. computed: {
  90. ...mapState({
  91. mallConfig: state => state.mallConfig,
  92. }),
  93. dialogBg() {
  94. if (this.dialog.status) {
  95. return `background-image: url(${this.mallConfig.__wxapp_img.share.dialog_success})`;
  96. } else {
  97. return `background-image: url(${this.mallConfig.__wxapp_img.share.dialog_error})`;
  98. }
  99. },
  100. bg() {
  101. if (this.list) {
  102. if (this.list.length > 0) {
  103. return `background-image: url(${this.mallConfig.__wxapp_img.share.sharebg})`;
  104. } else {
  105. return `background-image: url(${this.mallConfig.__wxapp_img.share.no_level_bg})`;
  106. }
  107. } else {
  108. return ``;
  109. }
  110. },
  111. },
  112. methods: {
  113. loadData() {
  114. this.$showLoading();
  115. this.$request({
  116. url: this.$api.share.level,
  117. }).then(response => {
  118. this.$hideLoading();
  119. if (response.code == 0) {
  120. this.list = response.data.list;
  121. this.autoLevelUp = response.data.autoLevelUp;
  122. this.review = response.data.review;
  123. this.userLevel = response.data.userLevel;
  124. } else {
  125. uni.showModal({
  126. content: response.msg,
  127. showCancel: false
  128. })
  129. }
  130. }).catch(response => {
  131. this.$hideLoading();
  132. })
  133. },
  134. levelUp() {
  135. uni.showLoading({
  136. title: '升级中...'
  137. });
  138. this.$request({
  139. url: this.$api.share.apply_level_up,
  140. }).then(response => {
  141. uni.hideLoading();
  142. if (response.code == 0) {
  143. this.dialog.show = true;
  144. this.dialog.condition_text = response.msg;
  145. this.dialog.status = 1;
  146. this.review = true
  147. } else {
  148. uni.showModal({
  149. content: response.msg,
  150. showCancel: false
  151. })
  152. }
  153. }).catch(response => {
  154. uni.hideLoading();
  155. })
  156. },
  157. cancel() {
  158. this.dialog.show = false;
  159. if (this.dialog.status == 1) {
  160. this.loadData();
  161. }
  162. },
  163. ruleClick(item) {
  164. this.rule.show = true;
  165. this.rule.content = item.rule;
  166. }
  167. }
  168. }
  169. </script>
  170. <style scoped lang="scss">
  171. .app-level {
  172. height: 100vh;
  173. width: 100%;
  174. background-size: cover;
  175. background-repeat: no-repeat;
  176. background-position: center;
  177. .title {
  178. font-size: #{57rpx};
  179. color: #ffffff;
  180. padding: #{80rpx 0};
  181. width: 100%;
  182. text-align: center;
  183. }
  184. .list {
  185. padding: #{0 33rpx};
  186. .item {
  187. position: relative;
  188. background: #ffffff;
  189. border-radius: #{20rpx};
  190. height: #{130rpx};
  191. line-height: #{130rpx};
  192. margin-bottom: #{24rpx};
  193. .shuxian {
  194. width: #{16rpx};
  195. height: #{60rpx};
  196. display: block;
  197. top: #{-43rpx};
  198. position: absolute;
  199. &.left {
  200. left: #{78rpx};
  201. }
  202. &.right {
  203. right: #{78rpx};
  204. }
  205. }
  206. .content {
  207. padding-left: #{60rpx};
  208. text {
  209. color: #e33d41;
  210. &.price:before {
  211. content: '¥';
  212. }
  213. }
  214. }
  215. .right {
  216. font-size: $uni-font-size-weak-two;
  217. color: $uni-general-color-two;
  218. .arrow-right {
  219. width: #{12rpx};
  220. height: #{22rpx};
  221. margin-left: #{12rpx};
  222. margin-right: #{25rpx};
  223. display: block;
  224. }
  225. }
  226. }
  227. }
  228. .level-btn {
  229. text-align: center;
  230. width: #{534rpx};
  231. height: #{88rpx};
  232. line-height: #{88rpx};
  233. margin: #{50rpx 108rpx};
  234. font-size: #{43rpx};
  235. color: #895c4c;
  236. border-radius: #{50rpx};
  237. background-image: linear-gradient(to right, #ffddad , #ffce98);
  238. }
  239. .dialog {
  240. position: fixed;
  241. top: 0;
  242. left: 0;
  243. background: rgba(0, 0, 0, 0.5);
  244. width: 100%;
  245. height: 100%;
  246. .content {
  247. width: #{436rpx};
  248. height: #{492rpx};
  249. background-size: cover;
  250. background-repeat: no-repeat;
  251. background-position: center;
  252. font-size: $uni-font-size-weak-one;
  253. color: #545454;
  254. .dialog-title {
  255. margin-top: #{255rpx};
  256. margin-bottom: #{30rpx};
  257. }
  258. .btn {
  259. margin-top: #{30rpx};
  260. width: #{272rpx};
  261. height: #{60rpx};
  262. color: #ffffff;
  263. border-radius: #{60rpx};
  264. text-align: center;
  265. line-height: #{60rpx};
  266. &.btn-1 {
  267. background: #ff4e47;
  268. }
  269. &.btn-0 {
  270. background: #ffbf7a;
  271. }
  272. }
  273. }
  274. .rule {
  275. width: #{650rpx};
  276. background-color: #ffffff;
  277. border-radius: #{20rpx};
  278. position: relative;
  279. .close {
  280. position: absolute;
  281. right: #{24rpx};
  282. top: #{24rpx};
  283. width: #{30rpx};
  284. height: #{30rpx};
  285. }
  286. .rule-title {
  287. margin: #{40rpx 0};
  288. }
  289. .rule-content {
  290. width: #{calc(100% - 64rpx)};
  291. margin: #{0 32rpx};
  292. padding: #{20rpx 32rpx};
  293. height: #{270rpx};
  294. overflow-y: auto;
  295. border: #{1rpx solid #e2e2e2};
  296. border-radius: #{16rpx};
  297. }
  298. .btn {
  299. width: 100%;
  300. height: #{90rpx};
  301. line-height: #{90rpx};
  302. text-align: center;
  303. color: $uni-general-color-one;
  304. font-size: $uni-font-size-import-two;
  305. border-top: #{1rpx solid #e2e2e2};
  306. margin-top: #{32rpx};
  307. }
  308. }
  309. }
  310. }
  311. </style>