<style>
	.buyvip{
		width: 100%;
		height: 100vh;
		
	}
	.buyvip .headStatus {
		overflow: hidden;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background: #FFFFFF;
		align-items: center;
		justify-content: space-between;
	}
	.buyvip .headStatus .arrow {
		height: 24px;
		margin: 5px 10px;
		width: 24px;
	}
	.buyvip .headStatus .title {
		font-size: 16px;
		color: #000;
		flex: 1;
		width: 1px;
		margin-left: 10px;
		line-height: 34px;
	}
	.buyvip .pd-box{
		
		height: 100%;
		
	}
	.buyvip .sharebox_top_nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		padding: 0 10px;
		position: absolute;
		left: 0;
		top: 0;
	}
	.buyvip .Listbox{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	.buyvip .Listbox-item{
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 200rpx;
		align-items: center;
		justify-content: center;
	}
	.buyvip .list-item-text{
		width: calc(100vw / 4);
		margin-top: 5px;
		text-align: center;
	}
	.buyvip .xaingq{
		width: 100%;
		background:linear-gradient( #EFB252, #FCD7A3);
		padding-bottom:60px ;
	}
	.buyvip .buybtn{
		width: calc(100vw - 30px);
		/* margin-left: 15px; */
		height: 45px;
		margin-top: 30px;
		background:linear-gradient(to right, #13100E, #393939);
		font-size: 16px;
		color: #F3E5C3;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 22.5px;
	}
	.buybtn-box{
		width: 100%;height: 115px;position: fixed;left: 0;bottom: 0px;background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/xqbuy-bg.png');background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>

<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
		<view class="buyvip" >
			<view class="headStatus" v-if="scrollTop > 50" :style="[headStyle,
				{
				  zIndex: scrollTop < 10 ? 'unset' : 2,
				  opacity: scrollTop < 10 ? '100' : scrollTop,
				},
			  ]">
				
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#000"></u-icon>
				</view>
				<view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
				<view class="arrow"></view>
			</view>
			<view class="pd-box" >
				<view style="width: 100%;position: relative;">
					<image :src="data.BackgroundImage" style="width: 100%;height: auto;" mode="widthFix"></image>
					<view class="sharebox_top_nav" :style="{paddingTop:nav}">
						<view class="arrow" @click="redirectPrev">
							<u-icon name="arrow-left" size="48" color="#FFF"></u-icon>
						</view>
						<view class="title" style="color: #FFF;font-size: 16px;">{{pageTitle}}</view>
						<view style="width: 24px;height: 24px;"></view>
					</view>
				</view>
				<view style="width: 100%;padding: 10px 0px;">
					<view v-if="data.EquityList.length>0">
						<view style="font-size: 16px;color: #000000;font-weight: bold;padding: 0 15px;">会员权益</view>
						<view class="Listbox" >
							<view class="Listbox-item" v-for='(x,y) in data.EquityList' :key='y'>
								<image :src="x.ImagePath" style="width: 74rpx;height: auto;" mode="widthFix"></image>
								<text class="list-item-text" style="font-size: 12px;color: #000000;">{{x.Title}}</text>
								<text class="list-item-text" style="font-size: 10px;color: #888888;">{{x.Title}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="xaingq">
					<view style="position: relative;">
						<view style="padding: 15px">
							<view style="width: 100%;background: #FFF;border-radius: 8px;padding: 10px;">
								<rich-text :nodes="data.MemberSpecification" ></rich-text>
							</view>
							
						</view>
						
					</view>
					
				
					
				</view>
				
				
			</view>
			<view class="buybtn-box" style="">
				<!-- <image src="" style="width: 100%;height: auto;" mode="widthFix"></image> -->
				<view class="buybtn" @click="show=true">
					<text style="color: #00C6C1;margin-right: 5px;font-family: aa;">￥{{data.MemberBuyMoney?data.MemberBuyMoney.toFixed(2):0}}</text>
					立即购买
				</view>
			</view>
			<u-modal v-model="show" :content="content" :show-cancel-button='true' @confirm='queren'></u-modal>
		</view>
	</scroll-view>
</template>

<script>
	export default{
		
		data(){
			return{
				pageTitle: '会员权益',
				show:false,
				MemberGradeId:0,
				mainColor:'',
				scrollTop:0,
				headStyle: {},
				nav:0,
				data:{},
				orderInfo:{},
				content:'',
			}
		},
		created() {
			
			this.mainColor = this.$uiConfig.mainColor;
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.nav = uni.getMenuButtonBoundingClientRect().top + 'px';
			this.headStyle.paddingTop = this.nav;
		},
		onLoad(option) {
			if(option && option.Id){
				this.MemberGradeId = option.Id
			}
			this.GetUserMemberVipGradeInfo()
		},
		methods:{
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			redirectPrev() {
				uni.navigateBack({
					delta: 1,
				});
			},
			GetUserMemberVipGradeInfo(){
				this.request2({
						url: '/api/appletuser/GetUserMemberVipGradeInfo',
						data: {MemberGradeId:this.MemberGradeId}
					},
					res => {
						if (res.resultCode == 1) {
							
							this.data = res.data;
							this.content ='确定花费￥' + this.data.MemberBuyMoney +'购买' +this.data.GradeName+'吗？';
							
						}
					}
				);
			},
			queren(){
				let url='/api/WeChatPay/GetMemberBuyPayInfo'
				this.request2({
						url: url,
						data: {
							GradeId:this.data.Id,
							Money:this.data.MemberBuyMoney,
							PayWay:1,
						}
					},
					res => {
						this.orderInfo = JSON.parse(res.data);
						console.log(this.orderInfo)
						this.Pay()
					}
				);
			},
			Pay(){
				let that=this;
				
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: this.orderInfo.timeStamp,
					nonceStr: this.orderInfo.nonceStr,
					package: this.orderInfo.package,
					signType: this.orderInfo.signType,
					paySign: this.orderInfo.sign,
					success: function(res) {
						console.log('success', res);
						uni.showToast({
							title: "支付成功"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1,
							});
						},1000)
						
						
					},
					fail: function(err) {
						console.log('fail:', err);
						uni.showToast({
							title: "支付失败"
						})
					}
				});
			}
		}
	}
</script>
