添加 'vue-组件.js'

vue-组件.js

@@ -0,0 +1,307 @@
+ Vue.component('logon',{
+                    template:`
+            <div type="login" v-on:click="on.button.exit()" v-bind:style="style.box" align="center">
+                <input accept=".jpg,.png,.jpeg" type="file" hidden="hidden"/>
+                <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.portrait">
+                        <span v-bind:style="style.i">*</span>
+                        <span v-bind:style="[style.title,{marginRight:'0px'}]">头像</span>
+                        <div v-on:mousedown="on.button.file" v-bind:style="style.portrait.box">
+                            <i v-bind:style="style.portrait.x"></i>
+                            <i v-bind:style="style.portrait.y"></i>
+                        </div>
+                    </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="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">
+                        <span v-bind:style="style.i">*</span>
+                        <span v-bind:style="style.title">邮箱</span>
+                        <input type="email" 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.logon()" 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>
+                </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:'350px',
+                                    borderRadius:'2.5px',
+                                    padding:'20px 50px',
+                                    background: '#FFF',
+                                },
+                                label:{
+                                    height:'30px',
+                                    portrait:{
+                                        marginTop:'10px',
+                                        width:'100%',
+                                        height:'70px',
+                                        lineHeight:'70px',
+                                    }
+                                },
+                                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',
+                                },
+                                portrait:{
+                                    box:{
+                                        float:'right',
+                                        position:'relative',
+                                        marginRight:'163px',
+                                        width:'70px',
+                                        height:'70px',
+                                        backgroundRepeat:'no-repeat',
+                                        backgroundPosition:'center center',
+                                        backgroundSize:'100% 100%',
+                                        outline:'1px dotted #c3c3c3'
+                                    },
+                                    x:{
+                                        left:'15px',
+                                        right:'15px',
+                                        top:'0px',
+                                        bottom:'0px',
+                                        margin:'auto',
+                                        position:'absolute',
+                                        height:'1px',
+                                        background:'#c3c3c3',
+                                    },
+                                    y:{
+                                        left:'0px',
+                                        right:'0px',
+                                        top:'15px',
+                                        bottom:'15px',
+                                        margin:'auto',
+                                        position:'absolute',
+                                        width:'1px',
+                                        background:'#c3c3c3',
+                                    }
+                                },
+                                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');
+                                        }
+                                    },
+                                    file:function () {
+                                        let div_image = $(event.target);
+                                        let input_file = $(event.target).parent('label').parent('div').prev('input');
+                                       input_file.trigger('click').change(function(){
+                                           if($(this).val().length > 0){
+                                               var file_Reader = new FileReader();
+                                               file_Reader.readAsDataURL(this.files[0]);
+                                               // 获取成功
+                                               file_Reader.onload = function(){
+                                                   sessionStorage.setItem('image',this.result);
+                                                   div_image.css({
+                                                       backgroundImage:'url('+this.result+')',
+                                                       outline:'none'
+                                                   }).find('i').css('display','none');
+                                               }
+                                           } else {
+                                               div_image.css({
+                                                   backgroundImage: 'url()',
+                                                   outline: 'rgb(195, 195, 195) dotted 1px',
+                                               }).find('i').css('display','block');
+                                           }
+                                       });
+                                    },
+                                    logon:function () {
+                                        var message = $(event.target).parent('label').prevAll('label');
+
+                                        var input_file = $(event.target).parent('label').parent('div').prev('input').val();
+
+                                        var username = $(message[2]).find('input').val();
+                                        var password = $(message[1]).find('input').val();
+                                        var email = $(message[0]).find('input').val();
+
+                                        var username_info = $(message[2]).next('span')[0];
+                                        var password_info = $(message[1]).next('span')[0];
+                                        var email_info = $(message[0]).next('span')[0];
+
+                                        var username_title = $(message[2]).find('span').eq(1).text();
+                                        var password_title = $(message[1]).find('span').eq(1).text();
+                                        var email_title = $(message[0]).find('span').eq(1).text();
+
+                                        if(
+                                            $(event.target).parent('label').parent('div').prev('input').val() === defaultStatus
+                                            ||
+                                            $(event.target).parent('label').parent('div').prev('input').val() === null
+                                        )   {
+                                            $(message[3]).next('span')[0].innerText = '请设置头像'
+                                        } else {
+                                            $(message[3]).next('span')[0].innerText = ''
+                                        }
+
+                                        if (username === defaultStatus||username===null){
+                                            username_info.innerText = username_title+'不能为空';
+                                        } else if (username.indexOf(' ') !== -1){
+                                            username_info.innerText = username_title+'不能包含空格';
+                                        }
+                                        if (password === defaultStatus||password ===null){
+                                            password_info.innerText = password_title+'不能为空';
+                                        } else if (password.indexOf(' ') !== -1){
+                                            password_info.innerText = password_title+'不能包含空格';
+                                        }
+                                        if (email === defaultStatus||email ===null){
+                                            email_info.innerText = email_title+'不能为空';
+                                        } else if (email.indexOf(' ') !== -1){
+                                            email_info.innerText = email_title+'不能包含空格';
+                                        } else if (email.indexOf('@') === -1){
+                                            email_info.innerText = email_title+'缺少必要@标识符';
+                                        }
+
+                                        if (
+                                            input_file !== defaultStatus
+                                            &&input_file !== null
+                                            &&username !== defaultStatus
+                                            &&username !== null
+                                            &&username.indexOf(' ') === -1
+                                            &&password !== defaultStatus
+                                            &&password !== null
+                                            &&password.indexOf(' ') === -1
+                                            &&email !== defaultStatus
+                                            &&email !== null
+                                            &&email.indexOf(' ') === -1
+                                            &&email.indexOf('@') !== -1){
+
+                                            POST('logon',{
+                                                image:sessionStorage.getItem('image'),
+                                                account:username,
+                                                password:password,
+                                                email:email,
+                                            },function (data) {
+                                                console.log(data)
+                                                alert_s(data.msg);
+                                                if (data.error === 1){
+                                                    this.exit();
+                                                }
+                                            })
+
+                                        }
+                                    }
+                                }
+                            }
+                        };
+                    }
+                });