281 lines
7.3 KiB
Vue
281 lines
7.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="login_wrap" :class="heightLimit">
|
||
|
|
<div class="login_tab">
|
||
|
|
<div class="login_tab_line drift" :style="{'left': drift+'%'}"></div>
|
||
|
|
<div class="login_tab_item" @click="_tabChange(0)">登录</div>
|
||
|
|
<div class="login_tab_item" @click="_tabChange(50)">配置</div>
|
||
|
|
</div>
|
||
|
|
<div class="login_cnt clearfix drift" :style="{'left': '-'+drift*2+'%'}">
|
||
|
|
<div v-show="!scanShow" class="login_card fl">
|
||
|
|
<div class="card_wrap">
|
||
|
|
<div class="inputOuter">
|
||
|
|
<label>用户名</label>
|
||
|
|
<input type="text" v-model="loginname" class="inputStyle">
|
||
|
|
<i v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></i>
|
||
|
|
</div>
|
||
|
|
<div class="inputOuter">
|
||
|
|
<label>密码</label>
|
||
|
|
<input type="password" v-model="password" class="inputStyle">
|
||
|
|
<i v-show="closeIcon2" class="iconfont close_icon" @click="clearData(2)"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="submit">
|
||
|
|
<button class="btn" @click="_login" :disabled="disabled">手工登录</button>
|
||
|
|
<button class="fr btn" @click="_scan">扫码登录</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-show="scanShow" class="login_card fl">
|
||
|
|
<div class="card_wrap">
|
||
|
|
<div class="inputOuter">
|
||
|
|
<label>用户名</label>
|
||
|
|
<input type="password" ref="lname" v-model="qrcode" class="inputStyle" @keyup.enter="scanInput" :disabled="disabled">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="submit">
|
||
|
|
<button class="fl btn" @click="_login2">手工登录</button>
|
||
|
|
<button class="fr btn" @click="_scan">重新扫码</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="login_card fl" ref="config">
|
||
|
|
<div class="card_wrap">
|
||
|
|
<div class="inputOuter">
|
||
|
|
<label>域名地址</label>
|
||
|
|
<input type="text" class="inputStyle" v-model="baseUrl">
|
||
|
|
<i v-show="closeIcon3" class="iconfont close_icon" @click="clearData(3)"></i>
|
||
|
|
</div>
|
||
|
|
<div class="inputOuter">
|
||
|
|
<label>图片域名地址</label>
|
||
|
|
<input type="text" class="inputStyle" v-model="imgBaseUrl">
|
||
|
|
<i v-show="closeIcon4" class="iconfont close_icon" @click="clearData(4)"></i>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="inputOuter">
|
||
|
|
<label>锁屏时间(分钟)</label>
|
||
|
|
<input type="text" class="inputStyle" v-model="lockTime">
|
||
|
|
</div> -->
|
||
|
|
<div class="inputOuter">
|
||
|
|
<label>锁屏时间(分钟)</label>
|
||
|
|
<select name="equipment" v-model="lockTime">
|
||
|
|
<option :value="e.id" v-for="e in lockTimeArr" :key="e.id">{{e.name}}</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="submit">
|
||
|
|
<button class="btn" @click="_config">配 置</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Login',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
loginname: '',
|
||
|
|
password: '',
|
||
|
|
lockTimeArr: [{id: 0, name: '0(不锁屏)'}, {id: 1, name: '1'}, {id: 3, name: '3'}, {id: 5, name: '5'}, {id: 10, name: '10'}, {id: 15, name: '15'}, {id: 30, name: '30'}, {id: 60, name: '60'}],
|
||
|
|
lockTime: Number(this.$store.getters.lockTime),
|
||
|
|
baseUrl: this.$store.getters.baseUrl,
|
||
|
|
imgBaseUrl: this.$store.getters.imgBaseUrl,
|
||
|
|
drift: 0,
|
||
|
|
heightLimit: 'heightLimit2',
|
||
|
|
disabled: false,
|
||
|
|
scanShow: false,
|
||
|
|
qrcode: '',
|
||
|
|
logintype: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
closeIcon1 () {
|
||
|
|
return this.loginname !== ''
|
||
|
|
},
|
||
|
|
closeIcon2 () {
|
||
|
|
return this.password !== ''
|
||
|
|
},
|
||
|
|
closeIcon3 () {
|
||
|
|
return this.baseUrl !== ''
|
||
|
|
},
|
||
|
|
closeIcon4 () {
|
||
|
|
return this.imgBaseUrl !== ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
_tabChange (num) {
|
||
|
|
this.drift = num
|
||
|
|
this.heightLimit = num === 0 ? 'heightLimit2' : 'heightLimit3'
|
||
|
|
this.scanShow = false
|
||
|
|
},
|
||
|
|
clearData (e) {
|
||
|
|
switch (e) {
|
||
|
|
case 1:
|
||
|
|
this.loginname = ''
|
||
|
|
break
|
||
|
|
case 2:
|
||
|
|
this.password = ''
|
||
|
|
break
|
||
|
|
case 3:
|
||
|
|
this.baseUrl = ''
|
||
|
|
break
|
||
|
|
case 4:
|
||
|
|
this.imgBaseUrl = ''
|
||
|
|
break
|
||
|
|
}
|
||
|
|
},
|
||
|
|
_config () {
|
||
|
|
let obj = {
|
||
|
|
baseUrl: this.baseUrl,
|
||
|
|
imgBaseUrl: this.imgBaseUrl,
|
||
|
|
lockTime: this.lockTime
|
||
|
|
}
|
||
|
|
this.$store.dispatch('setConfig', obj)
|
||
|
|
this._tabChange(0)
|
||
|
|
},
|
||
|
|
loginApi () {
|
||
|
|
let data = {
|
||
|
|
'_SRVNAME': 'server.app.screenAPI',
|
||
|
|
'_SRVMETHOD': 'verifyAccount',
|
||
|
|
'_DATA': JSON.stringify({
|
||
|
|
form: {
|
||
|
|
logintype: this.logintype,
|
||
|
|
loginname: this.loginname,
|
||
|
|
password: this.password,
|
||
|
|
qrcode: this.qrcode
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this
|
||
|
|
.$post(data)
|
||
|
|
.then(res => {
|
||
|
|
if (res.code === '1') {
|
||
|
|
this.$store.dispatch('setUserInfo', res.result)
|
||
|
|
this.$router.push('/home')
|
||
|
|
} else {
|
||
|
|
this.Dialog(res.desc)
|
||
|
|
}
|
||
|
|
this.disabled = false
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
this.disabled = false
|
||
|
|
console.log(error)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
_login () {
|
||
|
|
this.disabled = true
|
||
|
|
this.logintype = '01'
|
||
|
|
if (this.loginname === '') {
|
||
|
|
this.toast('用户名不能为空')
|
||
|
|
this.disabled = false
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (this.password === '') {
|
||
|
|
this.toast('密码不能为空')
|
||
|
|
this.disabled = false
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.loginApi()
|
||
|
|
},
|
||
|
|
_scan () {
|
||
|
|
this.scanShow = true
|
||
|
|
this.heightLimit = 'heightLimit1'
|
||
|
|
this.qrcode = ''
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.lname.focus()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
scanInput () {
|
||
|
|
this.logintype = '02'
|
||
|
|
this.loginApi()
|
||
|
|
},
|
||
|
|
_login2 () {
|
||
|
|
this.scanShow = false
|
||
|
|
this.heightLimit = 'heightLimit2'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="stylus" scoped>
|
||
|
|
.login_wrap
|
||
|
|
position fixed
|
||
|
|
left 50%
|
||
|
|
top 50%
|
||
|
|
min-width 369px
|
||
|
|
width 50%
|
||
|
|
transform translate3d(-50%, -50%, 0)
|
||
|
|
background-color rgba(255, 255, 255, 0.8)
|
||
|
|
border-radius 5px
|
||
|
|
overflow hidden
|
||
|
|
.heightLimit1
|
||
|
|
height 2.4rem
|
||
|
|
.heightLimit2
|
||
|
|
height 3.3rem
|
||
|
|
.heightLimit3
|
||
|
|
height 4.2rem
|
||
|
|
.login_tab
|
||
|
|
position relative
|
||
|
|
height .5rem
|
||
|
|
font-size 0
|
||
|
|
background-color rgba(255, 255, 255, 0.9)
|
||
|
|
border-radius 5px 5px 0 0
|
||
|
|
.login_tab_item
|
||
|
|
float left
|
||
|
|
width 50%
|
||
|
|
font-size .16rem
|
||
|
|
line-height .5rem
|
||
|
|
color #333333
|
||
|
|
text-align center
|
||
|
|
cursor pointer
|
||
|
|
.login_tab_line
|
||
|
|
position absolute
|
||
|
|
width 50%
|
||
|
|
height 2px
|
||
|
|
background-color #2778f3
|
||
|
|
left 0
|
||
|
|
bottom 0
|
||
|
|
.login_cnt
|
||
|
|
position relative
|
||
|
|
width 200%
|
||
|
|
overflow hidden
|
||
|
|
.login_card
|
||
|
|
width 50%
|
||
|
|
padding .3rem .5rem
|
||
|
|
.card_wrap
|
||
|
|
overflow hidden
|
||
|
|
.inputOuter
|
||
|
|
width 100%
|
||
|
|
margin-bottom .2rem
|
||
|
|
label
|
||
|
|
display block
|
||
|
|
font-size .16rem
|
||
|
|
line-height .3rem
|
||
|
|
color #333
|
||
|
|
.inputStyle, select
|
||
|
|
width 100%
|
||
|
|
font-size .16rem
|
||
|
|
line-height .4rem
|
||
|
|
height .4rem
|
||
|
|
color #999
|
||
|
|
text-indent .1rem
|
||
|
|
border 1px solid rgba(0, 0, 0, .2)
|
||
|
|
box-sizing border-box
|
||
|
|
select
|
||
|
|
appearance auto
|
||
|
|
outline none
|
||
|
|
.submit
|
||
|
|
width 100%
|
||
|
|
text-align center
|
||
|
|
.btn
|
||
|
|
background-color #2778f3
|
||
|
|
font-size .16rem
|
||
|
|
line-height .4rem
|
||
|
|
color #fff
|
||
|
|
width .9rem
|
||
|
|
margin 0 .3rem
|
||
|
|
border-radius 5px
|
||
|
|
.drift
|
||
|
|
transition left .3s linear
|
||
|
|
</style>
|