|
|
@@ -131,223 +131,4 @@ background-color: rgb(53, 185, 149);
|
|
|
`)
|
|
|
|
|
|
//----------------------------------------------------------------------------------------------
|
|
|
- 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';
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- }
|
|
|
- });
|
|
|
- new Vue({
|
|
|
- el:'#ifame'
|
|
|
- })
|
|
|
})
|
