|
|
@@ -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();
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
