deming/pageE/mine/Integral.vue

<template>
	<view class="integral1">
		<view class="integral-top">
			<view>
				<view class="title">总积分</view>
				<view class="value">{{ memberInfo.member_points || 0 }}</view>
			</view>
			<view>
				<view class="title">经验值</view>
				<view class="value">{{ memberInfo.member_exppoints || 0 }}</view>
			</view>
			<view @click="viewProgress">
				<view class="title">预计进度</view>
				<!-- <view class="value">{{ memberInfo.next_grade_exppoints_diff }}</view> -->
				<view class="value">
					<image src="/static/image/mine/32.png"></image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="integral-botom" :style="{ height: integralHeight }">
			<rich-text :nodes="nodes"></rich-text>
		</scroll-view>
	</view>
</template>
<script>
import common from '@/static/js/common.js';
export default {
	data() {
		return {
			memberInfo: {},
			integralHeight: 0,
			nodes: '',
		}
	},
	onShow() {
		this.setIntegralHeight();
		this.getMemberPointsStat();
	},
	methods: {
		setIntegralHeight() {
			const res = uni.getSystemInfoSync();
			// console.log(res.windowHeight);
			this.integralHeight = res.windowHeight - 251 / 2 + 'px';
		},
		getMemberPointsStat() {
			this.$u.api.getMemberPointsStat().then((res)=>{
				if (res.errCode == 0) {
					this.memberInfo = res.data;
					this.nodes = common.unescapeHTML(this.memberInfo.points_rule);
				}
			})
		},
		viewProgress() {
			this.$u.route({
				url: '/pageE/mine/MineProgress'
			})
		},
	},
};
</script>
<style lang="scss" scoped>
.integral1 {
	height: calc(100vh - var(--window-top));
	overflow: hidden;
	position: relative;
	.integral-top {
		padding: 79rpx 88rpx;
		width: 750rpx;
		height: 271rpx;
		background: linear-gradient(0deg,rgba(246,211,119,1) 1%,rgba(240,154,105,1) 100%);
		display: flex;
		justify-content: space-between;
		> view {
			flex: 1;
			text-align: center;
			.title {
				font-size: 28rpx;
				color: rgba(255,255,255, 0.6);
				margin-bottom: 29rpx;
			}
			.value {
				font-size: 48rpx;
				font-weight: 500;
				color: rgba(255,255,255,1);
				> image {
					width: 52rpx;
					height: 35rpx;
				}
			}
		}
	}
	.integral-botom {
		box-sizing: border-box;
		padding: 30rpx;
		position: absolute;
		width: 100%;
		// height: calc(100vh - 251rpx);
		background: rgba(255,255,255,1);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		top: 251rpx;
		z-index: 9;
	}
}
</style>