<template>
	<view class="pagecon">
		<view class="userBox ">
			<view class="userInfo dffd">
				<view class="top dffs">
					<image class="headimg" :src="userInfo.userInfo.avatar" mode=""></image>
					<view class="uinfo">
						<view class="uinfoPho">{{ userInfo.userInfo.nickname || '欢迎登陆' }}</view>
						<text v-if="userInfo.userInfo.level_time == 0" class="white fontssm">暂未开通</text>
						<text v-if="userInfo.userInfo.level_time != 0" class="white fontssm">到期时间：{{ userInfo.userInfo.level_time }}</text>
					</view>
				</view>
				<view class="bot">—— 开通会员享受更多权益 ——</view>
			</view>
		</view>
		<view class="ordBox oneBox">
			<view class="gdHead">会员套餐</view>
			<view class="specNav dfsa">
				<view v-for="(item, index) in list" :key="index" @click="selHandle(item, index)" :class="[selind == index ? 'sel' : '', 'userLi', 'dffd']">
					<view class="top">限时特惠</view>
					<view class="title">{{ item.rank_name }}</view>
					<view class="monBox">
						¥{{ item.bond }}
						<text>元/{{ item.unit }}</text>
					</view>
					<view class="textgrey fontssm">送{{ item.bean }}学豆</view>
				</view>
				<!-- <view class="userLi dffd">
					<view class="top fontbase">限时特惠</view>
					<view class="title">月会员</view>
					<view class="monBox">
						¥36
						<text class="fontssm">元/月</text>
					</view>
					<view class="textgrey fontssm">送200学豆</view>
				</view>
				<view class="userLi dffd">
					<view class="top">限时特惠</view>
					<view class="title">月会员</view>
					<view class="monBox">
						¥36
						<text>元/月</text>
					</view>
					<view class="textgrey fontssm">送200学豆</view>
				</view> -->
			</view>
		</view>
		<view class="ordBox oneBox">
			<view class="gdHead">会员权益</view>
			<view class="userNav dfsa">
				<view class="userLi">
					<image src="/static/img/pro/usme1.png" mode=""></image>
					<view class="fontssm">学豆全网通用</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme2.png" mode=""></image>
					<view class="fontssm">个性化推荐</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme3.png" mode=""></image>
					<view class="fontssm">实物资料{{ selItem.shi_discount || 7 }}折优惠</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme4.png" mode=""></image>
					<view class="fontssm">视频精品课{{ selItem.vedio_discount || 7 }}折优惠</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme5.png" mode=""></image>
					<view class="fontssm">名师特供课{{ selItem.jing_discount || 7 }}折优惠</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme6.png" mode=""></image>
					<view class="fontssm">精品资料{{ selItem.jing_discount || 7 }}折优惠</view>
				</view>
				<view class="userLi">
					<image src="/static/img/pro/usme7.png" mode=""></image>
					<view class="fontssm">高级会员图标</view>
				</view>
			</view>
		</view>
		<u-button color="#ED742F" throttleTime="2000" shape="circle" @click="ordPay()" class="custom-style" text="确认支付"></u-button>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			newsInfo: {
				money: '34.00'
			},
			list: [],
			selItem: '', //选中套餐
			selind: '' //选中套餐
		};
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	onLoad(opt) {
		this.onload();
	},
	onShow() {},
	methods: {
		// 选择
		selHandle(item, ind) {
			
			this.selItem = item;
			this.selind = ind;
		},
		onload() {
			this.$api.request('index/levelList').then(data => {
				if (data.code == 200) {
					this.list = data.data;
					if(data.data)
					{
						this.selItem = data.data[0];
					}
				} else {
					this.$api.toast(data.msg);
				}
			});
		},
		ordPay() {
			this.$api
				.request('level_order/create', {
					rank_id: this.selItem.id
				})
				.then(data => {
					if (data.code == 200) {
						this.pay(data.data.order_id);
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		pay(id) {
			this.$api
				.request('payment/levelPay', {
					order_id: id
				})
				.then(res => {
					if (res.code && res.code != 200) {
						// this.$refs.confirmBtn.stop();
						this.$api.toast(res.msg || '获取支付信息失败');
						return;
					}
					const orderInfo = res;
					const { timeStamp, nonceStr, paySign } = orderInfo;
					const payParams = {
						provider: 'wxpay',
						orderInfo: res,
						timeStamp,
						nonceStr,
						package: orderInfo.package,
						signType: 'MD5',
						paySign,
						success: e => {
							this.$api.toast('支付成功');
						},
						fail: err => {
							if (err.errMsg.indexOf('取消') > -1 || err.errMsg.indexOf('cancel') > 1 || err.errMsg.indexOf('-2') > -1) {
								this.$api.toast('取消支付');
							} else {
								this.$api.toast('支付遇到错误，请稍候重试');
								console.log(err);
							}
						}
					};
					uni.requestPayment(payParams);
				});
		}
	}
};
</script>

<style lang="scss">
.pagecon {
	min-height: 100vh;
	padding-bottom: 60rpx;
	background: #fff;
	.userBox {
		padding: 67rpx 65rpx 0rpx;
		width: 100%;
		height: 387rpx;
		background: linear-gradient(135deg, #c9fdde 0%, #c9fdde 100%);
	}
	.userInfo {
		background: url('data:image/png;base64, ')
			no-repeat;
		background-size: 100% 100%;
		width: 620rpx;
		height: 320rpx;
		align-items: center;
		justify-content: center;
		.headimg {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			background-color: #f5fcfc;
			margin-right: 22rpx;
		}
		.uinfo {
			flex: 1;
			.uinfoPho {
				font-size: 34rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				line-height: 48rpx;
				margin-bottom: 10rpx;
				color: #fff;
			}
		}
		.bot {
			margin-top: 50rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #fff8c5;
			line-height: 40rpx;
		}
	}
	.ordBox {
		margin: 24rpx 0rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.gdHead {
			padding: 27rpx 27rpx 3rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			font-size: 30rpx;
			line-height: 42rpx;
		}
		.userNav {
			flex-wrap: wrap;
			justify-content: flex-start;
			.userLi {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #626262;
				font-size: 24rpx;
				line-height: 36rpx;
				position: relative;
				margin: 20rpx 0;
				image {
					width: 90rpx;
					height: 90rpx;
					// padding: 5rpx;
					margin: 0 auto 10rpx;
				}
				.fontssm {
					font-size: 18rpx;
				}
			}
		}
		.specNav {
			width: 100%;
			padding: 40rpx 30rpx;
			.userLi {
				border-radius: 13rpx;
				border: 2rpx solid #e5e5e5;
				position: relative;
				width: 214rpx;
				height: 238rpx;
				align-items: center;
				justify-content: center;
				.top {
					position: absolute;
					top: -20rpx;
					left: 0;
					padding: 6rpx 13rpx;
					font-size: 20rpx;
					color: #fff;
					background: linear-gradient(90deg, #50ceb5 0%, #0cb291 100%);
					border-radius: 23rpx 0rpx 23rpx 0rpx;
				}
				.monBox {
					margin: 22rpx 0;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
					line-height: 50rpx;
				}
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
				}
				.litext {
					flex: 1;
					font-size: 32rpx;
					line-height: 30rpx;
					color: $textcom;
				}
			}

			.sel {
				background: rgba(11, 178, 145, 0.1);
				border: 3rpx solid #0bb291;
			}
		}
	}
	.custom-style {
		background-color: #0bb291;
		color: #fff;
		width: 690rpx;
		margin-top: 40rpx;
	}
}
</style>
