319 lines
9.0 KiB
Vue
319 lines
9.0 KiB
Vue
<template>
|
|
<div class="login-container" :class="{'enClass': selectType === 'en-us'}">
|
|
<div class="login-header">
|
|
<div class="login_logo"></div>
|
|
</div>
|
|
<div class="login-bottom"></div>
|
|
<div class="login-wraper">
|
|
<div class="navs-wraper">
|
|
<button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">{{ $t('login.passwordlogin') }}</button>
|
|
<button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">{{ $t('login.configuration') }}</button>
|
|
</div>
|
|
<div v-show="tab === 0" class="login-content_wraper">
|
|
<div class="login-items-wraper">
|
|
<div class="login-item">
|
|
<div class="login-label" @click="toFocus(1)">{{ $t('common.username') }}</div>
|
|
<!-- <input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal"> -->
|
|
<div class="login_value">
|
|
<keyboard-input
|
|
inputClass="login-input"
|
|
keyboardClass="username"
|
|
:value="username"
|
|
@inputChange="inputChange"
|
|
@inputFocus="inputFocus"
|
|
></keyboard-input>
|
|
</div>
|
|
</div>
|
|
<div class="login-item">
|
|
<div class="login-label" @click="toFocus(2)">{{ $t('login.password') }}</div>
|
|
<div class="login_value">
|
|
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="login-buttons-wraper">
|
|
<button class="button_control" :disabled="disabled" @click="saveLogin"><p>{{ $t('login.login') }}</p></button>
|
|
</div>
|
|
</div>
|
|
<div v-show="tab === 1" class="login-content_wraper">
|
|
<div class="login-items-wraper">
|
|
<div class="login-item">
|
|
<div class="login-label" @click="toFocus(3)">{{ $t('login.domainnameaddress') }}</div>
|
|
<div class="login_value login_value_1">
|
|
<input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal" data-next="1">
|
|
</div>
|
|
</div>
|
|
<div class="login-item">
|
|
<div class="login-label" @click="toFocus(4)">{{ $t('login.refreshtime') }}</div>
|
|
<div class="login_value login_value_1">
|
|
<input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="login-buttons-wraper">
|
|
<button class="button_control" @click="saveSetup"><p>{{ $t('login.configuration') }}</p></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import KeyboardInput from '@components/keyboard-input'
|
|
import {authlogin} from '@config/getData2.js'
|
|
import {encrypt} from '../../../main.js'
|
|
export default {
|
|
components: {
|
|
KeyboardInput
|
|
},
|
|
data () {
|
|
return {
|
|
selectType: '',
|
|
tab: 0,
|
|
username: this.$store.getters.defaultUsername,
|
|
password: this.$store.getters.defaultPassword,
|
|
baseUrl: this.$store.getters.baseUrl,
|
|
setTime: this.$store.getters.setTime / 1000,
|
|
disabled: false,
|
|
visible: false,
|
|
layout: 'normal',
|
|
input: null,
|
|
options: {
|
|
useKbEvents: false,
|
|
preventClickEvent: false
|
|
}
|
|
}
|
|
},
|
|
created () {
|
|
this.$store.dispatch('materObj', {})
|
|
if (this.$i18n.locale === 'zh-cn') {
|
|
this.selectType = 'zh-cn'
|
|
} else if (this.$i18n.locale === 'en-us') {
|
|
this.selectType = 'en-us'
|
|
}
|
|
},
|
|
mounted () {
|
|
// 点对点项目分辨率 1024 * 768
|
|
// alert(document.body.clientWidth, 'a')
|
|
// alert(document.body.clientHeight, 'b')
|
|
// alert(window.screen.width, 'c')
|
|
// alert(window.screen.height, 'd')
|
|
},
|
|
methods: {
|
|
toFocus (i) {
|
|
switch (i) {
|
|
case 1:
|
|
this.$refs.input1.focus()
|
|
break
|
|
case 2:
|
|
this.$refs.input2.focus()
|
|
break
|
|
case 3:
|
|
this.$refs.input3.focus()
|
|
break
|
|
case 4:
|
|
this.$refs.input4.focus()
|
|
break
|
|
}
|
|
},
|
|
toSetup () {
|
|
this.tab = 1
|
|
this.hide()
|
|
},
|
|
toLogin () {
|
|
this.tab = 0
|
|
this.hide()
|
|
},
|
|
saveSetup () {
|
|
let obj = {
|
|
baseUrl: this.baseUrl,
|
|
setTime: this.setTime * 1000
|
|
}
|
|
this.$store.dispatch('setConfig', obj)
|
|
this.toLogin()
|
|
},
|
|
saveLogin () {
|
|
this.disabled = true
|
|
if (!this.username) {
|
|
// this.toast('请输入用户名')
|
|
this.toast(this.$t('login.toast1'))
|
|
this.disabled = false
|
|
return
|
|
}
|
|
if (!this.password) {
|
|
// this.toast('请输入密码')
|
|
this.toast(this.$t('login.toast2'))
|
|
this.disabled = false
|
|
return
|
|
}
|
|
this._authlogin()
|
|
},
|
|
async _authlogin () {
|
|
try {
|
|
let res = await authlogin(this.username, encrypt(this.password))
|
|
if (res.code === '1') {
|
|
let obj = {}
|
|
obj = Object.assign({}, res.result)
|
|
this.$store.dispatch('userInfo', JSON.stringify(obj))
|
|
this.$store.dispatch('setLoginInfo', {username: this.username, password: this.password})
|
|
this.hide()
|
|
this.$router.push('/mini/home')
|
|
} else {
|
|
this.Dialog(res.desc)
|
|
}
|
|
this.disabled = false
|
|
} catch (err) {
|
|
this.disabled = false
|
|
// this.toast(err)
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: this.$t('common.loading'),
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
setTimeout(() => {
|
|
loading.close()
|
|
}, 4000)
|
|
}
|
|
},
|
|
show (e) {
|
|
// 关闭中文keyboard
|
|
let arr = document.querySelectorAll('.hg-theme-default')
|
|
arr.forEach((ele) => {
|
|
ele.style.visibility = 'hidden'
|
|
})
|
|
this.input = e.target
|
|
this.layout = e.target.dataset.layout
|
|
if (!this.visible) {
|
|
this.visible = true
|
|
}
|
|
},
|
|
hide () {
|
|
this.visible = false
|
|
},
|
|
accept () {
|
|
this.hide()
|
|
},
|
|
next () {
|
|
let inputs = document.querySelectorAll('input')
|
|
let found = false;
|
|
[].forEach.call(inputs, (item, i) => {
|
|
if (!found && item === this.input && i < inputs.length - 1 && this.input.dataset.next === '1') {
|
|
found = true
|
|
this.$nextTick(() => {
|
|
inputs[i + 1].focus()
|
|
})
|
|
}
|
|
})
|
|
if (!found) {
|
|
this.input.blur()
|
|
this.hide()
|
|
}
|
|
},
|
|
inputChange (val) {
|
|
this.username = val
|
|
},
|
|
inputFocus () {
|
|
this.visible = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@style/mixin'
|
|
.login-container
|
|
position relative
|
|
_wh(100%, 100%)
|
|
background center / 100% 100% url(../../../images/new/login_bg.png) no-repeat
|
|
_fj(center)
|
|
.login-header
|
|
position absolute
|
|
top 0
|
|
_wh(100%, 125px)
|
|
background center / 1682px 100% url(../../../images/new/login_header_bg.png) no-repeat
|
|
.login_logo
|
|
position: relative;
|
|
top: -14px;
|
|
_wh(100%, 100%)
|
|
background center / 532px 100% url(../../../images/new/logo.png) no-repeat
|
|
.login-bottom
|
|
position absolute
|
|
bottom 0
|
|
_wh(100%, 175px)
|
|
background center / 900px 100% url(../../../images/new/login_dy.png) no-repeat
|
|
.login-wraper
|
|
_wh(900px, 702px)
|
|
padding 87px 85px 50px 70px
|
|
background center / 100% url(../../../images/new/login_w_bg.png) no-repeat
|
|
.login-content_wraper
|
|
width 100%
|
|
padding 51px 45px 51px
|
|
margin 0 auto
|
|
_fj(center,,column)
|
|
.navs-wraper
|
|
_wh(100%, 107px)
|
|
_fj(flex-start)
|
|
background center / 100% url(../../../images/new/login_nav_bg.png) no-repeat
|
|
padding 1px 0 35px 28px
|
|
.nav_item
|
|
_wh(270px, 73px)
|
|
padding 10px 0 0 52px
|
|
_font(40px, 40px, #99B1DD,,)
|
|
font-family: YouSheBiaoTiHei;
|
|
background none
|
|
&:first-child
|
|
background center / 100% url(../../../images/new/login_tab.png) no-repeat
|
|
.nav_item_active
|
|
color #fff
|
|
.login-items-wraper
|
|
width 100%
|
|
.login-item
|
|
_fj()
|
|
width 100%
|
|
margin-bottom 40px
|
|
.login-label
|
|
_font(30px, 35px, #AFBED8,,)
|
|
.login_value
|
|
width calc(100% - 120px)
|
|
.login_value_1
|
|
width calc(100% - 225px)
|
|
.login-input
|
|
width 100%
|
|
_font(30px, 78px, #fff,,)
|
|
background: rgba(45,88,184,0.1);
|
|
border: 2px solid #4980BD;
|
|
padding 0 22px
|
|
&:focus
|
|
background: rgba(45,88,184,0.25);
|
|
border: 2px solid #21D0F2;
|
|
line-height 76px
|
|
.login-buttons-wraper
|
|
width 100%
|
|
margin-top 12px
|
|
padding-left 180px
|
|
.button-login
|
|
width 100%
|
|
border-radius 20px
|
|
letter-spacing 5px
|
|
.footer_wraper
|
|
position absolute
|
|
width 70%
|
|
bottom 20px
|
|
left 50%
|
|
transform translateX(-50%)
|
|
.footer_p1
|
|
_font(14px, 24px, #fff,,center)
|
|
.footer_p2
|
|
_font(15px, 24px, #fff,,center)
|
|
.enClass
|
|
.login_value
|
|
width calc(100% - 165px)
|
|
.login_value_1
|
|
width calc(100% - 255px)
|
|
.button_control
|
|
p
|
|
font-size 40px
|
|
</style>
|