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文件




    
    
    
    
    
    
    



    

    

        

            

            
            

                

                    
                    
                
                
            

            
            
            

                

                    
                    
                
                
            

            
            

                发送验证码
                
            

            

                登录
                
            

            
            
        

    
    

        
        

        
            
{{d.site_id}}:{{d.site_name}}
        

       
    

    
    
    
    
    
    

源文件