deming/pageE/mine/MineProgress.vue

<template>
	<view class="progress" v-if="memberInfo">
		<view class="header">
			<view class="line-progress">
				<view class="rank-value">lv{{ memberInfo.member_level || 0 }}</view>
				<view class="line-box">
					<u-line-progress :percent="percent" :show-percent="false" inactive-color="#FFFFFF" active-color="#F1A36B" height="30" :striped="true" :striped-active="true"></u-line-progress>
					<text>{{ (memberInfo.member_exppoints || 0) + '/' + (memberInfo.next_member_level_exppoints || 0) }}</text>
				</view>
				<view class="rank-value">lv{{ memberInfo.next_member_level || 0 }}</view>
			</view>
			<view class="exp-value">经验值<span>{{ memberInfo.member_exppoints || 0 }}</span></view>
			<view class="distance">距离下一级还需要 {{ memberInfo.next_member_level_exppoints_diff || '--' }} 经验值</view>
		</view>
		<view class="body">
			<view class="title" v-if="memberInfo.level_rule">
				<image src="/static/image/mine/34.png"></image>
				<text>{{ memberInfo.level_rule.document_title || '' }}</text>
			</view>
			<view class="rich">
				<rich-text :nodes="nodes"></rich-text>
			</view>
		</view>
	</view>
</template>
<script>
import common from '@/static/js/common.js';
export default {
	data() {
		return {
			percent: 0,
			memberInfo: {},
			nodes: '',
		}
	},
	filters: {
		percentExp(value, next) {
			let result = '0 / 0';
			result = typeof(next) == 'Number' 
			? value + ' / ' + (value + next)
			: value + ' / ' + '0'
			return result;
		},
	},
	onShow() {
		this.getMemberPointsStat();
	},
	methods: {
		getMemberPointsStat() {
			this.$u.api.getMemberPointsStat().then((res)=>{
				if (res.errCode == 0) {
					this.memberInfo = res.data;
					this.nodes = common.unescapeHTML(res.data.level_rule.document_content);
					// console.log(this.percent);
					this.percent = (res.data.member_exppoints / res.data.next_member_level_exppoints) * 100;
				}
			})
		},
	}
};
</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 {
		margin-top: 20rpx;
		.title {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(51,51,51,1);
			// border-bottom: #ECECEC 1rpx solid;
			margin-bottom: 20rpx;
			> image {
				width: 29rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
		}
		.rich {
			padding: 0 60rpx;
		}
		// .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);
		// 			}
		// 		}
		// 	}
		// }
	}
}
</style>