deming/pageE/mine/MemberServe.vue

<template>
	<view class="member">
		<view>
			<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88" ></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
			<swiper-item class="swiper-item">
				<view class="integral">
					<view class="integral-top">
						<view>
							<view class="title">总积分</view>
							<view class="value">{{ memberInfo.member_points }}</view>
						</view>
						<view>
							<view class="title">经验值</view>
							<view class="value">{{ memberInfo.member_exppoints }}</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: richHeight }">
						<rich-text :nodes="nodes"></rich-text>
					</scroll-view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="coupon">
					<CouponView></CouponView>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="details">
					<view v-for="(item, index) in pointslogList" :key="index" class="details-item">
						<view class="item-left">
							<view class="item-title u-line-1">{{ item.pl_desc }}</view>
							<view class="item-date">{{ item.pl_addtime }}</view>
						</view>
						<view class="item-right" :class="[item.pl_points < 0 ? 'negative' : 'positive']">
							{{ Number(item.pl_points) > 0 ? '+' + item.pl_points : item.pl_points }}
						</view>
					</view>
					<u-empty text="暂无明细" mode="data" color="#000" v-if="!pointslogList.length"></u-empty>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import common from '@/static/js/common.js';
import CouponView from "./MemberServeCoupon";
export default {
	data() {
		return {
			list: [{
				name: '积分数'
			}, {
				name: '兑换优惠券'
			}, {
				name: '积分明细'
			}],
			richHeight: '',
			swiperHeight: '',
			current: Number,
			swiperCurrent: 0,
			pointslogList:  [],
			memberInfo: {},
			nodes: '',
		}
	},
	components: {
		CouponView
	},
	onLoad(option) {
		this.setViewHeight();
		if(option.current) this.current = option.current;
		else this.current = 0;
	},
	watch: {
		current(value) {
			this.swiperCurrent = value;
			if(value == 2) {
				this.getPointslogList();
			} else if(value == 0) {
				this.getMemberPointsStat();
			}
		}
	},
	methods: {
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.swiperCurrent = current;
			this.current = current;
		},
		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);
				}
			})
		},
		getPointslogList() {
			this.$u.api.getPointslogList().then((res)=>{
				if (res.errCode == 0) {
					this.pointslogList = res.data;
				}
			})
		},
		setViewHeight() {
			const res = uni.getSystemInfoSync();
			// console.log(res.windowHeight);
			this.richHeight = res.windowHeight - (88 + 250) * (res.windowWidth / 750) + 'px';
			// console.log(this.richHeight);
			this.swiperHeight = res.windowHeight - (res.windowWidth / 750) * 88 + 'px';
		},
		viewProgress() {
			this.$u.route({
				url: '/pageE/mine/MineProgress'
			})
		},
	},
}
</script>
<style lang="scss" scpoed>
.member {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	display: flex;
	flex-direction: column;
	// > uni-swiper {
	// 	flex: 1;
	// 	height: calc()
	// }
	.swiper-item {
		padding-top: 10rpx;
		.integral {
			height: 100%;
			position: relative;
			overflow: hidden;
			.integral-top {
				padding: 79rpx 88rpx;
				width: 750rpx;
				height: 270rpx;
				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%;
				background: rgba(255,255,255,1);
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				top: 250rpx;
				z-index: 9;
			}
		}
		.coupon {
			height: 100%;
		}
		.details {
			height: 100%;
			.details-item {
				background-color: #ffffff;
				padding: 23rpx 30rpx;
				margin-bottom: 2rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item-left {
					.item-title {
						width: 450rpx;
						font-size: 32rpx;
						color: rgba(51,51,51,1);
						margin-bottom: 23rpx;
					}
					.item-date {
						font-size: 24rpx;
						color: rgba(153,153,153,1);
					}
				}
				.item-right {
					font-size: 32rpx;
				}
				.positive {
					color: rgba(56,199,70,1);
				}
				.negative {
					color: rgba(255,49,49,1);
				}
			}
		}
	}
}
</style>