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.
780 lines
21 KiB
780 lines
21 KiB
<template> |
|
<div v-loading="this.$store.getters.loading" class="newlogin_container"> |
|
<div class="newlogin_container_tb"> |
|
<img style="" src="../../assets/img/login/img.png" alt="" /> |
|
</div> |
|
<div class="newlogin_login_container"> |
|
<div class="newlogin_login_logo"> |
|
<img style="" src="../../assets/img/login/logo.png" alt="" /> |
|
</div> |
|
<div class="newlogin_login_title">欢迎使用中品调度管理平台</div> |
|
<div class="newlogin_login_from_container"> |
|
<el-form ref="form" :model="loginForm"> |
|
<el-form-item> |
|
<el-input |
|
v-model="loginForm.username" |
|
placeholder="请输入用户名" |
|
|
|
oninput="if(value.length>11)value=value.slice(0,11)" type="Number" onkeyup="this.value = this.value.replace(/[^\d]/g,'');" |
|
> |
|
<img |
|
slot="prefix" |
|
src="@/assets/img/login/yhm.png" |
|
style="width: 20px; height: 20px" |
|
/> |
|
</el-input> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-input |
|
v-show="swich == 1" |
|
class="password" |
|
type="password" |
|
show-password |
|
v-model="loginForm.password" |
|
placeholder="请输入密码" |
|
> |
|
<img |
|
slot="prefix" |
|
src="@/assets/img/login/mm.png" |
|
style="width: 20px; height: 20px" |
|
/> |
|
</el-input> |
|
<el-input |
|
v-show="swich == 2" |
|
class="verifyCode" |
|
v-model="loginForm.verifyCode" |
|
placeholder="请输入密码" |
|
> |
|
<span slot="suffix">获取验证码</span> |
|
</el-input> |
|
</el-form-item> |
|
<div class="login_switch"> |
|
<span>验证码登录</span> |
|
<span>二维码登录</span> |
|
</div> |
|
<el-form-item> |
|
<el-button |
|
:loading="loading" |
|
@click="handleLogin" |
|
class="newlogin_login_from_butten" |
|
type="primary" |
|
>登录</el-button |
|
> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
</div> |
|
<el-dialog |
|
:visible.sync="companySelectDialog" |
|
:close-on-click-modal="false" |
|
:close-on-press-escape="false" |
|
width="500px" |
|
title="请选择登录企业" |
|
> |
|
<!-- <div class="login-company">请选择登录企业</div> --> |
|
<el-table :data="companyList"> |
|
<el-table-column |
|
property="companyName" |
|
label="公司名称" |
|
width="200" |
|
/> |
|
<el-table-column property="parentMark" label="公司性质"> |
|
<template slot-scope="{ row }"> |
|
<el-tag |
|
v-if="row.parentMark === 0" |
|
effect="dark" |
|
size="normal" |
|
>主体公司</el-tag |
|
> |
|
<el-tag v-else effect="dark" type="info" size="normal" |
|
>分公司</el-tag |
|
> |
|
</template> |
|
</el-table-column> |
|
<el-table-column property="name" label="操作"> |
|
<template slot-scope="scope"> |
|
<el-button |
|
type="text" |
|
size="small" |
|
@click="loginAgain(scope.row.companyId)" |
|
>登录</el-button |
|
> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script> |
|
import { sendManagerLoginSms, loginDispatch } from "@/api/identity/user"; |
|
import markApi from "@/api/dict/oilDicMark"; |
|
// import newIndexVue from "./newIndex.vue"; |
|
export default { |
|
components: { |
|
// newIndexVue, |
|
}, |
|
name: "Login", |
|
data() { |
|
return { |
|
companySelectDialog: false, |
|
companyList: [], |
|
swich: 1, |
|
verifyCodeToken: null, // 验证码发送令牌 |
|
activeName: "first", |
|
checked: false, |
|
loginForm: { |
|
username: "", |
|
networkId: "", |
|
password: "", |
|
verifyCode: "" |
|
}, |
|
sendSmsState: false, // 是否发送验证码 |
|
sendTime: 10, // 验证码发送间隔 |
|
passwordType: "password", |
|
smsInterval: null, |
|
capsTooltip: false, |
|
loading: false, |
|
showDialog: false, |
|
// 滑块验证图片 |
|
verifyImg: [ |
|
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3395864961,1527657332&fm=26&gp=0.jpg", |
|
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1384621569,26460893&fm=26&gp=0.jpg", |
|
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1792020650,1788455602&fm=26&gp=0.jpg", |
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3641201435,3528700244&fm=26&gp=0.jpg", |
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=175284648,2825480163&fm=26&gp=0.jpg", |
|
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1799863833,1998296432&fm=26&gp=0.jpg", |
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=108505343,1242322480&fm=26&gp=0.jpg", |
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3192751729,2284926480&fm=26&gp=0.jpg", |
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3807748365,3630410488&fm=26&gp=0.jpg" |
|
], |
|
// 滑块验证 |
|
verifyDialog: false, |
|
// 是否强制验证 |
|
needVerify: false, |
|
// 是否验证成功 |
|
verifyState: false, |
|
redirect: "" |
|
}; |
|
}, |
|
watch: { |
|
$route: { |
|
handler: function(route) { |
|
const query = route.query; |
|
if (query) { |
|
this.redirect = query.redirect; |
|
} |
|
}, |
|
immediate: true |
|
}, |
|
sendTime: function(newVal, oldVal) { |
|
if (newVal === 0) { |
|
clearInterval(this.smsInterval); |
|
this.sendSmsState = false; |
|
} |
|
} |
|
}, |
|
created() { |
|
// require('./css/index.css'); |
|
// let a = document.getElementsByTagName('html'); |
|
// a[0].style.fontSize= '16'+'px' |
|
console.log("111", localStorage.getItem("size")); |
|
this.windowChange(); |
|
if (localStorage.getItem("size")) { |
|
let a = document.getElementsByTagName("html"); |
|
a[0].style.fontSize = localStorage.getItem("size"); |
|
return; |
|
} |
|
localStorage.setItem( |
|
"size", |
|
getComputedStyle(window.document.documentElement)["font-size"] |
|
); |
|
}, |
|
mounted() { |
|
if (this.loginForm.username === "") { |
|
this.$refs.username.focus(); |
|
} else if (this.loginForm.password === "") { |
|
this.$refs.password.focus(); |
|
} |
|
}, |
|
destroyed() { |
|
console.log("baibai1"); |
|
}, |
|
methods: { |
|
pagerem(width) { |
|
let a = document.getElementsByTagName("html")[0]; |
|
// if(width>){ |
|
|
|
// } |
|
}, |
|
windowChange(callBack) { |
|
let taht = this; |
|
window.addEventListener("resize", res => { |
|
console.log(res.currentTarget.innerWidth); |
|
}); |
|
}, |
|
handleClick(tab, event) {}, |
|
checkCapslock({ shiftKey, key } = {}) { |
|
if (key && key.length === 1) { |
|
if ( |
|
(shiftKey && key >= "a" && key <= "z") || |
|
(!shiftKey && key >= "A" && key <= "Z") |
|
) { |
|
this.capsTooltip = true; |
|
} else { |
|
this.capsTooltip = false; |
|
} |
|
} |
|
if (key === "CapsLock" && this.capsTooltip === true) { |
|
this.capsTooltip = false; |
|
} |
|
}, |
|
sendSms() { |
|
// 发送验证码 |
|
if (!this.loginForm.username) { |
|
this.$message.error("请输入手机号"); |
|
} |
|
sendManagerLoginSms(this.loginForm.username).then(res => { |
|
this.$message.success(res.msg); |
|
// 发送成功，修改发送状态 |
|
this.sendSmsState = true; |
|
this.verifyCodeToken = res.data.verifyCodeToken; |
|
this.sendTime = 60; |
|
this.smsInterval = setInterval(() => { |
|
this.sendTime--; |
|
}, 1000); |
|
}); |
|
}, |
|
showPwd() { |
|
if (this.passwordType === "password") { |
|
this.passwordType = ""; |
|
} else { |
|
this.passwordType = "password"; |
|
} |
|
this.$nextTick(() => { |
|
this.$refs.password.focus(); |
|
}); |
|
}, |
|
handleLogin() { |
|
// 判断公司是否输入 |
|
// if (!this.loginForm.networkId) { |
|
// this.$message.error('请输入公司') |
|
// return |
|
// } |
|
// if (this.needVerify && !this.verifyState) { |
|
// // 需要验证并且验证没通过 |
|
// this.$message.error('请滑动验证码进行验证') |
|
// return |
|
// } |
|
if (!this.loginForm.username) { |
|
this.$message.error("请输入手机号"); |
|
return; |
|
} |
|
if (!this.loginForm.password) { |
|
this.$message.error("请输入密码"); |
|
return; |
|
} |
|
this.loading = true; |
|
this.loginForm.checked = this.checked; |
|
this.$store |
|
.dispatch("user/login", this.loginForm) |
|
.then( async res => { |
|
if (res && res.code === 42014) { |
|
loginDispatch(this.loginForm.username).then(res => { |
|
this.companyList = res.data; |
|
this.companySelectDialog = true; |
|
return; |
|
}); |
|
} |
|
if (res && res.data.state === 1) { |
|
this.needVerify = true; |
|
this.verifyState = false; |
|
this.verifyDialog = true; |
|
return; |
|
} |
|
// await this.$store.dispatch('user/getInfo') |
|
this.shareLogin(); |
|
}) |
|
.catch(() => { |
|
this.loading = false; |
|
}); |
|
}, |
|
loginAgain(companyId) { |
|
this.loginForm.networkId = companyId; |
|
console.log(this.loginForm); |
|
this.handleLogin(); |
|
}, |
|
handleLoginSms() { |
|
this.loading = true; |
|
this.loginForm.verifyCodeToken = this.verifyCodeToken; |
|
this.$store |
|
.dispatch("user/loginSms", this.loginForm) |
|
.then(() => { |
|
this.shareLogin(); |
|
}) |
|
.catch(() => { |
|
this.loading = false; |
|
}); |
|
}, |
|
shareLogin() { |
|
markApi.getAllMark().then(markRes => { |
|
this.$store.commit("global/SET_MARK", markRes.data); |
|
this.$router.push({ |
|
path: this.redirect || "/", |
|
query: this.otherQuery |
|
}); |
|
this.loading = false; |
|
}); |
|
}, |
|
onSuccess(detail) { |
|
this.$message.success("验证通过"); |
|
this.verifyDialog = false; |
|
this.needVerify = false; |
|
this.verifyState = true; |
|
this.loginForm.verifyCode = detail; |
|
this.handleLogin(); |
|
}, |
|
onAgain() { |
|
// 非人为验证触发 |
|
} |
|
} |
|
}; |
|
</script> |
|
<style scoped> |
|
@import url("./css/index.css"); |
|
</style> |
|
<style lang="scss"> |
|
/* 修复input 背景不协调 和光标变色 */ |
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ |
|
|
|
$bg: #fff; |
|
$light_gray: #2d3a4b; |
|
$cursor: #5a37bc; |
|
$main_color: #5a37bc; |
|
|
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { |
|
.login-container .el-input input { |
|
color: $cursor; |
|
} |
|
} |
|
|
|
/* reset element-ui css */ |
|
.login-container { |
|
.el-input { |
|
width: 75%; |
|
|
|
.el-input__inner::placeholder { |
|
color: #666; |
|
} |
|
|
|
input { |
|
background: transparent; |
|
border: 0px; |
|
-webkit-appearance: none; |
|
border-radius: 0px; |
|
padding: 6px 5px 6px 8px; |
|
color: $light_gray; |
|
height: 30px; |
|
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 $main_color; |
|
background: #fff; |
|
// border-radius: 500px; |
|
color: #454545; |
|
|
|
.el-form-item__content { |
|
// line-height: 30px; |
|
} |
|
} |
|
|
|
@media only screen and (max-width: 1295px) { |
|
input { |
|
height: 30px; |
|
line-height: 24px; |
|
font-size: 0.8rem; |
|
} |
|
|
|
.el-form-item { |
|
margin-bottom: 40px; |
|
} |
|
} |
|
} |
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
$bg: #2d3a4b; |
|
$main_color: #05ffff; |
|
$dark_gray: #889aa4; |
|
$light_gray: #2d3a4b; |
|
|
|
.el-input-group__append { |
|
background-color: $dark_gray !important; |
|
} |
|
|
|
.el-form-item { |
|
margin-bottom: 40px; |
|
} |
|
|
|
.login-container { |
|
// min-height: 100%; |
|
width: 100%; |
|
height: 100%; |
|
// background-color: $bg; |
|
overflow: hidden; |
|
|
|
// padding-top: 15%; |
|
.login-bg { |
|
position: absolute; |
|
z-index: -1; |
|
|
|
img { |
|
background-size: cover; |
|
max-width: 58.65vw; |
|
max-height: 100vh; |
|
min-height: 100vh; |
|
vertical-align: bottom; |
|
} |
|
} |
|
|
|
.el-col-8 { |
|
position: relative; |
|
max-height: 500px; |
|
max-width: 450px; |
|
} |
|
|
|
@media only screen and (max-width: 1296px) { |
|
.el-col-8 { |
|
// background: #fff; |
|
margin-top: 9%; |
|
position: relative; |
|
max-width: 300px; |
|
max-height: 650px; |
|
} |
|
} |
|
|
|
.center-left-col { |
|
border-radius: 6px 0 0 6px; |
|
|
|
img { |
|
position: relative; |
|
pointer-events: none; |
|
z-index: 1; |
|
user-select: none; |
|
height: 108%; |
|
left: -4%; |
|
top: -4%; |
|
} |
|
} |
|
|
|
.center-right-col { |
|
border-radius: 0 6px 6px 0; |
|
|
|
.login-tabs { |
|
width: 80%; |
|
margin: 0 auto; |
|
padding: 0 2rem; |
|
} |
|
|
|
@media only screen and (max-width: 1295px) { |
|
.el-col { |
|
// background: #fff; |
|
margin-top: 3%; |
|
position: relative; |
|
max-width: 250px; |
|
max-height: 250px; |
|
} |
|
|
|
.center-left-col { |
|
img { |
|
position: relative; |
|
pointer-events: none; |
|
z-index: 1; |
|
user-select: none; |
|
height: 50%; |
|
left: -4%; |
|
top: -4%; |
|
} |
|
} |
|
|
|
.login-tabs { |
|
width: 100%; |
|
margin: 0 auto; |
|
padding: 0 1rem; |
|
} |
|
} |
|
} |
|
|
|
.login-form { |
|
position: relative; |
|
max-width: 100%; |
|
padding-top: 1rem; |
|
z-index: 2; |
|
overflow: hidden; |
|
|
|
p.forget { |
|
// padding: 0 10px; |
|
font-size: 14px; |
|
color: #666; |
|
} |
|
|
|
.el-button { |
|
padding: 16px 0; |
|
margin-top: 5px; |
|
} |
|
|
|
@media only screen and (max-width: 1295px) { |
|
.el-button { |
|
// padding: 10px 0; |
|
margin-top: 10px; |
|
} |
|
} |
|
} |
|
|
|
.tips { |
|
font-size: 14px; |
|
color: #fff; |
|
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; |
|
text-align: center; |
|
padding: 1.5rem 0 0.6rem; |
|
|
|
img { |
|
pointer-events: none; |
|
user-select: none; |
|
} |
|
|
|
.title { |
|
font-size: 26px; |
|
color: $light_gray; |
|
margin: 0px auto 40px auto; |
|
text-align: center; |
|
font-weight: bold; |
|
} |
|
|
|
.set-language { |
|
color: #fff; |
|
position: absolute; |
|
top: 3px; |
|
font-size: 18px; |
|
right: 0px; |
|
cursor: pointer; |
|
} |
|
} |
|
|
|
.over-border { |
|
height: 106%; |
|
width: 200%; |
|
left: -96%; |
|
top: -3%; |
|
position: absolute; |
|
border: $main_color 1px solid; |
|
box-shadow: $main_color 0 0 5px; |
|
border-radius: 10px; |
|
} |
|
|
|
@media only screen and (max-width: 1295px) { |
|
.oil-logo { |
|
position: relative; |
|
padding-top: 2rem; |
|
padding-left: 0; |
|
} |
|
|
|
.admin-name { |
|
} |
|
|
|
.el-input { |
|
input { |
|
line-height: 24px; |
|
} |
|
} |
|
|
|
.el-col { |
|
margin-top: 9%; |
|
// max-width: 327px; |
|
max-height: 360px; |
|
} |
|
|
|
.el-form-item--medium { |
|
.el-form-item__content { |
|
line-height: 24px; |
|
font-size: 1rem; |
|
} |
|
} |
|
|
|
.over-border { |
|
display: none; |
|
} |
|
|
|
.login-tabs { |
|
padding: 0 1rem; |
|
} |
|
|
|
.login-form { |
|
padding-top: 0rem; |
|
} |
|
|
|
.title-container { |
|
padding: 1rem 0 0rem; |
|
|
|
img { |
|
pointer-events: none; |
|
user-select: none; |
|
height: 2.2rem; |
|
} |
|
} |
|
} |
|
|
|
.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 scoped> |
|
.login-container >>> .el-form-item--medium .el-form-item__content { |
|
/* line-height: 26px !important; */ |
|
} |
|
|
|
.login-sms-container { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
} |
|
|
|
.sms-button.el-button { |
|
margin-top: 0 !important; |
|
/* padding: 10px 20px !important; */ |
|
/* line-height: 20px; */ |
|
} |
|
|
|
.tar { |
|
text-align: right; |
|
} |
|
|
|
.verify-container >>> .el-dialog__header { |
|
display: none; |
|
} |
|
|
|
/* .el-tabs >>> .el-tabs__item:hover { |
|
color: #05FFFF; |
|
cursor: pointer; |
|
} */ |
|
.el-tabs >>> .el-tabs__item { |
|
color: #5a37bc; |
|
cursor: pointer; |
|
} |
|
|
|
/* .sms-button */ |
|
.el-tabs >>> .el-tabs__item.is-active { |
|
color: #5a37bc; |
|
/* font-weight:bold; */ |
|
font-size: 16px; |
|
} |
|
|
|
.el-tabs >>> .el-tabs__active-bar { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
height: 2px; |
|
background-color: #5a37bc; |
|
z-index: 1; |
|
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); |
|
list-style: none; |
|
} |
|
|
|
.el-checkbox >>> .el-checkbox__input.is-checked + .el-checkbox__label { |
|
color: #5a37bc; |
|
} |
|
|
|
.el-checkbox >>> .el-checkbox__input.is-checked .el-checkbox__inner { |
|
background-color: #5a37bc; |
|
border-color: #5a37bc; |
|
} |
|
|
|
/* 新样式 */ |
|
.login-pannel { |
|
min-width: 41%; |
|
padding: 3rem 0; |
|
padding-left: 1.5rem; |
|
min-height: 100vh; |
|
position: absolute; |
|
right: 0; |
|
} |
|
|
|
.oil-logo { |
|
position: absolute; |
|
top: 11vh; |
|
} |
|
|
|
.admin-name { |
|
color: #5a37bc; |
|
position: absolute; |
|
font-size: 26px; |
|
font-weight: 400; |
|
top: 26vh; |
|
} |
|
|
|
.login-tabs-div { |
|
position: absolute; |
|
width: 80%; |
|
top: 35vh; |
|
max-width: 480px; |
|
} |
|
|
|
.upper-img { |
|
position: absolute; |
|
} |
|
|
|
.login-bg.upper-img.upper-img img { |
|
position: absolute; |
|
height: 71vh; |
|
width: 53.66vw; |
|
min-width: inherit; |
|
min-height: inherit; |
|
margin-top: 14vh; |
|
min-width: inherit; |
|
min-height: inherit; |
|
margin-left: 8vw; |
|
} |
|
</style>
|
|
|