xiuli.gao
/
shareBooks


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
							<!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">
			label{
				color: #444444;
				font-size: 0.16rem;
				display: inline-block;
				width: 0.65rem;
			}
			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:nth-of-type(1){
				margin-top: 0.41rem;
				
			}
			.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.65rem;
			}
			.button{
				width: 2.18rem;
				height: 0.41rem;
				background: #F2F2F2;
				border-radius: 0.26rem;
				color: #666666;
				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);
			}
		</style>
	</head>
	<body>
		<div class="tel"><label>手机号</label><input type="tel" id="mobile" placeholder="请输入手机号" /></div>
		<div class="tel"><label>验证码</label><input data-type="password1" id="code" type="tel" placeholder="请输入密码" /><button id="mobileYzm" onclick="getYzmEvent()">验证码</button></div>
		<div class="tel"><label>新密码</label><input type="password" id="password" placeholder="6-16位数字、字母组合"/></div>
		<div class="tel"><label>确认密码</label><input type="password" id="password01" placeholder="请再次输入密码" /></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 time = '';
	function getYzmEvent(){
		var teleNumber = $("#mobile").val();
		var myMobile=/^[0-9]{11}$/; 
		if (!myMobile.test(teleNumber)) { 
			//手机号码未填写及填写不正确
			$(".maskYzm").css('visibility','hidden');
			$(".mask").css("visibility","visible");
			$(".mask .content p").html('请正确填写手机号码');
		}else{
			$(".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 iknow() {
		$(".mask").css("visibility","hidden");
		$("#imgYzm").val("")
	}
	function cancelYzm(){
		$(".maskYzm").css("visibility","hidden")
	}
	function goSetPassword(){
		resetPassword();
	}
	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(res)
				if(JSON.parse(res).code == 0){
					time = JSON.parse(res).res.time_out;
					timeInterval = setInterval(timeDown,1000);
					$(".maskYzm").css("visibility","hidden")
				}else{
					$(".maskYzm").css("visibility","hidden");
					$(".mask").css("visibility","visible");
					$(".mask .content p").html(JSON.parse(res).message);
				}
			}
		});
	}
//	function passwordBlur () {
//		var password = $("#password").val();
//		var pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
//		if(!pwd.test(password)){
//			//密码格式不正确
//			
//		}
//	}
	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 resetPassword () {
		$.ajax({
			type:"post",
			url:"/api/V1/h5ResetPassword",
			data:{
				'mobile':$("#mobile").val(),
				'password':$("#password").val(),
				'c_password':$("#password01").val(),
				'code':$("#code").val()
			},
			success: function (res){
				console.log(JSON.parse(res))
				if(JSON.parse(res).code == 0){
					//登录成功
					window.location.href="addSuccess.html";
				}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>