310 lines
7.9 KiB
Vue
310 lines
7.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="login_wrap">
|
|
<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">
|
|
<div class="label">用户名</div>
|
|
<input type="text" v-model="loginname" class="inputStyle">
|
|
<div v-show="closeIcon1" class="iconfont close_icon" @click="clearData(1)"></div>
|
|
</div>
|
|
<div class="inputOuter">
|
|
<div class="label">密码</div>
|
|
<input type="password" v-model="password" class="inputStyle">
|
|
<div v-show="closeIcon2" class="iconfont close_icon" @click="clearData(2)"></div>
|
|
</div>
|
|
<div class="inputOuter"></div>
|
|
</div>
|
|
<div class="submit">
|
|
<div class="btn-wrap">
|
|
<button class="btn" @click="_login" :disabled="disabled">手工登录</button>
|
|
</div>
|
|
<div class="btn-wrap">
|
|
<button class="btn" @click="_scan">扫码登录</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="scanShow" class="login_card fl">
|
|
<div class="card_wrap">
|
|
<div class="inputOuter">
|
|
<div class="label">用户名</div>
|
|
<input type="password" ref="lname" v-model="qrcode" class="inputStyle" @keyup.enter="scanInput" :disabled="disabled">
|
|
</div>
|
|
<div class="inputOuter"></div>
|
|
<div class="inputOuter"></div>
|
|
</div>
|
|
<div class="submit">
|
|
<div class="btn-wrap">
|
|
<button class="btn" @click="_login2">手工登录</button>
|
|
</div>
|
|
<div class="btn-wrap">
|
|
<button class="btn" @click="_scan">重新扫码</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="login_card fl" ref="config">
|
|
<div class="card_wrap">
|
|
<div class="inputOuter">
|
|
<div class="label label1">域名地址</div>
|
|
<input type="text" class="inputStyle inputStyle1" v-model="baseUrl">
|
|
<div v-show="closeIcon3" class="iconfont close_icon" @click="clearData(3)"></div>
|
|
</div>
|
|
<div class="inputOuter">
|
|
<div class="label label1">图片域名地址</div>
|
|
<input type="text" class="inputStyle inputStyle1" v-model="imgBaseUrl">
|
|
<div v-show="closeIcon4" class="iconfont close_icon" @click="clearData(4)"></div>
|
|
</div>
|
|
<div class="inputOuter">
|
|
<div class="label label1">锁屏时间(分钟)</div>
|
|
<div class="select select1">
|
|
<el-select v-model="value" placeholder="请选择">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="submit">
|
|
<button class="btn" @click="_config">配 置</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {handLogin} from './../config/getData2.js'
|
|
import {encrypt} from './../main.js'
|
|
export default {
|
|
name: 'Login',
|
|
data () {
|
|
return {
|
|
loginname: '',
|
|
password: '',
|
|
baseUrl: this.$store.getters.baseUrl,
|
|
imgBaseUrl: this.$store.getters.imgBaseUrl,
|
|
drift: 0,
|
|
disabled: false,
|
|
scanShow: false,
|
|
qrcode: '',
|
|
logintype: '',
|
|
options: [{value: 0, label: '0(不锁屏)'}, {value: 1, label: '1'}, {value: 3, label: '3'}, {value: 5, label: '5'}, {value: 10, label: '10'}, {value: 15, label: '15'}, {value: 30, label: '30'}, {value: 60, label: '60'}],
|
|
value: Number(this.$store.getters.lockTime)
|
|
}
|
|
},
|
|
computed: {
|
|
closeIcon1 () {
|
|
return this.loginname !== ''
|
|
},
|
|
closeIcon2 () {
|
|
return this.password !== ''
|
|
},
|
|
closeIcon3 () {
|
|
return this.baseUrl !== ''
|
|
},
|
|
closeIcon4 () {
|
|
return this.imgBaseUrl !== ''
|
|
}
|
|
},
|
|
methods: {
|
|
_tabChange (num) {
|
|
this.drift = num
|
|
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.value
|
|
}
|
|
this.$store.dispatch('setConfig', obj)
|
|
this._tabChange(0)
|
|
},
|
|
async loginApi () {
|
|
try {
|
|
let res = await handLogin(this.loginname, encrypt(this.password))
|
|
this.$store.dispatch('setUserInfo', JSON.stringify(res.user.user))
|
|
this.$store.dispatch('saveToken', res.token)
|
|
this.$router.push('/home')
|
|
this.disabled = false
|
|
} catch (e) {
|
|
this.disabled = false
|
|
}
|
|
},
|
|
_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.qrcode = ''
|
|
this.$nextTick(() => {
|
|
this.$refs.lname.focus()
|
|
})
|
|
},
|
|
scanInput () {
|
|
this.logintype = '02'
|
|
this.loginApi()
|
|
},
|
|
_login2 () {
|
|
this.scanShow = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.login_wrap
|
|
position absolute
|
|
left 50%
|
|
top 50%
|
|
// min-width 369px
|
|
width 60%
|
|
height 3.3rem
|
|
transform translate3d(-50%, -50%, 0)
|
|
background-color rgba(255, 255, 255, 0.8)
|
|
border-radius 5px
|
|
z-index 1
|
|
overflow-x hidden
|
|
.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-x hidden
|
|
.login_card
|
|
width 50%
|
|
height auto
|
|
padding .3rem .3rem
|
|
.card_wrap
|
|
width 100%
|
|
// overflow hidden
|
|
.inputOuter
|
|
position relative
|
|
width 100%
|
|
height .4rem
|
|
margin-bottom .2rem
|
|
clear both
|
|
.label
|
|
float left
|
|
width .7rem
|
|
font-size .16rem
|
|
line-height .4rem
|
|
color #333
|
|
text-align justify
|
|
text-align-last justify
|
|
label::after
|
|
display inline-block
|
|
content ''
|
|
width 100%
|
|
height 0
|
|
visibility hidden
|
|
.inputStyle, .select
|
|
float right
|
|
width calc(100% - .9rem)
|
|
font-size .16rem
|
|
line-height .4rem
|
|
height .4rem
|
|
color #606266
|
|
text-indent .1rem
|
|
border 1px solid rgba(0, 0, 0, .2)
|
|
box-sizing border-box
|
|
select
|
|
appearance auto
|
|
outline none
|
|
.label1
|
|
width 1.1rem
|
|
.inputStyle1
|
|
width calc(100% - 1.2rem)
|
|
.select1
|
|
width calc(100% - 1.2rem)
|
|
background-color #fff
|
|
text-indent 0
|
|
.submit
|
|
width 100%
|
|
height .4rem
|
|
clear both
|
|
.btn-wrap
|
|
float left
|
|
width 50%
|
|
height .4rem
|
|
.btn
|
|
display block
|
|
background-color #2778f3
|
|
font-size .16rem
|
|
line-height .4rem
|
|
color #fff
|
|
padding 0 .1rem
|
|
margin 0 auto
|
|
border-radius 5px
|
|
.drift
|
|
transition left .3s linear
|
|
.el-select
|
|
width 100%
|
|
.el-input__inner
|
|
height .4rem
|
|
line-height .4rem
|
|
border none
|
|
padding 0 .1rem
|
|
font-size .16rem
|
|
.el-select-dropdown__item span
|
|
color #606266
|
|
</style>
|