<#-- 绑定手机 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<base href="${baseURL}">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>绑定手机 - ${title}</title>
	<meta name="keywords" content="${keywords}"/>
	<meta name="description" content="${description}"/>
	<link rel="shortcut icon" type="image/x-icon" href="${baseURL}${commonPath}images/favicon.ico" media="screen" />
	<link href="${commonPath}css/common.css" type="text/css" rel="stylesheet">
	<link href="${commonPath}css/themify-icons/style.css" type="text/css" rel="stylesheet">
	<script language="javascript" src="${commonPath}js/tool.js" type="text/javascript"></script>
	<script language="javascript" src="${commonPath}js/ajax.js" type="text/javascript"></script>
	<script language="javascript" src="${commonPath}js/json2.js" type="text/javascript"></script>
	<script type="text/javascript" src="${commonPath}js/jquery/jquery.min.js" language="javascript"></script>
	<link href="${commonPath}js/layer/skin/default/layer.css"  type="text/css" rel="stylesheet"/>
	<script type="text/javascript" src="${commonPath}js/layer/layer.js" language="javascript"></script>
</head>

<body>
<#-- 引入页头 -->
<@include action="${newPublic_2}"/>
<div class="skeleton">
	<div class="main wrap backgroundModule" >

		<#-- 引入服务导航 -->
		<@include action="${newPublic_4}"/>
	
	
		<div class="phoneBindingModule" >
			<!-- 令牌标记 -->
			<input type="hidden" id="token" name="token" value="${token}">
        	<div class="box">
        		<div class="form">
        			<div class="form-field" >
		        		<div id="mobile_field_error" class="form-field-container">
			        		<div class="form-field-text">
			        			<div class="form-field-input-container">
				        			<input id="mobile" maxLength="11" class="form-field-text-input" type="text" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
				        			<label class="form-field-label">手机号</label>
			        			</div>
			        		</div>
		        			<div id="mobile_prompt_error" class="form-field-prompt-error"></div>
		        		</div>
		        	</div>
        			<div class="form-field" >
		        		<div id="smsCode_field_error" class="form-field-container">
			        		<div class="form-field-text">
			        			<div class="form-field-input-container">
				        			<input id="smsCode" maxLength="6" class="form-field-text-input" type="text" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
				        			<label class="form-field-label">短信验证码</label>
			        			</div>
			        			<div class="form-field-button-container">
							    	<button type="button" class="btn btn-link" tabindex="-1" onClick="getSmsCode();">获取验证码</button>
							    </div>
			        		</div>
		        			<div id="smsCode_prompt_error" class="form-field-prompt-error"></div>
		        			<div id="smsCode_prompt_successInfo" class="form-field-prompt-success"></div>
		        		</div>
		        	</div>
		        	<div id="captchaValue_field" class="form-field">
			        	<div id="captchaValue_field_error" class="form-field-container">
			        		<div class="form-field-text">
					        	<div class="form-field-input-container">
						        	<input type="hidden" id="captchaKey" name="captchaKey" value="${captchaKey}">
						        	<input id="captchaValue" class="form-field-text-input" type="text" maxlength="4" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
						        	<label class="form-field-label">验证码</label>
								</div>
						        <div class="form-field-image-container">
									<img id="captcha" src="captcha/${captchaKey!}.jpg" onClick="replaceCaptcha();" tabindex="4" />
									
						        </div>
						        <div class="form-field-button-container" style="background: #fff;">
						        	<button type="button" class="btn btn-link" tabindex="-1" onClick="replaceCaptcha();">换一幅</button>
						        </div>
						    </div>
						    <div id="captchaValue_prompt_error" class="form-field-prompt-error"></div>
						</div>
		        	</div>
				</div>
			</div>
			<div id="token_prompt_error" style="color: red;">${(error['token'])!}</div>
			
			<div class="submitButton-box">
				<a href="javascript:void(0);" onClick="javascript:ajaxSubmit()" tabindex="6">提&nbsp;交</a>
			</div>
		</div>

	</div>

</div>
<#--引入页脚-->
<@include action="${newPublic_3}"/>


<script language="javascript" type="text/javascript">
	$(".form-field").find(".form-field-input-container").bind("mousedown",function(e) {
		$(this).find(".form-field-text-input").focus();
		
		if($(this).find(".form-field-label").hasClass("form-field-active")){
			return;
		
		}
		$(this).find(".form-field-label").addClass("form-field-active");
	});
	
	$(document).mousedown(function (e) {
        var target = $(e.target);
        if (target.closest(".form-field-input-container").length == 0) {
            $(".form-field-input-container").each(function(){
			    if($(this).find(".form-field-label").hasClass("form-field-active")){
					if($(this).find('input[type="text"]').val() == "" || $(this).find('input[type="password"]').val() == ""){
						$(this).find(".form-field-label").removeClass("form-field-active");
					}
					
				}
			});
        }
    });
    //文本框含有默认值时字段名称缩小
	$(document).ready(function(){
		$(".form-field-input-container").each(function(){
		    if(!$(this).find(".form-field-label").hasClass("form-field-active")){
				if(($(this).find('input[type="text"]').val() != undefined && $(this).find('input[type="text"]').val() != '') 
					|| $(this).find('input[type="password"]').val() != undefined && $(this).find('input[type="password"]').val() != ''){
					$(this).find(".form-field-label").addClass("form-field-active");
				}
				
			}
		});
	});
	
	
	//监听Tab键
    $(document).on('keyup',function (e) {
	    if(e.keyCode == 9){
	    	var input = $(this).find('input:focus');
	    	if (input.length) {
		    	if(!input.parent().parent().find(".form-field-label").hasClass("form-field-active")){
					input.parent().parent().find(".form-field-label").addClass("form-field-active");
				}
		    }
		}
	});
    //解决提交按钮的click和blur事件冲突
	$(document).ready(function(){
		$("input[type='button']").mousedown(function(e){
	    	e.preventDefault();
		});
		$("a[href='javascript:void(0);']").mousedown(function(e){
	    	e.preventDefault();
		});
		
	});
</script>

<script language="javascript" type="text/javascript">
	//点击输入框提示
	function inputBoxClickTip(obj){
	
	
	}
	//离开输入框提示
	function inputBoxOutTip(obj){
		verification(obj.id);
	}
	
	//验证参数
	function verification(field){
		$("#"+field+"_prompt_error").hide();
		$("#"+field+"_field_error").removeClass("form-field-error");

		if(field == "mobile"){//手机号
			var mobile = $("#"+field).val().trim();
			if(mobile == ""){
				$("#"+field+"_prompt_error").html("手机号不能为空");
				$("#"+field+"_prompt_error").show();
				$("#"+field+"_field_error").addClass("form-field-error");
				return false;
			}
			if(getStringLeng(mobile) < 11){
				$("#"+field+"_prompt_error").html("手机号不正确");
				$("#"+field+"_prompt_error").show();
				$("#"+field+"_field_error").addClass("form-field-error");
				return false;
			}
		}

		if(field == "smsCode"){//手机验证码
			var smsCode = $("#"+field).val().trim();
			if(smsCode == ""){
				$("#"+field+"_prompt_error").html("手机验证码不能为空");
				$("#"+field+"_prompt_error").show();
				$("#"+field+"_field_error").addClass("form-field-error");
			}
		}
		if(field == "captchaValue"){//验证码
			if(!$("#captchaValue_field").is(":hidden")){//如果验证码框显示
				var captchaKey = $("#captchaKey").val().trim();
				var captchaValue = $("#"+field).val().trim();
				if(captchaValue == ""){
					$("#"+field+"_prompt_error").html("验证码不能为空");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
				
				get_request(function(value){
	            	if(value == "false"){
	            		$("#"+field+"_prompt_error").html("验证码错误");
						$("#"+field+"_prompt_error").show();
						$("#"+field+"_field_error").addClass("form-field-error");
	            	}
	            },
			 		"userVerification?captchaKey="+captchaKey+"&captchaValue="+captchaValue+"&timestamp=" + new Date().getTime(), true);
	            	
			}
		}
	}
	
	//验证提交参数
	function allVerification(){
		var isVerification = true;
		if(verification("mobile") == false){
			isVerification = false;
		}
		if(verification("smsCode") == false){
			isVerification = false;
		}
		return isVerification;
	}
	//ajax提交
	function ajaxSubmit(){
		if(allVerification() == false){
			//需引入layer
     		layer.msg('请填好资料再提交', {
				time: 3000 //3秒关闭（如果不配置，默认是3秒）
				},function(){//关闭后的操作
						
				}
			);
			return;
		}
		var parameter = "";
		//令牌标记
		var token = $("#token").val();
		parameter += "&token="+token;
		
		//手机号
		parameter += "&mobile="+encodeURIComponent($("#mobile").val().trim());
			
		//手机验证码
		var smsCode = $("#smsCode").val().trim();
		if(smsCode != ""){
			parameter += "&smsCode="+encodeURIComponent(smsCode);
		}
		//删除第一个&号,防止因为多了&号而出现警告: Parameters: Invalid chunk ignored.信息
		if(parameter.indexOf("&") == 0){
			parameter = parameter.substring(1,parameter.length);
		}
		
		post_request(function(value){
			if(value != ""){
				var returnValue = JSON.parse(value);//JSON转为对象
				var jumpUrl = "";
				
				for(var key in returnValue){
					if(key == "success"){	
						var success = returnValue[key];	
						if(success == "true"){
							//需引入layer
				     		layer.msg('绑定成功', {
								time: 3000 //3秒关闭（如果不配置，默认是3秒）
								},function(){//关闭后的操作
									//跳转
									window.location.href = getBasePath()+"user/control/realNameAuthentication";	
								}
							);
						}
					}if(key == "jumpUrl"){	
						jumpUrl = returnValue[key];	
					}else if(key == "error"){
						var errorValue = returnValue[key];
						for(var error in errorValue){
							if(error != ""){
								$("#"+error+"_prompt_error").html(errorValue[error]);
								$("#"+error+"_prompt_error").show();
								$("#"+error+"_field_error").addClass("form-field-error");	
							}
						}
					}else if(key == "captchaKey"){//显示验证码	
						var captchaKey = returnValue[key];
						if(captchaKey != ""){
							//设置验证码Key
							$("#captchaValue_field").show();
							//设置验证码Key
							$("#captchaKey").val(captchaKey);
							//设置验证码图片
							replaceCaptcha();
						}
					}
				}
			}	
		},
			"user/control/phoneBinding?&timestamp=" + new Date().getTime(), true,parameter);
	}
	
	//获取短信验证码
	function getSmsCode(){
	
		if($("#smsCode_field_error").find("button").hasClass("btn-link-disabled")){
			return;
		}
	
		var parameter = "";
		//令牌标记
		var token = $("#token").val();
		parameter += "&token="+token;
		
		//模块
		parameter += "&module=1";
		
		parameter += "&mobile="+encodeURIComponent($("#mobile").val().trim());
		
		//验证码Key
		parameter += "&captchaKey="+encodeURIComponent($("#captchaKey").val());
		
		//验证码值
		parameter += "&captchaValue="+encodeURIComponent($("#captchaValue").val());
		
		if(parameter.indexOf("&") == 0){
			parameter = parameter.substring(1,parameter.length);
		}
		
		//清除错误信息
		$("#smsCode_prompt_error").html("");
		$("#smsCode_prompt_error").hide();
		$("#smsCode_field_error").removeClass("form-field-error");
		
		$("#smsCode_prompt_successInfo").html("");
		$("#smsCode_prompt_successInfo").hide();
		

		
		post_request(function(value){
			if(value != ""){
				var returnValue = JSON.parse(value);//JSON转为对象
				var success = "false";
				
				for(var key in returnValue){
					if(key == "success"){	
						var success = returnValue[key];
						if(success == "true"){
							$("#smsCode_prompt_successInfo").html("短信验证码已发送");
							$("#smsCode_prompt_successInfo").show();
							//隐藏提交按钮60秒
							var number = 60;//秒
							var countdown = function(){
								if (number == 0) {
									$("#smsCode_field_error").find("button").removeClass("btn-link-disabled");
									$("#smsCode_field_error").find("button").addClass("btn-link");
									$("#smsCode_field_error").find("button").text("获取验证码");
						            number = 60;
						            return;
						        } else {
						        	if($("#smsCode_field_error").find("button").hasClass("btn-link")){
										$("#smsCode_field_error").find("button").removeClass("btn-link");
										$("#smsCode_field_error").find("button").addClass("btn-link-disabled");
									}
									$("#smsCode_field_error").find("button").text(number + "秒后没收到可重新获取");
						        	number--;
						        }
								setTimeout(countdown,1000);
							}
							setTimeout(countdown,0);
								
						}		
					}else if(key == "error"){
						var errorValue = returnValue[key];
						for(var error in errorValue){
							if(error != ""){
								$("#"+error+"_prompt_error").html(errorValue[error]);
								$("#"+error+"_prompt_error").show();
								$("#"+error+"_field_error").addClass("form-field-error");
									
							}
						}
					}else if(key == "captchaKey"){//显示验证码	
						var captchaKey = returnValue[key];
						if(captchaKey != ""){
							//设置验证码Key
							$("#captchaValue_field").show();
							//设置验证码Key
							$("#captchaKey").val(captchaKey);
							//设置验证码图片
							replaceCaptcha();
						}
					}
				}
			}	
		},
			"user/control/getSmsCode?&timestamp=" + new Date().getTime(), true,parameter);
	}
	//更换验证码
	function replaceCaptcha(){
		var captchaKey = document.getElementById("captchaKey").value;
		document.getElementById("captcha").src = "captcha/"+captchaKey+".jpg?" + Math.random(); 
	}
</script>
</body>

</html>
