|
|
@@ -1,265 +1,305 @@ |
|
|
|
<template> |
|
|
|
<div class="bg"> |
|
|
|
<div class="login"> |
|
|
|
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" class="demo-ruleForm login_form"> |
|
|
|
<h1>小程序第三方管理平台</h1> |
|
|
|
<el-form-item class="inputs" label="" prop="username"> |
|
|
|
<el-input v-model.number="ruleForm2.username" placeholder="请输入账号"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="inputs" label="" prop="password"> |
|
|
|
<el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="请输入密码"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="inputs" label="" prop="captcha"> |
|
|
|
<el-input v-model="ruleForm2.captcha" auto-complete="off" placeholder="看不清?点击图片刷新"> |
|
|
|
</el-input> |
|
|
|
<div class="refreImg"> |
|
|
|
<img alt="" :src="src" @click="refreshCode"> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button class="login-btn" :loading="submitButton" type="primary" @click="login('ruleForm2')">登录</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div style="position: absolute;top: 96%;right: 2%;color: #fff;" id="_version"></div> |
|
|
|
</div> |
|
|
|
<div class="bg"> |
|
|
|
<div class="login"> |
|
|
|
<el-form |
|
|
|
:model="ruleForm2" |
|
|
|
status-icon |
|
|
|
:rules="rules2" |
|
|
|
ref="ruleForm2" |
|
|
|
class="demo-ruleForm login_form" |
|
|
|
> |
|
|
|
<h1>小程序第三方管理平台</h1> |
|
|
|
<el-form-item class="inputs" label="" prop="username"> |
|
|
|
<el-input |
|
|
|
v-model.number="ruleForm2.username" |
|
|
|
placeholder="请输入账号" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="inputs" label="" prop="password"> |
|
|
|
<el-input |
|
|
|
type="password" |
|
|
|
v-model="ruleForm2.password" |
|
|
|
auto-complete="off" |
|
|
|
placeholder="请输入密码" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item class="inputs" label="" prop="captcha"> |
|
|
|
<el-input |
|
|
|
v-model="ruleForm2.captcha" |
|
|
|
@keydown.enter.native="login('ruleForm2')" |
|
|
|
auto-complete="off" |
|
|
|
placeholder="看不清?点击图片刷新" |
|
|
|
> |
|
|
|
</el-input> |
|
|
|
<div class="refreImg"> |
|
|
|
<img alt="" :src="src" @click="refreshCode" /> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<el-button |
|
|
|
class="login-btn" |
|
|
|
:loading="submitButton" |
|
|
|
type="primary" |
|
|
|
@click="login('ruleForm2')" |
|
|
|
>登录</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div |
|
|
|
style="position: absolute;top: 96%;right: 2%;color: #fff;" |
|
|
|
id="_version" |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import AjaxUtil from "../../core/tool/ajaxService"; |
|
|
|
import Util from "../../core/tool/commonUtil"; |
|
|
|
import { configUrl } from "./../../utils/config.js"; |
|
|
|
export default { |
|
|
|
extends: AjaxUtil, |
|
|
|
name: "Login", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
submitButton:false, |
|
|
|
src: '', |
|
|
|
ruleForm2: { |
|
|
|
username: '', |
|
|
|
password: '', |
|
|
|
captcha: '' |
|
|
|
}, |
|
|
|
rules2: { |
|
|
|
username: [{ |
|
|
|
required: true, |
|
|
|
message: '抱歉,不能识别您输入的账号', |
|
|
|
trigger: 'blur' |
|
|
|
}], |
|
|
|
password: [{ |
|
|
|
required: true, |
|
|
|
message: '抱歉,不能识别您输入的密码', |
|
|
|
trigger: 'blur' |
|
|
|
}], |
|
|
|
captcha: [{ |
|
|
|
required: true, |
|
|
|
message: '抱歉,不能识别您输入的验证码', |
|
|
|
trigger: 'blur' |
|
|
|
}], |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
login: function () { |
|
|
|
this.submitButton = true |
|
|
|
let name = this.ruleForm2.username; |
|
|
|
let pwd = this.ruleForm2.password; |
|
|
|
let captcha = this.ruleForm2.captcha; |
|
|
|
this.postFetch(configUrl.doLogin, { |
|
|
|
username: name, |
|
|
|
password: pwd, |
|
|
|
captcha: captcha, |
|
|
|
}) |
|
|
|
.then(d => { |
|
|
|
console.log(d) |
|
|
|
this.submitButton = false |
|
|
|
this.showNotify("success", "欢迎进入小程序第三方管理平台", "登录成功"); |
|
|
|
Util.cookie.setCookie("uname", d.data.username); |
|
|
|
this.$router.push({ |
|
|
|
path: "/layout" |
|
|
|
}); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
this.submitButton = false |
|
|
|
this.refreshCode(); |
|
|
|
this.$message.error(err.data); |
|
|
|
}); |
|
|
|
}, |
|
|
|
refreshCode: function () { |
|
|
|
this.src = configUrl.captcha+"?t=" + Date(); |
|
|
|
console.log(this.src); |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.refreshCode(); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
let metas = document.getElementsByTagName("meta"); |
|
|
|
let version = ""; |
|
|
|
for (let index = 0; index < metas.length; index++) { |
|
|
|
if (metas[index].getAttribute("name") == "version") { |
|
|
|
version = metas[index].getAttribute("content"); |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
console.log(configUrl.getversion,"configUrl.getversion"); |
|
|
|
|
|
|
|
this.getFetch(configUrl.getversion).then(d=>{ |
|
|
|
console.log(d,22222) |
|
|
|
document.getElementById("_version").innerHTML = "version:"+ version.substr(4) + "." + d.data.split('_')[1] ; |
|
|
|
}).catch(e=>{ |
|
|
|
document.getElementById("_version").innerHTML = "version:"+ version.substr(4); |
|
|
|
}) |
|
|
|
}, |
|
|
|
import AjaxUtil from "../../core/tool/ajaxService"; |
|
|
|
import Util from "../../core/tool/commonUtil"; |
|
|
|
import { configUrl } from "./../../utils/config.js"; |
|
|
|
export default { |
|
|
|
extends: AjaxUtil, |
|
|
|
name: "Login", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
submitButton: false, |
|
|
|
src: "", |
|
|
|
ruleForm2: { |
|
|
|
username: "", |
|
|
|
password: "", |
|
|
|
captcha: "", |
|
|
|
}, |
|
|
|
rules2: { |
|
|
|
username: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: "抱歉,不能识别您输入的账号", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
password: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: "抱歉,不能识别您输入的密码", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
captcha: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: "抱歉,不能识别您输入的验证码", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
login: function() { |
|
|
|
this.submitButton = true; |
|
|
|
let name = this.ruleForm2.username; |
|
|
|
let pwd = this.ruleForm2.password; |
|
|
|
let captcha = this.ruleForm2.captcha; |
|
|
|
this.postFetch(configUrl.doLogin, { |
|
|
|
username: name, |
|
|
|
password: pwd, |
|
|
|
captcha: captcha, |
|
|
|
}) |
|
|
|
.then((d) => { |
|
|
|
console.log(d); |
|
|
|
this.submitButton = false; |
|
|
|
this.showNotify( |
|
|
|
"success", |
|
|
|
"欢迎进入小程序第三方管理平台", |
|
|
|
"登录成功" |
|
|
|
); |
|
|
|
Util.cookie.setCookie("uname", d.data.username); |
|
|
|
this.$router.push({ |
|
|
|
path: "/layout", |
|
|
|
}); |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
this.submitButton = false; |
|
|
|
this.refreshCode(); |
|
|
|
this.$message.error(err.data); |
|
|
|
}); |
|
|
|
}, |
|
|
|
refreshCode: function() { |
|
|
|
this.src = configUrl.captcha + "?t=" + Date(); |
|
|
|
console.log(this.src); |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.refreshCode(); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
let metas = document.getElementsByTagName("meta"); |
|
|
|
let version = ""; |
|
|
|
for (let index = 0; index < metas.length; index++) { |
|
|
|
if (metas[index].getAttribute("name") == "version") { |
|
|
|
version = metas[index].getAttribute("content"); |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
console.log(configUrl.getversion, "configUrl.getversion"); |
|
|
|
|
|
|
|
this.getFetch(configUrl.getversion) |
|
|
|
.then((d) => { |
|
|
|
console.log(d, 22222); |
|
|
|
document.getElementById("_version").innerHTML = |
|
|
|
"version:" + version.substr(4) + "." + d.data.split("_")[1]; |
|
|
|
}) |
|
|
|
.catch((e) => { |
|
|
|
document.getElementById("_version").innerHTML = |
|
|
|
"version:" + version.substr(4); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.qrcode{ |
|
|
|
width: 36px; |
|
|
|
position: absolute; |
|
|
|
right: 7px; |
|
|
|
top: 5px; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
#login_container{ |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
margin: auto; |
|
|
|
top: 0; |
|
|
|
bottom:0; |
|
|
|
} |
|
|
|
.inputs{ |
|
|
|
width: 315px; |
|
|
|
height: 44px; |
|
|
|
margin: 0 auto 22px; |
|
|
|
line-height: 44px; |
|
|
|
} |
|
|
|
.el-input__inner { |
|
|
|
font-size: 16px !important; |
|
|
|
color: rgb(0, 0, 0, 0.25) !important; |
|
|
|
padding: 0 35px !important; |
|
|
|
} |
|
|
|
.qrcode { |
|
|
|
width: 36px; |
|
|
|
position: absolute; |
|
|
|
right: 7px; |
|
|
|
top: 5px; |
|
|
|
z-index: 1000; |
|
|
|
} |
|
|
|
#login_container { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
margin: auto; |
|
|
|
top: 0; |
|
|
|
bottom: 0; |
|
|
|
} |
|
|
|
.inputs { |
|
|
|
width: 315px; |
|
|
|
height: 44px; |
|
|
|
margin: 0 auto 22px; |
|
|
|
line-height: 44px; |
|
|
|
} |
|
|
|
.el-input__inner { |
|
|
|
font-size: 16px !important; |
|
|
|
color: rgb(0, 0, 0, 0.25) !important; |
|
|
|
padding: 0 35px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.refreImg img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 2px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.refreImg img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 2px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
a { |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
.frechBox { |
|
|
|
display: block; |
|
|
|
margin-top: -10px; |
|
|
|
} |
|
|
|
.frechBox { |
|
|
|
display: block; |
|
|
|
margin-top: -10px; |
|
|
|
} |
|
|
|
|
|
|
|
.refreImg { |
|
|
|
width: 38.2%; |
|
|
|
height: 40px; |
|
|
|
/* line-height: 20px; */ |
|
|
|
position: absolute; |
|
|
|
z-index: 1000; |
|
|
|
right: 0; |
|
|
|
top: -1px; |
|
|
|
background-color: #ededed; |
|
|
|
} |
|
|
|
.refreImg { |
|
|
|
width: 38.2%; |
|
|
|
height: 40px; |
|
|
|
/* line-height: 20px; */ |
|
|
|
position: absolute; |
|
|
|
z-index: 1000; |
|
|
|
right: 0; |
|
|
|
top: -1px; |
|
|
|
background-color: #ededed; |
|
|
|
} |
|
|
|
|
|
|
|
.bg { |
|
|
|
background: url(../../static/images/login-bg.png) no-repeat; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
.bg { |
|
|
|
background: url(../../static/images/login-bg.png) no-repeat; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
|
|
|
|
.login h1 { |
|
|
|
font-size: 22px; |
|
|
|
font-weight:400; |
|
|
|
color:rgba(85,85,85,1); |
|
|
|
line-height: 24px; |
|
|
|
margin-bottom: 28px; |
|
|
|
} |
|
|
|
.login h1 { |
|
|
|
font-size: 22px; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(85, 85, 85, 1); |
|
|
|
line-height: 24px; |
|
|
|
margin-bottom: 28px; |
|
|
|
} |
|
|
|
|
|
|
|
.login-item { |
|
|
|
width: 368px; |
|
|
|
margin: 0 auto; |
|
|
|
height: 40px; |
|
|
|
margin-bottom: 16px; |
|
|
|
border: 1px solid #D9D9D9; |
|
|
|
border-radius: 4px; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.login-item { |
|
|
|
width: 368px; |
|
|
|
margin: 0 auto; |
|
|
|
height: 40px; |
|
|
|
margin-bottom: 16px; |
|
|
|
border: 1px solid #d9d9d9; |
|
|
|
border-radius: 4px; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.login-item input { |
|
|
|
width: 100%; |
|
|
|
line-height: 38px; |
|
|
|
background: #fff; |
|
|
|
font-size: 16px; |
|
|
|
color: rgba(0, 0, 0, 0.25); |
|
|
|
padding: 0 0 0 36px; |
|
|
|
display: block; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
.login-item input { |
|
|
|
width: 100%; |
|
|
|
line-height: 38px; |
|
|
|
background: #fff; |
|
|
|
font-size: 16px; |
|
|
|
color: rgba(0, 0, 0, 0.25); |
|
|
|
padding: 0 0 0 36px; |
|
|
|
display: block; |
|
|
|
border: none; |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
|
|
|
|
.login-btn { |
|
|
|
width: 315px; |
|
|
|
line-height: 44px; |
|
|
|
background: #3FC497; |
|
|
|
text-align: center; |
|
|
|
border-radius: 4px; |
|
|
|
font-size: 16px; |
|
|
|
color: #fff; |
|
|
|
padding: 0; |
|
|
|
border: none; |
|
|
|
cursor: pointer; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
.login-btn { |
|
|
|
width: 315px; |
|
|
|
line-height: 44px; |
|
|
|
background: #3fc497; |
|
|
|
text-align: center; |
|
|
|
border-radius: 4px; |
|
|
|
font-size: 16px; |
|
|
|
color: #fff; |
|
|
|
padding: 0; |
|
|
|
border: none; |
|
|
|
cursor: pointer; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
.forgot-password { |
|
|
|
color: rgba(24, 144, 255, 1); |
|
|
|
width: 368px; |
|
|
|
margin: 0 auto; |
|
|
|
text-align: right; |
|
|
|
line-height: 22px; |
|
|
|
margin-bottom: 4px; |
|
|
|
} |
|
|
|
.forgot-password { |
|
|
|
color: rgba(24, 144, 255, 1); |
|
|
|
width: 368px; |
|
|
|
margin: 0 auto; |
|
|
|
text-align: right; |
|
|
|
line-height: 22px; |
|
|
|
margin-bottom: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.forgot-password label { |
|
|
|
font-weight: 400 !important; |
|
|
|
font-size: 14px; |
|
|
|
cursor: pointer; |
|
|
|
margin-right: 26px; |
|
|
|
color:#555; |
|
|
|
.forgot-password label { |
|
|
|
font-weight: 400 !important; |
|
|
|
font-size: 14px; |
|
|
|
cursor: pointer; |
|
|
|
margin-right: 26px; |
|
|
|
color: #555; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.el-input__inner { |
|
|
|
font-size: 16px !important; |
|
|
|
color: rgb(0, 0, 0, 0.25) !important; |
|
|
|
padding: 0 35px !important; |
|
|
|
} |
|
|
|
.login { |
|
|
|
background: #f9fafc; |
|
|
|
border-radius:6px; |
|
|
|
overflow: hidden; |
|
|
|
width: 375px; |
|
|
|
position: relative; |
|
|
|
left: 50%; |
|
|
|
top: 50%; |
|
|
|
height: 340px; |
|
|
|
transform: translate(-50%,-50%); |
|
|
|
-webkit-transform:translate(-50%,-50%); |
|
|
|
box-shadow:0px 3px 24px 0px rgba(0, 0, 0, 0.24); |
|
|
|
} |
|
|
|
</style> |
|
|
|
.el-input__inner { |
|
|
|
font-size: 16px !important; |
|
|
|
color: rgb(0, 0, 0, 0.25) !important; |
|
|
|
padding: 0 35px !important; |
|
|
|
} |
|
|
|
.login { |
|
|
|
background: #f9fafc; |
|
|
|
border-radius: 6px; |
|
|
|
overflow: hidden; |
|
|
|
width: 375px; |
|
|
|
position: relative; |
|
|
|
left: 50%; |
|
|
|
top: 50%; |
|
|
|
height: 340px; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
-webkit-transform: translate(-50%, -50%); |
|
|
|
box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.24); |
|
|
|
} |
|
|
|
</style> |