<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="会员中心" type="transparent" fontColor="#FFF"></z-nav-bar>
		<view class="vip_top">
			<view class="now_vip">
				<image src="../../static/icon/mine_card.png" alt=""></image>
				<view class="text">
					<image src="../../static/icon/mine_v.png" alt=""></image>
					吴门医述会员
					<br>
					<i>VIPFENGZIDUSHU</i>
					<br>
					<b>加入会员立项4项特权</b>
				</view>
			</view>
		</view>
		<view class="vip_quan">
			<view class="vq_title">会员特权</view>
			<view class="vq_bord">
				<view class="vq_b_list">
					<view>
						<image src="../../static/icon/mine_ic1.png" alt=""></image>
					</view>
					<text>免费阅读</text>
				</view>
				<view class="vq_b_list">
					<view>
						<image src="../../static/icon/mine_ic2.png" alt=""></image>
					</view>
					<text>优惠券</text>
				</view>
				<view class="vq_b_list">
					<view>
						<image src="../../static/icon/mine_ic3.png" alt=""></image>
					</view>
					<text>购书折扣</text>
				</view>
				<view class="vq_b_list">
					<view>
						<image src="../../static/icon/mine_ic4.png" alt=""></image>
					</view>
					<text>24h客服</text>
				</view>
			</view>
		</view>
		<view class="vip_chong">
			<view class="vc_title">服务类型</view>
			<view class="vc_xiang">				
				<view v-for="(item, index) in vcList" @click="chosPric(item)"
					:class="stepsVc.priceTypeId == item.priceTypeId?'Tab_vc vc_price':'vc_price'">
					<view class="pr_tm">{{item.description}}</view>
					<view class="pr_jg">￥{{item.realMoney}}</view>
					<view class="pr_yl">￥{{item.money}}</view>
					<view class="pr_lj">限时特惠</view>
				</view>
				<br clear="both">
			</view>
		</view>
		<view class="vip_fangsh">
			<view class="vf_title">支付方式</view>
			<view class="vf_radio">
				<u-radio-group v-model="payType">
					<view style="width: 100%;">
						<view v-for="(item, index) in paylist" @click="choseType(item.id)" class="vf_xuanx">
							<image :src="item.img"></image>
							{{item.title}}
							<span v-if="item.id == 4" style="color: #bbb; margin-left: 10px;">{{userMes.peanutCoin}}天医币可用</span>
							<span @click.stop="buPoint" style="color: #bf0c0c; margin-left: 10px;" v-if="item.id == 4" class="chongBtn">去充值</span>
							<u-radio :key="index" activeColor="#fe6e09" :name='item.id'
								style="float: right;margin-top: 5rpx;"></u-radio>
						</view>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view class="agree_wo"  style="float: left; display: flex;">
			<radio-group class="agree">
			     <view v-for="(item, index) in argee" :key="index" >
			         <radio  class="agreeRadio" :value="item.id" :checked="item.id==radioValue" @click="radioCheck(index)"></radio>
			        <!-- <view>{{item.value}}</view> -->
			     </view>
			    </radio-group>			
			<view>* 我已阅读并同意<span class="highlight" @click="showXieyi">《会员服务协议》</span></view></view>

		<view class="vip_btn">
			<view @click="goPoinBuy">立即开通会员</view>
		</view>
		<!-- 充值协议 -->
		<u-popup :show="xieyiShow" :round="10" @close="xieyiShow=false">
			<view class="tanchu">
				<view class="dp_title">{{xieyi.title}}</view>
				<view style="max-height: 1000rpx;overflow-y: scroll;">
					<view v-html="xieyi.content"></view>
				</view>				
			</view>
		</u-popup>
		<music-play :playData="playData"></music-play>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from 'vuex';
	import {
		setPay,
		setPayAssign
	} from '@/config/utils';
	export default {
		data() {
			return {
				playData:{},
				xieyiShow : false,
				xieyi:{
					title:'',
					content:''
				},
				argee:[
				    {value:false,id:'1'}
				    
				] ,// 同意权限
				radioValue:'',
				stepsVc: {},
				vcList: [],
				userMes:{},
				payType: 4,				
				paylist: [
					// {
					// 	title: '支付宝',
					// 	id: 1,
					// 	img: '../../static/icon/pay_1.png'
					// },
					{
							title: '天医币充值',
							id: 4,
							img: '../../static/icon/oder_chong.png'
						}
					// {
					// 	title: '微信',
					// 	id: 2,
					// 	img: '../../static/icon/pay_2.png'
					// }
				],
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData()
		},
		//页面显示
		onShow() {
			this.getDataPoint()	
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		computed: {
			...mapState(['userInfo']),
		},
		components:{
			musicPlay	
		},
		//方法
		methods: {
			showXieyi(){
				this.$http
					.get(`sys/agreement/list?key=member`)
					.then(res => {							
						this.xieyi = res.page.list[0]
						this.xieyiShow = true
					})
				
			},
			radioCheck (index) {
			           this.argee.forEach((item =>{
			               item.isCheck = false
			           }))
			           if(this.radioValue==this.argee[index].id) {
			               this.radioValue =null
			           }else {
			              this.radioValue = this.argee[index].id
			           }
			          // console.log(this.radioValue)
			       },
			goPoinBuy(){
				if(this.radioValue == '1'){				
				
				if(this.stepsVc.money > this.userMes.peanutCoin){
					// uni.showToast({
					// 	title:'天医币不足，请充值',
					// 	icon: 'none',
					// 	duration: 2000
					// })
					uni.showModal({
						title: '提示',
						content: '天医币不足',
						confirmText:'去充值',
						showCancel:'知道了',
						success: function (res) {
							let that = this
							if (res.confirm) {
								console.log('用户点击确定');								
								uni.navigateTo({
									url: '../peanut/reCharge'
								});
							} else if (res.cancel) {
								//console.log('用户点击取消');
							}
						}
					});
					return 
				}else{
					this.kaiVip()
				}
				}else{
					uni.showToast({
						title:'请勾选服务协议',
						icon:'error'
					})
						return false
				}
			},
			// 充值天医币
			buPoint() {				
				uni.navigateTo({
					url: '../peanut/reCharge'
				});
			},
			getDataPoint() {
				let that = this
				// 获取个人信息
			// 用户详情
			if (this.userInfo.id != undefined) {
				this.$http
					.post('book/user/info/' + this.userInfo.id)
					.then(res => {
						this.userMes = res.user
						// consol.log(this.userMes.peanutCoin,'呼呼')
						if (this.userMes.vip != 0) {
							this.typeFen = 2
						}
					});
			}
			},
			// 获取会员类型
			getData() {
				let that = this
				this.$http
					.post('book/bookbuyconfig/getVipOrPoint', {
						type: 'vip',
						qudao: 'Android'
					})
					.then(res => {
						that.vcList = res.list
						that.stepsVc = res.list[0]
					});
			},

			// 点击会员价格
			chosPric(e) {
				let that = this
				that.stepsVc = e
			},

			// 选择支付方式
			choseType(e) {
				let that = this
				that.payType = e
			},

			// 开通vip 常规支付
			kaiVip() {
				let that = this

				let data = {
					userId: that.userInfo.id, //下单人ID
					userPhone: that.userInfo.tel, //收件人手机号
					paymentMethod: that.payType, //1支付宝，2微信，3ios内购
					orderMoney: that.stepsVc.money * 1, //订单金额
					districtMoney: 0, //优惠金额
					realMoney: that.stepsVc.money * 1, //实收金额
					orderStatus: 0, //订单状态
					orderType: "vip", //订单类型
				}
				$http.request({
					url: "book/buyOrder/rechargeSave",
					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
					data,
					header: { //默认 无 说明：请求头
						'Content-Type': 'application/json'
					},
				}).then(res => {
					if (res.code == 0) {
						console.log(res)
						if(that.payType != 4){
						setPay({
							typePay: 'alipay',
							subject: 'vip',
							totalAmount: that.stepsVc.money,
							type: that.payType,
							relevanceoid: res.orderSn,
							body: that.stepsVc.priceTypeId,
						}, res => {
							if (res.success) {
								uni.showToast({
									title: "支付成功"
								});
							} else {
								uni.showToast({
									title: "支付失败",
									icon: "none",
									image: '../../static/icon/ic_close.png'
								});
							}
						})
						}else{
							console.log(that.userMes)
							this.$http
								.post('book/user/openVipByVirtualCoin', {
									'configId': that.stepsVc.priceTypeId,
									'userId': that.userMes.id,
									'orderSn':res.orderSn
								})
								.then(res => {
									if(res.code == 0){										
										console.log(res, 'res')
										uni.showToast({
											title: "充值成功",
											icon:'success',
											duration:2000
										});
										setTimeout(()=>{
											uni.switchTab({
												url: '../bookShop/orderList'
											});
										},1000)
									}
									
								})
						}
					}else{
						uni.showToast({
							title: "下单失败",
							icon:'Error',
							duration:2000
						});
					}
				})




			},
			// 跳转
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
		},

	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.highlight{color: $uni-color-primary;}
	.agreeRadio{ zoom: .8;}
	.tanchu {
		padding: 40rpx 30rpx 40rpx 30rpx;
		position: relative;
	
	
		.dp_title {
			font-size: 32rpx;
			margin-bottom: 50rpx;
			color: #555;
			text-align: center;
			font-weight: bold;
		}
	
		.dp_add {
			position: absolute;
			top: 40rpx;
			right: 30rpx;
			font-size: 22rpx;
			background-color: #fd6004;
			color: #fff;
			border-radius: 10rpx;
			padding: 5rpx 10rpx;
	
			.u-icon {
				display: inline-block;
				margin-right: 5rpx;
			}
		}
	
		.addressItem {
			border: 2px dashed #d9d9d9;
			border-radius: 10rpx;
			width: 100%;
			display: flex;
			padding: 20rpx 10rpx;
			margin: 25rpx 0 0 0;
			align-items: center;
			background-color: #fff;
	
			.addrContent {
				margin-left: 40rpx;
				flex: 1;
	
				.addrContentTop {
					display: flex;
					align-items: flex-end;
					margin: 0 0 15rpx 0;
					position: relative;
	
					.userName {
						font-size: 35rpx;
						font-weight: bold;
						margin-right: 30rpx;
					}
	
					.userTel {
						font-size: 25rpx;
						color: #888;
					}
	
					.userMoren {
						border: 1px solid #fd6004;
						color: #fd6004;
						padding: 3rpx 10rpx;
						font-size: 22rpx;
						border-radius: 10rpx;
						margin: 0 0 0 20rpx;
					}
	
	
					.chooseCheck {
						position: absolute;
						top: 3rpx;
						right: 6rpx;
					}
				}
	
				.addrContentBottom {
					font-size: 32rpx;
				}
			}
		}
	
	
		.addressItem.addItem_style {
			border-color: #fd6004;
		}
	
		.youhuiItem {
			border: 1px solid #d9d9d9;
			border-radius: 10rpx;
			width: 100%;
			display: flex;
			padding: 20rpx 10rpx;
			margin: 25rpx 0 0 0;
			align-items: center;
			background-color: #fff;
			font-size: 30rpx;
		}
	
		.youhuiItem>view {
			float: left;
		}
	
		.youhuiItem.youItem_style {
			border-color: #fd6004;
		}
	}
.chongBtn {
		background-color: #54a966;
		color: #fff !important;
		margin-left: 20rpx;
		border-radius: 10rpx;
		padding: 2rpx 10rpx;
		font-size: 20rpx;
		display: inline-block; 
	}
	.vip_top {
		// background-color: #2c271d;
		background-image: url('../../static/icon/mine_back.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 160rpx 40rpx 20rpx 40rpx;
		height: 450rpx;
		position: relative;

		.now_vip {
			position: absolute;
			left: 0;
			right: 0;
			height: 340rpx;
			margin: 0 0 30upx 0;
			padding: 0 40upx 0 40upx;

			image {
				width: 100%;
				height: 410rpx;
			}
			.text{margin-top: 60rpx;
				font-size: 50upx;
				line-height: 80upx;
				color: #977749;
				font-weight: bold;
				position: absolute;
				left: 80rpx;
				top: 3rpx;}
			.text {
				margin-top: 60rpx;
				font-size: 50upx;
				line-height: 80upx;
				color: #977749;
				font-weight: bold;
				position: absolute;
				left: 80rpx;
				top: 3rpx;

				image {
					width: 80rpx;
					height: 90rpx;
					display: inline-block;
					vertical-align: text-bottom;
					margin: 0 10rpx 0 0;

				}

				i {
					font-size: 40upx;
					margin-left: 80rpx;
				}

				b {
					font-size: 25upx;
					margin: 40rpx 0 0 20rpx;
					display: block;
					color: #c39a5f;
				}
			}
		}
	}

	.vip_quan {
		margin: 120rpx 50rpx 0 50rpx;

		.vq_title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.vq_bord {
			margin: 40rpx 0 0 0;
			overflow: hidden;

			.vq_b_list {
				float: left;
				width: 25%;
				text-align: center;


				view {
					padding: 20rpx;
					border-radius: 20rpx;
					background-image: url('../../static/icon/mine_bor.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					width: 55%;
					margin: 0 auto;

					image {
						width: 100%;
						height: 50rpx;
						vertical-align: middle;
					}
				}

				text {
					font-size: 30rpx;
					margin: 20rpx 0 0 0;
					display: block;
				}
			}

			view:nth-child(4n) {
				margin-right: 0;
			}



		}
	}

	.vip_chong {
		margin: 50rpx 50rpx 0 50rpx;

		.vc_title {
			font-size: 36rpx;
			font-weight: bold;

		}

		.vc_xiang {
			margin-top: 50rpx;

			.vc_price {
				box-shadow: 0 0 20rpx 0 #0000001a;
				float: left;
				width: 47%;
				margin: 0 30rpx 30rpx 0;
				text-align: center;
				padding: 50rpx 0 20rpx 0;
				border-radius: 20rpx;
				position: relative;
				color: #2d2d2d;

				.pr_tm {
					font-size: 38rpx;
					font-weight: bold;
				}

				.pr_jg {
					font-size: 45rpx;
					margin: 20rpx 0;
					font-weight: bold;
				}

				.pr_yl {
					font-size: 25rpx;
					margin-left: 10rpx;
					text-decoration: line-through;
					color: #d9d9d9;
					position: absolute;
					bottom: 50rpx;
					right: 15rpx;
				}

				.pr_lj {
					background-color: #fe6e09;
					color: #fff;
					position: absolute;
					top: -10rpx;
					left: 0;
					font-size: 24rpx;
					padding: 5rpx 10rpx;
					border-radius: 10rpx;
				}
			}

			.vc_price:nth-child(2n) {
				margin-right: 0;
			}

			.Tab_vc {
				box-shadow: 0 0 20rpx 0 #fe700bcc;
				color: #7b4c0a;
			}
		}


	}


	.vip_fangsh {
		margin: 40rpx 50rpx 0 50rpx;

		.vf_title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.vf_radio {
			margin-top: 40rpx;

			.vf_xuanx {
				font-size: 32rpx;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #ededed;

				image {
					width: 40rpx;
					height: 40rpx;
					display: inline-block;
					margin-right: 20rpx;
					vertical-align: bottom;
				}
			}

		}



	}

	.agree_wo {
		color: #aaa;
		font-size: 25rpx;
		margin-top: 30rpx;
		margin: 40rpx 50rpx 0 50rpx;
		padding-bottom: 180rpx;
	}

	.vip_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 30rpx;

		view {
			background-image: linear-gradient(90deg, #feeed5 0%, #f5cd98 100%);
			color: #865b25;
			width: 90%;
			margin: 0 auto;
			text-align: center;
			font-size: 35rpx;
			font-weight: bold;
			padding: 25rpx 0;
			border-radius: 50rpx;
		}
	}
</style>
