order 7.25

pageE/mine/MineProgress.vue

@@ -1,16 +1,16 @@
 <template>
-	<view class="progress">
+	<view class="progress" v-if="memberInfo">
 		<view class="header">
 			<view class="line-progress">
-				<view class="rank-value">lv1</view>
+				<view class="rank-value">lv{{ memberInfo.member_level }}</view>
 				<view class="line-box">
-					<u-line-progress :percent="70" :show-percent="false" inactive-color="#FFFFFF" active-color="#F1A36B" height="30"></u-line-progress>
-					<text>78/99</text>
+					<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">lv2</view>
+				<view class="rank-value">lv{{ memberInfo.member_level + 1 }}</view>
 			</view>
-			<view class="exp-value">经验值<span>78</span></view>
-			<view class="distance">距离下一级还需要21经验值</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">
@@ -66,8 +66,37 @@ export default {
 					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>