<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居民注册</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="__CSS__/weui.min.css"/>
<link rel="stylesheet" href="__CSS__/example.css" />
<link rel="stylesheet" href="__CSS__/cl.css" />
<link rel="stylesheet" href="__CSS__/flex.css" />
<script src="__JS__/jquery-1.7.2.js"></script>
<style type="text/css">
.c-p-form{padding-top: 1.75em;}
.weui-cell_select{padding-left: 15px;}
.weui-cell_select-after .weui-select{width: initial; float: right;}
.weui-cell__bd.flex.flex-align-center input{border-bottom: 1px solid #e5e5e5;width: 40px;}
</style>
<include file="Public:weixin" />
</head>
<body>
<form action="{:U('update')}" method="post" id="form">
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">请输入姓名 </label></div>
<div class="weui-cell__bd">
<input class="weui-input name" type="text" name="name" value="{$info.name}" placeholder="请输入您的姓名">
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">性别</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="sex">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd">
<label class="weui-label">输入手机号 </label>
</div>
<div class="weui-cell__bd">
<input class="weui-input tel" type="number" name="tel" value="{$info.tel}" placeholder="请输入手机号">
</div>
<div class="weui-cell__ft">
<button type="button" class="weui-vcode-btn" id="get">获取验证码</button>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">填写验证码 </label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" name="yanzhengma" pattern="[0-9]*" placeholder="请输入您的验证码">
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class="weui-label">选择所在社区</label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="shequid">
<option value="">请选择社区</option>
<volist name="shequlist" id="vo">
<option value="{$vo.short_code}">{$vo.name}</option>
</volist>
</select>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd">
<label for="" class="weui-label">出生日期</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" name="birthday" type="tel" placeholder="选择日期" readonly="readonly" id="datepicker">
</div>
</div>
</div>
<p class="flex " style="padding: 15px;font-size: 14px;">
<a href="{:U('login')}">已有账号?</a>
<a href="{:U('login')}" style="color: #46a6ff;">点击登录</a>
</p>
<button type="button" class="weui-btn weui-btn_primary" id="submit_button" style="background: #1296DB; position: fixed; bottom: 0; width: 100%; border-radius: 0;">提交</button>
</form>
</body>
<script type="text/javascript" src="__JS__/jquery.form.js"></script>
<script type="text/javascript" src="__JS__/layer/layer.js"></script>
<script src="__JS__/rem.js"></script>
<script>
$('#submit_button').click(function(){
$('#form').submit();
})
$('#form').ajaxForm({
success: complete, // post-submit callback
beforeSubmit:showRequest,
dataType: 'json'
});
function showRequest (formData, jqForm, options) {
$('#submit_button').attr({"disabled":"disabled"});
$('#submit_button').html('提交中');
}
function complete(data){
if(data.status == 0){ //失败
layer.open({
content: data.info,
style: 'background-color:#1296DB; color:#fff; border:none;',
time: 2
});
$('#submit_button').removeAttr("disabled");
$('#submit_button').html('提交');
}else{
layer.open({
content: data.info,
style: 'background-color:#1296DB; color:#fff; border:none;',
time: 2
});
window.setTimeout(function(){
window.location.href = data.url
},2000)
}
}
</script>
<script type="text/javascript">
$('.weui-vcode-btn').click(function(){
var tel = $('.tel').val();
var name = $('.name').val();
console.log(tel);
var that=this;
$.ajax({
type: "POST",
url : "{:U('yzcode')}",
data: {
'tel':tel,
'name':name,
},
success: function(data){
console.log(data);
if(data.status == 0){ //失败
layer.open({
content: data.info,
style: 'background-color:#1296DB; color:#fff; border:none;',
time: 2
});
window.location.href = data.url;
}else{
layer.open({
content: data.info,
style: 'background-color:#1296DB; color:#fff; border:none;',
time: 2
});
$(that).html("重新发送<em>60</em>s");
$(that).css("background","#f0f0f0").css("color","#fff");
var val=60;
var timer1=setInterval(function(){
val-=1;
$(" #get").html("重新发送<em>"+val+"</em>s");
if(val==0){
$("#get").html("获取验证码").css("background","#fff").css("color","#2788F5");
clearInterval(timer1);
};
if(val>0){
$("#get").attr("disabled",true)
}else{
$("#get").attr("disabled",false)
}
},1000)
}
}
});
})
</script>
<link rel="stylesheet" href="__CSS__/mobiscroll.2.13.2.min.css">
<script type="text/javascript" src="__JS__/mobiscroll.2.13.2.min.js"></script>
<script>
opt.preset='date';//调用日历显示 日期时间
//默认日期时间
$('#datepicker').mobiscroll(opt);//直接调用日历 插件
</script>
</html> |
|
转播
