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 }}</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 | percentExp(rank[memberInfo.member_level - 1])}}</text>
				</view>
				<view class="rank-value">lv{{ memberInfo.member_level + 1 }}</view>
			</view>
			<view class="exp-value">经验值<span>{{ memberInfo.member_exppoints }}</span></view>
			<view class="distance">距离下一级还需要{{ memberInfo.member_exppoints | residualExp(rank[memberInfo.member_level - 1]) }}经验值</view>
		</view>
		<view class="body">
			<view class="title">
				<image src="/static/image/mine/34.png"></image>
				<text>等级定义</text>
			</view>
			<view class="rank-list">
				<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>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			rank: [
				{
					level: 1,
					min: 50,
					max: 99,
				},
				{
					level: 2,
					min: 100,
					max: 199,
				},
				{
					level: 3,
					min: 200,
					max: 399,
				},
				{
					level: 4,
					min: 400,
					max: 999,
				},
				{
					level: 5,
					min: 1000,
					max: 1999,
				},
				{
					level: 6,
					min: 2000,
					max: 4999,
				},
				{
					level: 7,
					min: 5000,
					max: '--',
				}
			],
			percent: 0,
			memberInfo: {},
		}
	},
	filters: {
		percentExp(value, rank) {
			// console.log(rank);
			let result = '0/0';
			if(rank) result = value + '/' + rank.max;
			return result;
		},
		residualExp(value, rank) {
			let result = 0;
			if(rank) result = rank.max - value;
			return result;
		}
	},
	onShow() {
		this.getMemberPointsStat();
	},
	methods: {
		getMemberPointsStat() {
			this.$u.api.getMemberPointsStat().then((res)=>{
				if (res.errCode == 0) {
					this.memberInfo = res.data;
					this.percent = (this.memberInfo.member_exppoints / this.rank[this.memberInfo.member_level - 1].max) * 100;
					// console.log(this.percent);
				}
			})
		},
	}
};
</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 {
		.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;
			> image {
				width: 29rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
		}
		.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>