{extend name="$index_style_layout" /}
{block name="head_mui_css"}<!--不使用mui-->{/block}
{block name="head_title"}用户登录{/block}
{block name="nav"}
<div class="qb_ui_Site_nav">
	<ul>
		<ol><i class="si si-home"></i>当前位置：</ol>
		<li>
			<a href='/' class="home">网站首页</a> <a href='#'>取回密码</a>
		</li>
	</ul>
</div>
{/block}
{block name="body_content"}
<link rel="stylesheet" href="/public/static/index/default/pclogin.css"> 
<style type="text/css">
.choose_type i{
	border:1px solid #ccc;
	line-height:30px;
	padding:0 10px 0 10px;
	margin-right:10px;
	cursor:pointer;
}
.choose_type .ck{
	background:#0099FF;
	color:#fff;
}
.choose_type{
	text-align:left;
}
.LoginBox{
	width:330px;
}
</style>

<div class="UserLoginCont">
	<div class="head"><i class="fa fa-address-book-o"></i> 取回密码</div>
	<div class="LoginCont">
		<div class="Left">
			<form class="mui-input-group" action="/index.php/index/getpassword/index.html" method="post">
				<div class="LoginBox">
					<ul>
						<li class="icon"><i class="fa fa-fw fa-user-o"></i></li>
						<ol><input type="text" name="username" minlength="3" maxlength="20" placeholder="请输入帐号" onBlur="check_username($(this),'username')" required/></ol>
						<li>请输入帐号</li>
					</ul>

					<ul class="choose_type" style="display:none;">
						<i class="ck fa fa-envelope-o" onclick="choose_send_type('email',0)"> 通过邮箱找回</i><i onclick="choose_send_type('mobphone',1)" class="fa fa-mobile-phone"> 通过手机找回</i>
						<input type="hidden" name="num_type" value="email">
					</ul>
					
					 
					<ul class="getyznum get_email" style="display:none;">
						<li class="icon"><i class="glyphicon glyphicon-question-sign"></i></li>
						<ol><input type="text" name="email_code" placeholder="请点击右边文字获取验证码" onBlur="check_num($(this),'email')" /></ol>
						<li><a href="#" onclick="get_code_num('email')">邮箱获取验证码</a></li>
					</ul>

					<ul class="getyznum get_mobphone" style="display:none;">
						<li class="icon"><i class="glyphicon glyphicon-question-sign"></i></li>
						<ol><input type="text" name="phone_code" placeholder="请点击右边文字获取验证码" onBlur="check_num($(this),'mobphone')" /></ol>
						<li><a href="#" onclick="get_code_num('mobphone')">手机获取验证码</a></li>						
					</ul>
					
					
					<ul class="getqrcode" style="display:none;">
						<li class="icon"><i class="glyphicon glyphicon-question-sign"></i></li>
						<ol><input type="text" name="captcha" placeholder="请输入右边验证码" onBlur="checkinput($(this),'captcha')" required/></ol>
						<li><img src="/index.php/captcha.html" style="cursor: pointer;" onclick="this.src='/index.php/captcha.html?d='+Math.random();" title="点击刷新"/></li>
					</ul>

					<ul class="setpassword" style="display:none;">
						<li class="icon"><i class="si si-lock"></i></li>
						<ol><input type="password" class='password1' name="password" minlength="5" maxlength="30" placeholder="请输入新密码" onBlur="checkinput($(this),'password')" required/></ol>
						<li>请输入新密码</li>
					</ul>

					<div class="butter postform" style="display:none;"><button type="submit">重置密码</button></div>
				</div>
</form>
<script type="text/javascript">

function choose_send_type(type,i){
	$(".getyznum").hide();
	$(".choose_type i").removeClass('ck');
	$(".choose_type i").eq(i).addClass('ck');
	$(".get_"+type).show();
	$("input[name='num_type']").val(type);
}

function get_code_num(type){
	var to = type=='email' ? email : mobphone;
	if(type=='mobphone'){
		if(to==''){
			layer.msg('此帐号没有设置手机号码');
			return false;
		}
		layer.msg('请稍候,系统正在发送验证码!请留意手机短信',{time:3000});
	}else if(type=='email'){
		if(to==''){
			layer.msg('此帐号没有设置邮箱');
			return false;
		}
		layer.msg('请稍候,系统正在发送验证码!请查收邮箱',{time:3000});
	}
	
	$.get("/index.php/index/getpassword/getnum.html?type="+type+'&to='+ to +'&'+Math.random(),function(res){
		layer.close();
		if(res.code==0){
			//layer.alert('验证码已成功发出,请耐心等候,注意查收!');
			layer.alert(res.msg);
		}else{
			layer.alert(res.msg);
		}			
	});
}

function check_num(objs,type){
	var vals=objs.val();
	if(vals==''){
		return ;
	}
	var field = type=='email' ? email : mobphone;
	$.get("/index.php/index/getpassword/check_num.html?num="+vals+"&type="+type+'&field='+field+'&'+Math.random(),function(res){
		if(res.code==0){
			$('.getqrcode').show();
			//$('.postform').show();
			objs.removeClass('error');
		}else{
			layer.msg(res.msg);
			objs.addClass('error');
		}			
	});
}

var email = '';
var mobphone = '';
function check_username(objs,type){
	var vals=objs.val();
	$.get("/index.php/index/getpassword/check.html?"+type+"="+vals+'&'+Math.random(),function(res){
		if(res.code==0){
			email = res.data.email;
			mobphone = res.data.mobphone;
			//$('.getyznum').show();
			$('.choose_type').show();
			$('.get_email').show();
			objs.removeClass('error');
		}else{
			layer.msg(res.msg);
			//objs.focus();
			objs.addClass('error');
		}			
	});
}

function checkinput(objs,type){
	var vals=objs.val();
	$.get("/index.php/index/getpassword/check.html?"+type+"="+vals+'&'+Math.random(),function(res){
		if(res.code==0){
			if(type=='captcha'){
				$('.setpassword').show();
				$('.postform').show();
			}
			objs.removeClass('error');
		}else{
			layer.msg(res.msg);
			//objs.focus();
			objs.addClass('error');
		}			
	});
}

</script>
		</div>
		<div class="Right">
			<h3>更换其它帐号？点击登录</h3>
			<!--<p>你也可以用微信扫描下面二维码自动注册或自动登录</p>-->
			<dl>
				<dt><a href="/index.php/index/login/index.html">点击登录</a></dt>
				 
			</dl>
		</div>
	</div>
</div>

 


{/block}