<template>
|
<div class="wrap">
|
<div class="introduce">
|
<h2>{{systemTitle}}</h2>
|
</div>
|
<div class="login">
|
<h1>系统登录 / LOGIN IN</h1>
|
<div class="login_type">
|
<div :class="active === 1 ? 'login_type_item active' : 'login_type_item'" @click="handleClick(1)">账号登录</div>
|
<div :class="active === 2 ? 'login_type_item active' : 'login_type_item'" @click="handleClick(2)">手机登录</div>
|
</div>
|
<div class="info-input">
|
<template v-if="active === 1">
|
<el-input v-model="username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid" maxlength="50" v-trim/>
|
<el-input v-model="password" placeholder="请输入密码" type="password" prefix-icon="eva-icon-password" maxlength="30" show-password/>
|
<div class="captcha-input">
|
<el-input v-model="captcha.value" placeholder="图片验证码" prefix-icon="eva-icon-shield" maxlength="4" @keypress.enter.native="login"/>
|
<img v-if="!captcha.loading" :src="captcha.uri" @click="refreshCaptcha">
|
<span v-else><i class="el-icon-loading"></i></span>
|
</div>
|
</template>
|
<template v-else>
|
<el-input v-model="phone" placeholder="请输入手机号" prefix-icon="el-icon-phone" maxlength="11" v-trim/>
|
<div class="captcha-input">
|
<el-input v-model="code" placeholder="请输入验证码" prefix-icon="eva-icon-shield" @keypress.enter.native="login" v-trim/>
|
<el-button type="primary" style="width: 120px; margin-left: 20px;" @click="send" v-if="num === 0">发送验证码</el-button>
|
<el-button type="primary" style="width: 120px; margin-left: 20px;" v-else>{{num}}</el-button>
|
</div>
|
</template>
|
</div>
|
<el-button :loading="loading" @click="login">登 录</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapMutations } from 'vuex'
|
import { getCaptcha, loginByPassword, loginByPhone } from '@/api/system/common'
|
import { sendSms } from '@/api/business/smsEmail'
|
|
export default {
|
name: 'Login',
|
data () {
|
return {
|
systemTitle: process.env.VUE_APP_SYSTEM_TITLE,
|
loading: false,
|
username: '',
|
password: '',
|
phone: '',
|
code: '',
|
active: 1,
|
num: 0,
|
timer: null,
|
// 验证码
|
captcha: {
|
loading: false,
|
value: '',
|
uuid: '',
|
uri: ''
|
}
|
}
|
},
|
methods: {
|
...mapMutations(['setUserInfo']),
|
handleClick(e) {
|
this.active = e
|
this.username = ''
|
this.password = ''
|
this.phone = ''
|
this.code = ''
|
},
|
send() {
|
if (!this.phone) {
|
this.$message.warning('请先输入手机号')
|
return
|
}
|
var reg = /^1[3456789]\d{9}$/;
|
if (!reg.test(this.phone)) {
|
this.$message.warning('手机号不合法')
|
return
|
}
|
sendSms({
|
phone: this.phone
|
}).then(res => {
|
this.num = 60
|
this.setTimer()
|
})
|
},
|
setTimer () {
|
this.timer = setInterval(() => {
|
if (this.num === 0) {
|
this.num = 0
|
clearInterval(this.timer)
|
this.timer = null
|
return
|
}
|
this.num -= 1
|
}, 1000)
|
},
|
// 登录
|
login () {
|
if (this.loading) {
|
return
|
}
|
if (this.active === 1) {
|
if (!this.__check()) {
|
return
|
}
|
this.loading = true
|
loginByPassword({
|
username: this.username.trim(),
|
password: this.password,
|
code: this.captcha.value.trim(),
|
uuid: this.captcha.uuid
|
})
|
.then(() => {
|
window.location.href = process.env.VUE_APP_CONTEXT_PATH
|
})
|
.catch(e => {
|
this.refreshCaptcha()
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.loading = false
|
})
|
} else {
|
if (!this.phone) {
|
this.$tip.error('请输入手机号')
|
return
|
}
|
if (!this.code) {
|
this.$tip.error('请输入验证码')
|
return
|
}
|
this.loading = true
|
loginByPhone({
|
phone: this.phone,
|
code: this.code.trim()
|
})
|
.then(() => {
|
window.location.href = process.env.VUE_APP_CONTEXT_PATH
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.loading = false
|
})
|
}
|
},
|
// 刷新验证码
|
refreshCaptcha () {
|
this.captcha.loading = true
|
getCaptcha()
|
.then(data => {
|
this.captcha.uri = data.image
|
this.captcha.uuid = data.uuid
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
setTimeout(() => {
|
this.captcha.loading = false
|
}, 150)
|
})
|
},
|
// 登录前验证
|
__check () {
|
if (this.username.trim() === '') {
|
this.$tip.error('请输入用户名')
|
return false
|
}
|
if (this.password === '') {
|
this.$tip.error('请输入密码')
|
return false
|
}
|
if (this.captcha.value.trim() === '') {
|
this.$tip.error('请输入图片验证码')
|
return false
|
}
|
return true
|
}
|
},
|
created () {
|
this.refreshCaptcha()
|
document.title=this.systemTitle
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/assets/style/variables.scss";
|
$input-gap: 30px;
|
.wrap {
|
display: flex;
|
width: 100%;
|
height: 100vh;
|
background-image: url("../assets/images/login.jpg");
|
background-repeat: no-repeat;
|
background-size: auto 180%;
|
background-clip: content-box;
|
background-position: center;
|
// 左边介绍
|
.introduce {
|
padding-left: 10%;
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
color: #fff;
|
background: rgba(0, 0, 0, 0.4);
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
h2 {
|
font-size:34px;
|
font-style: italic;
|
font-weight: 900;
|
margin-top: 50px;
|
}
|
h3 {
|
font-size: 49px;
|
font-weight: 300;
|
margin: 25px 0;
|
}
|
}
|
// 右边登录
|
.login {
|
height: 100%;
|
width: 38%;
|
max-width: 560px;
|
min-width: 460px;
|
flex-shrink: 0;
|
text-align: center;
|
background: #fff;
|
padding: 0 80px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
box-sizing: border-box;
|
h1 {
|
font-size: 28px;
|
font-weight: 500;
|
}
|
.login_type {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
margin: 20px 0;
|
.active {
|
box-sizing: border-box;
|
color: rgba(64, 106, 255, 0.996) !important;
|
border-bottom: 1px solid rgba(64, 106, 255, 0.996) !important;
|
}
|
.login_type_item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: black;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
}
|
.info-input {
|
margin-bottom: 60px;
|
/deep/ .el-input {
|
margin-top: 30px;
|
&:first-child {
|
margin-top: 0 !important;
|
}
|
.el-input__inner {
|
height: 50px;
|
background: #F9F9F9;
|
border: 1px solid transparent;
|
&:focus {
|
border: 1px solid $primary-color;
|
}
|
}
|
}
|
}
|
// 验证码输入
|
.captcha-input {
|
display: flex;
|
margin-top: $input-gap;
|
height: 50px;
|
.el-input {
|
width: 100%;
|
margin-top: 0;
|
}
|
span, img {
|
width: 45%;
|
height: 100%;
|
flex-shrink: 0;
|
margin-left: 16px;
|
}
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #f7f7f7;
|
border-radius: 8px;
|
}
|
}
|
.el-button {
|
height: 50px;
|
width: 100%;
|
color: #fff;
|
font-size: 16px;
|
background: linear-gradient(130deg, $primary-color + 20 0%, $primary-color - 20 100%);
|
}
|
}
|
}
|
</style>
|
