liu_li
/
yxk-storeroom-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

login

master
xuhuajiao 3 years ago
parent
253f6f3baf
commit
4a6a2faff1
1 changed files with 157 additions and 70 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 227
      src/views/login.vue

227
src/views/login.vue
View File

@ -1,32 +1,72 @@
<template>
<div class="login" :style="'background-image:url('+ Background +');'">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
<h3 class="title">
智能库房综合管理系统
</h3>
<div class="login" :style="'background-image:url(' + Background + ');'">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
label-position="left"
label-width="0px"
class="login-form"
>
<h3 class="title">智能库房综合管理系统</h3>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode">
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">
记住我
</el-checkbox>
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
</el-checkbox> -->
<el-form-item style="width: 100%">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
@ -36,7 +76,9 @@
<div v-if="$store.state.settings.showFooter" id="el-login-footer">
<span v-html="$store.state.settings.footerTxt" />
<span> ⋅ </span>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{
$store.state.settings.caseNumber
}}</a>
</div>
</div>
</template>
@ -63,9 +105,15 @@ export default {
uuid: ''
},
loginRules: {
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
username: [
{ required: true, trigger: 'blur', message: '用户名不能为空' }
],
password: [
{ required: true, trigger: 'blur', message: '密码不能为空' }
],
code: [
{ required: true, trigger: 'change', message: '验证码不能为空' }
]
},
loading: false,
redirect: undefined
@ -79,7 +127,8 @@ export default {
this.redirect = data.redirect
delete data.redirect
if (JSON.stringify(data) !== '{}') {
this.redirect = this.redirect + '&' + qs.stringify(data, { indices: false })
this.redirect =
this.redirect + '&' + qs.stringify(data, { indices: false })
}
}
},
@ -96,7 +145,7 @@ export default {
},
methods: {
getCode() {
getCodeImg().then(res => {
getCodeImg().then((res) => {
this.codeUrl = res.img
this.loginForm.uuid = res.uuid
})
@ -116,7 +165,7 @@ export default {
}
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
this.$refs.loginForm.validate((valid) => {
const user = {
username: this.loginForm.username,
password: this.loginForm.password,
@ -130,21 +179,30 @@ export default {
if (valid) {
this.loading = true
if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires })
Cookies.set('password', user.password, { expires: Config.passCookieExpires })
Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
Cookies.set('username', user.username, {
expires: Config.passCookieExpires
})
Cookies.set('password', user.password, {
expires: Config.passCookieExpires
})
Cookies.set('rememberMe', user.rememberMe, {
expires: Config.passCookieExpires
})
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
this.$store.dispatch('Login', user).then(() => {
this.loading = false
this.$router.push({ path: this.redirect || '/' })
}).catch(() => {
this.loading = false
this.getCode()
})
this.$store
.dispatch('Login', user)
.then(() => {
this.loading = false
this.$router.push({ path: this.redirect || '/' })
})
.catch(() => {
this.loading = false
this.getCode()
})
} else {
console.log('error submit!!')
return false
@ -168,47 +226,76 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
}
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
}
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
}
.title {
width: 204px;
height: 25px;
font-size: 19px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #1e2864;
line-height: 0px;
margin-top: 65px;
margin-left: 54px;
// letter-spacing: 63px;
-webkit-background-clip: text;
// -webkit-text-fill-color: transparent;
}
.login-form {
border-radius: 6px;
.login-form {
width: 313px;
height: 375px;
background: #ffffff;
box-shadow: 0px 0px 10px 1px rgba(83, 83, 83, 0.16);
position: fixed;
left: 774px;
top: 150px;
border-radius: 6px 6px 6px 6px;
opacity: 1;
.el-form-item {
width: 263px !important;
height: 31px;
background: #ffffff;
width: 385px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon{
height: 39px;width: 14px;margin-left: 2px;
}
border-radius: 4px 4px 4px 4px;
opacity: 1;
margin-left: 25px;
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
.input-icon {
height: 32px;
width: 14px;
margin-left: 2px;
line-height: 32px;
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
float: right;
img{
cursor: pointer;
vertical-align:middle
}
.el-button {
box-sizing: border-box;
width: 263px !important;
height: 33px;
background: #1e2864;
border-radius: 3px 3px 3px 3px;
margin-top:19px;
margin-bottom: 65px;
opacity: 1;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
</style>
Write Preview
Loading…
Cancel
Save