<template>
|
<div class="box-card" v-loading="loading"
|
element-loading-text="正在加载"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
style="width: 100%">>
|
<div class="center-box">
|
<div class="bg-left">
|
<!--<img-->
|
<!--alt=""-->
|
<!--class="img-size-left"-->
|
<!--src="../assets/login/login_left-bg.png"-->
|
<!--/>-->
|
</div>
|
<div class="bg-right">
|
<div class="login-title">聊城市智慧交通辅助决策平台</div>
|
|
<div class="login-from mt36" id="transBox">
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<div class="sm-bg-box">
|
<div class="placeholder"></div>
|
<div class="flex ju-sb col-g mt60">
|
<div :class="inFlag ? 'fz24' : 'fz20'">
|
账号密码登录
|
</div>
|
<!-- <div :class="!inFlag ? 'fz24' : 'fz20'" @click="checkInflag">
|
手机验证码登录
|
</div> -->
|
</div>
|
<div class="border-input-box flex mt60" v-if="!inFlag">
|
<img
|
alt=""
|
class="login-icon ml15"
|
src="../assets/login/icon_phone.png"
|
/>
|
<input
|
class="input-login ml8"
|
placeholder="请输入手机号"
|
type="text"
|
v-model="phoneNum"
|
/>
|
</div>
|
<div class="border-input-box flex mt60" v-if="inFlag">
|
<img
|
alt=""
|
class="login-icon ml15"
|
src="../assets/login/icon_phone.png"
|
/>
|
<input
|
class="input-login ml8"
|
placeholder="请输入账号"
|
type="text"
|
v-model="username"
|
/>
|
</div>
|
|
<div class="border-input-box flex mt30" v-if="inFlag">
|
<img
|
alt=""
|
class="login-icon ml15"
|
src="../assets/login/icon_password.png"
|
/>
|
<input
|
class="input-login ml8"
|
placeholder="请输入密码"
|
type="password"
|
v-model="password"
|
/>
|
</div>
|
|
<div class="border-input-box flex ju-sb mt30" v-if="!inFlag">
|
<div class="flex">
|
<img
|
alt=""
|
class="login-icon ml15"
|
src="../assets/login/icon_yzm.png"
|
/>
|
<input
|
class="input-login ml8"
|
placeholder="请输入验证码"
|
type="text"
|
v-model="codeNum"
|
/>
|
</div>
|
<div class="mr5">
|
<div @click="sendCode" class="btn-yam" v-if="sendFlag">
|
发送验证码
|
</div>
|
<div class="color-white psnum" v-else>{{ count }}s</div>
|
</div>
|
</div>
|
|
<div @click="submitFrom" class="btn-login-f cursor">登录</div>
|
</div>
|
|
</div>
|
|
|
</div>
|
</div>
|
</div>
|
</template>
|
<script type="text/javascript">
|
export default {
|
data() {
|
return {
|
count: 6,
|
sendFlag: true,
|
loading: false,
|
inFlag: true,
|
phoneNum: "",
|
password: "",
|
username: "",
|
codeNum: ""
|
};
|
},
|
mounted() {
|
// if(localStorage.setItem('mtoken')){
|
// this.$router.push('index')
|
// }
|
localStorage.clear();
|
document.onkeydown =(e) => {
|
e = window.event || e;
|
if(this.$route.path=='/login'&&(e.code=='Enter'||e.code=='enter')){
|
//调用登录事件方法
|
this.submitFrom();
|
}
|
}
|
},
|
methods: {
|
sendCode() {
|
this.count = 6;
|
this.sendFlag = false;
|
if (!this.$regular.phone.reg.test(this.phoneNum)) {
|
return;
|
}
|
this.$axios
|
.get(`${this.$Interface.captcha}?uuid=${this.phoneNum}`)
|
.then(res => {
|
});
|
let timmer = setInterval(() => {
|
if (this.count === 0) {
|
this.sendFlag = true;
|
|
clearInterval(timmer);
|
return;
|
}
|
this.count--;
|
}, 1000);
|
},
|
checkInflag() {
|
this.inFlag = !this.inFlag;
|
this.password = "";
|
this.codeNum = "";
|
},
|
submitFrom() {
|
if (this.inFlag) {
|
if (
|
this.$regular.pwd.reg.test(this.password) &&
|
this.$regular.username.reg.test(this.username)
|
) {
|
const params = {
|
password: this.password,
|
username: this.username
|
};
|
this.loading=true;
|
setTimeout(()=>{
|
this.loading=false
|
},5000)
|
this.$axios.post(this.$Interface.login, params).then(res => {
|
localStorage.setItem("mtoken", res.data.token);
|
|
this.$axios.get(this.$Interface.userInfo).then(result => {
|
localStorage.setItem("userInfo", JSON.stringify(result.data));
|
if (!result.data.deptId || result.data.deptId == 1) {
|
this.$axios.get(this.$Interface.deptList).then(_res => {
|
localStorage.setItem("companyInfo", JSON.stringify(_res.data[0]));
|
|
this.$store.commit("SET_CompanyId", '');
|
this.$store.commit("SET_ParentCompany", true);
|
this.$router.push("index");
|
});
|
} else {
|
this.$store.commit("SET_CompanyId", result.data.deptId);
|
this.$store.commit("SET_ParentCompany", false);
|
this.$router.push("index");
|
}
|
});
|
this.loading=false;
|
}).catch((err)=>{
|
this.loading=false;
|
});
|
} else {
|
this.$message.error("请输入正确账户和密码");
|
|
}
|
} else {
|
if (
|
this.$regular.captcha.reg.test(this.codeNum) &&
|
this.$regular.phone.reg.test(this.phoneNum)
|
) {
|
const params = {
|
captcha: this.codeNum,
|
username: this.phoneNum
|
};
|
this.$axios.post(this.$Interface.login, params).then(res => {
|
localStorage.setItem("mtoken", res.data.token);
|
this.$axios.get(this.$Interface.userInfo).then(res1 => {
|
localStorage.setItem("userInfo", JSON.stringify(res1.data));
|
this.$router.push("index");
|
});
|
});
|
} else {
|
this.$message.error("请输入正确的手机号和验证码");
|
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import "../assets/css/animeta.css";
|
.login-icon {
|
width: 17px;
|
height: 19px;
|
}
|
|
.psnum {
|
padding: 0 30px;
|
}
|
|
.box-card {
|
width: 100%;
|
min-height: 100vh;
|
background: url("../assets/login/login_bgs.png") no-repeat center/cover;
|
}
|
|
.center-box {
|
width: 73vw;
|
display: flex;
|
margin: 0 auto;
|
justify-content: space-between;
|
}
|
|
.bg-left {
|
width: 55%;
|
height: 45vh;
|
margin-top: 30vh;
|
}
|
|
.bg-right {
|
width: 36%;
|
margin-top: 19vh;
|
}
|
|
.login-title {
|
font-size: 38px;
|
font-family: YouSheBiaoTiHei;
|
text-align: center;
|
color: #ffffff;
|
}
|
|
.login-from {
|
width: 512px;
|
height: 486px;
|
background: url("../assets/login/login-bg.png") no-repeat center/cover;
|
}
|
|
.border-input-box {
|
border: 1px solid rgba(17, 133, 226, 0.4);
|
height: 46px;
|
align-items: center;
|
}
|
|
.sm-bg-box {
|
width: 360px;
|
margin: 0 auto;
|
}
|
|
.btn-yam {
|
background: #3056d5;
|
padding: 6px 14px;
|
font-size: 12px;
|
color: #fff;
|
}
|
|
.col-g {
|
color: #22d9ff;
|
}
|
|
.btn-login-f {
|
height: 46px;
|
line-height: 46px;
|
background: #3056d5;
|
text-align: center;
|
color: #fff;
|
margin-top: 50px;
|
}
|
|
.placeholder {
|
width: 100%;
|
height: 1px;
|
}
|
|
.img-size-left {
|
width: 100%;
|
}
|
</style>
|
