刷新

src/views/login.vue

@@ -1,225 +1,235 @@
 <template>
-	
-	<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.tenantId"
-								@keyup.enter.native="login">
-							</el-input>
-						</div>
-						<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" /> 密码
+  <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.tenantId"
+                @keyup.enter.native="login"
+              >
+              </el-input>
+            </div>
+            <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>
+  </div>
 </template>
 <script>
-import axios from 'axios';
-import md5 from 'js-md5';
-import { getAll,setToken } from '@/libs/micros'
-import { Alert } from 'element-ui';
+import axios from "axios";
+import md5 from "js-md5";
+import { getAll, setToken } from "@/libs/micros";
+import { Alert } from "element-ui";
 export default {
-	data() {
-		return {
-			checked:false,
-			loginForm: {
-				//租户ID
-				tenantId: '845206',
-				//部门ID
-				deptId: '',
-				//角色ID
-				roleId: '',
-				//用户名
-				username: '',
-				//密码
-				passwordCopy: '',
-				//账号类型
-				type: 'loginWithoutVerificationCode',
-				//验证码的值
-				code: '',
-				//验证码的索引
-				key: '',
-                grant_type: 'captcha',
-                scope: 'all'
-				//预加载白色背景
-				
-			},
-            image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-		}
-	},
-	methods: {
-		login() {
-			const v = this
-			v.loginForm.password = md5(v.loginForm.passwordCopy)
-			axios({
-				method:"post",
-				url:'/api/blade-auth/oauth/token',
-				params:this.loginForm,
-				headers:{
-					'Captcha-Key':this.loginForm.key,
-					'Captcha-Code':this.loginForm.code,
-					'Tenant-Id': this.loginForm.tenantId
-				},
-			}).then(res=>{
-				console.log(res)
-				if(res.status == 200 && res.data){
-					window.localStorage.setItem("token",JSON.stringify(res.data))
-					setToken(res.data)
-					console.log(v.checked)
-					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{
-					
-				}
-				// 
-                // v.$router.push("/emailHome")
-			}).catch(res=>{
-				console.log(res)
-				this.$message({
-					message: res.response.data.error_description,
-					type: 'error'
-				});
-			})
-			
-		},
-		getCodeImg() {
-			this.$get('/api/blade-auth/oauth/captcha').then((res) => {
-                const data = res
-                this.loginForm.key = data.key
-                this.image = data.image
-            })
-		},
-	},
-	created() {
-		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
-		}
-	},
-}
+  data() {
+    return {
+      checked: false,
+      loginForm: {
+        //租户ID
+        tenantId: "845206",
+        //部门ID
+        deptId: "",
+        //角色ID
+        roleId: "",
+        //用户名
+        username: "",
+        //密码
+        passwordCopy: "",
+        //账号类型
+        type: "loginWithoutVerificationCode",
+        //验证码的值
+        code: "",
+        //验证码的索引
+        key: "",
+        grant_type: "captcha",
+        scope: "all",
+        //预加载白色背景
+      },
+      image:
+        "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+    };
+  },
+  methods: {
+    login() {
+      const v = this;
+      v.loginForm.password = md5(v.loginForm.passwordCopy);
+      axios({
+        method: "post",
+        url: "/api/blade-auth/oauth/token",
+        params: this.loginForm,
+        headers: {
+          "Captcha-Key": this.loginForm.key,
+          "Captcha-Code": this.loginForm.code,
+          "Tenant-Id": this.loginForm.tenantId,
+        },
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.status == 200 && res.data) {
+            window.localStorage.setItem("token", JSON.stringify(res.data));
+            setToken(res.data);
+            console.log(v.checked);
+            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);
+            setTimeout(() => {
+              location.reload();
+            }, 1500);
+          } else {
+          }
+          //
+          // v.$router.push("/emailHome")
+        })
+        .catch((res) => {
+          console.log(res);
+          this.$message({
+            message: res.response.data.error_description,
+            type: "error",
+          });
+        });
+    },
+    getCodeImg() {
+      this.$get("/api/blade-auth/oauth/captcha").then((res) => {
+        const data = res;
+        this.loginForm.key = data.key;
+        this.image = data.image;
+      });
+    },
+  },
+  created() {
+    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;
-	}
-	
+.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>