_blogs/login_html.js

$(document).ready(function () {
  
        Vue.component('login',{
            template:`
    <div type="login" v-on:click="on.button.exit()" v-bind:style="style.box" align="center">
        <div v-bind:style="style.frame">
            <label v-bind:style="style.label">
                <span v-bind:style="style.head">登录</span>
            </label>
            <label v-bind:style="style.label">
                <span v-bind:style="style.i">*</span>
                <span v-bind:style="style.title">账号</span>
                <input maxlength="9" v-on:focus="on.input.focus()" v-on:blur="on.input.blur()" v-bind:style="style.input"/>
            </label>
            <span v-bind:style="style.info"></span>
            <label v-bind:style="style.label">
                <span v-bind:style="style.i">*</span>
                <span v-bind:style="style.title">密码</span>
                <input maxlength="16" v-on:focus="on.input.focus()" v-on:blur="on.input.blur()" v-bind:style="style.input"/>
            </label>
            <span v-bind:style="style.info"></span>
            <label v-bind:style="style.label">
                <button v-on:click="on.button.QR_code()" v-bind:style="[style.button,style.button[2]]">扫码</button>
                <button v-on:click="on.button.login()" v-bind:style="[style.button,style.button[2]]">登录</button>
                <button v-on:click="on.button.exit()" type="quit" v-bind:style="[style.button,style.button[1]]">关闭</button>
            </label>
            <label v-bind:style="style.qr.box">
                <img  v-bind:style="style.qr.img" width="100" height="100" alt=""/>
                <br/>
                <button v-on:click="on.button.account_login()" v-bind:style="style.qr.button" >账号登录</button>
            </label>
        </div>
    </div>`,
            data:function () {
                return {
                    style:{
                        box:{
                            width:'100%',
                            height:'100%',
                            position:'fixed',
                            zIndex:$('*').length * 2,
                            background:'rgba(0,0,0,.2)'
                        },
                        frame:{
                            display:'inline-grid',
                            position: 'absolute',
                            top:0,
                            bottom:0,
                            left:0,
                            right:0,
                            margin:'auto',
                            width:'300px',
                            height:'200px',
                            borderRadius:'2.5px',
                            padding:'20px 50px',
                            background: '#FFF',
                        },
                        label:{
                            height:'30px',
                        },
                        head:{
                            lineHeight: '24px',
                            fontSize: '18px',
                            color: '#303133',
                        },
                        i:{
                            color:'red',
                        },
                        title:{
                            letterSpacing: '2.5px',
                            marginRight:'5px',
                            fontSize:'14px',
                            color: '#606266',
                            height:'30px',
                            lineHeight:'30px',
                        },
                        input:{
                            padding: '5px 10px',
                            width: '200px',
                            height: '20px',
                            border:'1px solid #c3c3c3',
                            borderRadius: '2.5px',
                            outline:'none',
                        },
                        button:{
                            cursor:'pointer',
                            marginRight: '15px',
                            float:'right',
                            height:'30px',
                            width:'70px',
                            border:'none',
                            borderRadius:'2.5px',
                            outline: 'none',
                            1:{
                                border:'1px solid #c3c3c3',
                                background:'#FFF',
                                color:'black'
                            },
                            2:{
                                border:'1px solid #409EFF',
                                background:'#409EFF',
                                color:'#FFF'

                            }
                        },
                        info:{
                            textAlign:'left',
                            margin:'0 70px',
                            height:'15px',
                            letterSpacing:'2px',
                            lineHeight: '15px',
                            color:'red',
                            fontSize: '10px',
                        },
                        qr:{
                            box:{
                                display:'none',
                                height:'150px',
                            },
                            img:{
                                borderRadius:'2.5px',
                            },
                            button:{
                                cursor: 'pointer',
                                marginTop:'15px',
                                height:'30px',
                                background:'#FFF',
                                border:'1px solid #c3c3c3',
                                outline:'none',
                                width:'150px',
                            }
                        }
                    },
                    on:{
                        input:{
                            focus:function () {
                                event.target.style.borderColor = '#409EFF';
                            },
                            blur:function () {
                                var input = event.target;
                                var info = $(input).parent('label').next('span')[0];
                                var title = $(input).prev('span')[0].innerText;
                                if ($(input).val() === defaultStatus||$(input).val()===null){
                                    info.innerText = title+'不能为空';
                                } else if ($(input).val().indexOf(' ') !== -1){
                                    info.innerText = title+'不能包含空格';
                                } else {
                                    info.innerText = '';
                                }
                                input.style.borderColor = '#c3c3c3';
                            }
                        },
                        button:{
                            exit:function () {
                                if ($("div[type='login']").is(event.target) || $("button[type='quit']").is(event.target)){
                                    $("div[type='login']").css('display','none');
                                }
                             },
                            login:function () {
                                var message = $(event.target).parent('label').prevAll('label');
                                var account = $(message[1]).find('input').val();
                                var password = $(message[0]).find('input').val();
                                var account_info = $(message[1]).next('span')[0];
                                var password_info = $(message[0]).next('span')[0];
                                var account_title = $(message[1]).find('span').eq(1).text();
                                var password_title = $(message[0]).find('span').eq(1).text();
                                if (account === defaultStatus||account===null){
                                    account_info.innerText = account_title+'不能为空';
                                } else if (account.indexOf(' ') !== -1){
                                    account_info.innerText = password_title+'不能包含空格';
                                }
                                if (password === defaultStatus||password ===null){
                                    password_info.innerText = password_title+'不能为空';
                                } else if (password.indexOf(' ') !== -1){
                                    password_info.innerText = password_title+'不能包含空格';
                                }
                                if (account !== defaultStatus
                                    &&account!==null
                                    &&account.indexOf(' ') === -1
                                    &&password !== defaultStatus
                                    &&password !==null
                                    &&password.indexOf(' ') === -1){

                                    $.post('http://127.0.0.1:13141/login',{
                                        account:account,
                                        password:password,
                                    },function (data) {
                                        alert_s(data.msg);
                                        if (data.error === 1){
                                            $.cookie('uuid',data.uuid,{exports:15});
                                            document.location.href = document.location.href;
                                        }
                                    })

                                }
                            },
                            QR_code:function(){
                                let qr_info = {
                                    time:new Date(),

                                }
                                $(event.target).parent('label').next('label').find('img').attr('src','http://qrs.kegood.com/?url='+JSON.stringify(qr_info))
                                $(event.target).parent('label').parent('div').find('label').css('display','none')
                                $(event.target).parent('label').parent('div').find('label')[0].style.display = 'block';
                                $(event.target).parent('label').parent('div').find('label')[4].style.display = 'block';
                            },
                            account_login:function () {
                                $(event.target).parent('label').parent('div').find('label').css('display','block')
                                $(event.target).parent('label').parent('div').find('label')[4].style.display = 'none';
                            }
                        }
                    }
                };
            }
        });
        new Vue({
            el:'#ifame'
        })

      })