deming/pageE/mine/MineProgress.vue

169 lines
3.9 KiB
Vue
Raw Normal View History

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-07-25 17:51:01 +08:00
<view class="rank-value">lv{{ memberInfo.member_level }}</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-04 19:08:04 +08:00
<text>{{ memberInfo.member_exppoints }}</text>
2020-07-08 18:14:41 +08:00
</view>
2020-07-25 17:51:01 +08:00
<view class="rank-value">lv{{ memberInfo.member_level + 1 }}</view>
2020-07-08 18:14:41 +08:00
</view>
2020-07-25 17:51:01 +08:00
<view class="exp-value">经验值<span>{{ memberInfo.member_exppoints }}</span></view>
2020-08-04 19:08:04 +08:00
<view class="distance">距离下一级还需要{{ memberInfo.next_grade_exppoints_diff }}经验值</view>
2020-07-08 18:14:41 +08:00
</view>
<view class="body">
<view class="title">
<image src="/static/image/mine/34.png"></image>
<text>等级定义</text>
</view>
2020-08-04 19:08:04 +08:00
<!-- <view class="rank-list">
2020-07-08 18:14:41 +08:00
<view v-for="(rank, index) in rank" :key="index" class="list-item">
<view class="rank-value">lv{{ rank.level }}</view>
<view class="rank-interval"><span>经验值:</span>{{ rank.max == '--' ? rank.min + '及以上' : rank.min + '~' + rank.max }}</view>
</view>
2020-08-04 19:08:04 +08:00
</view> -->
<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: {
percentExp(value, rank) {
2020-07-27 17:59:47 +08:00
// console.log(rank);
2020-07-25 17:51:01 +08:00
let result = '0/0';
if(rank) result = value + '/' + rank.max;
return result;
},
},
onShow() {
this.getMemberPointsStat();
},
methods: {
getMemberPointsStat() {
this.$u.api.getMemberPointsStat().then((res)=>{
if (res.errCode == 0) {
this.memberInfo = res.data;
2020-08-04 19:08:04 +08:00
this.nodes = common.unescapeHTML(res.data.points_rule);
2020-07-27 17:59:47 +08:00
// console.log(this.percent);
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-04 19:08:04 +08:00
margin-top: 60rpx;
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;
margin-bottom: 30rpx;
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>