init
This commit is contained in:
280
src/pages/Login.vue
Normal file
280
src/pages/Login.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user