Skip to content

黄成意 / yunxin

Go to a project
Commit 9438afcb by 梁建民
Options

js

parent 72ad639a
Expand all
Inline Side-by-side
Showing with 128 additions and 24 deletions
public/pc/css/style.min.css
......@@ -232,7 +232,7 @@ body { overflow-x: hidden; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .inp.w180 { width: 180px; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .inp.w120 { width: 120px; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .inp.w210 { width: 210px; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action { padding: 80px 0; width: 614px; margin: 0 auto; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action { position: relative; padding: 80px 0; width: 614px; margin: 0 auto; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .inp-wrap { position: relative; margin-bottom: 20px; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .inp-wrap .tag { width: 138px; text-align: right; font-size: 14px; color: #333333; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .inp-wrap .tag em { font-size: 14px; color: #e10607; }
......@@ -240,9 +240,9 @@ body { overflow-x: hidden; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .inp-wrap .code .pic { width: 98px; height: 38px; background-color: #ffffff; border: solid 1px #e5e5e5; cursor: pointer; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .inp-wrap .code .pic img { width: 100%; height: 100%; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .inp-wrap .code a { margin-left: 18px; color: #333333; font-size: 12px; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .inp-wrap .error { font-size: 12px; color: #e10607; position: absolute; left: 498px; top: 12px; text-align: left; width: 121px; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .inp-wrap .send-code { width: 118px; height: 38px; line-height: 38px; text-align: center; background-color: #ffffff; border: solid 1px #e5e5e5; font-size: 12px; color: #333333; margin-left: 10px; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .inp-wrap .txt { font-size: 14px; color: #333333; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .error { font-size: 12px; color: #e10607; position: absolute; left: 150px; bottom: 139px; text-align: left; width: 190px; display: none; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .bnt-wrap { margin-top: 60px; text-align: center; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .bnt-wrap.mt1 { margin-left: -118px; }
.lx-findpwd-content .lx-findpwd-wrap .step-box .form-action .bnt-wrap .btn { width: 200px; height: 35px; background-color: #1080d0; border-radius: 3px; border: solid 1px #1080d0; line-height: 35px; text-align: center; font-size: 16px; }
......
public/pc/css/style.scss
......@@ -872,6 +872,7 @@
}
}
.form-action {
position: relative;
padding: 80px 0;
width: 614px;
margin: 0 auto;
......@@ -907,15 +908,6 @@
font-size: 12px;
}
}
.error {
font-size: 12px;
color: #e10607;
position: absolute;
left: 498px;
top: 12px;
text-align: left;
width: 121px;
}
.send-code {
width: 118px;
height: 38px;
......@@ -932,6 +924,16 @@
color: #333333;
}
}
.error {
font-size: 12px;
color: #e10607;
position: absolute;
left: 150px;
bottom: 139px;
text-align: left;
width: 190px;
display: none;
}
.bnt-wrap {
margin-top: 60px;
text-align: center;
......
public/pc/js/controller/ForgetPassword.js 0 → 100644
;!function () {
window.ForgetPassword = {
'code': "#code",//验证码
'submitStep1': "#submitStep1",//第一步
init: function () {
this.handleBind(this);
},
getMobile: function () {
var val = $("input[name='mobile']").val();
if (val) {
return val;
}
return false;
},
getCodes: function () {
var val = $("input[name='codes']").val();
if (val) {
return val;
}
return false;
},
getCode: function () {
var val = $("input[name='code']").val();
if (val) {
return val;
}
return false;
},
getData: function (params, callback, type) {
var url;
switch (type) {
case 'moblieCode':
url = ' /helper/moblieCode';
break;
case 'ApiRestPassword':
url = '/api/ApiRestPassword';
break;
}
$.ajax({
url: _URL_ + url,
type: 'post',
data: params,
async: false,
dataType: 'json',
timeout: 10000,
success: function (res) {
if (res.code == 0) {
typeof callback == 'function' && callback(res);
} else {
layer.msg(res.msg);
}
},
error: function (res) {
layer.msg('网络出现问题，请重试！')
}
})
},
calcForm: function (opt, type) {
if (type == 'step1') {
if (!opt.getMobile()) {
$(".error").show().text('请输入手机号');
return false;
}
if (!opt.getCodes()) {
$(".error").show().text('请填写验证码');
return false;
}
}
$(".error").hide().text('');
return true;
},
handleBind: function (opt) {
//验证码
$(opt.code).on('click', function () {
$(this).prev().find('img').attr('src', '/helper/captcha?' + new Date().getTime())
});
//第一步提交
$(opt.submitStep1).on('click', function () {
if (opt.calcForm(opt, 'step1')) {
$(".step-list").find('li').eq(1).addClass('curr');
$(".step-1").hide();
$(".step-2").show();
}
});
return this;
},
}, $(function () {
ForgetPassword.init();
})
}();
\ No newline at end of file
resources/views/pc/ForgetPassword.blade.php
......@@ -65,12 +65,12 @@
<p class="tit">找回密码</p>
<div class="step-box">
<ul class="step-list clr">
<li class="curr disabled">
<li class="curr">
<b class="line"></b>
<em>1</em>
<p>填写用户手机号</p>
</li>
<li class="curr">
<li>
<b class="line"></b>
<em>2</em>
<p>验证手机号</p>
......@@ -86,25 +86,26 @@
<p>完成</p>
</li>
</ul>
<div class="step-1" style="display: none">
<div class="step-1">
<div class="form-action">
<form action="step1">
<div class="inp-wrap">
<label class="tag lineBlock va-m"><em>*</em>手机号码：</label>
<input type="password" placeholder="请输入手机号" class="inp va-m w338">
<em class="error">手机格式不对</em>
<input type="password" placeholder="请输入手机号" class="inp va-m w338" name="mobile">
</div>
<div class="inp-wrap">
<label class="tag lineBlock va-m"><em>*</em>验证码：</label>
<input type="text" placeholder="请输入验证码" class="inp va-m w158">
<input type="text" placeholder="请输入验证码" class="inp va-m w158" name="codes">
<div class="lineBlock va-m code">
<div class="pic lineBlock va-m"><img src="./images/verify.png" alt=""></div>
<a href="javascript:;" class="va-m">换一张</a>
<div class="pic lineBlock va-m"><img src="/helper/captcha" alt=""></div>
<a href="javascript:;" class="va-m" id="code">换一张</a>
</div>
<em class="error">验证码错误</em>
</div>
<div class="bnt-wrap mt1">
<a href="javascript:;" class="ok btn lineBlock">下一步</a>
<a href="javascript:;" class="ok btn lineBlock" id="submitStep1">下一步</a>
</div>
<em class="error">验证码错误</em>
</form>
</div>
</div>
<div class="step-2" style="display: none">
......@@ -115,7 +116,7 @@
</div>
<div class="inp-wrap">
<label class="tag lineBlock va-m"><em>*</em>验证码：</label>
<input type="text" placeholder="请输入验证码" class="inp va-m w210">
<input type="text" placeholder="请输入验证码" class="inp va-m w210" name="code">
<a href="javascript:;" class="lineBlock va-m send-code">发送验证码</a>
<em class="error">验证码错误</em>
</div>
......@@ -141,7 +142,7 @@
</div>
</div>
</div>
<div class="step-4">
<div class="step-4" style="display: none">
<div class="done">
<i class="iconfont icon-chenggong-"></i>
<p class="t1">新密码重置成功！</p>
......@@ -153,6 +154,9 @@
</div>
<!--content end-->
<script type="text/javascript" src="/pc/js/jquery.min.js"></script>
<script type="text/javascript" src="/pc/js/layui/layui.js"></script>
<script type="text/javascript" src="/pc/js/global.js"></script>
<script type="text/javascript" src="/pc/js/layui/layui.all.js"></script>
<script type="text/javascript" src="/pc/js/controller/ForgetPassword.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment