|
|
@@ -1,8 +1,54 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 全局登录页面 账号 <input type="text" /> 密码
|
|
|
- <input type="text" /> 验证码 <input type="text" v-model="loginForm.code" /><img :src="image" alt="" />
|
|
|
- <button @click="login">登录</button>
|
|
|
+
|
|
|
+ <div class="login">
|
|
|
+ <h1>ByteSailing</h1>
|
|
|
+ <div class="content">
|
|
|
+ <div class="warp-bg">
|
|
|
+ <div class="left-bg">
|
|
|
+ <img src="../assets/login-img.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="right-bg">
|
|
|
+ <div class="form" style="margin-top:300px">
|
|
|
+ <div class="">欢迎登录~</div>
|
|
|
+ <h2>ByteSailing 管理系统</h2>
|
|
|
+ <div style="margin-top:30px">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入账号"
|
|
|
+ prefix-icon="el-icon-user-solid"
|
|
|
+ v-model="loginForm.username"
|
|
|
+ @keyup.enter.native="login">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:30px">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入密码"
|
|
|
+ prefix-icon="el-icon-s-goods"
|
|
|
+ type="password"
|
|
|
+ v-model="loginForm.passwordCopy"
|
|
|
+ @keyup.enter.native="login">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:30px" class="code">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ prefix-icon="el-icon-edit-outline"
|
|
|
+ v-model="loginForm.code"
|
|
|
+ @keyup.enter.native="login">
|
|
|
+ </el-input>
|
|
|
+ <img :src="image" @click="getCodeImg" alt="" />
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:30px">
|
|
|
+ <el-checkbox v-model="checked">记住密码</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" @click="login" style="width:100%;margin-top:30px">登录</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 全局登录页面 账号 <input type="text" /> 密码
|
|
|
+ <input type="text" /> 验证码 <input type="text" v-model="loginForm.code" />
|
|
|
+ <button @click="login">登录</button> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -13,6 +59,7 @@ import { Alert } from 'element-ui';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ checked:false,
|
|
|
loginForm: {
|
|
|
//租户ID
|
|
|
tenantId: '000000',
|
|
|
@@ -21,9 +68,9 @@ export default {
|
|
|
//角色ID
|
|
|
roleId: '',
|
|
|
//用户名
|
|
|
- username: 'admin',
|
|
|
+ username: '',
|
|
|
//密码
|
|
|
- password: 'admin',
|
|
|
+ passwordCopy: '',
|
|
|
//账号类型
|
|
|
type: 'account',
|
|
|
//验证码的值
|
|
|
@@ -41,8 +88,7 @@ export default {
|
|
|
methods: {
|
|
|
login() {
|
|
|
const v = this
|
|
|
- console.log(md5(v.loginForm.password))
|
|
|
- v.loginForm.password = md5(v.loginForm.password)
|
|
|
+ v.loginForm.password = md5(v.loginForm.passwordCopy)
|
|
|
axios({
|
|
|
method:"post",
|
|
|
url:'/api/blade-auth/oauth/token',
|
|
|
@@ -55,14 +101,35 @@ export default {
|
|
|
}).then(res=>{
|
|
|
console.log(res)
|
|
|
if(res.status == 200 && res.data){
|
|
|
+ window.localStorage.setItem("token",JSON.stringify(res.data))
|
|
|
setToken(res.data)
|
|
|
- alert('登录成功')
|
|
|
+ if(v.checked){
|
|
|
+ window.localStorage.setItem('username',v.loginForm.username)
|
|
|
+ window.localStorage.setItem('passwordCopy',v.loginForm.passwordCopy)
|
|
|
+ window.localStorage.setItem('checked',v.checked)
|
|
|
+ }else{
|
|
|
+ window.localStorage.setItem('username','')
|
|
|
+ window.localStorage.setItem('passwordCopy','')
|
|
|
+ window.localStorage.setItem('checked',false)
|
|
|
+ }
|
|
|
+ this.$message({
|
|
|
+ message: '登录成功，正在跳转。。。',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
setTimeout(()=>{
|
|
|
v.$router.push("/main")
|
|
|
},1000)
|
|
|
+ }else{
|
|
|
+
|
|
|
}
|
|
|
- // window.localStorage.setItem("token",JSON.stringify(res.data))
|
|
|
+ //
|
|
|
// v.$router.push("/emailHome")
|
|
|
+ }).catch(res=>{
|
|
|
+ console.log(res)
|
|
|
+ this.$message({
|
|
|
+ message: res.response.data.error_description,
|
|
|
+ type: 'error'
|
|
|
+ });
|
|
|
})
|
|
|
|
|
|
},
|
|
|
@@ -75,8 +142,73 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
- this.getCodeImg()
|
|
|
+ const v = this
|
|
|
+ v.getCodeImg()
|
|
|
+ if(window.localStorage.getItem('username')){
|
|
|
+ v.loginForm.username = window.localStorage.getItem('username')
|
|
|
+ v.loginForm.passwordCopy = window.localStorage.getItem('passwordCopy')
|
|
|
+ v.checked = true
|
|
|
+ }
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="less">
|
|
|
+.login{
|
|
|
+ .warp-bg{
|
|
|
+ background: #fff;
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ overflow: hidden;
|
|
|
+ .left-bg{
|
|
|
+ width: calc(~'50vw + 200px');
|
|
|
+ background: #0084FF;
|
|
|
+ height: 100vh;
|
|
|
+ float: left;
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ float: right;
|
|
|
+ margin-right: 75px;
|
|
|
+ margin-top: 120px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-bg{
|
|
|
+ width: calc(~'50vw - 200px');
|
|
|
+ background: url(../assets/login-right-bg.png) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ height: 100vh;
|
|
|
+ float: right;
|
|
|
+ overflow: hidden;
|
|
|
+ .form{
|
|
|
+ width: 500px;
|
|
|
+ padding:0 75px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .el-input{
|
|
|
+ input{
|
|
|
+ border:none;
|
|
|
+ border-bottom: 1px solid #DDDDDD;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code{
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ h1{
|
|
|
+ position: fixed;
|
|
|
+ left: 40px;
|
|
|
+ top: 0;
|
|
|
+ height: 96px;
|
|
|
+ line-height: 96px;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
|
|
|
asd26269546