|
|
|
@ -1,33 +1,49 @@ |
|
|
|
<template> |
|
|
|
<div class="login"> |
|
|
|
<div class="logoTitle"> |
|
|
|
<img src="../../assets/loginImg/logo.png"><span>汇融银行</span> |
|
|
|
<p class="title">供应链贷后监管平台</p> |
|
|
|
<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> |
|
|
|
<h3 class="title1">管理后台</h3> |
|
|
|
<el-form-item> |
|
|
|
<el-input v-model="loginForm.userName" autocomplete="off" placeholder="请输入账号" prefix-icon="el-icon-user" /> |
|
|
|
<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-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;"> |
|
|
|
<el-form-item v-show="showMsg" style="margin-bottom: 0"> |
|
|
|
<span class="text-danger">提示：用户名或密码错误，请重试！</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-popover |
|
|
|
placement="top" |
|
|
|
width="400" |
|
|
|
trigger="click" |
|
|
|
<el-button |
|
|
|
v-loading="loading" |
|
|
|
type="primary" |
|
|
|
class="login-btn" |
|
|
|
@click="login" |
|
|
|
>登 录</el-button |
|
|
|
> |
|
|
|
<!-- <imgCodeRole @login="login" ref="imgCodeRole"></imgCodeRole>--> |
|
|
|
<!-- <el-button slot="reference" type="primary" class="login-btn" v-loading="loading">登 录</el-button>--> |
|
|
|
<el-button slot="reference" v-loading="loading" type="primary" class="login-btn" @click="login">登 录</el-button> |
|
|
|
</el-popover> |
|
|
|
<!--<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> |
|
|
|
@ -35,7 +51,11 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-dialog title="忘记密码" :visible.sync="forgetPwd" :close-on-click-modal="false"> |
|
|
|
<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" /> |
|
|
|
@ -49,39 +69,35 @@ |
|
|
|
<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' |
|
|
|
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: '', |
|
|
|
password: '', |
|
|
|
verifyCode: '', |
|
|
|
uuid: '' |
|
|
|
userName: "", |
|
|
|
password: "", |
|
|
|
verifyCode: "", |
|
|
|
uuid: "", |
|
|
|
}, |
|
|
|
imgCode: '', |
|
|
|
imgCode: "", |
|
|
|
loading: false, |
|
|
|
loginCode: false, |
|
|
|
showMsg: false, |
|
|
|
forgetPwd: false, |
|
|
|
nopassword: { |
|
|
|
userPhone: '', |
|
|
|
userName: '' |
|
|
|
} |
|
|
|
} |
|
|
|
userPhone: "", |
|
|
|
userName: "", |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// window.loginIt = this.loginIt; |
|
|
|
@ -91,54 +107,69 @@ export default { |
|
|
|
// 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.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() |
|
|
|
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 |
|
|
|
if (this.loginForm.password == "" || this.loginForm.userName == "") { |
|
|
|
this.loginCode = false; |
|
|
|
this.showMsg = true; |
|
|
|
return; |
|
|
|
} |
|
|
|
this.$refs.imgCodeRole.getCodeImage() |
|
|
|
this.$refs.imgCodeRole.getCodeImage(); |
|
|
|
}, |
|
|
|
handleforgetPwd() { |
|
|
|
this.forgetPwd = true |
|
|
|
this.forgetPwd = true; |
|
|
|
this.nopassword = { |
|
|
|
userPhone: '', |
|
|
|
userName: '' |
|
|
|
} |
|
|
|
userPhone: "", |
|
|
|
userName: "", |
|
|
|
}; |
|
|
|
}, |
|
|
|
reGetPwd() { |
|
|
|
if (this.nopassword.userPhone === '') { |
|
|
|
this.$message({ showClose: true, type: 'error', message: '手机号不能为空' }) |
|
|
|
return |
|
|
|
if (this.nopassword.userPhone === "") { |
|
|
|
this.$message({ |
|
|
|
showClose: true, |
|
|
|
type: "error", |
|
|
|
message: "手机号不能为空", |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (this.nopassword.userName === '') { |
|
|
|
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 |
|
|
|
this.$message({ |
|
|
|
showClose: true, |
|
|
|
type: "success", |
|
|
|
message: "新密码已发送至手机，请查看短信", |
|
|
|
}); |
|
|
|
this.forgetPwd = false; |
|
|
|
} else { |
|
|
|
this.$message({ showClose: true, type: 'error', message: res.msg }) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
this.$message({ showClose: true, type: "error", message: res.msg }); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
@ -150,40 +181,58 @@ export default { |
|
|
|
background-image: url(../../assets/loginImg/bgImg.png); |
|
|
|
background-position: center; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
.logoTitle { |
|
|
|
margin: 30px; |
|
|
|
|
|
|
|
img { |
|
|
|
padding-top: 25px; |
|
|
|
width: 70px; |
|
|
|
height: 60px; |
|
|
|
.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; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
float: left; |
|
|
|
font-size: 25px; |
|
|
|
font-family: Source Han Sans CN; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
margin: 0; |
|
|
|
margin-left: 60px; |
|
|
|
color: #ffffff; |
|
|
|
margin-top: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.main { |
|
|
|
width: 30%; |
|
|
|
/*height: 640px;*/ |
|
|
|
background: #FFFFFF; |
|
|
|
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: 10%; |
|
|
|
|
|
|
|
right: 7%; |
|
|
|
top: 200px; |
|
|
|
.content { |
|
|
|
position: relative; |
|
|
|
/*.title-h3{ |
|
|
|
@ -202,21 +251,26 @@ export default { |
|
|
|
|
|
|
|
.login-form { |
|
|
|
padding: 30px 50px; |
|
|
|
|
|
|
|
background-color: #bbd4e0; |
|
|
|
height: 360px; |
|
|
|
border-radius: 15px; |
|
|
|
.title1 { |
|
|
|
margin: 0px auto 30px auto; |
|
|
|
text-align: center; |
|
|
|
font-size: 20px; |
|
|
|
color: #191919; |
|
|
|
font-size: 23px; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.el-input { |
|
|
|
border: none; |
|
|
|
background-color: transparent; |
|
|
|
// border-color: transparent; |
|
|
|
background-color: #ffffff; |
|
|
|
height: 40px; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
.el-input__icon{ |
|
|
|
font-size: 20px; |
|
|
|
color:#1b64f7 |
|
|
|
} |
|
|
|
|
|
|
|
.code { |
|
|
|
position: absolute; |
|
|
|
top: 3px; |
|
|
|
@ -226,18 +280,17 @@ export default { |
|
|
|
cursor: pointer; |
|
|
|
z-index: 9; |
|
|
|
} |
|
|
|
|
|
|
|
.nopsw { |
|
|
|
position: absolute; |
|
|
|
bottom: -30px; |
|
|
|
right: 5px; |
|
|
|
color: #018ad2; |
|
|
|
left: 250px; |
|
|
|
top: 50px; |
|
|
|
color: #000; |
|
|
|
font-size: 15px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
|
|
|
|
.register { |
|
|
|
color: #018ad2; |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
|
|
|
|
.register:hover, |
|
|
|
@ -250,14 +303,16 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.text-danger { |
|
|
|
color: #F56C6C; |
|
|
|
color: #f56c6c; |
|
|
|
} |
|
|
|
|
|
|
|
.login-btn { |
|
|
|
margin: 10px 0 10px 0; |
|
|
|
width: 100%; |
|
|
|
background-color: #007fff; |
|
|
|
border: 0; |
|
|
|
margin-left: 30px; |
|
|
|
width: 85%; |
|
|
|
background-color: #0a59f7; |
|
|
|
border-radius: 10px; |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.login-btn:hover { |
|
|
|
@ -276,7 +331,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.el-loading-mask { |
|
|
|
background-color: rgba(255, 255, 255, .6); |
|
|
|
background-color: rgba(255, 255, 255, 0.6); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
