<template>
|
<div class="form-body">
|
<div class="website-logo">
|
<a href="/user.html#/index">
|
<div class="logo">
|
<img class="logo-size" src="https://auod-bucket-wms.oss-ap-southeast-2.aliyuncs.com/Upload/Site/logo.png" alt="">
|
</div>
|
</a>
|
</div>
|
<div class="row">
|
<div class="img-holder">
|
<div class="bg"></div>
|
<div class="info-holder">
|
<img src="/static/user/login/graphic1.svg" alt="">
|
</div>
|
</div>
|
<div ref="loginForm" class="form-holder">
|
<div class="form-content">
|
<div class="form-items">
|
<h3>澳德物流客户端登录</h3>
|
<!-- <h3>中科巨龙WMS SaaS系统登录</h3> -->
|
<p>请输入你的用户和密码</p>
|
<el-form v-model="loginForm">
|
<input v-model="loginForm.username" class="form-control" type="text" placeholder="请输入用户名" required>
|
<input v-model="loginForm.password" class="form-control" type="password" placeholder="请输入密码" required>
|
<span v-if="checkcode">
|
<input v-model="loginForm.verificationcode" class="form-control w-200 inline" type="text" placeholder="请输入验证码" required>
|
<img ref="codeimg" :src="codeImgData" class="valid-img">
|
</span>
|
<div class="form-button">
|
<el-button type="primary" icon="el-icon-yrt-wo" @click="handleLogin">用户登录</el-button>
|
<el-button type="text" icon="el-icon-yrt-icon21">忘记密码?</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Cookies from "js-cookie";
|
import AsyncValidator from "async-validator";
|
|
export default {
|
components: {},
|
data() {
|
return {
|
loginForm: {
|
userProductCode: "100000001",
|
username: "",
|
password: ""
|
},
|
loginRules: {
|
username: [
|
{ required: true, trigger: "blur", message: "用户名不能为空" }
|
],
|
password: [
|
{ required: true, trigger: "blur", message: "密码不能为空" }
|
],
|
verificationcode: [
|
{ required: true, trigger: "blur", message: "验证码必填" },
|
{ min: 5, max: 5, message: "验证码长度为5字符", trigger: "blur" }
|
]
|
},
|
passwordType: "password",
|
loading: false,
|
codeImgData: null, // 图片数据
|
// 显示验证码
|
checkcode: false,
|
// 登录过的用列表
|
userList: []
|
};
|
},
|
mounted() {
|
this.getVerificationCodeImg();
|
},
|
methods: {
|
// 登录验证
|
handleLogin() {
|
var the = this;
|
// 默认验证码
|
if (!this.checkcode) {
|
the.loginForm.verificationcode = "passd";
|
}
|
|
var schema = new AsyncValidator(this.loginRules);
|
schema.validate(this.loginForm, (err, res) => {
|
if (err) {
|
var msg = "";
|
err.forEach(item => {
|
msg += item.message + "<br/>";
|
});
|
this.$message.error({ dangerouslyUseHTMLString: true, message: msg });
|
} else {
|
this.loading = true;
|
var guid = this.common.getUserGuid();
|
var params = {
|
userProductCode: the.loginForm.userProductCode,
|
userName: the.loginForm.username,
|
userPwd: the.loginForm.password,
|
validateCode: the.loginForm.verificationcode,
|
guid: guid
|
};
|
this.autoLogin(params);
|
}
|
});
|
},
|
autoLogin(params) {
|
var url = "/api/auth/loginUser";
|
var callback = res => {
|
this.loading = false;
|
if (res.result) {
|
this.$message.success(res.msg);
|
Cookies.remove("needcheckCode");
|
this.$store
|
.dispatch("LoginByUsername", {
|
userInfo: res.data,
|
menuList: res.dynamic
|
})
|
.then(() => {
|
this.loading = false;
|
this.$router.push({ path: this.redirect || "/" });
|
})
|
.catch(() => {
|
this.loading = false;
|
});
|
|
// 记录已经登录过的账套
|
var isExist = this.userList.find(
|
item => item.userProductCode === params.userProductCode
|
);
|
if (!isExist) {
|
params.validateCode = "pass";
|
this.userList.push(params);
|
}
|
Cookies.set("userList", this.userList);
|
} else {
|
this.$message.error(res.msg);
|
var needcheckCode = Cookies.get("needcheckCode");
|
if (needcheckCode != null && needcheckCode !== "") {
|
needcheckCode = parseInt(needcheckCode) + 1;
|
Cookies.set("needcheckCode", needcheckCode);
|
if (needcheckCode >= 3) {
|
this.checkcode = true;
|
} else {
|
this.checkcode = false;
|
}
|
} else {
|
this.checkcode = false;
|
Cookies.set("needcheckCode", 1);
|
}
|
}
|
this.getVerificationCodeImg();
|
};
|
this.common.ajax(url, params, callback, this.$refs.loginForm);
|
},
|
// 获得验证码图片
|
getVerificationCodeImg() {
|
var needcheckCode = Cookies.get("needcheckCode");
|
if (needcheckCode >= 3) {
|
this.checkcode = true;
|
var the = this;
|
var guid = this.common.getUserGuid();
|
var url = "/api/auth/getValidateCode";
|
var data = { guid: guid };
|
var callback = function(res, textStatus) {
|
if (res.result) {
|
the.codeImgData = "data:image/png;base64," + res.data;
|
} else {
|
the.$message.error(res.msg);
|
}
|
};
|
|
this.common.ajax(url, data, callback, true);
|
} else {
|
this.checkcode = false;
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.form-body {
|
background-color: #fff;
|
height: 100vh;
|
> .row {
|
position: relative;
|
margin-left: 0;
|
margin-right: 0;
|
height: 100%;
|
}
|
.row {
|
display: -ms-flexbox;
|
display: flex;
|
-ms-flex-wrap: wrap;
|
flex-wrap: wrap;
|
margin-right: 0px;
|
margin-left: 0px;
|
}
|
}
|
.website-logo {
|
display: inline-block;
|
top: 50px;
|
left: initial;
|
right: 50px;
|
bottom: initial;
|
}
|
.website-logo {
|
display: inline-block;
|
top: 50px;
|
left: initial;
|
right: 50px;
|
bottom: initial;
|
position: fixed;
|
z-index: 1000;
|
}
|
@media (min-height: 700px) {
|
.img-holder {
|
position: fixed;
|
}
|
}
|
@media (max-height: 700px) {
|
.website-logo {
|
top: 20px;
|
right: 50px;
|
}
|
}
|
.img-holder {
|
display: inline-block;
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 550px;
|
min-height: 700px;
|
height: 100%;
|
overflow: hidden;
|
background-color: #fafafa;
|
padding: 60px;
|
text-align: center;
|
z-index: 999;
|
}
|
.img-holder .bg {
|
position: absolute;
|
opacity: 0.23;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
background-size: cover;
|
background-position: center;
|
z-index: -1;
|
}
|
.img-holder .bg {
|
opacity: 1;
|
background-image: none;
|
}
|
|
.img-holder .info-holder {
|
position: relative;
|
top: 50%;
|
-webkit-transform: translateY(-50%);
|
-moz-transform: translateY(-50%);
|
-ms-transform: translateY(-50%);
|
transform: translateY(-50%);
|
}
|
form {
|
display: block;
|
margin-top: 0em;
|
}
|
.form-holder {
|
margin-left: 550px;
|
}
|
.form-holder {
|
margin-left: 550px;
|
width: 100%;
|
}
|
.form-holder .form-content {
|
position: relative;
|
text-align: center;
|
display: -webkit-box;
|
display: -moz-box;
|
display: -ms-flexbox;
|
display: -webkit-flex;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 60px;
|
min-height: 100%;
|
}
|
.form-content {
|
background-color: #fff;
|
}
|
.form-content .form-items {
|
max-width: 340px;
|
text-align: left;
|
}
|
.form-content .form-items {
|
display: inline-block;
|
width: 100%;
|
max-width: 340px;
|
text-align: left;
|
-webkit-transition: all 0.4s ease;
|
transition: all 0.4s ease;
|
}
|
.form-content h3 {
|
color: #000;
|
text-align: left;
|
font-size: 24px;
|
font-weight: 900;
|
margin-bottom: 10px;
|
}
|
.form-content p {
|
color: #000;
|
text-align: left;
|
font-size: 18px;
|
font-weight: 300;
|
line-height: 20px;
|
margin-bottom: 30px;
|
}
|
.form-content .page-links {
|
margin-bottom: 34px;
|
}
|
.form-content form {
|
margin-bottom: 58px;
|
}
|
|
.form-content .form-button {
|
margin-top: 30px;
|
margin-bottom: 25px;
|
}
|
.form-content .form-button .ibtn {
|
background-color: #0093ff;
|
color: #fff;
|
-webkit-box-shadow: 0 0 0 rgba(80, 182, 255, 0.31);
|
box-shadow: 0 0 0 rgba(80, 182, 255, 0.31);
|
border-radius: 6px;
|
border: 0;
|
padding: 6px 28px;
|
font-size: 14px;
|
font-weight: 700;
|
text-decoration: none;
|
cursor: pointer;
|
margin-right: 10px;
|
outline: none;
|
-webkit-transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.16);
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0.16);
|
}
|
|
*,
|
::after,
|
::before {
|
box-sizing: border-box;
|
}
|
|
input,
|
textarea,
|
select,
|
meter,
|
progress {
|
-webkit-writing-mode: horizontal-tb;
|
&:-webkit-autofill {
|
box-shadow: 0 0 0px 1000px #f7f7f7 inset !important;
|
-webkit-text-fill-color: #333 !important;
|
}
|
}
|
input,
|
textarea,
|
select {
|
text-rendering: auto;
|
color: initial;
|
letter-spacing: normal;
|
word-spacing: normal;
|
text-transform: none;
|
text-indent: 0px;
|
text-shadow: none;
|
display: inline-block;
|
text-align: start;
|
margin: 0em;
|
font: 400 13.3333px Arial;
|
}
|
input {
|
-webkit-appearance: textfield;
|
background-color: white;
|
-webkit-rtl-ordering: logical;
|
cursor: text;
|
padding: 1px;
|
border-width: 2px;
|
border-style: inset;
|
border-color: initial;
|
border-image: initial;
|
}
|
button,
|
input,
|
optgroup,
|
select,
|
textarea {
|
margin: 0;
|
font-family: inherit;
|
font-size: inherit;
|
line-height: inherit;
|
}
|
button,
|
input {
|
overflow: visible;
|
}
|
.form-control {
|
display: block;
|
font-size: 1rem;
|
line-height: 1.5;
|
background-clip: padding-box;
|
}
|
.form-content input {
|
width: 100%;
|
padding: 9px 20px;
|
padding-top: 9px;
|
padding-right: 20px;
|
padding-bottom: 9px;
|
padding-left: 20px;
|
text-align: left;
|
outline: 0;
|
border-radius: 6px;
|
font-size: 15px;
|
font-weight: 300;
|
-webkit-transition: all 0.3s ease 0s;
|
transition: all 0.3s ease 0s;
|
margin-bottom: 14px;
|
border: 1px solid rgba(0, 149, 255, 0);
|
background-color: #f7f7f7;
|
color: #000000;
|
}
|
.form-content input:hover,
|
.form-content input:focus {
|
border: 1px solid #0093ff;
|
color: #000000;
|
background-color: #fff;
|
&:-webkit-autofill {
|
box-shadow: 0 0 0px 1000px #fff inset !important;
|
-webkit-text-fill-color: #333 !important;
|
}
|
}
|
.valid-img {
|
border: 1px solid rgb(102, 102, 102);
|
height: 35px;
|
width: 130px;
|
vertical-align: middle;
|
}
|
</style>
|
