2020-07-08 18:14:41 +08:00
|
|
|
<template>
|
2020-07-25 17:51:01 +08:00
|
|
|
<view class="progress" v-if="memberInfo">
|
2020-07-08 18:14:41 +08:00
|
|
|
<view class="header">
|
|
|
|
<view class="line-progress">
|
2020-08-14 15:46:43 +08:00
|
|
|
<view class="rank-value">lv{{ memberInfo.member_level || 0 }}</view>
|
2020-07-08 18:14:41 +08:00
|
|
|
<view class="line-box">
|
2020-07-25 17:51:01 +08:00
|
|
|
<u-line-progress :percent="percent" :show-percent="false" inactive-color="#FFFFFF" active-color="#F1A36B" height="30" :striped="true" :striped-active="true"></u-line-progress>
|
2020-08-14 15:46:43 +08:00
|
|
|
<text>{{ (memberInfo.member_exppoints || 0) + '/' + (memberInfo.next_member_level_exppoints || 0) }}</text>
|
2020-07-08 18:14:41 +08:00
|
|
|
</view>
|
2020-08-14 15:46:43 +08:00
|
|
|
<view class="rank-value">lv{{ memberInfo.next_member_level || 0 }}</view>
|
2020-07-08 18:14:41 +08:00
|
|
|
</view>
|
2020-08-14 15:46:43 +08:00
|
|
|
<view class="exp-value">经验值<span>{{ memberInfo.member_exppoints || 0 }}</span></view>
|
|
|
|
<view class="distance">距离下一级还需要 {{ memberInfo.next_member_level_exppoints_diff || '--' }} 经验值</view>
|
2020-07-08 18:14:41 +08:00
|
|
|
</view>
|
|
|
|
<view class="body">
|
2020-08-09 18:39:35 +08:00
|
|
|
<view class="title" v-if="memberInfo.level_rule">
|
2020-07-08 18:14:41 +08:00
|
|
|
<image src="/static/image/mine/34.png"></image>
|
2020-08-14 15:46:43 +08:00
|
|
|
<text>{{ memberInfo.level_rule.document_title || '' }}</text>
|
2020-07-08 18:14:41 +08:00
|
|
|
</view>
|
2020-08-04 19:08:04 +08:00
|
|
|
<view class="rich">
|
|
|
|
<rich-text :nodes="nodes"></rich-text>
|
2020-07-08 18:14:41 +08:00
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
2020-08-04 19:08:04 +08:00
|
|
|
import common from '@/static/js/common.js';
|
2020-07-08 18:14:41 +08:00
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
2020-07-25 17:51:01 +08:00
|
|
|
percent: 0,
|
|
|
|
memberInfo: {},
|
2020-08-04 19:08:04 +08:00
|
|
|
nodes: '',
|
2020-07-08 18:14:41 +08:00
|
|
|
}
|
2020-07-25 17:51:01 +08:00
|
|
|
},
|
|
|
|
filters: {
|
2020-08-08 18:15:07 +08:00
|
|
|
percentExp(value, next) {
|
|
|
|
let result = '0 / 0';
|
|
|
|
result = typeof(next) == 'Number'
|
|
|
|
? value + ' / ' + (value + next)
|
|
|
|
: value + ' / ' + '0'
|
2020-07-25 17:51:01 +08:00
|
|
|
return result;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onShow() {
|
|
|
|
this.getMemberPointsStat();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getMemberPointsStat() {
|
|
|
|
this.$u.api.getMemberPointsStat().then((res)=>{
|
|
|
|
if (res.errCode == 0) {
|
|
|
|
this.memberInfo = res.data;
|
2020-08-09 14:23:59 +08:00
|
|
|
this.nodes = common.unescapeHTML(res.data.level_rule.document_content);
|
2020-07-27 17:59:47 +08:00
|
|
|
// console.log(this.percent);
|
2020-08-09 14:23:59 +08:00
|
|
|
this.percent = (res.data.member_exppoints / res.data.next_member_level_exppoints) * 100;
|
2020-07-25 17:51:01 +08:00
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
2020-07-08 18:14:41 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.progress {
|
|
|
|
.header {
|
|
|
|
width: 750rpx;
|
|
|
|
height: 271rpx;
|
|
|
|
background: url('/static/image/mine/33.png') no-repeat left top / contain;
|
|
|
|
padding: 30rpx {
|
|
|
|
top: 82rpx;
|
|
|
|
};
|
|
|
|
color: #FFF;
|
|
|
|
.line-progress {
|
|
|
|
display: flex;
|
|
|
|
align-items: flex-start;
|
|
|
|
margin-bottom: 5rpx;
|
|
|
|
.rank-value {
|
|
|
|
height: 30rpx;
|
|
|
|
line-height: 30rpx;
|
|
|
|
box-sizing: content-box;
|
|
|
|
background:rgba(255,213,101,1);
|
|
|
|
border-radius: 6rpx;
|
|
|
|
padding: 0 10rpx;
|
|
|
|
}
|
|
|
|
.line-box {
|
|
|
|
width: 400rpx;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: flex-end;
|
|
|
|
margin: 0 16rpx;
|
|
|
|
/deep/ .u-progress {
|
|
|
|
.u-active {
|
|
|
|
box-sizing: border-box;
|
|
|
|
border: 4rpx solid #FFF;
|
|
|
|
border-radius: 50rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
> text {
|
|
|
|
margin-top: 12rpx;
|
|
|
|
font-size: 20rpx;
|
|
|
|
color: rgba(255,255,255,1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.exp-value {
|
|
|
|
font-size: 28rpx;
|
|
|
|
margin-bottom: 32rpx;
|
|
|
|
> span {
|
|
|
|
margin-left: 20rpx;
|
|
|
|
font-size: 32rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.distance {
|
|
|
|
font-size: 22rpx;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.body {
|
2020-08-09 18:39:35 +08:00
|
|
|
margin-top: 20rpx;
|
2020-07-08 18:14:41 +08:00
|
|
|
.title {
|
|
|
|
height: 88rpx;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 500;
|
|
|
|
color: rgba(51,51,51,1);
|
2020-08-04 19:08:04 +08:00
|
|
|
// border-bottom: #ECECEC 1rpx solid;
|
2020-08-09 18:39:35 +08:00
|
|
|
margin-bottom: 20rpx;
|
2020-07-08 18:14:41 +08:00
|
|
|
> image {
|
|
|
|
width: 29rpx;
|
|
|
|
height: 36rpx;
|
|
|
|
margin-right: 20rpx;
|
|
|
|
}
|
|
|
|
}
|
2020-08-04 19:08:04 +08:00
|
|
|
.rich {
|
|
|
|
padding: 0 60rpx;
|
2020-07-08 18:14:41 +08:00
|
|
|
}
|
2020-08-04 19:08:04 +08:00
|
|
|
// .rank-list {
|
|
|
|
// padding: 30rpx;
|
|
|
|
// .list-item {
|
|
|
|
// margin-bottom: 40rpx;
|
|
|
|
// display: flex;
|
|
|
|
// align-items: center;
|
|
|
|
// .rank-value {
|
|
|
|
// color: #FFF;
|
|
|
|
// height: 30rpx;
|
|
|
|
// line-height: 30rpx;
|
|
|
|
// box-sizing: content-box;
|
|
|
|
// background:rgba(255,213,101,1);
|
|
|
|
// border-radius: 6rpx;
|
|
|
|
// padding: 0 10rpx;
|
|
|
|
// margin-right: 15rpx;
|
|
|
|
// }
|
|
|
|
// .rank-interval {
|
|
|
|
// font-size: 28rpx;
|
|
|
|
// color: #999999;
|
|
|
|
// > span {
|
|
|
|
// margin-right: 10rpx;
|
|
|
|
// color: rgba(51,51,51,1);
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
2020-07-08 18:14:41 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|