xiuli.gao
/
qianduo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
		<title>绑定手机号</title>
		<link rel="stylesheet" type="text/css" href="public/public_css.css"/>
		<style type="text/css">
			body{
				padding-top: 0.25rem;
				background: #FFFFFF;
			}
			.label{
				color: #444444;
				font-size: 0.16rem;
				display: inline-block;
				width: 0.75rem;
			}
			input{
				border: none;
				font-size: 0.16rem;
				outline: none;
				margin-left: 0.16rem;
			}
			.tel{
				width: 3.2rem;
				margin: auto;
				margin-top: 0.16rem;
				padding-bottom: 0.05rem;
				border-bottom: 0.01rem solid #D8D8D8;
			}
			.tel button{
				width: 0.73rem;
				height: 0.28rem;
				border-radius: 0.06rem;
				background: #F4F4F4;
				font-size: 0.14rem;
				color: #666666;
			}
			input[data-type="password1"]{
				width: 1.45rem;
			}
			.button{
				width: 2.18rem;
				height: 0.41rem;
				border-radius: 0.26rem;
				background: #FFE100;
				color: #FFFFFF;
				box-shadow:0px 0.02rem 0px rgba(251,179,179,0.5);
				font-size: 0.2rem;
				margin: auto;
				margin-top: 0.68rem;
				display: block;
			}
			.getYzm{
				width: 2.54rem;
				background: #F2F2F2;
				border-radius: 0.06rem;
				margin: auto;
				margin-top: 0.15rem;
				margin-bottom: 0.15rem;
			}
			.getYzm input{
				font-size: 0.16rem;
				line-height: 0.22rem;
				color: #666666;
				background: #F2F2F2;
				width: 1.43rem;
				vertical-align: middle;
			}
			.getYzm img{
				height: 0.4rem;
				width: 0.8rem;
				display: inline-block;
				vertical-align: middle;
				margin: 0.1rem 0.1rem 0.1rem 0;
			}
			.yesOrNo{
				border-top: 0.01rem solid rgba(151,151,151,0.1998);
			}
			.yesOrNo button{
				width: 1.46rem;
				font-size: 0.14rem;
				line-height: 0.2rem;
				color: #0F7FFF;
				padding: 0.09rem 0 0.12rem 0;
			}
			.yesOrNo button:nth-of-type(1){
				border-right: 0.01rem solid rgba(151,151,151,0.1998);
			}
			.mobilePhone,.passwordPrompt,.passwordConfirm,.yzmPrompt{
				display: none;
				font-size: 0.12rem;
				color: red;
				margin-left: 1rem;
				position: relative;
				top: 0.1rem;
			}
		</style>
	</head>
	<body>
		<p class="mobilePhone">请正确填写手机号</p>
		<div class="tel"><div class="label">手机号</div><input type="tel" id="mobile" placeholder="请输入手机号" onchange="mobileChange()"/></div>
		<p class="yzmPrompt">请填写手机验证码</p>
		<div class="tel">
			<div class="label">验证码</div>
			<input data-type="password1" id="code" type="tel" placeholder="请输入手机验证码" onchange="yzmChangeEvent()"/>
			<button id="mobileYzm" onclick="getYzmEvent()">验证码</button>
		</div>
		<p class="passwordPrompt">请正确填写6-16位数字、字母组合密码</p>
		<div class="tel"><div class="label">新密码</div><input type="password" id="password" placeholder="6-16位数字、字母组合" onchange="passwordBlur()"/></div>
		<p class="passwordConfirm">密码确认有误</p>
		<div class="tel"><div class="label">确认密码</div><input type="password" id="password01" placeholder="请再次输入密码" onchange="passwordCongirmEvent()"/></div>
		<button class="button" onclick="goSetPassword()">完成</button>
		<div class="maskYzm">
			<div class="yzmCon">
				<div class="getYzm">
					<input type="text" id="imgYzm" placeholder="请输入验证码"/>
					<img onclick="imgYzmChange()" src="/api/V1/imgCode?mobile=13621209952" />
				</div>
				<div class="yesOrNo">
					<button onclick="cancelYzm()">取消</button>
					<button onclick="yesYzm()">确定</button>
				</div>
			</div>
		</div>
		<div class="mask">
			<div class="content">
				<h3>提示</h3>
				<p>密码错误啊啊啊啊啊</p>
				<div onclick="iknow()">我知道了</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript" src="public/jquery-2.1.0.js"></script>
<script type="text/javascript">
	document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
	window.onresize = function(){
		document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
} 
	var book_id = '';
	var user_id = '';
	var str=location.href;  //取得整个地址栏
	localStorage.setItem('addUrl',str)
    var num=str.indexOf("?"); 
    str=str.substr(num+1); //str得到?之后的字符串
    var brr=str.split("&");
	for(var i = 0 ; i<brr.length; i++){
    	if(brr[i].indexOf('bookId') != -1){
    		book_id = brr[i].split('=')[1];
    	}
    	if(brr[i].indexOf('userId') != -1){
    		user_id = brr[i].split('=')[1];
    	}
   }
	
	var time = '';
	var mobileFlag = false;
	var pwdFlag=false;
	var pwdConfirmFlag=false;
	var successFlag = false;
	
	
	function iknow() {
		if(successFlag){
			var addUrl = localStorage.getItem('addUrl')
			window.location.href=addUrl;
		}
		$(".mask").css("visibility","hidden");
		$("#imgYzm").val("")
	}
	function cancelYzm(){
		$(".maskYzm").css("visibility","hidden")
	}
	function imgYzmChange () {
		//更换验证图片验证码
		$(".getYzm img").attr("src",'/api/V1/imgCode?mobile=' + $("#mobile").val() + '&tmp=' + Date.parse(new Date()));
		$("#imgYzm").val("")
	}
	function yesYzm () {
		var imgCode = $("#imgYzm").val();
		var teleNumber = $("#mobile").val();
		sendCode(imgCode,teleNumber)
	}
	function sendCode (imgCode,teleNumber) {
		$.ajax({
			type:"post",
			url:"/api/V1/h5SendCode",
			data: {
				img_code:imgCode,
				mobile:teleNumber,
				code_type:1,
				send_type:2
			},
			success: function (res) {
				console.log(JSON.parse(res))
				if(JSON.parse(res).code == 0){
					time = JSON.parse(res).res.time_out;
					timeInterval = setInterval(timeDown,1000);
					$(".maskYzm").css("visibility","hidden")
				}else{
					var msg = JSON.parse(res).message[0]
					$(".maskYzm").css("visibility","hidden");
					$(".mask").css("visibility","visible");
					if(msg.indexOf("img_code") != -1){
						msg = msg.replace('img_code', '图片验证码');
					}
					$(".mask .content p").html(msg);
				}
			}
		});
	}
	//密码正则
	function passwordBlur () {
		var password = $("#password").val();
		var pwd = /^[0-9A-Za-z]{6,16}$/;
//		var pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
		if(!pwd.test(password)){
			//密码格式不正确
			$(".passwordPrompt").css('display','block');
			pwdFlag = false;
		}else{
			$(".passwordPrompt").css('display','none');
			pwdFlag = true;
		}
	}
	//手机号正则
	function mobileChange () {
		var teleNumber = $("#mobile").val();
		var myMobile=/^[0-9]{11}$/; 
		if (!myMobile.test(teleNumber)) { 
			//手机号码未填写及填写不正确
			$(".mobilePhone").css("display","block");
			mobileFlag=false;
		}else{
			$(".mobilePhone").css("display","none");
			mobileFlag=true;
		}
	}
	//确认密码
	function passwordCongirmEvent (){
		var pwd = $("#password").val();
		var pwdCongirm = $("#password01").val();
		if(pwd != pwdCongirm){
			$(".passwordConfirm").css("display","block");
			pwdConfirmFlag = false;
		}else{
			$(".passwordConfirm").css("display","none");
			pwdConfirmFlag = true;
		}
	}
	//手机验证码
	function yzmChangeEvent () {
		var code = $("#code").val();
		if(code != ''){
			$(".yzmPrompt").css("display","none");
		}else{
			$(".yzmPrompt").css("display","block");
		}
	}
	function getYzmEvent(){
		var teleNumber = $("#mobile").val();
		mobileChange();
		if(mobileFlag){
			$(".mask").css("visibility","hidden")
			$(".maskYzm").css('visibility','visible');
			$(".getYzm img").attr("src",'/api/V1/imgCode?mobile=' + teleNumber + '&tmp=' + Date.parse(new Date()));
			$("#imgYzm").val("");
		}
	}
	function timeDown () {
		$("#mobileYzm").attr('disabled','true')
		$("#mobileYzm").css("color","red");
		time -- ;
		if(time == 0){
			$("#mobileYzm").css("color","#666666");
			$("#mobileYzm").html('验证码');
			$("#mobileYzm").removeAttr('disabled')
			clearInterval(timeInterval);
		}else{
			$("#mobileYzm").html(time);
		}
	}
	//完成
	function goSetPassword(){
		mobileChange();
		passwordBlur();
		passwordCongirmEvent();
		if(mobileFlag&&pwdFlag&&pwdConfirmFlag){
			var code = $("#code").val();
			if(code != ''){
				resetPassword();
			}else{
				$(".yzmPrompt").css("display","block");
			}
		}
	}
	function resetPassword () {
		$.ajax({
			type:"post",
			url:"/api/V1/h5BindMobile",
			data:{
				'mobile':$("#mobile").val(),
				'password':$("#password").val(),
				'c_password':$("#password01").val(),
				'code':$("#code").val(),
				'book_id':book_id,
				'user_id':user_id
			},
			success: function (res){
				console.log(JSON.parse(res))
				if(JSON.parse(res).code == 0){
					//登录成功
					$(".mask").css("visibility","visible");
					var msg = JSON.parse(res).message[0];
					$(".content p").html('密码修改成功');
					successFlag = true;
				}else{
					var msg = JSON.parse(res).message[0]
					$(".mask").css("visibility","visible");
					if(msg.indexOf("mobile") != -1){
						msg = msg.replace('mobile', '手机号');
					}
					if(msg.indexOf("c_password") != -1){
						msg = msg.replace('c_password', '确认密码');
					}
					if(msg.indexOf("password") != -1){
						msg = msg.replace('password', '密码');
					}
					if(msg.indexOf("code") != -1){
						msg = msg.replace('code', '验证码');
					}
					$(".content p").html(msg);
				}
			}
		});
	}
</script>