{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="__STATIC__/index/default/pclogin.css"> 
<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="{:urls('index')}" 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>
					
					{eq name="webdb.getpassword_by_phone" value="1"}
					<!--这里最好是做个单选按钮给用户选择手机还是邮箱获取验证码-->
					<ul class="getyznum" 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')" required/></ol>
						<li><a href="#" onclick="get_code_num('mobphone')">获取验证码</a></li>
					</ul>
					{else /}
					<ul class="getyznum" 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')" required/></ol>
						<li><a href="#" onclick="get_code_num('email')">获取验证码</a></li>
					</ul>
					{/eq}
					
					
					<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="{:captcha_src()}" style="cursor: pointer;" onclick="this.src='{:captcha_src()}?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 get_code_num(type){
	var to = type=='email' ? email : mobphone;
	if(type=='mobphone'){
		if(to==''){
			layer.msg('此帐号没有设置手机号码');
			return false;
		}
	}else if(type=='email'){
		if(to==''){
			layer.msg('此帐号没有设置邮箱');
			return false;
		}
	}
	layer.msg('请稍候,系统正在发送验证码!',{time:3000});
	$.get("{:urls('getnum')}?type="+type+'&to='+ to +'&'+Math.random(),function(res){
		layer.close();
		if(res.code==0){
			layer.alert('验证码已成功发出,请耐心等候,注意查收!');
		}else{
			layer.alert(res.msg);
		}			
	});
}

function check_num(objs,type){
	var vals=objs.val();
	var field = type=='email' ? email : mobphone;
	$.get("{:urls('check_num')}?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("{:urls('check')}?"+type+"="+vals+'&'+Math.random(),function(res){
		if(res.code==0){
			email = res.data.email;
			mobphone = res.data.mobphone;
			$('.getyznum').show();
			objs.removeClass('error');
		}else{
			layer.msg(res.msg);
			//objs.focus();
			objs.addClass('error');
		}			
	});
}

function checkinput(objs,type){
	var vals=objs.val();
	$.get("{:urls('check')}?"+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="{:urls('login/index')}">点击登录</a></dt>
				 
			</dl>
		</div>
	</div>
</div>

 


{/block}