|
|
@@ -1,4 +1,222 @@
|
|
|
-//注册组件
|
|
|
+//登录组件 login
|
|
|
+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('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(),
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ alert_s('功能暂不支持');
|
|
|
+ $(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').prevAll('span').text('')
|
|
|
+ $(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';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+//注册组件 logon
|
|
|
Vue.component('logon',{
|
|
|
template:`
|
|
|
<div type="login" v-on:click="on.button.exit()" v-bind:style="style.box" align="center">
|
|
|
@@ -305,4 +523,10 @@ Vue.component('logon',{
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
- });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+//启用组件
|
|
|
+ new Vue({
|
|
|
+ el:'#ifame'
|
|
|
+ })
|
