477 lines
13 KiB
477 lines
13 KiB
<template>
|
|
<view>
|
|
<global-loading />
|
|
|
|
<view
|
|
class="memberCenter"
|
|
v-if="isShow"
|
|
>
|
|
<view
|
|
class="memberBg"
|
|
:style="{backgroundImage:'url('+memberListData[activeIndex].memberLevelBackground+')', 'padding-top': paddingTop + 'px'}"
|
|
>
|
|
<view
|
|
class="member-top"
|
|
:style="{'top': topHeight + 'px'}"
|
|
>
|
|
<view class="memberTopInfo">
|
|
<view class="backBox">
|
|
<image
|
|
src="http://36.138.125.206:8081/ceres-local-file/static/images/back_img04.png"
|
|
class="back"
|
|
@click="back"
|
|
></image>
|
|
</view>
|
|
<view class="memberTit fs30 font-color-FFF">会员中心</view>
|
|
</view>
|
|
</view>
|
|
<view class="memberBox">
|
|
<view class="posBox">
|
|
<view class="memberBoxTop">
|
|
<view class="memberTopPos">
|
|
<swiper
|
|
class="swiper pro-box"
|
|
next-margin="30rpx"
|
|
previous-margin="30rpx"
|
|
:current="activeIndex"
|
|
:indicator-dots="false"
|
|
:autoplay="false"
|
|
@change="swiperChange"
|
|
>
|
|
<swiper-item
|
|
class="pro-item-warp"
|
|
v-for="(item, index) in memberListData"
|
|
:key="index"
|
|
>
|
|
<view class="box">
|
|
<view
|
|
class="memberTopBg"
|
|
:style="{backgroundImage:'url('+item.memberLevelBackground+')'}"
|
|
>
|
|
<view class="flex-display">
|
|
<view class="avatarBox">
|
|
<image :src="memberData.headImage"></image>
|
|
</view>
|
|
<view class="nameBox">
|
|
<view class="name fs28 font-color-252744">{{ memberData.name }}</view>
|
|
<view class="level">
|
|
<image :src="item.memberLevelIcon"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="growing">
|
|
<view class="growingValue flex-display flex-sp-between">
|
|
<label class="fs28 fs-weight-400 font-color-252744">当前会员成长值
|
|
{{ memberData.growth }}</label>
|
|
<label
|
|
class="fs24 fs-weight-400 font-color-333 mar-left-20"
|
|
v-if="nextGrowth !== 0 && nextGrowth !== item.growth"
|
|
>{{ nextGrowth }}</label>
|
|
</view>
|
|
<view
|
|
class="progressBar"
|
|
v-if="memberData.growth < nextGrowth"
|
|
>
|
|
<view style="width: 100%">
|
|
<progress
|
|
activeColor="#252744"
|
|
:percent="getPercent(memberData.growth, nextGrowth)"
|
|
active
|
|
stroke-width="2"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="currentName"
|
|
v-else
|
|
>
|
|
以超越该等级
|
|
</view>
|
|
<!-- <view class="flex-display flex-sp-between">-->
|
|
<!-- <label class="fs24 font-color-71521B">{{memberData.memberLevelName}}</label>-->
|
|
<!-- <label class="fs24 font-color-71521B">{{memberData.nextLevelName}}</label>-->
|
|
<!-- </view>-->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="equity">
|
|
<view class="equityBox">
|
|
<view class="equityTit">我的权益</view>
|
|
<view class="equityList">
|
|
<view
|
|
class="equityItem"
|
|
v-for="item of equityList"
|
|
:key="item.memberId"
|
|
>
|
|
<image :src="item.memberIcon"></image>
|
|
<view class="fs24">{{ item.memberName }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="signIn">
|
|
<view class="signInList">
|
|
<view class="signTit fs28 font-color-252744">快速成长</view>
|
|
<view class="signInBox">
|
|
<view class="signItem flex-items flex-sp-between">
|
|
<view class="itemLeft flex-items">
|
|
<view class="leftIcon">
|
|
<image src="http://36.138.125.206:8081/ceres-local-file/static/img/member/memberList2.png"></image>
|
|
</view>
|
|
<view class="leftInfo">
|
|
<label class="fs28 font-color-252744">购物</label>
|
|
<view class="fs24 font-color-90919C">购买商品获取相应成长值</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="rightBtn"
|
|
@click="goToShopping"
|
|
>去购物
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const NET = require('../../utils/request')
|
|
const API = require('../../config/api')
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
memberData: {},
|
|
equityList: [],
|
|
levelInfo: {},
|
|
isShow: false,
|
|
memberListData: [],
|
|
nextGrowth: 0,
|
|
activeIndex: 0,
|
|
topHeight: 10,
|
|
paddingTop: 50
|
|
}
|
|
},
|
|
onLoad() {
|
|
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
this.topHeight = menuButtonInfo.top
|
|
this.paddingTop = this.paddingTop + this.topHeight
|
|
// #endif
|
|
// #ifdef APP
|
|
this.topHeight = 50
|
|
this.paddingTop = 100
|
|
// #endif
|
|
|
|
// 定时器防止app一开始进入时页面混乱问题
|
|
setTimeout(() => {
|
|
this.getMemberShipList()
|
|
}, 200)
|
|
this.memberData = uni.getStorageSync('storage_userInfo');
|
|
this.getMemberByMemberLevel()
|
|
this.getMemberList()
|
|
},
|
|
methods: {
|
|
swiperChange(item) {
|
|
this.activeIndex = item.detail.current
|
|
let num = 0
|
|
num = this.activeIndex + 1
|
|
if (num === this.memberListData.length) {
|
|
this.nextGrowth = this.memberListData[this.activeIndex].growth
|
|
} else {
|
|
this.nextGrowth = this.memberListData[this.activeIndex + 1].growth
|
|
}
|
|
this.equityList = this.memberListData[this.activeIndex].membershipList
|
|
},
|
|
getMemberList() {
|
|
NET.request(API.memberList, {}, 'GET').then(res => {
|
|
this.memberListData = res.data
|
|
this.memberListData.forEach((item, index) => {
|
|
if (item.memberLevelId === this.memberData.memberLevelId) {
|
|
this.activeIndex = index
|
|
let num = 0
|
|
num = this.activeIndex + 1
|
|
if (num === this.memberListData.length) {
|
|
this.nextGrowth = this.memberListData[this.activeIndex].growth
|
|
} else {
|
|
this.nextGrowth = this.memberListData[this.activeIndex + 1].growth
|
|
}
|
|
this.equityList = this.memberListData[this.activeIndex].membershipList
|
|
}
|
|
})
|
|
}).catch(res => {
|
|
})
|
|
},
|
|
getMemberShipList() {
|
|
// 获取会员信息
|
|
// uni.showLoading({
|
|
// mask: true,
|
|
// title: '加载中...',
|
|
// })
|
|
NET.request(API.getMemberShipList, {}, 'GET').then(res => {
|
|
uni.hideLoading()
|
|
this.equityList = res.data
|
|
this.isShow = true
|
|
}).catch(res => {
|
|
})
|
|
},
|
|
// 去首页
|
|
goToShopping() {
|
|
uni.switchTab({
|
|
url: '../../pages/tabbar/index/index'
|
|
})
|
|
},
|
|
getPercent(num, total) {
|
|
num = parseFloat(num);
|
|
total = parseFloat(total);
|
|
if (isNaN(num) || isNaN(total)) {
|
|
return "-";
|
|
}
|
|
return total <= 0 ? "0%" : Math.round((num / total) * 10000) / 100.0;
|
|
},
|
|
// 获取会员等级
|
|
getMemberByMemberLevel() {
|
|
NET.request(`${ API.getMemberByMemberLevel }/${ this.memberData.memberLevelId }`, {}, 'GET').then(res => {
|
|
this.levelInfo = res.data
|
|
uni.setStorageSync('storage_levelInfo', this.levelInfo);
|
|
}).catch(res => {
|
|
})
|
|
},
|
|
// 返回上一级
|
|
back() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
scoped
|
|
>
|
|
.memberCenter {
|
|
background-size: contain;
|
|
min-height: 800rpx;
|
|
|
|
.memberBg {
|
|
background-repeat: no-repeat;
|
|
padding-top: 50rpx;
|
|
}
|
|
|
|
.memberBox {
|
|
width: 100%;
|
|
//background: #523e3a;
|
|
border-radius: 25rpx;
|
|
background-size: contain;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
|
|
.memberBoxTop {
|
|
position: relative;
|
|
|
|
.memberTopPos {
|
|
overflow: hidden;
|
|
|
|
.pro-box {
|
|
height: 300rpx;
|
|
}
|
|
|
|
.swiper {
|
|
.box {
|
|
height: 300rpx;
|
|
padding: 4rpx 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.memberTopBg {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
border-radius: 30rpx;
|
|
padding: 40rpx 30rpx 30rpx 30rpx;
|
|
box-shadow: 0 0 5rpx rgba(90, 90, 90, .5);
|
|
height: 290rpx;
|
|
|
|
.currentName {
|
|
font-size: 26rpx;
|
|
margin-top: 50rpx;
|
|
color: #71521B;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatarBox {
|
|
image {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border: 5rpx solid #FFFFFF;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.nameBox {
|
|
.name {
|
|
color: #333333;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.level {
|
|
image {
|
|
width: 172rpx;
|
|
height: 50rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.growing {
|
|
.growingValue {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.progressBar {
|
|
height: 20rpx;
|
|
width: 100%;
|
|
margin: 20rpx 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.equity {
|
|
border-radius: 25rpx 25rpx 0 0;
|
|
padding: 30rpx;
|
|
background: #F8F8F8;
|
|
margin-top: 50rpx;
|
|
|
|
.equityBox {
|
|
background: #FFFFFF;
|
|
min-height: 326rpx;
|
|
border-radius: 20rpx;
|
|
padding: 10rpx 30rpx 30rpx 30rpx;
|
|
|
|
.equityTit {
|
|
font-weight: bold;
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
font-size: 28rpx;
|
|
color: #252744;
|
|
}
|
|
|
|
.equityList {
|
|
border-top: 2rpx solid #F3F4F5;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
padding-top: 30rpx;
|
|
text-align: center;
|
|
|
|
.equityItem {
|
|
width: 25%;
|
|
color: #252744;
|
|
|
|
image {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.signIn {
|
|
padding: 0 30rpx 30rpx 30rpx;
|
|
background: #F8F8F8;
|
|
|
|
.signInList {
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 0 30rpx 30rpx 30rpx;
|
|
|
|
.signTit {
|
|
font-weight: bold;
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
}
|
|
|
|
.signInBox {
|
|
.signItem {
|
|
border-top: 2rpx solid #F3F4F5;
|
|
padding: 30rpx 0;
|
|
|
|
.itemLeft {
|
|
image {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightBtn {
|
|
width: 160rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
background: #252744;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
border-radius: 40rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.member-top {
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 99;
|
|
left: 0;
|
|
|
|
.memberTopInfo {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.backBox {
|
|
position: absolute;
|
|
left: 10rpx;
|
|
top: 0rpx;
|
|
|
|
.back {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
padding: 0rpx 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
page {
|
|
background: #F8F8F8;
|
|
}
|
|
|
|
.progressBar /deep/ .uni-progress-bar {
|
|
background-color: rgb(235, 235, 235, 0.6) !important;
|
|
height: 5rpx !important;
|
|
border-radius: 22rpx;
|
|
}
|
|
|
|
.progressBar /deep/ .uni-progress-bar .uni-progress-inner-bar {
|
|
border-radius: 22rpx;
|
|
}
|
|
</style>
|