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">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="integral">
					<view class="integral-top">
						<view>
							<view class="title">总积分</view>
							<view class="value">999</view>
						</view>
						<view>
							<view class="title">经验值</view>
							<view class="value">999</view>
						</view>
						<view>
							<view class="title">预计进度</view>
							<view class="value">999</view>
						</view>
					</view>
					<view class="integral-botom">
						<rich-text :nodes="nodes"></rich-text>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="coupon">
					<view v-for="(item, index) in 3" :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>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y class="details">
					<view v-for="(item, index) in 6" :key="index" class="details-item">
						<view class="item-left">
							<view class="item-title">积分商城兑换礼品</view>
							<view class="item-date">2020-03-11</view>
						</view>
						<view class="item-right" :class="[index&1 ? 'negative' : 'positive']">
							{{ index&1 ? '-' + 10.00 : '+' + 10.00 }}
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
export default {
	data() {
		return {
			list: [{
				name: '积分数'
			}, {
				name: '兑换优惠券'
			}, {
				name: '积分明细'
			}],
			current: 0,
			swiperCurrent: 0,
			nodes: '<h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1><h1>2</h1>'
		}
	},
	methods: {
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.swiperCurrent = current;
			this.current = current;
		}
	},
}
</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;
	}
	.swiper-item {
		padding-top: 10rpx;
		.integral {
			height: 100%;
			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);
					}
				}
			}
			.integral-botom {
				position: absolute;
				width: 750rpx;
				// height: 856rpx;
				background: rgba(255,255,255,1);
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				top: 251rpx;
				z-index: 9;
			}
		}
		.coupon {
			.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 {
			.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>