vipCenter.vue

<template>
	<view class="main">
		<TopBar title="会员中心" bgColor="#2D3239" titleColor="#fff" />
		<view class="top_bg">
			<view class="swiper_content">
				<swiper style="height: 284rpx;" @change="swiperChange">
					<swiper-item style="left: -30rpx;" :style="[0 === index ? {'left':0} : null]">
						<view class="swiper_card" :class="[{scale: 0 !== index}, `level${member_list[0].grade}`]" :style="[member_list.length === 1 ? {width: '100%'} : null]">
							<text class="now_level">{{member_list[0].grade_name}}</text>
							<view class="card_flex">
								<image :src="member_list[0].portrait || $defaultPortrait"></image>
								<view>
									<view class="customer_name">{{member_list[0].user_name}}</view>
									<view class="card_bar">
										<view class="process_bar" 
										:style="`width: ${Number(member_list[0].total_integral)*100/(Number(member_list[0].total_integral)+member_list[0].growth_diff).toFixed(2)}%`"></view>
									</view>
									<view class="diff" v-if="member_list.length > 1">{{member_list[0].total_integral}}/{{Number(member_list[0].total_integral)+member_list[0].growth_diff}} 升至{{member_list[1].grade_name}}</view>
								</view>
							</view>
							<view class="card_bottom">
								<text class="growth_diff" v-if="member_list.length > 1">您距离下一等级还需{{member_list[0].growth_diff}}经验值</text>
								<text v-else></text>
								<view class="levelStrategy" @click="$jump('/pages/levelStrategy/levelStrategy' ,2)"><text class="picon" :class="`picon${member_list[0].grade}`"></text><text>升级攻略</text></view>
							</view>
						</view>
					</swiper-item>
					<swiper-item style="left: -30rpx;" v-if="member_list.length > 1" :style="[1 === index ? {'left':0} : null]">
						<view class="swiper_card" :class="[{scale: 1 !== index}, `level${member_list[1].grade}`]" :style="[member_list.length === 1 ? {width: '100%'} : null]">
							<text class="now_level">{{member_list[1].grade_name}}</text>
							<view class="card_flex">
								<image :src="member_list[1].portrait || $defaultPortrait"></image>
								<view>
									<view class="customer_name">{{member_list[1].user_name}}</view>
									<view class="card_bar"></view>
									<view class="diff">{{member_list[1].grade_name}}</view>
								</view>
							</view>
							<view class="card_bottom">
								<text></text>
								<view class="levelStrategy" @click="$jump('/pages/levelStrategy/levelStrategy' ,2)"><text class="picon" :class="`picon${member_list[1].grade}`"></text><text>升级攻略</text></view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="top_title" v-if="titleFlag">当前等级权益</view>
			<view class="now_benefit" v-for="(val, key) in member_list" v-if="key === index && val.grade_list !==null" :key="key" :style="[heightFlag ? {'height': height+'rpx'} : null]" :class="val.grade_list.length > 4 ? 'height1' : 'height2'">
				<view class="benefit_item" v-for="(item, k) in val.grade_list" :key="k" :style="[(key === 0 && item.is_next) ? {color: 'rgba(255,255,255,0.4)'} : null]">
					{{item.short_title}}
					<text class="dia" v-if="(key === 0 && !item.is_next) || (key === 1)"></text>
					<text v-else class="unlock"><text class="eosfont">&#xe645;</text>{{val.grade_name.substr(0,2)}}解锁</text>
				</view>
				
			</view>
			<view class="collapse_btn" @click="moreBenefit()" v-if="moreFlag"><text v-if="!heightFlag">查看更多</text><text v-else>收起</text><text class="eosfont" v-if="!heightFlag">&#xe729;</text><text class="eosfont" v-else>&#xe728;</text></text></view>
		</view>
		<view class="more_bar">
			<text class="text1">兑换中心</text>
			<!-- <text class="text2">查看更多<text class="eosfont">&#xe608;</text></text> -->
		</view>
		<view class="goods_box">
			<view class="goods_item" v-for="(item, index) in integral_list" :key="index" @click="$jump(`${php}app=my_integral_goods&act=detail&id=${item.goods_id}&integral=${member_list[0].integral}`)">
				<image class="goods_img" :src="item.goods_logo || $noGoodsImg"></image>
				<text class="goods_name">{{item.goods_name}}</text>
				<text class="goods_price">{{item.goods_point}}积分</text>
			</view>
		</view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	import { php } from '@/common/host.js';
	export default {
		data() {
			return {
				height: 336,
				heightFlag: false,
				animationData: {},
				integral_list: [],
				member_list: [{
					grade: '',
					grade_name: '',
					grade_list: []
				}, {
					grade: '',
					grade_name: '',
					grade_list: []
				}],
				index: 0,
				moreFlag: true,
				titleFlag: true,
				php: php
			}
		},
		onLoad() {
			uni.request({
				url: '/uni/api/member/get_member_index',
				method: 'get',
				dataType: 'json',
				success: (res) => {
					if(res.data.code === 0) {
						this.integral_list = res.data.data.integral_list;
						if(res.data.data.member_list[0].grade_list === null) {
							res.data.data.member_list[0].grade_list = [];
						}
						if(res.data.data.member_list[1]) {
							let arr = res.data.data.member_list[1].grade_list;
							arr.map((item,index) => {
								item.is_next = 1;
							});
							res.data.data.member_list[0].grade_list = res.data.data.member_list[0].grade_list.concat(arr);
						}
						this.member_list = res.data.data.member_list;
						this.changeHeight(res.data.data.member_list[0].grade_list, 0);
					} else if (res.data.code === -1) {
						// 未登录状态
						this.$jump(`${php}app=member&act=login`)
					}
				}
			});
			this.animation = uni.createAnimation();
		},
		methods: {
			moreBenefit() {
				this.heightFlag = !this.heightFlag;
			},
			changeHeight(data, index) {
				this.index = index;
				if(data === null) {
					this.moreFlag = false;
					this.titleFlag = false;
					return
				}
				this.titleFlag = true;
				if(data.length > 8) {
					this.moreFlag = true;
				} else {
					this.moreFlag = false;
				}
				let n = data.length % 4,
					init = Math.ceil(data.length / 4);
				this.height = init * 160 + init * 16;
			},
			swiperChange(e) {
				var current  = e.detail.current;
				this.index = current;
				if(this.member_list[current].grade_list === null) {
					this.moreFlag = false;
					this.titleFlag = false;
					return
				}
				this.titleFlag = true;
				let length = this.member_list[current].grade_list.length;
				if(length > 8) {
					this.moreFlag = true;
				} else {
					this.moreFlag = false;
				}
				this.changeHeight(this.member_list[current].grade_list, current);
			}
		},
		components: {
			TopBar
		}
	}
</script>

<style lang="less" scoped>
	.main {
		padding: 88rpx 0 76rpx;
		background-color: #FBFBFB;
		.top_bg {
			background-color: #2D3239;
			overflow: hidden;
			margin-top: -8rpx;
			padding: 0 24rpx 24rpx;
			border-radius: 0 0 24rpx 24rpx;
		}
		.swiper_content {
			margin-top: 16rpx;
			height: 284rpx;
			.scale {
				height: 256rpx !important;
				margin-top: 14rpx;
			}
			.swiper_card {
				width: 640rpx;
				height: 284rpx;
				box-shadow:0px 8rpx 24rpx 0px rgba(255,219,43,0.2);
				border-radius:16rpx;
				position: relative;
				overflow: hidden;
				transition: all 0.5s;
				.card_flex {
					display: flex;
					margin: 94rpx 0 0 30rpx;
					image {
						width: 92rpx;
						height: 92rpx;
						border-radius: 50%;
						margin-right: 24rpx;
					}
					.customer_name {
						color: #000000;
						font-size: 28rpx;
						font-family:PingFangSC-Medium,PingFang SC;
						font-weight:500;
						height: 40rpx;
						line-height: 40rpx;
					}
					.card_bar {
						width: 200rpx;
						height: 8rpx;
						border-radius: 4rpx;
						background-color: #FFF3B6;
						margin: 8rpx 0 ;
						overflow: hidden;
						.process_bar {
							background-color: #6E4C26;
							height: 100%;
						}
					}
					.diff {
						color: rgba(0,0,0,0.7);
						font-size: 24rpx;
						font-family:PingFangSC-Medium,PingFang SC;
						font-weight:500;
						height: 34rpx;
						line-height: 34rpx;
					}
				}
				.now_level {
					width: 128rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 20rpx 0 0 20rpx;
					background-color: red;
					color: #000000;
					font-size: 24rpx;
					position: absolute;
					right: 0;
					top: 24rpx;
					background-color: rgba(255,255,255,0.3);
				}
				.card_bottom {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 64rpx;
					line-height: 64rpx;
					background-color: red;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 24rpx;
					box-sizing: border-box;
					background-color: rgba(0,0,0,0.2);
					color: rgba(255,255,255,0.8);
					.levelStrategy {
						font-size: 24rpx;
						display: flex;
						align-items: center;
						.picon {
							width: 36rpx;
							height: 36rpx;
							display: inline-block;
						}
						.picon1 {
							background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p1%403x.png') no-repeat;
							background-size: 100% 100%;
						}
						.picon2 {
							background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p2%403x.png') no-repeat;
							background-size: 100% 100%;
						}
						.picon3 {
							background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p3%403x.png') no-repeat;
							background-size: 100% 100%;
						}
						.picon4 {
							background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p4%403x.png') no-repeat;
							background-size: 100% 100%;
						}
						.picon5 {
							background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/p5%403x.png') no-repeat;
							background-size: 100% 100%;
						}
					}
					.growth_diff {
						font-size: 24rpx;
						color: rgba(255,255,255,0.8);
					}
				}
			}
			.level1 {
				background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level1%402x.png') no-repeat;
				background-size: 100% 100%;
			}
			.level2 {
				background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level2%402x.png') no-repeat;
				background-size: 100% 100%;
			}
			.level3 {
				background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level3%402x.png') no-repeat;
				background-size: 100% 100%;
			}
			.level4 {
				background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level4%402x.png') no-repeat;
				background-size: 100% 100%;
			}
			.level5 {
				background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/level5%402x.png') no-repeat;
				background-size: 100% 100%;
			}
		}
		.top_title {
			color: #D6A35D;
			font-size: 40rpx;
			height: 56rpx;
			line-height: 56rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			position: relative;
			margin-top: 40rpx;
		}
		.top_title:after {
			width: 80rpx;
			height: 6rpx;
			border-radius: 4rpx;
			background-color: #D6A35D;
			content: '';
			position: absolute;
			left: 0;
			bottom: -12rpx;
		}
		.now_benefit {
			display: flex;
			flex-wrap: wrap;
			margin-top: 54rpx;
			overflow: hidden;
			transition: height 0.3s;
			.benefit_item {
				width: 160rpx;
				height: 160rpx;
				background-color: rgba(0,0,0,0.5);
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				color: #F6CA8D;
				font-size: 28rpx;
				padding: 16rpx;
				box-sizing: border-box;
				position: relative;
				overflow: hidden;
				margin-left: 20rpx;
				.unlock {
					font-size: 16rpx;
					color: rgba(255,255,255,0.4);
					display: flex;
					align-items: center;
					justify-content: center;
					width: 120rpx;
					height: 36rpx;
					line-height: 36rpx;
					position: absolute;
					bottom: 16rpx;
					left: 20rpx;
					background-color: #2E3136;
					border-radius: 18rpx;
				}
				.dia {
					position: absolute;
					right: -10rpx;
					bottom: -10rpx;
					width: 60rpx;
					height: 60rpx;
					background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/dia.png') no-repeat;
					background-size: 100% 100%;
				}
			}
			.benefit_item::-webkit-scrollbar {
				display: none;
			}
			.benefit_item:nth-of-type(4n-3) {
				margin-left: 0;
			}
		}
		.height1 {
			height: 352rpx;
		}
		.height2 {
			height: 176rpx;
		}
		.collapse_btn {
			width: 408rpx;
			height: 68rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 34rpx;
			border: 2px solid #F6CA8D;
			box-sizing: border-box;
			color: #F6CA8D;
			font-size: 28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			margin: 24rpx auto 42rpx;
		}
		.more_bar {
			width: 702rpx;
			margin: 30rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.text1 {
				font-size: 40rpx;
				color: #21232C;
				height: 56rpx;
				line-height: 56rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
			}
			.text2 {
				color: #333333;
				font-size: 28rpx;
				height: 40rpx;
				line-height: 40rpx;
				display: flex;
				align-items: center;
				text {
					color: grey;
					font-weight: lighter;
					margin-left: 6rpx;
				}
			}
		}
		.goods_box {
			width: 702rpx;
			margin: 0 auto;
			background-color: #fff;
			padding: 0 24rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;
			.goods_item {
				width: 208rpx;
				margin-top: 24rpx;
				.goods_img {
					width: 208rpx;
					height: 208rpx;
					border-radius: 16rpx;
				}
				.goods_name {
					color: #21232C;
					font-size: 26rpx;
					line-height: 36rpx;
					width: 100%;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.goods_price {
					color: #C28F4B;
					font-size: 28rpx;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
			.goods_item:nth-of-type(3n-1) {
				margin: 24rpx 14rpx 0;
			}
		}
	}
</style>