You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

187 lines
6.9 KiB

3 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定手机号</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../static/css/font.css">
<link rel="stylesheet" href="../../static/css/weadmin.css">
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
<!-- 让IE8/9支持媒体查询从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
input[type='text']{
margin-top: 13px!important;
border-radius: 4px!important;
}
</style>
</head>
<body>
<div style="padding:0 10px 20px 15px">
<form class="layui-form" lay-filter="editForm" id="editForm" style="padding:30px;">
<div class="layui-form-item">
<label for="tel">
<span class="we-red">*</span>&nbsp;手机号:
</label>
<div class="layui-input-inline-block ">
<input type="text" id="tel" name="tel" lay-verify="required|phone" maxlength="11" autocomplete="off" class="layui-input" placeholder="请输入手机号" style="width:351px;float:left;">
</div>
</div>
<div class="layui-form-item">
<label for="code">
<span class="we-red">*</span>&nbsp;验证码:
</label>
<div class="layui-input-inline-block ">
<input type="text" id="code" name="code" lay-verify="required|number" maxlength="6" autocomplete="off" class="layui-input fl" placeholder="请输入验证码" style="width:200px;float:left;">
<button type="button" id="btnCode" class="layui-btn" style="float:left;margin:13px 0 0 20px;width:130px">获取验证码</button>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-filter="save" lay-submit="" id="save">确定</button>
</div>
</form>
</div>
<script src="../../lib/layui/layui.js"></script>
<script>
layui.extend({
admin: '{/}../../static/js/admin'
});
layui.use(['jquery','admin','element','form'], function(){
var $ = layui.jquery,
element = layui.element,
admin = layui.admin,
form = layui.form;
$(function () {
$("#tel").focus();
})
var sendFlag="";
// 点击获取验证码
$("#btnCode").click(function(event){
$("#btnCode").addClass('layui-btn-disabled');
event.preventDefault();
var pattern= /^[1][3456789][0-9]{9}$/;
var val=$("#tel").val();
var flag = pattern.test(val);
if(val=='请输入手机号'||val==""){
$("#btnCode").removeClass('layui-btn-disabled');
layer.msg("必填项不能为空",{icon:5});
}else{
if(val!="" &&!flag||val=='请输入手机号'){
$("#btnCode").removeClass('layui-btn-disabled');
layer.msg("请输入正确的手机号",{icon:5});
tel_flag=false;
}else{
tel_flag=true;
$("#btnCode").addClass('layui-btn-disabled');
$("#btnCode").text("正在发送验证码");
clearInterval(timer);
send();
}
}
})
// 发送短信验证码
function send(){
clearInterval(timer);
telnum=$("#tel").val();
$.ajax({
url : '/FengHuang/loginPerson/sendBindPhoneSmsCode',
async : true,
type : "POST",
dataType: "json",
data:{
"phonenum":telnum
},
success:function(data) {
if(data.success){
$("#btnCode").addClass('layui-btn-disabled');
// 新增
clearInterval(timer);
setTime();
sendFlag=data.smsFlag;
}else{
$("#btnCode").text("获取短信验证码");
clearInterval(timer);
$("#btnCode").removeClass('layui-btn-disabled');
if(data.message==""){
layer.alert("发送短信过于频繁,请一小时后再试",{icon:0});
}else{
layer.alert(data.message,{icon:0});
}
}
}
})
}
var timer=null;
var count=61;
//定时器
function setTime(){
timer=setInterval(second,1000);
}
function second(){
count--;
if(count>0){
$("#btnCode").text("重新发送("+count+"s");
$("#btnCode").addClass('layui-btn-disabled');
}else {
$("#btnCode").removeClass('layui-btn-disabled');
$("#btnCode").text("获取短信验证码");
count=61;
clearInterval(timer);
}
}
// //监听提交
form.on('submit(save)', function (data) {
var f = data.field;
$.ajax({
type: "POST",
async: false,
dataType: "json",
url: "/FengHuang/loginPerson/bindPhoneNum",
data: {
"smsflag":sendFlag,
"smscode": f.code,
},
success: function (data) {
if (data.success) {
layer.msg("绑定成功", {icon: 1, time: 1000, shade: [0.5, '#000', true]}, function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
window.parent.isTelBind();
});
} else {
if(data.message=="传入的smsflag参数为空"){
layer.alert('验证码不存在或已过期,请重新输入', {icon: 0});
}else{
layer.alert('验证码不正确', {icon: 0});
}
return false;
}
}
})
return false;
});
});
</script>
</body>
</html>