<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="/WEB-INF/tld/fns.tld" prefix="fns" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /><meta http-equiv="X-UA-Compatible" content="IE=9" />
	<meta name="keywords" content="保险保函、电子保函、保证保险、保函开具、工程投标保证保险、建设合同履约保证保险、业主合同款支付保证保险、建设工程质量保证保险、建筑业企业人工工资支付保证保险、海关税保险、诉讼财产保全责任保险">
	<meta name="description" content="百联保是百川信（厦门）网络信息服务有限公司基于金融创新并响应“互联网＋”计划搭建的第三方金融服务平台。 ">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>百联保-我的账户</title>
	<style>
		.real .real-step{
			margin-left: 300px !important;
		}
		.real-name{
			margin-left: 190px;
		}
	</style>
</head>

<body>
<jsp:include page="../index/multi_h.jsp"/>
<div class="container">
	<%--<div class="addr">--%>
		<%--<span>当前位置：</span>--%>
		<%--<span class="current">首页 > </span>--%>
		<%--<a class="active" href="<c:url value='/pc/index'/>">我的账户</a>--%>
	<%--</div>--%>
	<jsp:include page="../index/multi_pc_l.jsp"/>

	<!--右边常用联系人内容区开始-->
	<div class="right contacts">
		<div class="container real">

			<div class="step-title">
				<h1 class="title">手机绑定</h1>
				<ul class="real-step" style="margin-left: 30%;">
					<li class="active">
						<span class="step-name">验证方式</span>
						<i class="step-left"></i>
						<span class="step-num">1</span>
						<i class="step-left step-right"></i>
					</li>
					<li>
						<span class="step-name">验证身份</span>
						<i class="step-left"></i>
						<span class="step-num">2</span>
						<i class="step-left step-right"></i>
					</li>
					<li>
						<span class="step-name">手机绑定</span>
						<i class="step-left"></i>
						<span class="step-num">3</span>
						<i class="step-left step-right"></i>
					</li>
					<li>
						<span class="step-name">手机绑定成功</span>
						<i class="step-left"></i>
						<span class="step-num">4</span>
						<i class="step-left step-right"></i>
					</li>
				</ul>
			</div>
			<div class="real-name real-methods" style="width: auto; margin-left: 0;">

				<ul class="step-list">

					<li class="pd-0">
						<span>当前账号：</span>
						<span class="tel-phone">
                            ${ userdetail.login_name}
						</span>
					</li>
					<li >
						<h4 class="real-method">请选择身份验证方式</h4>
						<h5 class="real-tel">验证手机号</h5>
						<span class="wty">通过您账户绑定的手机号${userdetail.telephone}进行身份验证</span>
						<c:if test="${empty userdetail.telephone}">
							<button type="button"  type="button" class="btn real-btn tyu gray-btn">立即验证</button>
						</c:if>
						<c:if test="${not empty userdetail.telephone}">
							<button type="button"  type="button" class="btn real-btn tyu"  onclick="phoneValidate()">立即验证</button>
						</c:if>
					</li>

					<li   class="no-border">
						<h5 class="real-email">验证邮箱</h5>
						<span class="wty">通过您账户绑定的邮箱${userdetail.email}进行身份验证</span>
						<%--<button type="button" class="btn real-btn" onclick="emailValidate()">立即验证</button>--%>
						<c:if test="${empty userdetail.email}">
						<button type="button" class="btn real-btn tyu gray-btn" >立即验证</button>
						</c:if>
						<c:if test="${not empty userdetail.email }">
						<button type="button" class="btn real-btn tyu" onclick="emailValidate()">立即验证</button>
						</c:if>
					</li>
				</ul>
			</div>
			<%--手机--%>
			<div id="phoneSet" class="real-name real-cart phone-val" style="width: auto; margin-left: 0;">
				<ul class="step-list">
					<li>
						<span>账户：</span>
						<span class="tel-phone">
							${userdetail.login_name}
						</span>
					</li>
					<li class="no-border">
						<h4 class="real-method">当前手机号：
							<span class="current-phone">${userdetail.telephone}</span>
						</h4>
						<div class="real-num">
							<label for="right-code">验证码：</label>
							<input type="text" placeholder="请输入右侧验证码" id="right-code" class="inp">
							<span class="real-map" id="v_container_phone"><img style="width: 140px;height: 40px;margin-top: -2px;" id="imageF" src="" onclick="changeImg()"/></span>
						</div>
						<div class="real-num">
							<input type="hidden" id="check_code">
							<label for="realPhone">短信验证码：</label>
							<input type="text" placeholder="请输入手机验证码" name="realPhone" id="realPhone" class="inp">
							<button class="btn get-real phone-code" type="button"  style="background:rgba(236,236,236,1);color:rgb(153,153,153);cursor:default;pointer-events:none" >获取手机验证码</button>
						</div>
						<button class="btn next-btn"  type="button" onclick="phoneValidateCode()">下一步</button>
					</li>
				</ul>
			</div>
			<%--邮箱--%>
			<div id="emailSet" class="real-name real-cart email-val" style="width: auto; margin-left: 0;">
				<ul class="step-list">
					<li>
						<span>账户：</span>
						<span class="tel-phone">
							${userdetail.login_name}
						</span>
					</li>
					<li class="no-border">
						<h4 class="real-method">当前邮箱：
							<span class="current-phone">${userdetail.email}</span>
						</h4>
						<div class="real-num">
							<label for="realNumEmail">验证码：</label>
							<input type="text" placeholder="请输入右侧验证码" id="realNumEmail" class="inp">
							<span class="real-map"  id="v_container_email"></span>
						</div>
						<div class="real-num">
							<label for="realEmail">邮箱验证码：</label>
							<input type="text" placeholder="请输入邮箱验证码" id="realEmail" class="inp">
							<button class="btn get-real email-code" type="button" >获取邮箱验证码</button>
						</div>
						<button class="btn next-btn" type="button" onclick="emailValidateCode()">下一步</button>
					</li>
				</ul>
			</div>

			<div class="real-name real-phone" style="width: auto; margin-left: 0;">

				<ul class="step-list">
					<li>
						<span>账户：</span>
						<span class="tel-phone">
							${userdetail.login_name}
						</span>
					</li>

					<li class="no-border">
						<form method="post" id="form1">
							<div class="real-num">
								<label for="again_phone">手机号码：</label>
								<input type="text" placeholder="请输入手机号码" name="again_phone" id="again_phone"  class="inp sm-inp" maxlength="11">
							</div>
							<div class="real-num">
								<label for="left-code">验证码：</label>
								<input type="text" placeholder="请输入右侧验证码" id="left-code" class="inp">
								<span class="real-map"  id="v_container_code"><img style="width: 140px;height: 40px;margin-top: -2px;" id="imageF2" src="" onclick="changeImg2()"/></span>
							</div>

							<div class="real-num">
								<input type="hidden" id="check_code_2">
								<label for="realPhoneAgain">手机验证码：</label>
								<input type="text" placeholder="请输入手机验证码" id="realPhoneAgain" class="inp">
								<button class="btn get-real phone-code-agin" type="button" style="background:rgba(236,236,236,1);color:rgb(153,153,153);cursor:default;pointer-events:none" >获取手机验证码</button>
							</div>
						</form>
						<button class="btn next-btn" type="button"  onclick="subForm()">下一步</button>
					</li>

				</ul>
			</div>
			<div class="real-name real-succ">

				<div class="real-text">手机绑定成功！</div>
				<a href="<c:url value='/pc/myAccount?ACCESS_TOKEN=${ACCESS_TOKEN}' />" class="btn my-btn" style="height: 40px;line-height: 25px">我的资料</a>
				<a href="<c:url value='/?ACCESS_TOKEN=${ACCESS_TOKEN}' />" class="btn index-btn" style="height: 40px;line-height: 25px">首页</a>
			</div>
		</div>

	</div>
	<!--右边编辑常用联系人结束  企业用户-->

</div>
<jsp:include page="../index/multi_f.jsp"/>

</body>

</html>
<script src="<c:url value='/resources/version_new/js/jquery-1.8.3.min.js' />"></script>
<script src="<c:url value='/resources/version_new/js/gVerify.js' />"></script>
<script type="text/javascript" src="<c:url value='/resources/js/layer/layer.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/commonJS/con-common.js' />"></script>
<script type="text/javascript">

	changeImg();
	function changeImg() {
		$('#imageF').hide().attr('src','/user/image.htm'+ '?'+ Math.floor(Math.random() * 100)).fadeIn();
	}
	function changeImg2() {
		$('#imageF2').hide().attr('src','/user/image.htm'+ '?'+ Math.floor(Math.random() * 100)).fadeIn();
	}

	function checkTelCodes() {
		var right_code = $('#right-code').val();
		if (right_code == "") {
            laySomenType(1,null,"验证码不能为空！",0);
		} else {
			$('#check_code').val('');
			$.ajax({
				type: 'POST',
				url: baseUrl + "/synopsis/checkYzm.json",
				data:{'captcha': right_code},
				dataType:"json",
				success: function(json){
					if(json.statusCode == "200") {
						$("#right-code").attr("disabled","disabled").css("cursor", "not-allowed");
						$("#imageF").attr("onclick", "");
						$('#check_code').val(right_code);
						$("#right-code").attr('TY-VAL','');
						changeBtn(1);
					}else{
                        laySomenType(1,null,"验证码错误！",0);
						changeImg();
					}
				}
			});
		}
	}

	$('#right-code').blur(function () {
		checkTelCodes();
	})

	function checkTelCodes2() {
		var left_code = $('#left-code').val();
		if (left_code == "") {
            laySomenType(1,null,"验证码不能为空！",0);
		} else {
			$('#check_code_2').val('');
			$.ajax({
				type: 'POST',
				url: baseUrl + "/synopsis/checkYzm.json",
				data:{'captcha': left_code},
				dataType:"json",
				success: function(json){
					if(json.statusCode == "200") {
						$("#left-code").attr("disabled","disabled").css("cursor", "not-allowed");
						$("#imageF2").attr("onclick", "");
						$('#check_code_2').val(left_code);
						$("#left-code").attr('TY-VAL','');
						changeBtn2(1);
					}else{
                        laySomenType(1,null,"验证码错误！",0);
						changeImg2();
					}
				}
			});
		}
	}

	$('#left-code').blur(function () {
		checkTelCodes2();
	})

	var verifyCode1 = new GVerify({
		id: "v_container_email",
		canvasId: "verifyCanvas1"
	});

	var baseUrl = '${pageContext.request.contextPath }';

	$('.email-code').click(function () {
        var  code=$('#realNumEmail').val();
        var res = verifyCode1.validate(code);
        if(res == "" && !res){
            laySomenType(1,null,"验证码不能为空或输入错误！",0);
            return;
        }
		sendTrueEmail();
		sendemail();
	});
    var phone_reg = /^1[2|3|4|5|6|7|8|9]\d{9}$/;
    $('#again_phone').blur(function () {
		if(!phone_reg.test($(this).val())){
            laySomenType(1,null,"手机号码格式不正确！",0);
		}
		if($(this).val() == ""){
            laySomenType(1,null,"手机号码不能为空！",0);
		}
    })

	$('.phone-code-agin').click(function () {
		var phone= $("#again_phone").val();
		if(phone==""){
            laySomenType(1,null,"请填写绑定手机！",0);
			return;
		}
		var phone_reg = /^1[2|3|4|5|6|7|8|9]\d{9}$/;
		if(!phone.match(phone_reg)){
            laySomenType(1,null,"手机号码格式错误！",0);
			return;
		}
        //配套js(/resources/commonJS/con-common.js)1.表单参数，2.请求地址，3.是否同步，4.是否遮盖，5.返回处理
        setParamDatas({'email': phone}, baseUrl + "/user/register/checkUserExist",false,false,function(json){
            if(json.statusCode == '2') {
                if($("#left-code").attr('TY-VAL') == '1'){
                    changeImg2();
                    $("#left-code").removeAttr("disabled").css("cursor", "text");
                    $("#imageF2").attr("onclick", "changeImg2()");
                    layer.msg("图形验证码已刷新，请重新填写！");
                    changeBtn2(2);
                    return;
                }
                sendTrueAgainPhone();
            }else{
                laySomenType(1,null,"账号已经被绑定，请输入未绑定手机！",0);
            }
        });

	});


	var countdownagain=60;
	function sendPhoneAgain() {
		if (countdownagain == 0) {
			$('.phone-code-agin').text("获取手机验证码").css({"background":"rgba(69,190,86,1)","color":"#ffffff","cursor":"pointer","pointer-events":"auto"});
			countdownagain = 60;
			return;
		} else {
			$('.phone-code-agin').text("再次发送(" + countdownagain + ")").css({"background":"rgba(236,236,236,1)","color":"rgb(153,153,153)","cursor":"default","pointer-events":"none"});
			countdownagain--;
		}
		setTimeout(function() {
					sendPhoneAgain()
				}
				,1000)
	};
	function changeBtn(sign) {
		if(sign == 1){
			$('.phone-code').text("获取手机验证码").css({"background":"rgba(69,190,86,1)","color":"#ffffff","cursor":"pointer","pointer-events":"auto"});
		}else{
			$('.phone-code').text("获取短信验证码").css({"background":"rgba(236,236,236,1)","color":"rgb(153,153,153)","cursor":"default","pointer-events":"none"});
		}
	};
	function changeBtn2(sign) {
		if(sign == 1){
			$('.phone-code-agin').text("获取手机验证码").css({"background":"rgba(69,190,86,1)","color":"#ffffff","cursor":"pointer","pointer-events":"auto"});
		}else{
			$('.phone-code-agin').text("获取短信验证码").css({"background":"rgba(236,236,236,1)","color":"rgb(153,153,153)","cursor":"default","pointer-events":"none"});
		}
	};
	var countdown=60;
	function sendemail() {
		if (countdown == 0) {
			$('.email-code').text("获取邮箱验证码").css({"background":"rgba(69,190,86,1)","color":"#ffffff","cursor":"pointer","pointer-events":"auto"});
			countdown = 60;
			return;
		} else {
			$('.email-code').text("再次发送(" + countdown + ")").css({"background":"rgba(236,236,236,1)","color":"rgb(153,153,153)","cursor":"default","pointer-events":"none"});
			countdown--;
		}
		setTimeout(function() {
					sendemail()
				}
				,1000)
	};

	$('.phone-code').click(function () {
        if($("#right-code").attr('TY-VAL') == '1'){
            changeImg();
            $("#right-code").removeAttr("disabled").css("cursor", "text");
            $("#imageF").attr("onclick", "changeImg()");
            layer.msg("图形验证码已刷新，请重新填写！");
            changeBtn(2);
            return;
        }
		sendTruePhone();
	});
	var count=60;
	function sendphone() {


		if (count == 0) {
			$('.phone-code').text("获取短信验证码").css({"background":"rgba(69,190,86,1)","color":"#ffffff","cursor":"pointer","pointer-events":"auto"});
			count = 60;
			return;
		} else {
			$('.phone-code').text("再次发送(" + count + ")").css({"background":"rgba(236,236,236,1)","color":"rgb(153,153,153)","cursor":"default","pointer-events":"none"});
			count--;
		}
		setTimeout(function() {
					sendphone()
				}
				,1000)
	};

	function   sendTrueEmail(){
        //配套js(/resources/commonJS/con-common.js)1.表单参数，2.请求地址，3.是否同步，4.是否遮盖，5.返回处理
        setParamDatas({type:2}, baseUrl + "/pc/sendEmailCode",false,true,function(json){
            if (json.statusCode == '200') {
                laySomenType(1,null,"验证码获取成功,请查收邮件并进行验证！",0);
            }
        });
	}

	function sendTrueAgainPhone(){
		var phone= $("#again_phone").val();
        var check_code_2 =$("#check_code_2").val();
        if(check_code_2 == ''){
            layer.msg("请先输入正确的图形验证码！！");
            return;
        }
        sendPhoneAgain();
        var index = layer.load(0, {shade: [0.3,'#808080']});
        $("#left-code").attr('TY-VAL','1');
        $.ajax({
            type : 'POST',
            url : baseUrl + "/user/register/sendAuthCode",
            async: false,
            data : {
                'tel' : phone,
                'check_code' : check_code_2
            },
            dataType : "json",
            cache : false,
            success : function(json) {
                layer.close(index);
                if (json.statusCode == '200') {
                    layer.msg("验证码获取成功,请查收手机并进行验证！！");
                }else{
                    layer.msg(json.message);
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                layer.close(index);
                layer.msg("验证码获取失败！！");
            }
        });

	}
	function sendTruePhone(){
        var phone = '${userdetail.telephone}';
        var check_code =$("#check_code").val();
        if(check_code == ''){
            layer.msg("请先输入正确的图形验证码！！");
            return;
        }
        sendphone();
        var index = layer.load(0, {shade: [0.3,'#808080']});
        $("#right-code").attr('TY-VAL','1');
        $.ajax({
            type : 'POST',
            url : baseUrl + "/user/register/sendAuthCode",
            async: false,
            data : {
                'tel' : phone,
                'check_code' : check_code
            },
            dataType : "json",
            cache : false,
            success : function(json) {
                layer.close(index);
                if (json.statusCode == '200') {
                    layer.msg("验证码获取成功,请查收手机并进行验证！！");
                }else{
                    layer.msg(json.message);
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                layer.msg("验证码获取失败！！");
            }
        });
	}


	function phoneValidate(){
//		nextStep('real-cart','next-btn','real-phone',3);
		$("#emailSet").css('display', 'none');
		$("#phoneSet").css('display', 'block');
		nextStep('real-methods','step-list li:nth-child(2) .real-btn','phone-val',2);

	}
	function  emailValidate(){
		$('.real-methods').css('display','none');
		$("#phoneSet").css('display', 'none');
		$("#emailSet").css('display', 'block');
		$('.real-step li:nth-child(2)').addClass('active');
		nextStep('real-methods','step-list li:nth-child(2) .real-btn','email-val',2);
	}
	function   emailValidateCode(){
		var  emailNumCode=$('#realNumEmail').val();
		var  emailCode=$('#realEmail').val();
		if(emailNumCode==''){
            laySomenType(1,null,"验证码不能为空！",0);
			return ;
		}
		if(emailNumCode==''){
            laySomenType(1,null,"短信验证码不能为空！",0);
			return ;
		}
		var res = verifyCode1.validate(emailNumCode);
		if(res){
            //配套js(/resources/commonJS/con-common.js)1.表单参数，2.请求地址，3.是否同步，4.是否遮盖，5.返回处理
            setParamDatas({code:emailCode}, baseUrl + "/pc/checkAuthCode",false,true,function(json){
                if (json.statusCode == '200') {
                    nextStep('real-cart','next-btn','real-phone',3);
                }else{
                    laySomenType(1,null,"短信验证码错误，请重新输入！",0);
                }
            });
		}else{
            laySomenType(1,null,"验证码错误，请重新输入！",0);
			return ;

		}

	}
	function phoneValidateCode(){
		var  phoneCode=$("#realPhone").val();
		if(phoneCode==''){
            laySomenType(1,null,"短信验证码不能为空！",0);
			return ;
		}
        //配套js(/resources/commonJS/con-common.js)1.表单参数，2.请求地址，3.是否同步，4.是否遮盖，5.返回处理
        setParamDatas({'captcha':phoneCode}, baseUrl + "/user/register/checkCode",false,true,function(json){
            if (json.statusCode == '200') {
//                nextStep('real-cart','next-btn','real-phone',3);
                nextStepNow('real-cart','next-btn','real-phone',3);

            }else{
                laySomenType(1,null,"短信验证码错误，请重新输入！",0);
            }
        });
	}

	function nextStep(now, btn, next, num) {
		$('.' + now).on('click', '.' + btn, function () {
			$('.' + now).css('display', 'none');
			$('.' + next).css('display', 'block');
			$('.real-step li:nth-child(' + num + ')').addClass('active');
		});
	}

	function nextStepNow(now, btn, next, num) {
        changeImg2();
        $('.' + now).css('display', 'none');
        $('.' + next).css('display', 'block');
        $('.real-step li:nth-child(' + num + ')').addClass('active');
	}

	function nextStepNow2(now, btn, next, num) {
        $('.' + now).css('display', 'none');
        $('.' + next).css('display', 'block');
        $('.real-step li:nth-child(' + num + ')').addClass('active');
	}

	function  checkUserExist(email){
		var flag=false;
		if(email != "") {
			$.ajax({
				type: 'POST',
				url: baseUrl + "/user/register/checkUserExist",
				data:{'email': email},
				dataType:"json",
				async: false,
				success: function(json){
					if(json.statusCode == '2') {
//						layer.msg("该账号不存在！",{shift: 1});
						flag = false;
					}else{
						flag=true;
					}

				}
			});
		}else{
			flag = false;
		}
		return flag;
	}

	function subForm(){
		var  phoneCode=$('#realPhoneAgain').val();
        if(phoneCode==''){
            laySomenType(1,null,"短信验证码不能为空！",0);
            return ;
        }
        //配套js(/resources/commonJS/con-common.js)1.表单参数，2.请求地址，3.是否同步，4.是否遮盖，5.返回处理
        setParamDatas({'captcha':phoneCode}, baseUrl + "/user/register/checkCode",false,true,function(json){
            if (json.statusCode == '200') {
                //配套js(/resources/commonJS/con-common.js)1.表单参数，2.请求地址，3.是否同步，4.是否遮盖，5.返回处理
                setParamDatas($('#form1').serialize(), baseUrl + "/pc/phone/saveInfo",false,false,function(data){
                    if (data.statusCode == '200') {
                        nextStepNow2('real-phone','next-btn','real-succ',4);
                    }else{
                        laySomenType(1,null,data.message,0);
                    }
                    dialogClose(true);
                });

            }else{
                laySomenType(1,null,"短信验证码错误，请重新输入！",0);
            }
        });
	}

</script>
<script>
	$('ul.aside-list li').removeClass('on');
	$("#myAcountInfo").addClass('on');
</script>