254 lines
6.3 KiB
Vue
254 lines
6.3 KiB
Vue
<template>
|
||
<view>
|
||
<view class="user-vip">
|
||
<view class="header">
|
||
<view class="user-vip-info flex">
|
||
<u-image width="110rpx" height="110rpx" border-radius="50%" :src="userInfo.avatar"></u-image>
|
||
<view class="m-l-20">
|
||
<view class="user-text white xxl flex">{{userInfo.nickname}}</view>
|
||
<view class="flex">
|
||
<view class="user-level white xs flex row-center m-t-10">当前等级：{{userInfo.level_name || "无"}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content m-t-50">
|
||
<view class="vip-swiper-container">
|
||
<swiper class="swiper" style="height: 360rpx" previous-margin="30rpx"
|
||
:current="currentIndex" @change="bindchange">
|
||
<swiper-item v-for="(item, index) in levelList" :key="index">
|
||
<view class="vip-card-item" :style="'background-image: url(' + item.background_image + ');'">
|
||
<view class="flex row-between">
|
||
<view class="flex grade white sm">
|
||
{{item.lock_desc}}
|
||
<!-- <view v-if="item.current_level_status == 1" class="flex grade white sm">当前等级</view>
|
||
<view v-else-if="item.current_level_status == -1" class="flex white sm ml20">未解锁</view>
|
||
<view v-else-if="item.current_level_status == 0" class="flex white sm ml20">已解锁</view> -->
|
||
</view>
|
||
<image class="grade-icon m-r-34" :src="item.image"></image>
|
||
</view>
|
||
<view class="flex row-between vip-name white">
|
||
<view class="bold">{{item.name}}</view>
|
||
<!-- <view class="sm">{{item.tips2}}</view> -->
|
||
</view>
|
||
<view class="flex row-center m-l-30 m-r-30" v-if="item.diff_growth_percent">
|
||
<view class="vip-progress bg-white flex">
|
||
<view class="vip-progress-bar" :style="'width: ' + (item.diff_growth_percent*100) + '%'"></view>
|
||
</view>
|
||
</view>
|
||
<view class="flex row-between m-t-30" style="padding: 0 30rpx">
|
||
<view class="sm white" style="line-height: 36rpx" v-if="item.current_level_status == 0">
|
||
{{item.tips1}}
|
||
</view>
|
||
<router-link to="/bundle/pages/user_growth/user_growth" class="flex" v-else>
|
||
<view class="sm white" style="line-height: 36rpx">
|
||
<!-- {{item.current_level_status == 0 ? '当前高于该等级' : item.current_growth_tips}} -->
|
||
{{item.tips1}} <u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</router-link>
|
||
<view class="white">{{item.tips2}}</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="vip-grade-rule">
|
||
<view class="title flex">
|
||
<view class="line br60"></view>
|
||
<view class="xl m-l-20 bold">说明</view>
|
||
</view>
|
||
<view class="p-t-20">
|
||
<text class="rule-content column lighter">
|
||
{{growthRule}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="vip-rights">
|
||
<view class="title flex">
|
||
<view class="line br60"></view>
|
||
<view class="xl ml20 bold">会员权益</view>
|
||
</view>
|
||
<view class="rights-list flex">
|
||
<view v-for="(item, index) in privilegeList" :key="index" class="rights-item column-center">
|
||
<image class="mb10" :src="item.image"></image>
|
||
<view class="sm">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<loading-view v-if="!userInfo.nickname"></loading-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getLevelList
|
||
} from '@/api/user';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo: {},
|
||
currentIndex: 0,
|
||
levelList: [],
|
||
growthRule: "",
|
||
privilegeList: []
|
||
};
|
||
},
|
||
|
||
|
||
onLoad() {
|
||
this.getLevelListFun();
|
||
},
|
||
|
||
|
||
methods: {
|
||
bindchange(e) {
|
||
let {
|
||
current
|
||
} = e.detail;
|
||
let currentLevel = this.levelList[current];
|
||
this.currentIndex = current
|
||
},
|
||
|
||
getLevelListFun() {
|
||
getLevelList().then(res => {
|
||
const {
|
||
code,
|
||
data
|
||
} = res;
|
||
if (code != 1) return;
|
||
const {
|
||
user,
|
||
level_intro,
|
||
level
|
||
} = data;
|
||
let index = level.findIndex(item => item.current_level_status == 1);
|
||
if (index == -1) index = 0;
|
||
this.userInfo = user
|
||
this.growthRule = level_intro
|
||
this.levelList = level
|
||
this.currentIndex = index
|
||
});
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
background-image: url(../../static/vip_grade_bg.png);
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
.user-vip {
|
||
.header {
|
||
padding-top: 40rpx;
|
||
.user-vip-info {
|
||
padding-left: 30rpx;
|
||
|
||
.user-level {
|
||
border: 1px solid white;
|
||
border-radius: 100rpx;
|
||
padding: 4rpx 20rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.user-text {
|
||
line-height: 50rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
|
||
.vip-card-item {
|
||
height: 360rpx;
|
||
width: 690rpx;
|
||
position: relative;
|
||
background-size: 100% 100%;
|
||
|
||
.grade {
|
||
line-height: 36rpx;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
border-top-right-radius: 100rpx;
|
||
border-bottom-right-radius: 100rpx;
|
||
height: 50rpx;
|
||
padding: 0 28rpx;
|
||
}
|
||
|
||
.user-grade {
|
||
line-height: 36rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.grade-icon {
|
||
width: 160rpx;
|
||
height: 145rpx;
|
||
}
|
||
|
||
.vip-name {
|
||
padding: 10rpx 30rpx;
|
||
font-size: 46rpx;
|
||
text-align: center;
|
||
align-items: flex-end;
|
||
margin-bottom: 30rpx;
|
||
margin-top: -20rpx;
|
||
}
|
||
|
||
.vip-progress {
|
||
height: 8rpx;
|
||
border-radius: 8rpx;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
.vip-progress-bar {
|
||
background-color: #f8d07c;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.vip-grade-rule {
|
||
margin: 24rpx 40rpx;
|
||
|
||
.title {
|
||
.line {
|
||
width: 8rpx;
|
||
height: 34rpx;
|
||
background-color: #f79c0c;
|
||
}
|
||
}
|
||
}
|
||
|
||
.vip-rights {
|
||
margin: 24rpx 40rpx;
|
||
|
||
.title {
|
||
padding: 28rpx 0;
|
||
|
||
.line {
|
||
width: 8rpx;
|
||
height: 34rpx;
|
||
background-color: #f79c0c;
|
||
}
|
||
}
|
||
|
||
.rights-item {
|
||
width: 25%;
|
||
padding-bottom: 30rpx;
|
||
|
||
image {
|
||
width: 82rpx;
|
||
height: 82rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|