<template>
	<!-- 开通一卡通 -->
	<loadlogo v-if="loading==true"></loadlogo>
	<view class="getMembership" v-else :style="{height:phoneHight}">
		<far-bottom></far-bottom>
		<!-- 选择套餐 -->
		<scroll-view :style="{height:scollHeight}" :scroll-y="true" :scroll-x="false">
			<block v-if="payclose=='1' && model=='ios'"></block>
			<view class="checkMemberMeal" v-else>
				<view class="checkMemberMealPackage">
					<view class="checkMemberTitle">
						<image :src="imgfixUrls+ 'merchant/Memship.png'" />
						<span>{{ halfcardtext }}会员开通</span>
					</view>
					<view >
						<view class="checkMemberBody">
							<!-- 套餐循环模板 -->
							<view class="tcMb" :class="[mbChck == index ? 'tcMbCheck' : '']" @click="checkMb(index, item.price, item.id,item.detail)"
							 v-for="(item, index) in cardList.list">
								<view class="tcMbPackage">
									<view class="carte" v-if="item.is_hot == '1'">
										<view class="shing">
											推荐
										</view>
										<view class="shaer">
											
										</view>
									</view>
									<view class="tcMbTitle">
										<span>{{ item.name }}</span>
										<view class="yCheck" v-if="mbChck == index">
											<image :src="imgfixUrls+ 'merchant/membercheck.png'" />
										</view>
										<view class="nCheck" v-else></view>
									</view>
									<view class="tcMbFoot">
										<span>
											<span>¥</span>
											{{ item.price }}
											<span>元</span>
										</span>
									</view>
								</view>
							</view>
							<!-- 套餐循环模板 -->
							
						</view>
						<view class="checksupper" :class="{supportBtn:cardList.list.length == mbChck}" v-if="flagsta == 1" @click="checkMb(cardList.list.length)">
							拥军专属优待卡
						</view>
					</view>
					
				</view>
			</view>
			<!-- 会员详细信息 -->
			<view class='detail'>
				<view class='detail-title'>会员卡详细信息</view>
				<!-- 	<view></view> -->
				<scroll-view scroll-x class="detail-de" >
					<!-- <jyf-parser domain="https://6874-html-foe72-1259071903.tcb.qcloud.la" gesture-zoom lazy-load ref="article" selectable
					show-with-animation use-anchor  :html="vipDetail" ></jyf-parser> -->
					<textarea class="textarea" value="" disabled v-model="vipDetail" placeholder="" />
				</scroll-view>
				
			</view>
			<!-- 激活码 -->
			<view class="CDKEY" @click="show = true" v-if="cardList.activation_code == 0">
				<span>使用激活码激活会员</span>
				<image :src="imgfixUrls+ 'merchant/right.svg'" />
			</view>
			<!-- 激活码 -->

			<!-- 用户个人信息 -->
			<view class="userInfoInput">
				<view class="userInfoInputPackage">
					<view class="userInfoInputTitle">
						<view class="line"></view>
						<span>个人信息</span>
					</view>
					<view class="userInput">
						<view class="userName">
							<span>姓名</span>
							<input placeholder="请输入您的姓名" @blur="pushus" v-model="username" />
						</view>
						<view class="userName">
							<span>联系电话</span>
							<input placeholder="请输入联系电话" @blur="pushus" v-model="mobile" />
						</view>
						<view class="userName" v-if="bankflag == 1">
							<span>{{examineing==0?'银行卡号':'渠道2'}}</span>
							<input type="number" :placeholder="examineing==0?'请输入参与优惠的银行卡号':'请输入参与优惠的渠道2'" @blur="pushus" v-model="banknum" />
						</view>
					</view>
				</view>
			</view>
			<!-- 用户个人信息 -->
			
			<!-- 其他信息 -->
			<view class="userInfoInput" v-if="orderSubmitInfoData.diyform">
				<view class="userInfoInputPackage">
					<view class="userInfoInputTitle">
						<view class="line"></view>
						<span>更多信息</span>
					</view>
					<view class="userInput">
						<form-item ref="formItem" :gopay="gopay" :gopaytwo="gopaytwo" :orderSubmitInfo="orderSubmitInfoData"></form-item>
					</view>
				</view>
			</view>
			

			<!-- 填充层 -->
			<view class="full"></view>
			<!-- 填充层 -->
		</scroll-view>
		<!-- 开通按钮 -->
		<block v-if="payclose=='1' && model=='ios'"></block>
		<view class="bottomView" v-else>
			<view class="submitMembership" @click="halfcardOrder(false)" v-if="cardList.list.length!==0">
				<span class="f-w" v-if="flagsta == 1 && cardList.list.length == mbChck">使用激活码激活优待特权</span>
				<span v-else>{{ price }}元{{ card == 'nhave' ? '开通' : '续费' }}{{ halfcardtext }}</span>
			</view>
		</view>
		<!-- 开通按钮 -->

		<!-- 激活码弹窗 -->
		<PopManager :show="show" @clickmask="closePop">
			<view class="popCDKEY">
				<view class="popCDKEYPackage">
					<view class="popCDKEYTitle">
						<span></span>
						<span>会员激活码</span>
						<image :src="imgfixUrls+ 'merchant/close.png'" @click="closePop" />
					</view>
					<view class="popCDKEYInput"><input v-if="show" @blur="pushus" :class="show?'chas':'uchas'" placeholder="请输入会员激活码" v-model="cardpa" /></view>
					<view class="popCDKEYInput" v-if="show && code"><input v-if="show && code" :class="show?'chas':'uchas'" placeholder="请输入姓名" v-model="username" /></view>
					<view class="popCDKEYInput" v-if="show && code"><input v-if="show && code" :class="show?'chas':'uchas'" placeholder="请输入联系电话" v-model="mobile" /></view>
					<view class="popCDKEYSubmit" @click="activationHalfcard"><span>确认激活</span></view>
				</view>
			</view>
		</PopManager>
		<!-- 激活码弹窗 -->

		<PhoneMask :show1="show1" @clickmask1="closePop1"></PhoneMask>
		<getvxphone :show="vxshow" @showFalse="showFalse"></getvxphone>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';

	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	import jyfParser from '@/components/jyf-parser/jyf-parser.vue';
	import PopManager from '@/components/template/PopManager';
	import loadlogo from '@/components/template/loadlogo';
	import PhoneMask from '@/components/template/PhoneMask';
	import getvxphone from '@/components/template/getVXphone.vue'
	import formItem from '@/components/template/formItem.vue';

	export default {
		components: {
			PopManager,
			loadlogo,
			PhoneMask,
			getvxphone,
			formItem,
			jyfParser
		},
		data() {
			return {
				show1: false,
				payclose: null,
				model: '',
				vipDetail: '',
				mbChck: 0,
				show: false,
				price: '',
				banknum: '',
				bankflag: '',
				id: '',
				username: '',
				mobile: '',
				cardList: {},
				cardpa: '',
				card: null,
				halfcardtext: '',
				loading: true,
				phoneHight: null,
				client: null,
				scollHeight: null,
				img: '',
				vxshow:false,
				code:null,
				gopay:true,
				orderSubmitInfoData:{},
				gopaytwo:true,
				examineing:1,
				flagsta:0
			};
		},
		onLoad(e) {
			let _this = this;
			_this.card = e.card || 'nhave';
			_this.img = _this.imgfixUrl;
			let TextSubstitution = uni.getStorageSync('TextSubstitution');
			this.examineing = TextSubstitution.examineing || 0;
			// if(TextSubstitution.flag074){
				
			// }
			
			if(e.code){
				_this.code = e.code;
				_this.show = true;
				_this.cardpa = e.code;
			};
			_this.init();
			uni.getSystemInfo({
				success(res) {
					_this.phoneHight = res.windowHeight + 'px';
					_this.scollHeight = res.windowHeight - uni.upx2px(110) + 'px'
				}
			});
			uni.getSystemInfo({
				success(res) {
					_this.model = res.platform
				}
			});
			_this.client = App.getClientType();

		},
		methods: {
			showFalse(){
				console.log('进了showfalse')
				this.vxshow = false;
			},
			pushus(){
				uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
				});
			},
			closePop1() {
				let _this = this;
				_this.show1 = false;
			},
			init() {
				let _this = this;
				_this.getCardList();
				uni.getStorage({
					key: 'TextSubstitution',
					success: function(res) {
						console.info(res.data.halfcardtext);
						_this.halfcardtext = res.data.halfcardtext;
					}
				});
			},
			// 开卡续费接口
			halfcardOrder(flag = false) {
				let _this = this;
				if(_this.flagsta == 1 && !flag && _this.cardList.list.length == _this.mbChck){
					_this.show = true;
					return
				}
				_this.gopay = false;
				setTimeout(()=>{
					_this.gopay = true;
				},2000)
				if (_this.username == '' || _this.username == null) {
					uni.showToast({
						icon: 'none',
						title: '姓名不能为空',
						duration: 2000
					});
					return;
				}
				if (!(/^1[3456789]\d{9}$/.test(_this.mobile))) {
					uni.showToast({
						icon: 'none',
						title: '电话格式不正确',
						duration: 2000
					});
					return;
				}
				if (_this.bankflag == 1) {
					if (_this.banknum.length < 13 || _this.banknum.length > 25) {
						uni.showToast({
							icon: "none",
							title: _this.examineing==0?'请输入正确银行卡号':'请输入正确渠道2号',
							duration: 2000
						});
						return;
					}
				}
				uni.showLoading({
					title:'处理中',
					mask:true
				})
				let data = {
					typeid: _this.id,
					username: _this.username,
					mobile: _this.mobile,
					banknum: _this.banknum
				};
				setTimeout(()=>{
					let datas;
					if(_this.$refs.formItem && _this.orderSubmitInfoData.diyform){
						if( _this.$refs.formItem.ifrequired == false){
							uni.showToast({
								icon: 'none',
								title: '请完善必填信息'
							});
							return
						}
						datas = _this.$refs.formItem.formList;
						data.datas = JSON.stringify(datas);
						data.diyformid = _this.orderSubmitInfoData.diyformid;
						// _this.userInfo.datas = JSON.stringify(datas);
					}
					App._post_form(
						'&p=halfcard&do=halfcardOrder',
						data,
						res => {
							if (res.data.status == 0) {
								App.navigationTo({
									url: 'pages/mainPages/memberCard/memberCard'
								});
							} else {
								App.navigationTo({
									url: 'pages/mainPages/payment/payment?orderid=' + res.data.orderid + '&plugin=opencard'
								});
							}
							uni.hideLoading()
						},
						fail => {
							if (fail.data.message == '未绑定手机号') {
								let _this = this;
								//#ifdef H5
								_this.show1 = true;
								//#endif
								//#ifndef H5
								_this.vxshow = true;
								//#endif
								
							}
							uni.hideLoading()
						})
				})
				
				
			},
			// 激活码激活一卡通
			activationHalfcard() {
				let _this = this;
				if (_this.username == '' || _this.username == null) {
					uni.showToast({
						icon: 'none',
						title: '姓名不能为空',
						duration: 2000
					});
					return;
				}
				if (!(/^1[3456789]\d{9}$/.test(_this.mobile))) {
					uni.showToast({
						icon: 'none',
						title: '电话格式不正确',
						duration: 2000
					});
					return;
				}
				if (_this.bankflag == 1) {
					if (_this.banknum.length < 13 || _this.banknum.length > 19) {
						uni.showToast({
							icon: "none",
							title: _this.examineing==0?'请输入正确银行卡号':'请输入正确渠道2号',
							duration: 2000
						});
						return;
					}
				}

				_this.show = false;
				uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
				});
				let data = {
					cardpa: _this.cardpa,
					username: _this.username,
					mobile: _this.mobile,
					banknum: _this.banknum
				};
				App._post_form(
					'&p=halfcard&do=activationHalfcard',
					data,
					res => {
						console.info(22222222)
						uni.showToast({
							icon: 'none',
							title: '激活成功',
							duration: 2000
						});
						setTimeout(go, 2000)

						function go() {
							App.navigationTo({
								url: 'pages/mainPages/memberCard/memberCard'
							});
						}

					},
					fail => {
						if (fail.data.message == '未绑定手机号') {
							let _this = this;
							//#ifdef H5
							_this.show1 = true;
							//#endif
							//#ifndef H5
							_this.vxshow = true;
							//#endif
							
						}
					}
				);
			},
			// 获取开卡页面信息
			getCardList() {
				let _this = this;
				let data = {};
				App._post_form('&p=halfcard&do=cardList', data, res => {
					_this.gopaytwo = false;
					setTimeout(()=>{
						_this.gopaytwo = true;
					},2000)
					_this.loading = false
					_this.cardList = res.data;
					_this.flagsta = res.data.flag074;
					_this.orderSubmitInfoData = res.data;
					_this.id = res.data.list[0].id;
					_this.price = res.data.list[0].price;
					_this.vipDetail = res.data.list[0].detail;
					_this.username = res.data.realname;
					_this.mobile = res.data.mobile;
					_this.payclose = res.data.payclose;
					_this.bankflag = res.data.bankflag;
					_this.banknum = res.data.banknum;
					console.info('滴滴', _this.model, _this.client, _this.payclose)
					console.info('操了', _this.payclose != '1' && _this.client != '3' && _this.model != 'ios')
					let aa = '';
					if (_this.card == 'nhave') {
						aa = '开通';
					} else {
						aa = '续费';
					}
					uni.setNavigationBarTitle({
						title: aa + _this.halfcardtext
					});
				});
			},
			checkMb(index, price, id, detail) {
				let _this = this;
				_this.mbChck = index;
				_this.price = price;
				_this.id = id;
				_this.vipDetail = detail;
				if(index == _this.cardList.list.length){
					_this.vipDetail = '本卡为现役军人,退役军人和其他优抚对象专属卡,需在线联系客服实名免费申请,不支持在线开通。';
				}
			},
			closePop() {
				let _this = this;
				_this.show = false;
			}
		}
	};
</script>

<style lang="less" scoped>
	.full {
		width: 750upx;
		height: 20upx;
	}
	
	.uchas{
		min-height:0!important ;
		min-width: 0!important;
	}
	.chas{
		
	}
	.popCDKEYSubmit {
		margin: 30upx auto 0 auto;
		width: 480upx;
		height: 80upx;
		background: rgba(253, 219, 54, 1);
		border-radius: 40upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;

			color: rgba(51, 51, 51, 1);
		}
	}

	.popCDKEYInput {
		margin: 50upx 0 0 0;
		width: 480upx;
		height: 80upx;
		background: rgba(246, 246, 246, 1);
		border-radius: 10upx;

		>input {
			padding: 0 30upx;
			height: 80upx;
			font-size: 24upx;

			color: #333333;
		}
	}

	.popCDKEYTitle {
		display: flex;
		justify-content: space-between;

		>span {
			font-size: 30upx;

			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		>image {
			margin-top: 10upx;
			width: 30upx;
			height: 30upx;
		}
	}

	.popCDKEYPackage {
		padding: 30upx;
	}

	.popCDKEY {
		width: 540upx;
		// height: 338upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.bottomView {
		position: absolute;
		bottom: 0upx;
		left: 0upx;
		width: 750upx;
		height: 110upx;
		background: rgba(255, 255, 255, 1);
	}

	.submitMembership {
		margin: 10upx auto 0 auto;
		width: 688upx;
		height: 88upx;
		background: linear-gradient(90deg, rgba(252, 218, 49, 1) 0%, rgba(255, 223, 78, 1) 100%);
		border-radius: 44upx;
		text-align: center;

		>span {
			line-height: 88upx;
			font-size: 28upx;

			color: rgba(51, 51, 51, 1);
		}
	}

	.userName {
		margin-top: 20upx;
		width: 630upx;
		height: 86upx;
		background: rgba(250, 250, 250, 1);
		border-radius: 10upx;

		>span {
			margin-left: 30upx;
			vertical-align: middle;
			display: inline-block;
			width: 96upx;
			font-size: 24upx;

			color: rgba(51, 51, 51, 1);
		}

		>input {
			margin-left: 40upx;
			vertical-align: middle;
			display: inline-block;
			width: 400upx;
			height: 86upx;
			font-size: 24upx;

			color: #333333;
		}
	}

	.userInput {
		margin: 20upx 0 0 0;
	}

	.userInfoInputTitle {
		>view {
			display: inline-block;
			width: 8upx;
			height: 28upx;
			background: linear-gradient(0deg, rgba(252, 218, 49, 1) 0%, rgba(255, 223, 78, 1) 100%);
			border-radius: 4upx;
			vertical-align: middle;
		}

		>span {
			vertical-align: middle;
			margin-left: 15upx;
			font-size: 30upx;

			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	.userInfoInputPackage {
		padding: 40upx 30upx;
	}

	.userInfoInput {
		margin: 20upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.detail {
		margin: 20upx auto 0 auto;
		width: 690upx;
		height: 250upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;

		.detail-title {
			width: 690upx;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			font-size: 28upx;
			color: rgba(51, 51, 51, 1);
		}

		.detail-de {
			width: 672upx;
			height: 155upx;
			margin-top: 10upx;
			font-size: 28upx;
			color: rgba(51, 51, 51, 1);
			padding-left: 12rpx;
			 /deep/.textarea{
				font-size: 28upx;
				width: 100%;
				height: 100%;
			}
		}
	}

	.CDKEY {
		margin: 20upx auto 0 auto;
		width: 690upx;
		height: 110upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
		display: flex;
		justify-content: space-between;

		>span {
			margin-left: 30upx;
			line-height: 110upx;
			vertical-align: middle;
			font-size: 28upx;
			color: rgba(51, 51, 51, 1);
		}

		>image {
			margin: 45upx 30upx 0 0;
			vertical-align: middle;
			width: 20upx;
			height: 30upx;
		}
	}

	.yCheck {
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		overflow: hidden;
		border: 1upx solid rgba(0, 0, 0, 0);

		>image {
			width: 40upx;
			height: 40upx;
		}
	}

	.tcMbCheck {
		border: none !important;
		background: #ffdf4e !important;
		box-shadow: 0px 2upx 12upx 0px #fcda31 !important;
		border-radius: 10upx !important;
	}

	.nCheck {
		width: 40upx;
		height: 40upx;
		border: 1upx solid rgba(238, 238, 238, 1);
		border-radius: 50%;
	}

	.tcMbFoot {
		>span {
			font-size: 40upx;

			font-weight: bold;
			color: rgba(51, 51, 51, 1);

			>span:nth-child(1) {
				font-size: 24upx;

				color: rgba(51, 51, 51, 1);
			}

			>span:nth-child(2) {
				font-size: 24upx;

				color: rgba(51, 51, 51, 1);
			}
		}
	}

	.tcMbTitle {
		display: flex;
		justify-content: space-between;

		>span {
			vertical-align: top;
			font-size: 24upx;

			color: rgba(51, 51, 51, 1);
		}

		>view {
			display: inline-block;
			vertical-align: top;
		}
	}

	.tcMbPackage {
		position: relative;
		padding: 30upx 15upx;
	}
	.carte{
		position: absolute;
		top: -34upx;
		right: 0;
		width:92upx;
	}
	.shing{
		font-size: 24upx;
		text-align: center;
		color: #FFFFFF;
		line-height: 40upx;
		width:92upx;
		height:40upx;
		background:rgba(255,68,68,1);
		border-radius:10upx;
	}
	.shaer{
		width: 0;
		height: 0;
		border: 8upx solid transparent;
		border-top-color: rgba(255,68,68,1) ;
		margin-left: 50upx;
	}
	.tcMb {
		border: 1px solid rgba(238, 238, 238, 1);
		margin: 30upx 0 0 0;
		display: inline-block;
		width: 300upx;
		height: 144upx;
		border-radius: 10upx;
	}

	.checkMemberBody {
		flex-wrap: wrap;
		display: flex;
		justify-content: space-between;
		margin: 20upx 0 0 0;
	}
	
	.supportBtn{
		background-color: #FFE051 !important;

		// border: 4upx solid #333333;
	}
	
	.checksupper{
		width: 100%;
		height: 100upx;
		font-size: 36upx;
		font-weight: 700;
		text-align: center;
		background-color: #FFFFFF;
		line-height: 100upx;
		margin-top: 20upx;
		border-radius: 10upx;
		border: 1upx solid #EEEEEE;
	}
	
	.checkMemberMealPackage {
		padding: 30upx;
	}

	.checkMemberTitle {
		margin: 20upx 0 0 0;
		text-align: center;

		>image {
			vertical-align: middle;
			width: 34upx;
			height: 36upx;
		}

		>span {
			margin-left: 15upx;
			vertical-align: middle;
			font-size: 30upx;

			color: rgba(51, 51, 51, 1);
		}
	}

	page {

		overflow-x: hidden;
	}

	.getMembership {
		position: relative;
		background: #f8f8f8;
		font-size: 0;
	}

	.checkMemberMeal {
		margin: 20upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}
</style>
