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>
							<view class="title">预计进度</view>
							<view class="value">{{ memberInfo.next_grade_exppoints_diff }}</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">
				<scroll-view scroll-y class="coupon">
					<view v-for="(item, index) in couponList" :key="index" class="coupon-item">
						<img src="../static/mine/23.png" />
						<view class="coupon-main">
							<view class="coupon-title">萌店十元优惠券</view>
							<view class="coupon-date">
								<img src="../static/mine/26.png" />
								<view>2020.05.17-2020.06.17</view>
							</view>
							<view class="coupon-integral">299积分</view>
						</view>
						<view class="coupon-btn">兑换</view>
					</view>
					<u-empty text="暂无优惠券" mode="coupon" color="#000" v-if="!couponList.length"></u-empty>
				</scroll-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">{{ item.pl_desc }}</view>
							<view class="item-date">{{ item.pl_addtime }}</view>
						</view>
						<view class="item-right" :class="[item.pl_addtime < 0 ? 'negative' : 'positive']">
							{{ item.pl_addtime > 0 ? item.pl_addtime : '+' + 10.00 }}
						</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';
export default {
	data() {
		return {
			list: [{
				name: '积分数'
			}, {
				name: '兑换优惠券'
			}, {
				name: '积分明细'
			}],
			richHeight: '',
			swiperHeight: '',
			current: 0,
			swiperCurrent: 0,
			pointslogList:  [],
			couponList: [],
			memberInfo: {},
			nodes: '',
		}
	},
	onShow() {
		this.getMemberPointsStat();
		this.getPointslogList();
		this.setViewHeight();
	},
	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);
				}
			})
		},
		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) / 2 + 'px';
			// console.log(this.richHeight);
			this.swiperHeight = res.windowHeight - 88 / 2 + 'px';
		},
	},
}
</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);
					}
				}
			}
			.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%;
			.coupon-item {
				padding: 30rpx;
				background-color: #ffffff;
				display: flex;
				align-items: flex-end;
				margin-bottom: 2rpx;
				> img {
					width: 180rpx;
					height: 160rpx;
					border-radius: 10rpx;
					margin-right: 30rpx;
				}
				.coupon-main {
					.coupon-title {
						font-size: 30rpx;
						color: rgba(51,51,51,1);
					}
					.coupon-date {
						display: flex;
						align-items: center;
						margin: 29rpx 0 20rpx;
						> img {
							width: 24rpx;
							height: 24rpx;
							margin-right: 15rpx;
						}
						> view {
							font-size: 24rpx;
							color: rgba(153,153,153,1);
						}
					}
					.coupon-integral {
						font-size: 30rpx;
						font-weight: 500;
						color: rgba(255,120,15,1);
					}
				}
				.coupon-btn {
					margin-left: auto;
					width: 85rpx;
					// height: 42rpx;
					border: 2rpx solid rgba(255,120,15,1);
					border-radius: 10rpx;
					font-size: 26rpx;
					color: rgba(255,120,15,1);
					line-height: 42rpx;
					text-align: center;
				}
			}
		}
		.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 {
						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>