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 }">
			
			<view class="medal-title">
				<!-- <image src="../static/mine/29.png"></image> -->
				<view>积分获取规则</view>
				<!-- <image src="../static/mine/30.png"></image> -->
			</view>
			<view class="medal-content">
				<rich-text :nodes="nodes"></rich-text>
			</view>
			<view class="medal-title">
				<!-- <image src="../static/mine/29.png"></image> -->
				<view>会员等级权益</view>
				<!-- <image src="../static/mine/30.png"></image> -->
			</view>
			<view class="medal-content">
				<rich-text :nodes="dengji"></rich-text>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import common from '@/static/js/common.js';
export default {
	data() {
		return {
			memberInfo: {},
			integralHeight: 0,
			nodes: '',
			dengji:""
		}
	},
	onShow() {
		this.setIntegralHeight();
		this.getMemberPointsStat();
	},
	methods: {
		setIntegralHeight() {
			const res = uni.getSystemInfoSync();
			// console.log(res.windowHeight);
			this.integralHeight = res.windowHeight - (res.windowWidth / 750) * 251 + 'px';
		},
		getMemberPointsStat() {
			this.$u.api.getMemberPointsStat().then((res)=>{
				if (res.errCode == 0) {
					this.memberInfo = res.data;
					this.nodes = common.unescapeHTML(this.memberInfo.points_rule.document_content);
					this.dengji = common.unescapeHTML(res.data.grade_rule.document_content)
				}
			})
		},
		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;
	}

		.medal-title {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 52rpx;
			> image {
				width: 22rpx;
				height: 22rpx;
			}
			> view {
				font-size: 32rpx;
				color: rgba(51,51,51,1);
				margin: 0 30rpx;
			}
		}
		.medal-content {
			padding-bottom: 20rpx;
		}
}
</style>