<template>
|
<div class="login_box">
|
<div style="height: 150px; padding: 20px">
|
<!-- <img src="@/assets/images/cust_logo.png" /> -->
|
</div>
|
<div class="login_main">
|
<div class="siteTitleBox">振动监测平台</div>
|
<div style="width: 40%; min-width: 485px">
|
<div class="loginform">
|
<a-form
|
id="formLogin"
|
class="user-layout-login"
|
ref="formLogin"
|
:form="form"
|
@submit="handleSubmit"
|
>
|
<a-tabs
|
:activeKey="customActiveKey"
|
:tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
|
@change="handleTabClick"
|
>
|
<a-tab-pane key="tab1" tab="账号密码登录">
|
<a-alert
|
v-if="isLoginError"
|
type="error"
|
showIcon
|
style="margin-bottom: 24px"
|
:message="this.accountLoginErrMsg"
|
/>
|
<a-form-item>
|
<a-input
|
size="large"
|
type="text"
|
placeholder="请输入账号"
|
v-decorator="[
|
'account',
|
{
|
rules: [
|
{ required: true, message: '请输入帐户名' },
|
{ validator: handleUsernameOrEmail },
|
],
|
validateTrigger: 'change',
|
},
|
]"
|
>
|
<a-icon
|
slot="prefix"
|
type="user"
|
:style="{ color: 'rgba(0,0,0,.25)' }"
|
/>
|
</a-input>
|
</a-form-item>
|
|
<a-form-item>
|
<a-input
|
size="large"
|
type="password"
|
autocomplete="false"
|
placeholder="请输入密码"
|
v-decorator="[
|
'password',
|
{
|
rules: [{ required: true, message: '请输入密码' }],
|
validateTrigger: 'blur',
|
},
|
]"
|
>
|
<a-icon
|
slot="prefix"
|
type="lock"
|
:style="{ color: 'rgba(0,0,0,.25)' }"
|
/>
|
</a-input>
|
</a-form-item>
|
</a-tab-pane>
|
</a-tabs>
|
|
<a-form-item>
|
<a-checkbox
|
v-decorator="['rememberMe', { valuePropName: 'checked' }]"
|
>自动登录</a-checkbox
|
>
|
<!-- <router-link
|
:to="{ name: 'recover', params: { user: 'aaa' } }"
|
class="forge-password"
|
style="float: right"
|
>忘记密码</router-link> -->
|
<span class="forge-password" style="float: right">忘记密码</span>
|
</a-form-item>
|
|
<a-form-item style="margin-top: 24px">
|
<a-button
|
size="large"
|
type="primary"
|
htmlType="submit"
|
class="login-button"
|
:loading="state.loginBtn"
|
:disabled="state.loginBtn"
|
>登录</a-button
|
>
|
</a-form-item>
|
</a-form>
|
</div>
|
</div>
|
</div>
|
<div
|
style="
|
width: 100%;
|
padding: 20px;
|
position: absolute;
|
bottom: 0px;
|
color: #fff;
|
"
|
>
|
<div style="display: flex; justify-content: space-between">
|
<div>
|
<!-- <img src="@/assets/images/yiwei_logo.png" /> -->
|
</div>
|
<div>
|
网站备案号：
|
<a
|
target="_blank"
|
href="https://beian.miit.gov.cn/"
|
style="color: #fff"
|
>沪ICP备14049296号-2</a
|
>
|
|
<span>{{ siteversion }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapActions } from "vuex";
|
import store from "@/store";
|
|
export default {
|
name: "login",
|
components: {},
|
data() {
|
return {
|
customActiveKey: "tab1",
|
loginBtn: false,
|
// login type: 0 email, 1 username, 2 telephone
|
loginType: 0,
|
isLoginError: false,
|
form: this.$form.createForm(this),
|
state: {
|
time: 60,
|
loginBtn: false,
|
// login type: 0 email, 1 username, 2 telephone
|
loginType: 0,
|
smsSendBtn: false,
|
},
|
accountLoginErrMsg: "",
|
loginParams: [], // 登录参数
|
/**网站版本信息 */
|
siteversion: globalConfig.Site.version,
|
};
|
},
|
created() {},
|
methods: {
|
...mapActions(["Login", "Logout"]),
|
|
/**判断是用户名还是邮箱登录 */
|
handleUsernameOrEmail(rule, value, callback) {
|
const { state } = this;
|
const regex =
|
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
|
if (regex.test(value)) {
|
state.loginType = 0;
|
} else {
|
state.loginType = 1;
|
}
|
callback();
|
},
|
/**切换登录方式 目前只有一种 */
|
handleTabClick(key) {
|
this.isLoginError = false;
|
this.customActiveKey = key;
|
// this.form.resetFields()
|
},
|
/**登录 */
|
handleSubmit(e) {
|
e.preventDefault();
|
const {
|
form: { validateFields },
|
state,
|
customActiveKey,
|
Login,
|
} = this;
|
state.loginBtn = true;
|
const validateFieldsKey =
|
customActiveKey === "tab1"
|
? ["account", "password"]
|
: ["mobile", "captcha"];
|
validateFields(validateFieldsKey, { force: true }, (err, values) => {
|
this.loginParams = values;
|
|
if (!err) {
|
const loginParams = { ...values };
|
delete loginParams.account;
|
loginParams[!state.loginType ? "account" : "account"] =
|
values.account;
|
loginParams.password = values.password;
|
|
const loginData = {
|
SoftType: "",
|
SoftTag: "",
|
LoginName: "",
|
LoginPwd: "",
|
};
|
|
loginData.LoginName = values.account;
|
loginData.LoginPwd = values.password;
|
Login(loginData)
|
.then((res) => this.loginSuccess(res))
|
.catch((err) => this.requestFailed(err))
|
.finally(() => {
|
state.loginBtn = false;
|
});
|
} else {
|
setTimeout(() => {
|
state.loginBtn = false;
|
}, 600);
|
}
|
});
|
},
|
loginSuccess(res) {
|
// console.log(res, 252);
|
this.$router.push({ path: "/" });
|
this.isLoginError = false;
|
},
|
requestFailed(err) {
|
this.accountLoginErrMsg = err;
|
this.isLoginError = true;
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.login_main {
|
display: flex;
|
justify-content: space-between;
|
}
|
.siteTitleBox {
|
width: 60%;
|
height: 390px;
|
line-height: 390px;
|
text-align: center;
|
color: #fff;
|
text-shadow: 4px 8px 4px #333;
|
font-size: 130px;
|
font-family: emoji;
|
padding-left: 100px;
|
}
|
.login_box {
|
width: 100%;
|
height: 100%;
|
min-width: 1000px;
|
min-height: 500px;
|
background: url(../assets/images/loginbg.png) 0 bottom repeat-x;
|
background-size: cover;
|
overflow: auto;
|
}
|
.loginform {
|
width: 485px;
|
height: 390px;
|
margin: 0 auto;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(112, 112, 112, 1);
|
box-shadow: 0px 0px 10px rgb(0 0 0 / 16%);
|
opacity: 1;
|
border-radius: 30px;
|
padding: 20px 70px;
|
}
|
.user-layout-login .user-login-other {
|
text-align: left;
|
margin-top: 24px;
|
line-height: 22px;
|
}
|
.user-layout-login label {
|
font-size: 14px;
|
}
|
.user-layout-login .getCaptcha {
|
display: block;
|
width: 100%;
|
height: 40px;
|
}
|
.user-layout-login .forge-password {
|
font-size: 14px;
|
}
|
.user-layout-login button.login-button {
|
padding: 0 15px;
|
font-size: 16px;
|
height: 40px;
|
width: 100%;
|
}
|
.user-layout-login .user-login-other .item-icon {
|
font-size: 24px;
|
color: rgba(0, 0, 0, 0.2);
|
margin-left: 16px;
|
vertical-align: middle;
|
cursor: pointer;
|
transition: color 0.3s;
|
}
|
.user-layout-login .user-login-other .register {
|
float: right;
|
}
|
.user-layout-login .user-login-other:hover {
|
color: #1890ff;
|
}
|
</style>
|
