310 lines
8.0 KiB
Vue
310 lines
8.0 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('saveUserInfo', 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>
|