<template>
|
<div class="content">
|
<div class="login_box">
|
<img src="../assets/img/logo@2x.png" class="w--255 h--95 mt--57" />
|
<div class="my--33 fs--28 lh--28 font-bold color1">客户登录 | User(C) Login</div>
|
<div class="flex a-center px--14 py--19 text_box">
|
<img src="../assets/img/youxiang@2x.png" class="w--20 h--15 mr--25 shrink0" />
|
<el-input v-model="account" placeholder="请输入邮箱 | Email" />
|
</div>
|
<div class="flex a-center mt--16 px--14 py--19 text_box">
|
<img src="../assets/img/mima@2x.png" class="w--18 h--20 mr--26 shrink0" />
|
<el-input show-password v-model="pwd" placeholder="请输入密码 | Password" />
|
</div>
|
<div class="flex a-center mt--16 pl--14 text_box">
|
<img src="../assets/img/yanzhengma@2x.png" class="w--18 h--20 mr--26 shrink0" />
|
<el-input v-model="code" placeholder="请输入验证码 | Verification code" />
|
<div class="code pointer">{{ codeStr }}</div>
|
</div>
|
<div @click="loginFun" class="mt--53 fs--18 lh--27 font-bold py--18 px--158 br--6 pointer bgcolor1">登录 | Login</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { generateVerificationCode } from '@/utils/utils';
|
import { login } from './service'
|
import CryptoJS from 'crypto-js';
|
export default {
|
components: {},
|
props: {},
|
data() {
|
return {
|
account: '',
|
pwd: '',
|
code: '',
|
codeStr: '',
|
};
|
},
|
created() {
|
this.codeStr = generateVerificationCode()
|
},
|
mounted() {
|
document.addEventListener("keydown", this.handleKeyDown);
|
},
|
methods: {
|
// 监听当前页面是否按下了回车
|
handleKeyDown(event) {
|
if (event.key === "Enter") {
|
this.loginFun();
|
}
|
},
|
loginFun() {
|
if (!this.account) {
|
this.$message({
|
message: '请输入邮箱',
|
type: 'warning'
|
});
|
return
|
}
|
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
if (!emailPattern.test(this.account)) {
|
this.$message({
|
message: '请输入有效的邮箱地址',
|
type: 'warning'
|
});
|
return;
|
}
|
if (!this.pwd) {
|
this.$message({
|
message: '请输入密码',
|
type: 'warning'
|
});
|
return
|
}
|
if (!this.code) {
|
this.$message({
|
message: '请输入验证码',
|
type: 'warning'
|
});
|
return
|
}
|
if (!this.codeStr.match(new RegExp(this.code, "i"))) {
|
this.$message({
|
message: '验证码错误',
|
type: 'warning'
|
});
|
this.codeStr = generateVerificationCode()
|
return
|
}
|
login({
|
account: this.account,
|
pwd: CryptoJS.MD5(this.pwd).toString(),
|
type: 2
|
}).then((result) => {
|
localStorage.setItem('extra', result.data.extra);
|
this.$store.commit('SET_USERINFO', result.data);
|
this.$router.push({ path: '/home' });
|
}).catch(() => {
|
this.code = ''
|
this.codeStr = generateVerificationCode()
|
});
|
}
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
.bgcolor1 {
|
background: #014099;
|
color: #FFFFFF;
|
}
|
|
.color1 {
|
color: #3B3F56;
|
}
|
|
.content {
|
position: relative;
|
background-image: url("../assets/img/loginBg.png");
|
background-size: 100% 100%;
|
height: 100%;
|
width: 100%;
|
}
|
|
.login_box {
|
position: absolute;
|
top: 50%;
|
right: 178px;
|
transform: translateY(-50%);
|
width: 535px;
|
height: 612px;
|
background: #FFFFFF;
|
border-radius: 11px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.text_box {
|
width: 352px;
|
background: #F9F9F9;
|
border-radius: 6px;
|
border: 1px solid #DFDFDF;
|
|
.code {
|
padding: 19px 0;
|
text-align: center;
|
flex-shrink: 0;
|
width: 80px;
|
height: 100%;
|
background: #014099;
|
border-radius: 6px;
|
font-weight: 400;
|
font-size: 16px;
|
color: #FFFFFF;
|
line-height: 16px;
|
}
|
}
|
|
|
::v-deep .el-input {
|
.el-input__inner {
|
background-color: transparent;
|
border: unset;
|
padding: 0;
|
height: unset;
|
line-height: 16px;
|
|
&::placeholder {
|
font-size: 14px; // 确保在此处设置
|
color: #999;
|
font-weight: 400;
|
}
|
}
|
|
.el-input__icon {
|
line-height: unset;
|
}
|
}
|
}
|
</style>
|
