MoeNovaClient/pages/my/creativeExpert.vue

<template>
	<view class="creative-expert-page">
		<div class="navbar">
			<view class="navbar-left">
				<image @click="goBack()" class="back" src="../../static/vip/hy_icon_jiantou.png"></image>

			</view>
			<view class="navbar-center">
				创意达人值说明
			</view>
			<view class="navbar-right">

			</view>
		</div>
		<view class="progress-box">
			<view class="progress-box-title">
				我的当前等级
			</view>
			<view class="progress-box-level">
				<image v-if="myinfo.my_level || myinfo.my_level == 0"
					:src="`../../static/icon/level_${myinfo.my_level}.png`" class="level-icon" />
			</view>
			<view class="progress-box-title" style="text-align: center;">
				升级到下个等级还需{{ myinfo.level_remaining }}点经验
			</view>
			<view class="progress-box-level-progress">
				<view class="progress-bg">
					<view class="progress-bar" :style="{ width: myinfo.level_progress + '%' }"></view>
					<image class="progress-bar-image"  :style="{ left: myinfo.level_progress + '%' }" src="../../static/me/creativeExpertProgress.png" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="progress-box-vip">
				<view>
					Lv{{ myinfo.my_level }}
				</view>
				<image v-if="myinfo.is_vip" src="../../static/me/creativeExpert _vip.png" mode="widthFix"
					class="creativeExpert_vip" />
				<view>
					Lv{{ myinfo.my_level + 1 }}
				</view>

			</view>
		</view>
		<image src="../../static/me/creativeExpert-text.png" mode="widthFix" class="creativeExpert-text" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			myinfo: {
				level_remaining: 0,
				level_total: 0,
				level_progress: 0
			},
			grade: [[0, 99], [100, 799], [800, 1999], [2000, 3999], [4000, 8999], [9000, 9999999]]

		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		getData() {
			uni.request({
				url: this.$apiHost + "/User/getinfo",
				data: {
					uuid: getApp().globalData.uuid,
					skey: getApp().globalData.skey,
				},
				header: {
					"content-type": "application/json",
					sign: getApp().globalData.headerSign,
				},
				success: (res) => {
					if (res.data) {
						// this.myinfo = res.data;
						let level_data = this.grade[res.data.my_level]
						this.myinfo.is_vip = res.data.is_vip
						this.myinfo.my_level = res.data.my_level
						this.myinfo.level_remaining = level_data[1] - res.data.num_jinyan
						this.myinfo.level_total = level_data[1] - level_data[0]
						this.myinfo.level_progress = ((res.data.num_jinyan - level_data[0]) / this.myinfo.level_total).toFixed(4) * 100
					}
				},
				complete: (com) => {
				},
				fail: (e) => {
					console.log("----e:", e);
				},
			});
		},
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style scoped lang="scss">
.creative-expert-page {
	background: url('../../static/me/creativeExpert_top_bg.png') top center / 100% auto no-repeat #1f1f1f;
	min-height: 100vh;
	color: #fff;
	padding: 0 28rpx;
	width: 100vw;
	box-sizing: border-box;

	.navbar {
		width: calc(100vw - 60rpx);
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		z-index: 99;
		padding-top: var(--status-bar-height);

		.navbar-center {
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
		}

		// z-index: 99;
		// padding-top: var(--status-bar-height);
		.navbar-left {
			width: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.back {
				width: 32rpx;
				height: 32rpx;
				opacity: 0.9;
			}

		}

		.navbar-right {
			width: 50rpx;
			height: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

		}
	}

	.progress-box {
		height: 350rpx;
		width: 100%;
		padding: 0 18rpx;
		padding-top: 42rpx;
		padding-bottom: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.progress-box-title {
			width: 100%;
		}



		.creativeExpert_vip {
			width: 234rpx;
			height: 52rpx;
		}

		.progress-box-level-progress {
			padding: 28rpx 22rpx 18rpx 22rpx;
			width: 100%;
		}

		.progress-bg {
			width: 100%;
			height: 10rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 86rpx;
			position: relative;
			top: 0;
			left: 0;
			.progress-bar {
				height: 10rpx;
				background: #ACF934;
				border-radius: 86rpx;
				transition: width 0.6s ease-in-out;
			}

			.progress-bar-image {
				width: 24rpx;
				height: 24rpx;
				position: absolute; 
				top: 50%;
				transform: translate(-50%,-50%);
			}
		}

		.progress-box-vip {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			width: 100%;
			padding: 0 22rpx;
			font-size: 24rpx;
			color: #ACF934;
		}
	}

	.progress-box-level {
		padding-top: 28rpx;
		padding-bottom: 56rpx;
	}

	.level-icon {
		width: 180rpx;
		height: 80rpx;

	}

	.creativeExpert-text {
		width: 100%;
	}
}
</style>