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.
337 lines
7.7 KiB
337 lines
7.7 KiB
<template>
|
|
<div class="login">
|
|
<div class="logoTitle">
|
|
<span>云仓</span>
|
|
<p class="title">贷后监管系统</p>
|
|
</div>
|
|
<div class="images">
|
|
<img class="one" src="../../assets/loginImg/001.jpg" alt="" />
|
|
<img class="two" src="../../assets/loginImg/002.jpg" alt="" />
|
|
<img class="three" src="../../assets/loginImg/003.jpg" alt="" />
|
|
</div>
|
|
<div class="main">
|
|
<div class="content">
|
|
<el-form ref="loginForm" :model="loginForm" class="login-form">
|
|
<h3 class="title1">管理后台</h3>
|
|
<el-form-item>
|
|
<el-input
|
|
v-model="loginForm.userName"
|
|
autocomplete="off"
|
|
placeholder="请输入账号"
|
|
prefix-icon="el-icon-user"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input
|
|
v-model="loginForm.password"
|
|
autocomplete="off"
|
|
placeholder="请输入密码"
|
|
prefix-icon="el-icon-lock"
|
|
show-password
|
|
/>
|
|
<span class="nopsw register" @click="handleforgetPwd"
|
|
>忘记密码 ？</span
|
|
>
|
|
</el-form-item>
|
|
<el-form-item v-show="showMsg" style="margin-bottom: 0">
|
|
<span class="text-danger">提示：用户名或密码错误，请重试！</span>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
v-loading="loading"
|
|
type="primary"
|
|
class="login-btn"
|
|
@click="login"
|
|
>登 录</el-button
|
|
>
|
|
<!--<router-link :to="{name: 'registUser'}" target="_blank" tag="a" class="register fl">个人注册</router-link>
|
|
<router-link :to="{name: 'registOrg'}" target="_blank" tag="a" class="register fr">单位注册</router-link>-->
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog
|
|
title="忘记密码"
|
|
:visible.sync="forgetPwd"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<el-form :model="nopassword">
|
|
<el-form-item label="手机号">
|
|
<el-input v-model="nopassword.userPhone" autocomplete="off" />
|
|
</el-form-item>
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="nopassword.userName" autocomplete="off" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="forgetPwd = false">取 消</el-button>
|
|
<el-button type="primary" @click="reGetPwd()">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { login, imgCode } from "@/api/user.js";
|
|
import user from "@/api/User/login.js";
|
|
import { setToken, getToken, setSession } from "@/utils/auth";
|
|
import imgCodeRole from "@/components/imgCodeRole/index.vue";
|
|
|
|
export default {
|
|
components: { imgCodeRole },
|
|
data() {
|
|
return {
|
|
loginForm: {
|
|
userName: "15932270269",
|
|
password: "wang0403",
|
|
verifyCode: "",
|
|
uuid: "",
|
|
},
|
|
imgCode: "",
|
|
loading: false,
|
|
loginCode: false,
|
|
showMsg: false,
|
|
forgetPwd: false,
|
|
nopassword: {
|
|
userPhone: "",
|
|
userName: "",
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
// window.loginIt = this.loginIt;
|
|
},
|
|
methods: {
|
|
// loginIt(data) {
|
|
// alert(data);
|
|
// },
|
|
login(data) {
|
|
this.loading = true;
|
|
this.loginForm.verifyCode = data.verifyCode;
|
|
this.loginForm.uuid = data.uuid;
|
|
this.$store
|
|
.dispatch("user/login", this.loginForm)
|
|
.then((res) => {
|
|
// this.$store.dispatch('user/getInfo')
|
|
this.$router.push({ path: "/home" });
|
|
this.loading = false;
|
|
})
|
|
.catch((e) => {
|
|
console.log("11111", e);
|
|
this.loading = false;
|
|
// this.$refs.imgCodeRole.getCodeImage()
|
|
});
|
|
},
|
|
codeShow() {
|
|
if (this.loginForm.password == "" || this.loginForm.userName == "") {
|
|
this.loginCode = false;
|
|
this.showMsg = true;
|
|
return;
|
|
}
|
|
this.$refs.imgCodeRole.getCodeImage();
|
|
},
|
|
handleforgetPwd() {
|
|
this.forgetPwd = true;
|
|
this.nopassword = {
|
|
userPhone: "",
|
|
userName: "",
|
|
};
|
|
},
|
|
reGetPwd() {
|
|
if (this.nopassword.userPhone === "") {
|
|
this.$message({
|
|
showClose: true,
|
|
type: "error",
|
|
message: "手机号不能为空",
|
|
});
|
|
return;
|
|
}
|
|
if (this.nopassword.userName === "") {
|
|
this.$message({
|
|
showClose: true,
|
|
type: "error",
|
|
message: "姓名不能为空",
|
|
});
|
|
return;
|
|
}
|
|
user.reGetPwd(this.nopassword).then((res) => {
|
|
if (res.success) {
|
|
this.$message({
|
|
showClose: true,
|
|
type: "success",
|
|
message: "新密码已发送至手机，请查看短信",
|
|
});
|
|
this.forgetPwd = false;
|
|
} else {
|
|
this.$message({ showClose: true, type: "error", message: res.msg });
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.login {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
background-image: url(../../assets/loginImg/bgImg.png);
|
|
background-position: center;
|
|
overflow: hidden;
|
|
.images {
|
|
position: relative;
|
|
margin-top: 290px;
|
|
margin-left: 70px;
|
|
.one {
|
|
width: 210px;
|
|
position: absolute;
|
|
}
|
|
.two {
|
|
width: 104px;
|
|
position: absolute;
|
|
top: 41px;
|
|
}
|
|
.three {
|
|
width: 280px;
|
|
position: absolute;
|
|
left: 104px;
|
|
top: 41px;
|
|
}
|
|
}
|
|
|
|
.logoTitle {
|
|
position: absolute;
|
|
top: 200px;
|
|
left: 70px;
|
|
span {
|
|
float: left;
|
|
font-size: 36px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.title {
|
|
float: left;
|
|
font-size: 25px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
margin-left: 60px;
|
|
color: #ffffff;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
width: 32%;
|
|
height: 340px;
|
|
background: #ffffff;
|
|
box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
|
|
opacity: 0.9;
|
|
border-radius: 20px;
|
|
position: absolute;
|
|
right: 7%;
|
|
top: 200px;
|
|
.content {
|
|
position: relative;
|
|
/*.title-h3{
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 30px;
|
|
margin: 0;
|
|
position: absolute;
|
|
top: -65px;
|
|
|
|
}*/
|
|
}
|
|
}
|
|
}
|
|
|
|
.login-form {
|
|
padding: 30px 50px;
|
|
background-color: #bbd4e0;
|
|
height: 360px;
|
|
border-radius: 15px;
|
|
.title1 {
|
|
margin: 0px auto 30px auto;
|
|
font-size: 20px;
|
|
color: #191919;
|
|
font-size: 23px;
|
|
font-weight: 500;
|
|
}
|
|
.el-input {
|
|
// border-color: transparent;
|
|
background-color: #ffffff;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
}
|
|
.el-input__icon{
|
|
font-size: 20px;
|
|
color:#1b64f7
|
|
}
|
|
.code {
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 5px;
|
|
width: 35%;
|
|
height: 35px;
|
|
cursor: pointer;
|
|
z-index: 9;
|
|
}
|
|
.nopsw {
|
|
position: absolute;
|
|
left: 250px;
|
|
top: 50px;
|
|
color: #000;
|
|
font-size: 15px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.register {
|
|
color: #000;
|
|
}
|
|
|
|
.register:hover,
|
|
.nopsw:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-eye {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.text-danger {
|
|
color: #f56c6c;
|
|
}
|
|
|
|
.login-btn {
|
|
margin: 10px 0 10px 0;
|
|
margin-left: 30px;
|
|
width: 85%;
|
|
background-color: #0a59f7;
|
|
border-radius: 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
background-color: #007fdd;
|
|
border: 0;
|
|
}
|
|
|
|
.el-input--prefix .el-input__inner {
|
|
border: 1px solid #018ad2;
|
|
background: transparent;
|
|
color: #333 !important;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.el-loading-mask {
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
</style>
|
|
|