This commit is contained in:
parent
1c55e565b4
commit
188876e18f
|
|
@ -1,144 +1,227 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userLogin, getVerCode } from "@/api/getdata";
|
||||
import { setToken } from '@/utils/auth'
|
||||
import CryptoJS from 'crypto-js'
|
||||
var KEY = CryptoJS.enc.Utf8.parse("greenh5java12345");
|
||||
var IV = CryptoJS.enc.Utf8.parse("greenh5java12345");
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataForm: {
|
||||
userName: '',
|
||||
password: '',
|
||||
uuid: '',
|
||||
captcha: '',
|
||||
verCode: "",
|
||||
codeId: ""
|
||||
},
|
||||
dataRule: {
|
||||
userName: [
|
||||
{ required: true, message: '帐号不能为空', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
||||
],
|
||||
verCode: [
|
||||
{ required: true, message: '验证码不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
captchaPath: '',
|
||||
loading: false, //初始化loading
|
||||
loadingMsg: "",
|
||||
codeImg: "",
|
||||
codeId: ""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getVerCode();
|
||||
},
|
||||
methods: {
|
||||
getVerCode() {
|
||||
let logUrl = "http://10.224.64.4:27000/greenH5/greenWebmodul/dist/index.html?#/ywgllogin";
|
||||
let isc_login = "http://iscsso.cc.sgcc.com.cn:17011/isc_sso/login?service=";
|
||||
window.location.href = isc_login + logUrl;
|
||||
<div class="site-wrapper site-page--login">
|
||||
<div class="site-content__wrapper" >
|
||||
<div class="site-content">
|
||||
<div class="brand-info">
|
||||
<h2 class="brand-info__text">智慧后勤服务平台1</h2>
|
||||
<p class="brand-info__intro"></p>
|
||||
</div>
|
||||
<div class="login-main" :element-loading-text="loadingMsg" v-loading="loading">
|
||||
<h3 class="login-title">登录</h3>
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
|
||||
<el-form-item prop="userName">
|
||||
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="verCode">
|
||||
<el-input style="width:60%!important;float:left" v-model="dataForm.verCode" placeholder="验证码"></el-input>
|
||||
<img @click="getVerCode()" :src="codeImg" width="100" height="40" class="head_pic" style="float:right" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userLogin,getVerCode } from "@/api/getdata";
|
||||
import { setToken } from '@/utils/auth'
|
||||
import CryptoJS from 'crypto-js'
|
||||
var KEY = CryptoJS.enc.Utf8.parse("greenh5java12345");
|
||||
var IV = CryptoJS.enc.Utf8.parse("greenh5java12345");
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataForm: {
|
||||
userName: '',
|
||||
password: '',
|
||||
uuid: '',
|
||||
captcha: '',
|
||||
verCode:"",
|
||||
codeId:""
|
||||
},
|
||||
dataRule: {
|
||||
userName: [
|
||||
{ required: true, message: '帐号不能为空', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' }
|
||||
],
|
||||
verCode: [
|
||||
{ required: true, message: '验证码不能为空', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
captchaPath: '',
|
||||
loading: false, //初始化loading
|
||||
loadingMsg: "",
|
||||
codeImg:"",
|
||||
codeId:""
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.site-wrapper.site-page--login {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(38, 50, 56, .6);
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-image: url(~@/assets/images/login_bg.jpg);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.site-content__wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.site-content {
|
||||
min-height: 100%;
|
||||
padding: 30px 500px 30px 30px;
|
||||
}
|
||||
|
||||
.brand-info {
|
||||
margin: 220px 100px 0 90px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.brand-info__text {
|
||||
margin: 0 0 22px 0;
|
||||
font-size: 48px;
|
||||
font-weight: 400;
|
||||
/*text-transform : uppercase;*/
|
||||
}
|
||||
|
||||
.brand-info__intro {
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.58;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.login-main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 150px 60px 180px;
|
||||
width: 470px;
|
||||
min-height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
overflow: hidden;
|
||||
|
||||
>img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
created(){
|
||||
this.getVerCode();
|
||||
},
|
||||
methods: {
|
||||
createLoad() {
|
||||
this.loading = true;
|
||||
this.loadingMsg = "登录中...";
|
||||
},
|
||||
clearLoad() {
|
||||
this.loading = false;
|
||||
this.loadingMsg = "";
|
||||
},
|
||||
getVerCode(){
|
||||
getVerCode({})
|
||||
.then(res => {
|
||||
if (res.returnCode == "1") {
|
||||
this.clearLoad();
|
||||
console.log(res);
|
||||
this.codeImg ="data:image/jpeg;base64,"+ res.returnData.imgBase64;
|
||||
this.dataForm.codeId = res.returnData.imgUUID
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.clearLoad();
|
||||
}, 300);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
setTimeout(() => {
|
||||
this.clearLoad();
|
||||
}, 300);
|
||||
});
|
||||
},
|
||||
|
||||
// 提交表单
|
||||
dataFormSubmit () {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.createLoad();
|
||||
var userPossword = CryptoJS.AES.encrypt(this.dataForm.password, KEY, {
|
||||
iv: IV, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.ZeroPadding
|
||||
}).toString();
|
||||
|
||||
let Content = {
|
||||
'loginName': this.dataForm.userName,
|
||||
'userPossword': userPossword,
|
||||
'verCode' :this.dataForm.verCode,
|
||||
'codeId' :this.dataForm.codeId
|
||||
|
||||
};
|
||||
userLogin(Content)
|
||||
.then(res => {
|
||||
if (res.returnCode == "1") {
|
||||
this.clearLoad();
|
||||
setToken(res.returnData.token);
|
||||
this.$router.replace({ name: 'home' })
|
||||
} else {
|
||||
this.getVerCode();
|
||||
this.$message({
|
||||
message: res.returnMsg,
|
||||
type: "warning"
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.clearLoad();
|
||||
}, 300);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
setTimeout(() => {
|
||||
this.clearLoad();
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn-submit {
|
||||
width: 100%;
|
||||
margin-top: 38px;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.site-wrapper.site-page--login {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(38, 50, 56, .6);
|
||||
overflow: hidden;
|
||||
&:before {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-image: url(~@/assets/images/login_bg.jpg);
|
||||
background-size: cover;
|
||||
}
|
||||
.site-content__wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
.site-content {
|
||||
min-height: 100%;
|
||||
padding: 30px 500px 30px 30px;
|
||||
}
|
||||
.brand-info {
|
||||
margin: 220px 100px 0 90px;
|
||||
color: #fff;
|
||||
}
|
||||
.brand-info__text {
|
||||
margin: 0 0 22px 0;
|
||||
font-size: 48px;
|
||||
font-weight: 400;
|
||||
/*text-transform : uppercase;*/
|
||||
}
|
||||
.brand-info__intro {
|
||||
margin: 10px 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.58;
|
||||
opacity: .6;
|
||||
}
|
||||
.login-main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 150px 60px 180px;
|
||||
width: 470px;
|
||||
min-height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.login-title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.login-captcha {
|
||||
overflow: hidden;
|
||||
> img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.login-btn-submit {
|
||||
width: 100%;
|
||||
margin-top: 38px;
|
||||
}
|
||||
.el-input {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue