<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" v-if="showLook==0">立即购买</button>
				<button class="my_VipLastBtn" @click="goback" v-if="showLook==1">返回</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,
				showLook: 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;
				if (option.showLook) { //从详情跳转过来查看内容的 不能购买
					this.showLook = option.showLook
				}
			}
			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) {
									uni.navigateTo({
										url: '/pages/share/index/index'
									});
								},
								'fail': function(res) {},
								'complete': function(res) {}
							})
						}
					}
				);
			},
			goback() {
				uni.navigateBack()
			}
		}
	};
</script>
<style>
	.vip_detail {
		font-size: 14px;
		margin: 15px 0 85px 0;
		overflow: scroll;
		line-height: 25px;
		max-height: 200px;
	}

	.vip_disTitle {
		color: #E2A74A;
		font-size: 16px;
		width: 100%;
		text-align: center;
	}

	.vip_detailDiv {
		width: 90%;
		background-color: #fff;
		border-radius: 12px;
		margin: 20px auto;
		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: auto;
		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>
