|
|
@@ -0,0 +1,338 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>取回密码</title>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
|
+ <meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
+ <link rel="stylesheet" href="__STATIC__/css/base.css">
|
|
|
+ <link rel="stylesheet" href="__STATIC__/icon/icon.css">
|
|
|
+ <script type="text/javascript" src="__STATIC__/js/core/jquery.min.js"></script>
|
|
|
+ <script type="text/javascript" src="__STATIC__/layer/layer.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<style>
|
|
|
+header{
|
|
|
+ background:#E94726;
|
|
|
+ color:#FFF;
|
|
|
+ margin-bottom:50px;
|
|
|
+}
|
|
|
+header ul{
|
|
|
+ display:table;
|
|
|
+ width:100%;
|
|
|
+ height:50px;
|
|
|
+}
|
|
|
+header ul ol,header ul li{
|
|
|
+ display:table-cell;
|
|
|
+ vertical-align:middle;
|
|
|
+ text-align:center;
|
|
|
+}
|
|
|
+header ul ol{
|
|
|
+ width:40px;
|
|
|
+}
|
|
|
+.LogoContainer{
|
|
|
+ max-width:640px;
|
|
|
+ margin:auto;
|
|
|
+ position:relative;
|
|
|
+}
|
|
|
+.LogoContainer:before{
|
|
|
+ content:'';
|
|
|
+ display:block;
|
|
|
+ padding-top:60%;
|
|
|
+}
|
|
|
+.LogoContainer ul{
|
|
|
+ width:30%;
|
|
|
+ position:absolute;
|
|
|
+ left:50%;
|
|
|
+ top: 50%;
|
|
|
+ -webkit-transform: translate3D(-50%, -50%, 0);
|
|
|
+ -ms-transform: translate3D(-50%, -50%, 0);
|
|
|
+ transform: translate3D(-50%, -50%, 0);
|
|
|
+}
|
|
|
+.LogoContainer ul ol img{
|
|
|
+ width:100%;
|
|
|
+}
|
|
|
+.LogoContainer ul li{
|
|
|
+ text-align:center;
|
|
|
+ padding-top:5%;
|
|
|
+ color:#D43B1B;
|
|
|
+}
|
|
|
+.FormContainer{
|
|
|
+ padding:0 20px;
|
|
|
+}
|
|
|
+.FormContainer ul{
|
|
|
+ display:table;
|
|
|
+ width:100%;
|
|
|
+ border-bottom:#DDD solid 1px;
|
|
|
+}
|
|
|
+.FormContainer ul ol,.FormContainer ul li{
|
|
|
+ display:table-cell;
|
|
|
+ vertical-align:middle;
|
|
|
+ height:40px;
|
|
|
+}
|
|
|
+.FormContainer ul ol{
|
|
|
+ width:30px;
|
|
|
+ font-size:20px;
|
|
|
+}
|
|
|
+.FormContainer ul li input{
|
|
|
+ width:99%;
|
|
|
+ border:0;
|
|
|
+ text-indent:5px;
|
|
|
+ outline:none;
|
|
|
+ background:none;
|
|
|
+}
|
|
|
+.FormContainer ul li input.error{
|
|
|
+ border:#F30 solid 1px;
|
|
|
+ border-radius:5px;
|
|
|
+}
|
|
|
+.FormContainer dl{
|
|
|
+ display:table;
|
|
|
+ width:100%;
|
|
|
+ margin-top:20px;
|
|
|
+}
|
|
|
+.FormContainer dl dt,.FormContainer dl dd{
|
|
|
+ display:table-cell;
|
|
|
+ vertical-align:middle;
|
|
|
+ height:30px;
|
|
|
+ width:50%;
|
|
|
+}
|
|
|
+.FormContainer dl dd{
|
|
|
+ text-align:right;
|
|
|
+}
|
|
|
+.OtherLogin .h{
|
|
|
+ line-height:30px;
|
|
|
+ margin-top:30px;
|
|
|
+ position:relative;
|
|
|
+ color:#888;
|
|
|
+ text-align:center;
|
|
|
+}
|
|
|
+.OtherLogin .h:before{
|
|
|
+ content:'';
|
|
|
+ display:block;
|
|
|
+ position:absolute;
|
|
|
+ width:100%;
|
|
|
+ height:1px;
|
|
|
+ background:#DDD;
|
|
|
+ left:0;
|
|
|
+ top:14px;
|
|
|
+}
|
|
|
+.OtherLogin .h span{
|
|
|
+ display:inline-block;
|
|
|
+ position:relative;
|
|
|
+ background:#FFF;
|
|
|
+ padding:0 20px;
|
|
|
+}
|
|
|
+.OtherLogin .c{
|
|
|
+ text-align:center;
|
|
|
+ padding:15px 0;
|
|
|
+}
|
|
|
+.OtherLogin .c a{
|
|
|
+ display:inline-block;
|
|
|
+ background:#333BDD;
|
|
|
+ padding:8px;
|
|
|
+ margin:0 20px;
|
|
|
+ color:#FFF;
|
|
|
+ font-size:20px;
|
|
|
+ border-radius:5px;
|
|
|
+}
|
|
|
+.OtherLogin .c a.wx{
|
|
|
+ background:#41BD16;
|
|
|
+}
|
|
|
+@media (max-width: 2000px) and (min-width:601px) {
|
|
|
+ header ul{
|
|
|
+ height:70px;
|
|
|
+ font-size:24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media (max-width: 600px) and (min-width:501px) {
|
|
|
+ header ul{
|
|
|
+ height:60px;
|
|
|
+ font-size:20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media (max-width: 500px) and (min-width:401px) {
|
|
|
+ header ul{
|
|
|
+ height:55px;
|
|
|
+ font-size:18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+@media (max-width: 400px) {
|
|
|
+ header ul{
|
|
|
+ height:50px;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.butterBox{
|
|
|
+ text-align:center;
|
|
|
+ padding:20px 0;
|
|
|
+ word-spacing:20px;
|
|
|
+}
|
|
|
+.mui-btn{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 1.42;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 0;
|
|
|
+ padding: 6px 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ -webkit-transition: all;
|
|
|
+ transition: all;
|
|
|
+ -webkit-transition-timing-function: linear;
|
|
|
+ transition-timing-function: linear;
|
|
|
+ -webkit-transition-duration: .2s;
|
|
|
+ transition-duration: .2s;
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: top;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #333;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 3px;
|
|
|
+ border-top-left-radius: 3px;
|
|
|
+ border-top-right-radius: 3px;
|
|
|
+ border-bottom-right-radius: 3px;
|
|
|
+ border-bottom-left-radius: 3px;
|
|
|
+ background-color: #fff;
|
|
|
+ background-clip: padding-box
|
|
|
+}
|
|
|
+.mui-btn-danger{
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #dd524d;
|
|
|
+ background-color: #dd524d
|
|
|
+}
|
|
|
+.mui-btn-back{
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #999;
|
|
|
+ background-color: #AAA
|
|
|
+}
|
|
|
+</style>
|
|
|
+<header>
|
|
|
+ <ul>
|
|
|
+ <ol><i class="fa fa-angle-left" onclick="window.history.back()"></i></ol>
|
|
|
+ <li>取回密码</li>
|
|
|
+ <ol><br/></ol>
|
|
|
+ </ul>
|
|
|
+</header>
|
|
|
+<div class="FormContainer">
|
|
|
+<form class="mui-input-group" action="{:urls('index')}" method="post">
|
|
|
+ <ul><ol><i class="fa fa-fw fa-user-o"></i></ol><li><input type="text" name="username" minlength="3" maxlength="20" placeholder="请输入帐号" onBlur="check_username($(this),'username')" required/></li></ul>
|
|
|
+
|
|
|
+
|
|
|
+ {eq name="webdb.getpassword_by_phone" value="1"}
|
|
|
+ <!--这里最好是做个单选按钮给用户选择手机还是邮箱获取验证码-->
|
|
|
+ <ul class="getyznum" style="display:none;">
|
|
|
+ <ol><i class="glyphicon glyphicon-question-sign"></i></ol>
|
|
|
+ <li><input type="text" name="phone_code" placeholder="请点击右边文字获取验证码" onBlur="check_num($(this),'mobphone')" required/></li>
|
|
|
+ <li><a href="#" onclick="get_code_num('mobphone')">获取验证码</a></li>
|
|
|
+ </ul>
|
|
|
+ {else /}
|
|
|
+ <ul class="getyznum" style="display:none;">
|
|
|
+ <ol><i class="glyphicon glyphicon-question-sign"></i></ol>
|
|
|
+ <li><input type="text" name="email_code" placeholder="请点击右边文字获取验证码" onBlur="check_num($(this),'email')" required/></li>
|
|
|
+ <li><a href="#" onclick="get_code_num('email')">获取验证码</a></li>
|
|
|
+ </ul>
|
|
|
+ {/eq}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <ul class="getqrcode" style="display:none;">
|
|
|
+ <ol><i class="glyphicon glyphicon-question-sign"></i></ol>
|
|
|
+ <li><input type="text" name="captcha" placeholder="请输入右边验证码" onBlur="checkinput($(this),'captcha')" required/></li>
|
|
|
+ <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;"><ol><i class="si si-lock"></i></ol><li><input type="password" name="password" minlength="5" maxlength="30" placeholder="请输入密码" onBlur="checkinput($(this),'password')" required/></li></ul>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div class="butterBox">
|
|
|
+ <a href="{:urls('login/index')}"><button type="button" class="mui-btn mui-btn-back">返回登录</button></a>
|
|
|
+ <button type="submit" class="mui-btn mui-btn-danger postform" style="display:none;">重置密码</button>
|
|
|
+ </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>
|
|
|
+</body>
|
|
|
+</html>
|
齐博