Merge branch 'main' of http://192.168.0.75:3000/bonus/hz-zhhq-web
This commit is contained in:
commit
18295f4f11
|
|
@ -1,226 +1,227 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="site-wrapper site-page--login">
|
<div class="site-wrapper site-page--login">
|
||||||
<div class="site-content__wrapper" >
|
<div class="site-content__wrapper" >
|
||||||
<div class="site-content">
|
<div class="site-content">
|
||||||
<div class="brand-info">
|
<div class="brand-info">
|
||||||
<h2 class="brand-info__text">智慧后勤服务平台</h2>
|
<h2 class="brand-info__text">智慧后勤服务平台</h2>
|
||||||
<p class="brand-info__intro"></p>
|
<p class="brand-info__intro"></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-main" :element-loading-text="loadingMsg" v-loading="loading">
|
<div class="login-main" :element-loading-text="loadingMsg" v-loading="loading">
|
||||||
<h3 class="login-title">登录</h3>
|
<h3 class="login-title">登录</h3>
|
||||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
|
||||||
<el-form-item prop="userName">
|
<el-form-item prop="userName">
|
||||||
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
|
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password">
|
||||||
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
|
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="verCode">
|
<el-form-item prop="verCode">
|
||||||
<el-input style="width:60%!important;float:left" v-model="dataForm.verCode" placeholder="验证码"></el-input>
|
<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" />
|
<img @click="getVerCode()" :src="codeImg" width="100" height="40" class="head_pic" style="float:right" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
|
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
|
||||||
|
<script>
|
||||||
<script>
|
import { userLogin,getVerCode } from "@/api/getdata";
|
||||||
import { userLogin,getVerCode } from "@/api/getdata";
|
import { setToken } from '@/utils/auth'
|
||||||
import { setToken } from '@/utils/auth'
|
import CryptoJS from 'crypto-js'
|
||||||
import CryptoJS from 'crypto-js'
|
var KEY = CryptoJS.enc.Utf8.parse("greenh5java12345");
|
||||||
var KEY = CryptoJS.enc.Utf8.parse("greenh5java12345");
|
var IV = CryptoJS.enc.Utf8.parse("greenh5java12345");
|
||||||
var IV = CryptoJS.enc.Utf8.parse("greenh5java12345");
|
export default {
|
||||||
export default {
|
data() {
|
||||||
data() {
|
return {
|
||||||
return {
|
dataForm: {
|
||||||
dataForm: {
|
userName: '',
|
||||||
userName: '',
|
password: '',
|
||||||
password: '',
|
uuid: '',
|
||||||
uuid: '',
|
captcha: '',
|
||||||
captcha: '',
|
verCode:"",
|
||||||
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:""
|
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: {
|
|
||||||
createLoad() {
|
|
||||||
this.loading = true;
|
|
||||||
this.loadingMsg = "登录中...";
|
|
||||||
},
|
},
|
||||||
clearLoad() {
|
created(){
|
||||||
this.loading = false;
|
this.getVerCode();
|
||||||
this.loadingMsg = "";
|
|
||||||
},
|
},
|
||||||
getVerCode(){
|
methods: {
|
||||||
getVerCode({})
|
createLoad() {
|
||||||
.then(res => {
|
this.loading = true;
|
||||||
if (res.returnCode == "1") {
|
this.loadingMsg = "登录中...";
|
||||||
this.clearLoad();
|
},
|
||||||
console.log(res);
|
clearLoad() {
|
||||||
this.codeImg ="data:image/jpeg;base64,"+ res.returnData.imgBase64;
|
this.loading = false;
|
||||||
this.dataForm.codeId = res.returnData.imgUUID
|
this.loadingMsg = "";
|
||||||
} else {
|
},
|
||||||
setTimeout(() => {
|
getVerCode(){
|
||||||
|
getVerCode({})
|
||||||
|
.then(res => {
|
||||||
|
if (res.returnCode == "1") {
|
||||||
this.clearLoad();
|
this.clearLoad();
|
||||||
}, 300);
|
console.log(res);
|
||||||
}
|
this.codeImg ="data:image/jpeg;base64,"+ res.returnData.imgBase64;
|
||||||
})
|
this.dataForm.codeId = res.returnData.imgUUID
|
||||||
.catch(err => {
|
} else {
|
||||||
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(() => {
|
setTimeout(() => {
|
||||||
this.clearLoad();
|
this.clearLoad();
|
||||||
}, 300);
|
}, 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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
</script>
|
||||||
</script>
|
|
||||||
|
<style lang="scss">
|
||||||
<style lang="scss">
|
.site-wrapper.site-page--login {
|
||||||
.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;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
padding: 0;
|
background-color: rgba(38, 50, 56, .6);
|
||||||
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;
|
overflow: hidden;
|
||||||
> img {
|
&:before {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.login-btn-submit {
|
</style>
|
||||||
width: 100%;
|
|
||||||
margin-top: 38px;
|
|
||||||
}
|
|
||||||
.el-input {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue