You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
520 lines
14 KiB
520 lines
14 KiB
<template>
|
|
<div>
|
|
<header id="header">
|
|
<div class="containers">
|
|
<!-- id="logo"class="pull-left" -->
|
|
<div>
|
|
<a :href="portalUrl"><img src="@/assets/img/logos.png" style="margin:0px!important;width:126px;height:58px" alt="" title="" /></a>
|
|
</div>
|
|
<div style='display:flex;align-items:center;height:80px;'>
|
|
<img style="margin-right:10px!important;" src="@/assets/img/dianhua.png" alt="">
|
|
<p style="font-size: 18px;font-weight: bold;color: #595959;margin:0">咨询热线：010-56682165</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main id="main" >
|
|
<div class="login-form">
|
|
|
|
<p style="font-size: 26px;width: 200;margin:20px auto 40px auto;text-align: center;color: #0969bd;font-weight: 800;">系统登录</p>
|
|
<el-form ref="loginForm" :rules="nameRules" :model="loginForm"
|
|
label-width="0">
|
|
<el-form-item prop="username" style="margin:20px 0">
|
|
<el-input v-model="loginForm.username"
|
|
auto-complete="off"
|
|
placeholder="请输入账号"
|
|
@keyup.enter.native="handleLogin">
|
|
<img slot="prefix" src="/account.png" alt="" style="margin-top:8px">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password" style="margin:21px 0" >
|
|
<el-input :type="passwordType"
|
|
v-model="loginForm.password"
|
|
auto-complete="off"
|
|
placeholder="请输入密码"
|
|
@keyup.enter.native="handleLogin">
|
|
<img slot="prefix" src="/password.png" alt="" style="margin-top:8px">
|
|
<i slot="suffix" style="cursor:pointer" class="el-icon-view el-input__icon" @click="showPassword"/>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item >
|
|
<el-button :loading="loading" class="btn btn-primary btn-blue" style="width: 100%; margin:20px auto; font-size:20px;color: #ffff"
|
|
@click.native.prevent="handleLogin">登 录
|
|
</el-button>
|
|
</el-form-item>
|
|
<div style="display:flex;justify-content:space-between;font-size:16px;margin-top:-20px;margin-bottom: 20px;">
|
|
<!-- <div style="color: #0066EB;cursor:pointer" @click="regnewuser">注册新用户</div> -->
|
|
<a href="/retrieve" style="color: #0066EB!important;font-size: 16px!important;margin: 0;">找回密码?</a>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<footer id="footer" style="width:100%;line-height: 30px;padding:30px 0;margin-top:30px ;">
|
|
<div class="bottok" style="display:flex;text-align:left;line-height: 30px;width:1000px;margin-left: auto;margin-right: auto;justify-content: space-between;">
|
|
<div style="display:flex;align-items: center;width:590px;">
|
|
<p><a href="http://www.keyware.cn">关于我们</a></p>
|
|
<p><a href="http://www.keyware.cn">加入我们</a></p>
|
|
<p><a href="http://www.keyware.cn">招聘信息</a></p>
|
|
</div>
|
|
<div>
|
|
<img src="@/assets/pic/code.png">
|
|
</div>
|
|
|
|
<div >
|
|
<p style="margin-top: 20px!important;"><a href="http://www.keyware.cn">联系我们</a></p>
|
|
<p><a href="">咨询热线：13911064391</a></p>
|
|
<p><a href="">电邮：89705132@qq.com</a></p>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div style="text-align:center;margin-top: 20px;color: #ffffffad;">
|
|
京公网安备11011402054123号 京ICP备18018633号-3
|
|
</div>
|
|
|
|
|
|
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getCodeUserLogin} from "@/api/login";
|
|
import Cookie from "js-cookie";
|
|
import moment from "moment";
|
|
import store from "@/store";
|
|
|
|
export default {
|
|
name: "Login",
|
|
data() {
|
|
return {
|
|
loginForm: {
|
|
username: "",
|
|
mobile: "",
|
|
password: "",
|
|
rememberMe: false,
|
|
code: "",
|
|
uuid: ""
|
|
},
|
|
portalUrl: '',
|
|
cur: true, //true代表密码, false代表短信
|
|
sending: false,
|
|
sendDisabled: false,
|
|
loading: false,
|
|
timer: 0,
|
|
passwordType: "password",
|
|
redirect: undefined,
|
|
// name表单校验
|
|
nameRules: {
|
|
username: [
|
|
{ required: true, message: "用户名称不能为空", trigger: "blur" },
|
|
],
|
|
password: [
|
|
{ required: true, trigger: "blur", message: "密码不能为空" },
|
|
{ min: 6, max: 16, message: "长度在 6 到 20 个字符", trigger: "blur" }
|
|
],
|
|
},
|
|
// phone表单校验
|
|
phoneRules: {
|
|
mobile: [
|
|
{ required: true, message: "手机号码不能为空", trigger: "blur" },
|
|
{
|
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
|
message: "请输入正确的手机号码",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
code: [
|
|
{ required: true, message: "短信验证码不能为空", trigger: "blur" },
|
|
{
|
|
pattern: /^\d{6}$/,
|
|
message: "请输入正确的手机短信验证码",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
sendButtonText() {
|
|
if (this.timer === 0) {
|
|
return "发送验证码";
|
|
} else {
|
|
return `${this.timer}秒后重发`;
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
$route: {
|
|
handler: function (route) {
|
|
this.redirect = route.query && route.query.redirect;
|
|
},
|
|
immediate: true,
|
|
},
|
|
timer(num) {
|
|
if (num > 0) {
|
|
this.sendDisabled = true;
|
|
setTimeout(() => {
|
|
this.timer = --num;
|
|
}, 1000);
|
|
} else {
|
|
this.sendDisabled = false;
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
const lastSendTime = Cookie.get("last-send-time");
|
|
if (lastSendTime) {
|
|
const timer = 60 - moment().diff(moment(lastSendTime), "seconds");
|
|
this.timer = timer > 0 ? timer : 0;
|
|
}
|
|
this.getClientConfigKey("website.homepage").then((response) => {
|
|
this.portalUrl = response.msg;
|
|
});
|
|
this.getClientConfigKey("website.domain").then((response) => {
|
|
if(response.msg && response.msg != '') {
|
|
store.commit('SET_WEBSITE_DOMAIN', response.msg);
|
|
}
|
|
});
|
|
this.getCookie();
|
|
},
|
|
|
|
methods: {
|
|
showPassword() {this.passwordType == ''? (this.passwordType = 'password'): (this.passwordType = '') },
|
|
getCode() {
|
|
// getCodeImg().then(res => {
|
|
// this.codeUrl = "data:image/gif;base64," + res.img;
|
|
// this.loginForm.uuid = res.uuid;
|
|
// });
|
|
},
|
|
getCookie() {
|
|
const username = Cookie.get("username");
|
|
const password = Cookie.get("password");
|
|
const rememberMe = Cookie.get('rememberMe')
|
|
this.loginForm = {
|
|
username: username === undefined ? this.loginForm.username : username,
|
|
password: password === undefined ? this.loginForm.password : decrypt(password),
|
|
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
|
};
|
|
},
|
|
onSendSms() {
|
|
this.loginWay = false;
|
|
this.$refs.loginForm.validateField("mobile", (err) => {
|
|
if (!this.sending && !err) {
|
|
this.sending = true;
|
|
getCodeUserLogin(this.loginForm.mobile)
|
|
.then(res => {
|
|
this.loginForm.uuid = res.uuid;
|
|
this.$message.success("短信发送成功，请注意查收");
|
|
Cookie.set("last-send-time", new Date());
|
|
this.timer = 60;
|
|
})
|
|
.catch((e) => {
|
|
// this.$message.error("网络异常");
|
|
console.log(e);
|
|
})
|
|
.finally(() => (this.sending = false));
|
|
}
|
|
});
|
|
},
|
|
showPwd() {
|
|
this.loginWay = true;
|
|
if (this.passwordType === "password") {
|
|
this.passwordType = "";
|
|
} else {
|
|
this.passwordType = "password";
|
|
}
|
|
this.$nextTick(() => {
|
|
this.$refs.password.focus();
|
|
});
|
|
},
|
|
handleLogin() {
|
|
if (this.cur) {
|
|
this.handleNameLogin();
|
|
} else {
|
|
this.handlePhoneLogin();
|
|
}
|
|
},
|
|
handleNameLogin() {
|
|
this.$refs.loginForm.validate(valid => {
|
|
if (valid) {
|
|
// console.log('this.loginForm',this.loginForm)
|
|
this.loading = true;
|
|
if (this.loginForm.rememberMe) {
|
|
Cookie.set("username", this.loginForm.username, {expires: 30});
|
|
Cookie.set("password", encrypt(this.loginForm.password), {expires: 30});
|
|
Cookie.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
|
|
} else {
|
|
Cookie.remove("username");
|
|
Cookie.remove("password");
|
|
Cookie.remove('rememberMe');
|
|
}
|
|
this.$store.dispatch("NameLogin", this.loginForm).then(res => {
|
|
// console.log('登录成功',res)
|
|
if(res.code==200){
|
|
this.$router.push({path: this.redirect || "/"}).catch(() => {});
|
|
}else{
|
|
this.$message.error('用户不存在/密码错误');
|
|
this.loading = false;
|
|
}
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
this.getCode();
|
|
});
|
|
}
|
|
});
|
|
},
|
|
handlePhoneLogin() {
|
|
this.$refs.loginForm.validate(valid => {
|
|
if (valid) {
|
|
this.loading = true;
|
|
if (this.loginForm.rememberMe) {
|
|
Cookie.set("username", this.loginForm.username, {expires: 30});
|
|
Cookie.set("password", encrypt(this.loginForm.password), {expires: 30});
|
|
Cookie.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
|
|
} else {
|
|
Cookie.remove("username");
|
|
Cookie.remove("password");
|
|
Cookie.remove('rememberMe');
|
|
}
|
|
this.$store.dispatch("PhoneLogin", this.loginForm).then(() => {
|
|
this.$router.push({path: this.redirect || "/"}).catch(() => {
|
|
});
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
this.getCode();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/* 修复input 背景不协调 和光标变色 */
|
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
|
$bg: #fff;
|
|
$light_gray: #021826;
|
|
$cursor: #021826;
|
|
|
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
.login-container .el-input input {
|
|
color: $cursor;
|
|
}
|
|
}
|
|
.containers{
|
|
width: 1300px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
/* reset element-ui css */
|
|
.login-container {
|
|
.el-input {
|
|
display: inline-block;
|
|
height: 47px;
|
|
width: 85%;
|
|
|
|
input {
|
|
background: transparent;
|
|
border: 0px;
|
|
-webkit-appearance: none;
|
|
border-radius: 0px;
|
|
padding: 12px 5px 12px 15px;
|
|
color: $light_gray;
|
|
height: 47px;
|
|
caret-color: $cursor;
|
|
|
|
&:-webkit-autofill {
|
|
box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
-webkit-text-fill-color: $cursor !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-form-item {
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 5px;
|
|
color: #454545;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
$bg: #fff;
|
|
$dark_gray: #021826;
|
|
$light_gray: #444444;
|
|
.login-form {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 13px 0 rgba(9,39,77,.28);
|
|
// height: 350px;
|
|
margin:106px auto;
|
|
padding: 20px;
|
|
width: 380px;
|
|
}
|
|
.elbtn>>>.el-button {
|
|
background: linear-gradient(45deg,#2978ee,#0066eb)!important;
|
|
border: none!important;
|
|
border-radius: 6px!important;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
height: 50px;
|
|
margin-top: 20px;
|
|
width: 340px!important;
|
|
}
|
|
.login-container {
|
|
min-height: 100%;
|
|
width: 100%;
|
|
background-color: $bg;
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.tips {
|
|
font-size: 14px;
|
|
color: #444;
|
|
margin-bottom: 10px;
|
|
|
|
span {
|
|
&:first-of-type {
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.svg-container {
|
|
padding: 6px 5px 6px 15px;
|
|
color: $dark_gray;
|
|
vertical-align: middle;
|
|
width: 30px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.title-container {
|
|
position: relative;
|
|
|
|
.title {
|
|
font-size: 26px;
|
|
color: $light_gray;
|
|
margin: 0px auto 40px auto;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.show-pwd {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 7px;
|
|
font-size: 16px;
|
|
color: $dark_gray;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.thirdparty-button {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 6px;
|
|
}
|
|
|
|
@media only screen and (max-width: 470px) {
|
|
.thirdparty-button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
a {
|
|
color: #444;
|
|
margin: 50px;
|
|
}
|
|
|
|
.login_header {
|
|
margin-bottom: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.login_header span {
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.Cbody_item {
|
|
border: 0px solid #999;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.active {
|
|
color: #444;
|
|
padding-bottom: 10px;
|
|
border-bottom: 4px solid #0969bd;
|
|
font-weight: bold;
|
|
}
|
|
#login .login-menu .curr {
|
|
font-weight: bold;
|
|
position: relative;
|
|
}
|
|
#login .login-menu .curr:after {
|
|
content: " ";
|
|
width: 210px;
|
|
height: 3px;
|
|
background: #0969bd;
|
|
position: absolute;
|
|
bottom: -13px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
</style>
|
|
|
|
<style type="text/css">
|
|
#header {
|
|
position: relative;
|
|
padding: 0;
|
|
height: 84px;
|
|
transition: all 0.5s;
|
|
z-index: 997;
|
|
background: #fff;
|
|
box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
#header #logo h1 {
|
|
position: absolute;
|
|
font-size: 28px;
|
|
margin: 6px 0 0 0;
|
|
padding: 0;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
top: -20px;
|
|
}
|
|
|
|
#header #logo h1 a {
|
|
line-height: 1;
|
|
display: inline-block;
|
|
color: #a4a2a3;
|
|
}
|
|
.bottok p{
|
|
margin:0!important;
|
|
|
|
}
|
|
.bottok a{
|
|
color:#FFFFFF
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|