后台管理登录页
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
// const Login = r => require.ensure([], () => r(require('../pages/modules/login/login.vue')), 'login')
|
||||
const Login = r => require.ensure([], () => r(require('../pages/modules/login/index.vue')), 'login')
|
||||
const Hub = r => require.ensure([], () => r(require('../pages/modules/hub/index.vue')), 'Hub')
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@@ -9,7 +9,11 @@ const router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/hub'
|
||||
redirect: '/login'
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: Login
|
||||
},
|
||||
{
|
||||
path: '/hub',
|
||||
|
||||
174
src/pages/modules/login/index.vue
Normal file
174
src/pages/modules/login/index.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="zbox relative body-container" :class="{'enClass': $i18n.locale === 'en-us'}">
|
||||
<div class="absolute login-header">
|
||||
<div class="zbox relative login_logo"></div>
|
||||
</div>
|
||||
<div class="absolute login-bottom"></div>
|
||||
<el-row type="flex" class="zbox" justify="center" align="middle">
|
||||
<el-col :span="12">
|
||||
<div class="login-wraper">
|
||||
<el-row type="flex" class="navs-wraper" justify="start" align="start">
|
||||
<button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="tab = 0">登录</button>
|
||||
<button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="tab = 1">配置</button>
|
||||
</el-row>
|
||||
<div v-show="tab === 0" class="login-content_wraper">
|
||||
<el-row type="flex" class="login-item" justify="space-between">
|
||||
<el-col :span="5" class="login-label" >用户名</el-col>
|
||||
<el-col :span="19">
|
||||
<input type="text" class="login-input" v-model="username">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="login-item">
|
||||
<el-col :span="5" class="login-label">密码</el-col>
|
||||
<el-col :span="19">
|
||||
<input type="password" class="login-input" v-model="password">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center" style="margin-top: .3rem">
|
||||
<el-col :span="8">
|
||||
<button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="tab === 1" class="login-content_wraper">
|
||||
<el-row class="login-item">
|
||||
<el-col :span="5" class="login-label">域名</el-col>
|
||||
<el-col :span="19">
|
||||
<input type="text" class="login-input" v-model.trim="baseUrl">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="login-item" style="visibility: hidden">
|
||||
<el-col :span="8" class="login-label">刷新时间</el-col>
|
||||
<el-col :span="16">
|
||||
<input type="number" class="login-input" v-model="setTime">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center" style="margin-top: .3rem">
|
||||
<el-col :span="8">
|
||||
<button class="button_control" @click="saveSetup"><p>配置</p></button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import JSEncrypt from 'jsencrypt'
|
||||
import {authlogin} from '@/config/getData'
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
|
||||
'2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ=='
|
||||
export default {
|
||||
name: 'ModuleLogin',
|
||||
data () {
|
||||
return {
|
||||
tab: 0,
|
||||
username: null,
|
||||
password: null,
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: 1000,
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['serverUrl'])
|
||||
},
|
||||
mounted () {
|
||||
this.baseUrl = this.serverUrl
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setServerUrl']),
|
||||
saveSetup () {
|
||||
this.setServerUrl(this.baseUrl)
|
||||
this.tab = 0
|
||||
},
|
||||
saveLogin () {
|
||||
this.disabled = true
|
||||
if (!this.username) {
|
||||
this.toast('请输入用户名')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
if (!this.password) {
|
||||
this.toast('请输入密码')
|
||||
this.disabled = false
|
||||
return
|
||||
}
|
||||
this._authlogin()
|
||||
},
|
||||
async _authlogin () {
|
||||
try {
|
||||
let res = await authlogin(this.username, this.encryptData(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.$router.push('/hub')
|
||||
} else {
|
||||
this.Dialog(res.desc)
|
||||
}
|
||||
this.disabled = false
|
||||
} catch (err) {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
encryptData(txt) {
|
||||
const encryptor = new JSEncrypt()
|
||||
encryptor.setPublicKey(publicKey) // 设置公钥
|
||||
return encryptor.encrypt(txt) // 对需要加密的数据进行加密
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '@/style/mixin'
|
||||
.login-header
|
||||
top 0
|
||||
_wh(100%, 10vh)
|
||||
background center / 92% 100% url(@/images/new/login_header_bg.png) no-repeat
|
||||
.login_logo
|
||||
top -14%
|
||||
background center / 33% auto url(@/images/new/logo.png) no-repeat
|
||||
.login-bottom
|
||||
bottom 0
|
||||
left 25%
|
||||
_wh(50%, 1.75rem)
|
||||
background center / 9rem 100% url(@/images/new/login_dy.png) no-repeat
|
||||
.login-wraper
|
||||
padding 8% 8.8% 6% 8%
|
||||
background center / 100% 100% url(@/images/new/login_w_bg.png) no-repeat
|
||||
.navs-wraper
|
||||
height 0.5rem
|
||||
background center / 100% 100% url(@/images/new/login_nav_bg.png) no-repeat
|
||||
padding-left 2%
|
||||
.nav_item
|
||||
_wh(32%, 64%)
|
||||
padding-left 9%
|
||||
_font(.18rem, 1, #99B1DD,,)
|
||||
font-family 'YouSheBiaoTiHei'
|
||||
background-color transparent
|
||||
&:first-child
|
||||
background center / 100% 100% url(@/images/new/login_tab.png) no-repeat
|
||||
.nav_item_active
|
||||
color #fff
|
||||
.login-content_wraper
|
||||
padding 5% 5% 5%
|
||||
.login-item
|
||||
margin-bottom .15rem
|
||||
.login-label
|
||||
_font(.16rem, .4rem, #AFBED8,,)
|
||||
.login-input
|
||||
width 100%
|
||||
_font(.15rem, .4rem, #fff,,)
|
||||
background rgba(45,88,184,0.1)
|
||||
border 2px solid #4980BD
|
||||
padding 0 .1rem
|
||||
&:focus
|
||||
background rgba(45,88,184,0.25);
|
||||
border-color #21D0F2
|
||||
</style>
|
||||
@@ -1,269 +0,0 @@
|
||||
<!-- <template>
|
||||
<div class="zbox relative body-container" :class="{'enClass': $i18n.locale === 'en-us'}">
|
||||
<div class="absolute login-header">
|
||||
<div class="zbox relative login_logo"></div>
|
||||
</div>
|
||||
<div class="absolute login-bottom"></div>
|
||||
<el-row type="flex" class="zbox" justify="center" align="middle">
|
||||
<el-col :span="12">
|
||||
<div class="login-wraper">
|
||||
<el-row type="flex" class="navs-wraper" justify="start" align="start">
|
||||
<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>
|
||||
</el-row>
|
||||
<div v-show="tab === 0" class="login-content_wraper">
|
||||
<el-row type="flex" class="login-item" justify="space-between">
|
||||
<el-col :span="5" class="login-label" @click="toFocus(1)">{{ $t('common.username') }}</el-col>
|
||||
<el-col :span="19">
|
||||
<keyboard-input
|
||||
inputClass="login-input"
|
||||
keyboardClass="username"
|
||||
:value="username"
|
||||
@inputChange="inputChange"
|
||||
@inputFocus="inputFocus"
|
||||
></keyboard-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="login-item">
|
||||
<el-col :span="5" class="login-label" @click="toFocus(2)">{{ $t('login.password') }}</el-col>
|
||||
<el-col :span="19">
|
||||
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center" style="margin-top: .3rem">
|
||||
<el-col :span="8">
|
||||
<button class="button_control" :disabled="disabled" @click="saveLogin"><p>{{ $t('login.login') }}</p></button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="tab === 1" class="login-content_wraper">
|
||||
<el-row class="login-item">
|
||||
<el-col :span="8" class="login-label" @click="toFocus(3)">{{ $t('login.domainnameaddress') }}</el-col>
|
||||
<el-col :span="16">
|
||||
<input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal" data-next="1">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="login-item">
|
||||
<el-col :span="8" class="login-label" @click="toFocus(4)">{{ $t('login.refreshtime') }}</el-col>
|
||||
<el-col :span="16">
|
||||
<input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="center" style="margin-top: .3rem">
|
||||
<el-col :span="8">
|
||||
<button class="button_control" @click="saveSetup"><p>{{ $t('login.configuration') }}</p></button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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.vue'
|
||||
import {authlogin} from '../../../config/getData'
|
||||
import {encrypt} from '../../../main.js'
|
||||
export default {
|
||||
name: 'ModuleLogin',
|
||||
components: {
|
||||
KeyboardInput
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
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()
|
||||
if (!res.result.user.user.isAdmin) {
|
||||
this.$router.push('/mini/home')
|
||||
} else {
|
||||
this.$router.push('/index/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-header
|
||||
top 0
|
||||
_wh(100%, 10vh)
|
||||
background center / 92% 100% url(../../../images/new/login_header_bg.png) no-repeat
|
||||
.login_logo
|
||||
top -14%
|
||||
background center / 33% auto url(../../../images/new/logo.png) no-repeat
|
||||
.login-bottom
|
||||
bottom 0
|
||||
left 25%
|
||||
_wh(50%, 1.75rem)
|
||||
background center / 9rem 100% url(../../../images/new/login_dy.png) no-repeat
|
||||
.login-wraper
|
||||
padding 8% 8.8% 6% 8%
|
||||
background center / 100% 100% url(../../../images/new/login_w_bg.png) no-repeat
|
||||
.navs-wraper
|
||||
height 0.5rem
|
||||
background center / 100% 100% url(../../../images/new/login_nav_bg.png) no-repeat
|
||||
padding-left 2%
|
||||
.nav_item
|
||||
_wh(32%, 64%)
|
||||
padding-left 9%
|
||||
_font(.18rem, 1, #99B1DD,,)
|
||||
font-family 'YouSheBiaoTiHei'
|
||||
background-color transparent
|
||||
&:first-child
|
||||
background center / 100% 100% url(../../../images/new/login_tab.png) no-repeat
|
||||
.nav_item_active
|
||||
color #fff
|
||||
.login-content_wraper
|
||||
padding 5% 5% 5%
|
||||
.login-item
|
||||
margin-bottom .15rem
|
||||
.login-label
|
||||
_font(.16rem, .4rem, #AFBED8,,)
|
||||
.login-input
|
||||
width 100%
|
||||
_font(.15rem, .4rem, #fff,,)
|
||||
background rgba(45,88,184,0.1)
|
||||
border 2px solid #4980BD
|
||||
padding 0 .1rem
|
||||
&:focus
|
||||
background rgba(45,88,184,0.25);
|
||||
border-color #21D0F2
|
||||
</style> -->
|
||||
@@ -1,7 +1,6 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
// const Login = r => require.ensure([], () => r(require('../pages/modules/login/login.vue')), 'login')
|
||||
const IndexComponent = r => require.ensure([], () => r(require('../pages/shells/index.vue')), 'index')
|
||||
const Home = r => require.ensure([], () => r(require('../pages/modules/home.vue')), 'Home')
|
||||
const Device = r => require.ensure([], () => r(require('../pages/modules/device/index.vue')), 'Device')
|
||||
|
||||
Reference in New Issue
Block a user