123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322 |
- <template>
- <view class="app-layout">
- <app-layout>
- <view class="app-level" :style="bg" v-if="list">
- <!--<view class="title" v-if="list.length > 0">
- {{list.length > 1 ? (list.length == 2 ? '两' : '三') + '者满足其一即可升级' : '满足以下条件即可升级'}}
- </view>-->
- <view class="title">等级说明</view>
- <view class="list">
- <block v-for="(item, index) in list" :key="index">
- <view class="item dir-left-nowrap">
- <template v-if="index != 0">
- <image src="./../image/shuxian.png" class="shuxian left"></image>
- <image src="./../image/shuxian.png" class="shuxian right"></image>
- </template>
- <view class="content box-grow-1" v-if="item.condition_type == 1">下线人数达到
- <text>{{item.condition}}</text>
- 人
- </view>
- <view class="content box-grow-1" v-else-if="item.condition_type == 2">当月业绩累计
- <text class="price">{{item.condition}}</text>
- </view>
- <!-- <view class="content box-grow-1" v-else-if="item.condition_type == 3">已提现佣金达到
- <text class="price">{{item.condition}}</text>
- </view>
- <view class="content box-grow-1" v-else-if="item.condition_type == 4">累计消费金额达到
- <text class="price">{{item.condition}}</text>
- </view>-->
- <view class="box-grow-0 dir-left-nowrap cross-center right" @click="ruleClick(item)">
- <view class="box-grow-0">等级说明</view>
- <image class="box-grow-0 arrow-right" src="/static/image/icon/arrow-right.png"></image>
- </view>
- </view>
- </block>
- </view>
- <!--<view class="level-btn" @click="levelUp" v-if="list.length > 0">
- 立即升级
- </view>-->
- <view class="dialog dir-left-nowrap main-center cross-center" v-if="dialog.show">
- <view class="content dir-top-nowrap cross-center" :style="dialogBg">
- <view class="dialog-title">{{dialog.condition_text}}</view>
- <view>{{dialog.level_name}}</view>
- <view class="btn" :class="'btn-' + dialog.status" @click="cancel">我知道了</view>
- </view>
- </view>
- <view class="dialog dir-left-nowrap main-center cross-center" v-if="rule.show">
- <view class="rule dir-top-nowrap cross-center">
- <image class="box-grow-0 close" @click="rule.show = false" src="/static/image/icon/icon-close.png"></image>
- <view class="rule-title">等级说明</view>
- <text class="rule-content">{{rule.content}}</text>
- <view class="btn" @click="rule.show = false">我知道了</view>
- </view>
- </view>
- </view>
- </app-layout>
- </view>
- </template>
- <script>
- import {mapState} from 'vuex';
- export default {
- name: "level",
- onLoad() {
- this.loadData();
- },
- data() {
- return {
- list: null,
- dialog: {
- show: false,
- status: 0,
- level_name: '',
- condition_text: '',
- },
- rule: {
- show: false,
- content: ''
- }
- };
- },
- computed: {
- ...mapState({
- mallConfig: state => state.mallConfig,
- }),
- dialogBg() {
- if (this.dialog.status) {
- return `background-image: url(${this.mallConfig.__wxapp_img.share.dialog_success})`;
- } else {
- return `background-image: url(${this.mallConfig.__wxapp_img.share.dialog_error})`;
- }
- },
- bg() {
- if (this.list) {
- if (this.list.length > 0) {
- return `background-image: url(${this.mallConfig.__wxapp_img.share.sharebg})`;
- } else {
- return `background-image: url(${this.mallConfig.__wxapp_img.share.no_level_bg})`;
- }
- } else {
- return ``;
- }
- },
- },
- methods: {
- loadData() {
- this.$showLoading();
- this.$request({
- url: this.$api.share.level,
- }).then(response => {
- this.$hideLoading();
- if (response.code == 0) {
- this.list = response.data.list;
- } else {
- uni.showModal({
- content: response.msg,
- showCancel: false
- })
- }
- }).catch(response => {
- this.$hideLoading();
- })
- },
- levelUp() {
- uni.showLoading({
- title: '升级中...'
- });
- this.$request({
- url: this.$api.share.level_up,
- }).then(response => {
- uni.hideLoading();
- if (response.code == 0) {
- this.dialog.show = true;
- this.dialog = {...this.dialog, ...response.data};
- } else {
- uni.showModal({
- content: response.msg,
- showCancel: false
- })
- }
- }).catch(response => {
- uni.hideLoading();
- })
- },
- cancel() {
- this.dialog.show = false;
- if (this.dialog.status == 1) {
- this.loadData();
- }
- },
- ruleClick(item) {
- this.rule.show = true;
- this.rule.content = item.rule;
- }
- }
- }
- </script>
- <style scoped lang="scss">
- .app-level {
- height: 100vh;
- width: 100%;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- .title {
- font-size: #{57rpx};
- color: #ffffff;
- padding: #{80rpx 0};
- width: 100%;
- text-align: center;
- }
- .list {
- padding: #{0 33rpx};
- .item {
- position: relative;
- background: #ffffff;
- border-radius: #{20rpx};
- height: #{130rpx};
- line-height: #{130rpx};
- margin-bottom: #{24rpx};
- .shuxian {
- width: #{16rpx};
- height: #{60rpx};
- display: block;
- top: #{-43rpx};
- position: absolute;
- &.left {
- left: #{78rpx};
- }
- &.right {
- right: #{78rpx};
- }
- }
-
- .content {
- padding-left: #{60rpx};
- text {
- color: #e33d41;
- &.price:before {
- content: '¥';
- }
- }
- }
- .right {
- font-size: $uni-font-size-weak-two;
- color: $uni-general-color-two;
- .arrow-right {
- width: #{12rpx};
- height: #{22rpx};
- margin-left: #{12rpx};
- margin-right: #{25rpx};
- display: block;
- }
- }
- }
- }
- .level-btn {
- text-align: center;
- width: #{534rpx};
- height: #{88rpx};
- line-height: #{88rpx};
- margin: #{50rpx 108rpx};
- font-size: #{43rpx};
- color: #895c4c;
- border-radius: #{50rpx};
- background-image: linear-gradient(to right, #ffddad , #ffce98);
- }
- .dialog {
- position: fixed;
- top: 0;
- left: 0;
- background: rgba(0, 0, 0, 0.5);
- width: 100%;
- height: 100%;
- .content {
- width: #{436rpx};
- height: #{492rpx};
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- font-size: $uni-font-size-weak-one;
- color: #545454;
- .dialog-title {
- margin-top: #{255rpx};
- margin-bottom: #{30rpx};
- }
- .btn {
- margin-top: #{30rpx};
- width: #{272rpx};
- height: #{60rpx};
- color: #ffffff;
- border-radius: #{60rpx};
- text-align: center;
- line-height: #{60rpx};
- &.btn-1 {
- background: #ff4e47;
- }
- &.btn-0 {
- background: #ffbf7a;
- }
- }
- }
- .rule {
- width: #{650rpx};
- background-color: #ffffff;
- border-radius: #{20rpx};
- position: relative;
- .close {
- position: absolute;
- right: #{24rpx};
- top: #{24rpx};
- width: #{30rpx};
- height: #{30rpx};
- }
- .rule-title {
- margin: #{40rpx 0};
- }
- .rule-content {
- width: #{calc(100% - 64rpx)};
- margin: #{0 32rpx};
- padding: #{20rpx 32rpx};
- height: #{270rpx};
- overflow-y: auto;
- border: #{1rpx solid #e2e2e2};
- border-radius: #{16rpx};
- }
-
- .btn {
- width: 100%;
- height: #{90rpx};
- line-height: #{90rpx};
- text-align: center;
- color: $uni-general-color-one;
- font-size: $uni-font-size-import-two;
- border-top: #{1rpx solid #e2e2e2};
- margin-top: #{32rpx};
- }
- }
- }
- }
- </style>
|