
<template>
	<view class="buyInterest" :style="{ height: contentHeight }">
		<view class="buyInterTop">
			<img style="width:100%;height:100%;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/viptopbg.png" alt=""/>	
			<view class="buy_Card">
				<view class="vip_title">VIP</view>
				<view class="vip_kaitong">开通此卡<text style="margin:0 5px;display:inline-block;">·</text>享八大权益</view>
			</view>
			<view class="left_dang"></view>
			<view class="right_dang"></view>
		</view>	
		<view class="vip_quanyi">
			<view class="vip_quan">会员权益</view>	
			<view class="vip_content">
				<view class="vip_ctet">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/vip_icon1.png" alt=""/>
					<view class="vip_one">所有权益</view>
					<view class="vip_two">超级会员</view>
				</view>	
				<view class="vip_ctet">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/vip_icon2.png" alt=""/>
					<view class="vip_one">收益提升{{dataList.EarningsAdd}}</view>
					<view class="vip_two">自买返佣</view>
				</view>	
				<view class="vip_ctet">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/vip_icon3.png" alt=""/>
					<view class="vip_one">奖励{{dataList.FXPRate}}%</view>
					<view class="vip_two">直接vip返佣</view>
				</view>	
				<view class="vip_ctet">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/vip_icon3.png" alt=""/>
					<view class="vip_one">奖励{{dataList.FXJPRate}}%</view>
					<view class="vip_two">间接vip返佣</view>
				</view>	
			</view>
			<view class="vip_content" style="margin-top:0">
				<view class="vip_ctet">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/vip_icon4.png" alt=""/>
					<view class="vip_one">金额{{dataList.FXVIP}}</view>
					<view class="vip_two">直接VIP返佣</view>
				</view>	
				<view class="vip_ctet">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/vip_icon5.png" alt=""/>
					<view class="vip_one">金额{{dataList.FXJVIP}}</view>
					<view class="vip_two">间接VIP返佣</view>
				</view>	
				<view class="vip_ctet">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/vip_icon6.png" alt=""/>
					<view class="vip_one">专属客服</view>
					<view class="vip_two">一对一客服</view>
				</view>	
				<view class="vip_ctet">
					<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/vip_icon7.png" alt=""/>
					<view class="vip_one">地推物料</view>
					<view class="vip_two">免费领取</view>
				</view>	
			</view>
		</view>
		<view class="vip_bottom">
			<view class="vip_detailDiv">
				<view class="vip_disTitle">权限描述</view>
				<view class="vip_detail">
					{{dataList.Description}}
				</view>
			</view>
			<view class="vip_lastdiv">
				<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/vip_btm.png" alt="">
				<button class="my_VipLastBtn" @click="openImediate">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageTitle: '会员权益',
			mainColor: '',
			contentHeight: 0,
			dataList: {},
			loading: false,
			msg: {
				pageIndex: 1,
				pageSize: 10
			},
			GradeId:0,
			Money:0
		};
	},
	created() {
		this.contentHeight = this.$utils.calcContentHeight(-40) + 'px';
		this.mainColor = this.$uiConfig.mainColor;
	},
	mounted() {
		let currentPages = getCurrentPages();
		let u = '/' + currentPages[currentPages.length - 1].route;
		let pages = wx.getStorageSync('basedata') ? wx.getStorageSync('basedata').bar_title : [];
		pages.forEach(x => {
			if (x.value == u) {
				this.pageTitle = x.new_name ? x.new_name : x.name;
			}
		});
		uni.setNavigationBarTitle({
			title: this.pageTitle
		});
	},
	onLoad: function(option) {
		this.loading = true;
		if(option){
			this.GradeId = option.GradeId;
			this.Money = option.Money;
		}
		this.init();
	},
	methods: {
		init() {
			let msg={
				GradeId:this.GradeId
			}
			this.request2(
				{
					url: '/api/AppletUser/GetUserVipBuyRecommend',
					data: msg
				},
				res => {
					if (res.resultCode == 1) {
						console.log(res,'res');
						this.dataList=res.data.Model;
					}
				}
			);
		},
		//立即购买
		openImediate(){
			let msg = {
			   GradeId:this.GradeId,
			   Money:this.Money,
			   PayWay:1
			};
			this.request2(
				{
					url: '/api/WeChatPay/GetVIPBuyPayInfo',
					data: msg
				},
				res => {
					if (res.resultCode == 1) {
						var payObj=JSON.parse(res.data);
						wx.requestPayment(
							{
							'timeStamp': payObj.timeStamp,
							'nonceStr': payObj.nonceStr,
							'package': payObj.package,
							'signType': payObj.signType,
							'paySign': payObj.sign,
							'success':function(res){},
							'fail':function(res){},
							'complete':function(res){}
							}
						)
					}
				}
			);
		}
	}
};
</script>
<style>
	.vip_detail{
		font-size:14px;
		margin-top:15px;
		height:300px;
		overflow: scroll;
		line-height: 25px;
	}
	.vip_disTitle{
		color:#E2A74A;
		font-size:16px;
		width:100%;
		text-align: center;
	}
	.vip_detailDiv{
		width:90%;
		height:400px;
		background-color: #fff;
		border-radius:12px;
		position: absolute;
		top:20px;
		left:50%;
		margin-left:-45%;
		padding:20px;
	}
	.vip_lastdiv{
		position: absolute;
		bottom:0;
		height:114px;
		width:100%;
	}
	.my_VipLastBtn{
		width: 85%;
		height: 45px;
		border: none;
		background-color: #13100E;
		color: #EFB252;
		text-align: center;
		border-radius: 20px;
		position: absolute;
		bottom:20px;
		left:50%;
		margin-left:-42.5%;
	}
	.vip_lastdiv img{
		width:100%;
		height:100%;
	}
	.vip_bottom{
		width:100%;
		height:500px;
		overflow: hidden;
		position: relative;
		background:linear-gradient(to bottom, #EFB252 0%,#FCD7A3 100%);
	}
	.buyInterest{
		width: 100%;
		height: 100%;
		background: #f3f4f6;
	}
	.buyInterTop{
		width:100%;
		height:200px;
		position: relative;
	}
	.buy_Card{
		width:90%;
		position: absolute;
		bottom:0;
		height:133px;
		margin:auto;
		background-color:#282c35;
		left:50%;
		margin-left:-45%;
		border-radius:15px;
		padding:20px;
	}
	.left_dang{
		position: absolute;
		left:0;
		bottom:0;
		z-index:999;
		width: 0;
		height: 0;
		border-bottom: 23px solid #fff;
		border-right: 200px solid transparent;
	}
	.right_dang{
		position: absolute;
		right:0;
		bottom:0;
		z-index:999;
		width: 0;
		height: 0;
		border-bottom: 23px solid #fff;
		border-left: 200px solid transparent;
	}
	.vip_title{
		font-size:20px;
		font-weight: bold;
		 background-image:-webkit-linear-gradient(#EFB252,#FDE2B6); 
		-webkit-background-clip:text; 
		-webkit-text-fill-color:transparent; 
	}
	.vip_kaitong{
		font-size:28px;
		width:100%;
		text-align: center;
		color:#fff;
		font-family: '宋体';
		font-weight:bold;
		margin-top:10px;
	}
	.vip_quanyi{
		padding:10px;
		background-color: #fff;
	}
	.vip_quan{
		font-size:16px;
		color:#000000;
		font-weight: bold;
	}
	.vip_content{
		display: flex;
		justify-content: space-between;
		width:98%;
		margin:20px auto;
	}
	.vip_one{
		font-size:12px;
		color:#000000
	}
	.vip_ctet{
		text-align: center;
		width:130px;
	}
	.vip_two{
		color:#888888;
		font-size:14px;
		-webkit-transform:scale(0.8);
	}
	.vip_ctet img{
		width:37px;
		height:37px;
	}
</style>
