var req = superagent;
var vm = new Vue({
'el': 'body',
'data': {
'mobile': null,
'mobile_error': false,
'mobile_error_text': '',
'code': null,
'code_error': false,
'code_error_text': '',
'code_show': false,
'btn_send_lock': true,
'btn_send_timer': null,
'btn_login_lock': true,
'btn_login_timer': null,
// alert(API.login)
},
'created': function(){
// 旋转动画
setTimeout(function() {
var el = document.getElementById('j-left')
var classname = el.className;
el.className = classname + ' rotate';
}, 3000);
},
'methods': {
'checkMobile': function() {
var isMobile = /^(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/;
// 校验电话号是否为空
if (null == this.mobile || '' == this.mobile) {
this.mobile_error = true;
this.mobile_error_text = '电话号码不能为空!';
} else if (!isMobile.test(this.mobile)) {
this.mobile_error = true;
this.mobile_error_text = '电话号码格式错误!';
} else {
this.mobile_error = false;
this.btn_send_lock = false;
this.mobile_error_text = '';
}
},
'sendMobile': function() {
this.checkMobile();
if (!this.mobile_error && !this.btn_send_lock) {
this.btn_send_lock = false;
clearTimeout(this.btn_login_timer);
this.btn_login_timer = setTimeout(function() {
this.btn_send_lock = true;
req.post(API.sendSms)
.send({
'mobile_phone': vm.mobile
})
.set('Content-Type', 'application/x-www-form-urlencoded')
.set('X-Requested-With', 'XMLHttpRequest')
.accept('application/json')
.end(function(err, res) {
this.btn_send_lock = false;
if (err || !res.ok) {
alert('网络异常, 请刷新重试!');
} else {
var json = res.body;
if (1 == json.status) {
vm.code_show = true;
} else {
alert(json.info);
}
}
})
}, 500);
}
},
'checkCode': function(){
if(null == this.code || '' == this.code){
this.code_error = true;
this.code_error_text = '请输入验证码!';
this.btn_login_lock = true;
return false;
} else if( 4 != this.code.length) {
this.code_error = true;
this.code_error_text = '验证码长度位4位!';
this.btn_login_lock = true;
return false;
} else {
this.code_error = false;
this.code_error_text = '';
this.btn_login_lock = false;
return true;
}
},
'login': function() {
if (this.checkCode()) {
vm.btn_login_lock = true;
clearTimeout(this.btn_send_timer);
this.btn_send_timer = setTimeout(function() {
req.post(API.login)
.send({
'mobile_phone': vm.mobile,
'code': vm.code
})
.set('Content-Type', 'application/x-www-form-urlencoded')
.set('X-Requested-With', 'XMLHttpRequest')
.accept('application/json')
.end(function(err, res) {
// vm.btn_login_lock = false;
if (err || !res.ok) {
alert('网络异常, 请刷新重试!');
} else {
var json = res.body;
if (1 == json.status) {
window.location.href = json.url;
} else {
alert(json.info);
}
}
})
}, 500);
} else {
}
}
}
});
js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="UTF-8">
<title>家家户户活动管理平台?ver=2.0</title>
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/mask.css">
<link rel="stylesheet" href="../lib/bootstrap.css">
<script type="text/javascript">
var API = {
'sendSms': 'sendSms.json',
'login': 'success.json'
}
</script>
</head>
<body>
<div id="j-left" class="g-left animated bounceInLeft"></div>
<form class="form-vertical" autocomplete="off">
<div class="login-box f-radius">
<div class="avator"></div>
<!-- 电话ipt -->
<div>
<div class="input-group f-input f-radius input-group-username">
<span class="icon icon-user"></span>
<input v-on:blur="checkMobile" v-bind:disabled="code_show" v-model="mobile" maxlength="11" type="tel" autofocus placeholder="请输入电话号" v-on:keydown.enter="sendMobile" />
</div>
<a transition="bounce" class="input-group-tip" v-text="mobile_error_text"></a>
</div>
<!-- /电话ipt -->
<!-- 验证码ipt -->
<div v-show="code_show" style="display:none;" transition="bounce">
<div class="input-group f-input f-radius input-group-password">
<span class="icon icon-password"></span>
<input v-on:blur="checkCode" type="text" maxlength="4" v-model="code" placeholder="请输入验证码" v-on:keydown.enter="login"/>
</div>
<a class="input-group-tip" v-text="code_error_text"></a>
</div>
<!-- 验证码ipt -->
<div class="btn-group f-animate f-radius" v-show="!code_show">
<a class="tt" v-on:click="sendMobile">发送验证码</a>
<!-- <a class="icon icon-arrow-right f-animate"></a> -->
</div>
<div class="btn-group f-animate f-radius" v-show="code_show" style="display:none;">
<a class="tt" v-on:click="login">登录</a>
<!-- <a class="icon icon-arrow-right f-animate"></a> -->
</div>
<a class="input-group-tip"></a>
<!-- <p align="center" class="logo">JJHH.COM</p> -->
</div>
</form>
<div class="">
<a href="#" class="{{type}} {{children.class}}" v-for="children in childrens" v-text="children.text"></a>
<div class="theme-popover">
<span v-text="status"></span>
<div v-for="d in data">{{d.site_id}}:<span>{{d.site_name}}</span></div>
</div>
<!-- <div id="outerbox">
<span v-text="status"></span>
</div> -->
</div>
<script src="../lib/vue.js"></script>
<script src="../lib/superagent.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<!-- <script type="text/javascript" src="jQuery.js"></script> -->
<!-- <script type="text/javascript" src="../js/menu.js"></script> -->
<script type="text/javascript">
superagent
.get('success.json')
.end(function(err, res){
console.log(res.body)
});
// var vm = new Vue({
// el:"body",
// data:{
// status:1,
// data:[
// {"site_id":"1","site_name":"u54c8u5c14u6ee8"}
// ]
// }
// })
//
</script>
</body>
</html>源文件
一个简单基础的demo https://github.com/TIGERB/eas...