|
@@ -1,22 +1,38 @@
|
|
|
<template>
|
|
|
<div id="login">
|
|
|
<div class="header">
|
|
|
- <div class="hint"><span>AMR</span> AMR管理系统</div>
|
|
|
+ <div class="hint"><span>AMR</span> AMR管理系统</div>
|
|
|
</div>
|
|
|
- <div id="backPic"></div>
|
|
|
+ <div id="backPic"></div>
|
|
|
<div class="nav">
|
|
|
<div class="inputs">
|
|
|
<span>Hi,欢迎登录</span>
|
|
|
<div class="zhanghao inputDiv">
|
|
|
- <div class="iconfont username" style="font-size:20px;margin:auto 10px;"></div>
|
|
|
+ <div
|
|
|
+ class="iconfont username"
|
|
|
+ style="font-size: 20px; margin: auto 10px"
|
|
|
+ ></div>
|
|
|
<div>
|
|
|
- <input class="text" type="text" placeholder="请输入账号" v-model="username" />
|
|
|
+ <input
|
|
|
+ class="text"
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入账号"
|
|
|
+ v-model="username"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="password inputDiv">
|
|
|
- <div class="iconfont password" style="font-size:20px;margin:auto 10px;"></div>
|
|
|
+ <div
|
|
|
+ class="iconfont password"
|
|
|
+ style="font-size: 20px; margin: auto 10px"
|
|
|
+ ></div>
|
|
|
<div>
|
|
|
- <input class="pass" type="password" placeholder="请输入密码" v-model="password" />
|
|
|
+ <input
|
|
|
+ class="pass"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ v-model="password"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="vcode inputDiv">
|
|
@@ -24,7 +40,9 @@
|
|
|
<input class="inputcode" type="text" placeholder="请输入验证码" v-model="getcode" />
|
|
|
<div class="createcode" ref="vvcode">{{code}}</div>
|
|
|
</div> -->
|
|
|
- <div class="tologin" id="tologin" @click="UpLogin">登 录</div>
|
|
|
+ <div class="tologin" id="tologin" @click="UpLogin">
|
|
|
+ 登 录
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -32,16 +50,17 @@
|
|
|
|
|
|
<script>
|
|
|
import { mapGetters } from "vuex";
|
|
|
-import {Home} from '@/api/request.js'
|
|
|
+import { Home } from "@/api/request.js";
|
|
|
+import { setCodeToken } from "../utilts/auth";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- aa:{},
|
|
|
- UId:"",
|
|
|
+ aa: {},
|
|
|
+ UId: "",
|
|
|
username: "",
|
|
|
password: "",
|
|
|
getcode: "",
|
|
|
- code: ""
|
|
|
+ code: "",
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -101,14 +120,14 @@ export default {
|
|
|
if (!GetText) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
- message: "请输入账号"
|
|
|
+ message: "请输入账号",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!GetPassword) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
- message: "请输入密码"
|
|
|
+ message: "请输入密码",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
@@ -129,10 +148,10 @@ export default {
|
|
|
// this.getcode = "";
|
|
|
// return;
|
|
|
// }
|
|
|
- let loginData={
|
|
|
- username:this.username,
|
|
|
- password:this.password
|
|
|
- }
|
|
|
+ let loginData = {
|
|
|
+ username: this.username,
|
|
|
+ password: this.password,
|
|
|
+ };
|
|
|
// this.aa={
|
|
|
// userinfo: null,
|
|
|
// valide_info: "True",
|
|
@@ -142,50 +161,62 @@ export default {
|
|
|
// this.$store.state.login.userData=this.aa;
|
|
|
// console.log(this.$store.state.login.userData)
|
|
|
|
|
|
- Home(loginData).then(res=>{
|
|
|
- console.log(res);
|
|
|
- this.$store.state.login.userData=res
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ Home(loginData).then((res) => {
|
|
|
+ if (res.resultCode == 0) {
|
|
|
+ setCodeToken(res.token);
|
|
|
+ this.$router.push({ path: "/admin" });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ showClose: true,
|
|
|
+ message: "账户密码有误!",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // console.log(res);
|
|
|
+ // this.$store.state.login.userData=res
|
|
|
+ });
|
|
|
},
|
|
|
+ },
|
|
|
mounted() {
|
|
|
this.CreateCode();
|
|
|
document.onkeydown = function (event) {
|
|
|
- var e = event || window.event;
|
|
|
- if (e && e.keyCode == 13) { //回车键的键值为13
|
|
|
- document.getElementById('tologin').click(); //调用登录按钮的登录事件
|
|
|
-
|
|
|
- }
|
|
|
+ var e = event || window.event;
|
|
|
+ if (e && e.keyCode == 13) {
|
|
|
+ //回车键的键值为13
|
|
|
+ document.getElementById("tologin").click(); //调用登录按钮的登录事件
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters(['login'])
|
|
|
+ ...mapGetters(["login"]),
|
|
|
},
|
|
|
watch: {
|
|
|
- login:function(data){
|
|
|
- console.log(data)
|
|
|
- if(data.valide_info=="True"){
|
|
|
- // alert('成功')
|
|
|
- sessionStorage.setItem("userData", JSON.stringify({userName:this.username,time:Date.now()}));
|
|
|
- this.$message({
|
|
|
- message: '登录成功!',
|
|
|
- type: 'success'
|
|
|
- });
|
|
|
- this.$router.push({path:'/admin'})
|
|
|
- }else{
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: "账户密码有误!"
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
+ // login: function (data) {
|
|
|
+ // console.log(data);
|
|
|
+ // if (data.valide_info == "True") {
|
|
|
+ // // alert('成功')
|
|
|
+ // sessionStorage.setItem(
|
|
|
+ // "userData",
|
|
|
+ // JSON.stringify({ userName: this.username, time: Date.now() })
|
|
|
+ // );
|
|
|
+ // this.$message({
|
|
|
+ // message: "登录成功!",
|
|
|
+ // type: "success",
|
|
|
+ // });
|
|
|
+ // this.$router.push({ path: "/admin" });
|
|
|
+ // } else {
|
|
|
+ // this.$message({
|
|
|
+ // showClose: true,
|
|
|
+ // message: "账户密码有误!",
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // },
|
|
|
},
|
|
|
- created(){
|
|
|
- for(var i = 0; i < 5; i++){ requestAnimationFrame(() => console.log(i)); }
|
|
|
- }
|
|
|
-}
|
|
|
+ created() {
|
|
|
+ for (var i = 0; i < 5; i++) {
|
|
|
+ requestAnimationFrame(() => console.log(i));
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
@@ -204,8 +235,8 @@ export default {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
- background:rgba(255,255,255,1);
|
|
|
- box-shadow:0px 1px 6px 0px rgba(206,208,212,0.47);
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 1px 6px 0px rgba(206, 208, 212, 0.47);
|
|
|
}
|
|
|
.nav {
|
|
|
width: 100%;
|
|
@@ -224,21 +255,21 @@ export default {
|
|
|
left: 2.21%;
|
|
|
line-height: 4.25rem;
|
|
|
font-size: 1.125rem;
|
|
|
- font-weight:500;
|
|
|
- color:rgba(161,169,186,1);
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(161, 169, 186, 1);
|
|
|
}
|
|
|
.hint > span {
|
|
|
- font-size:1.125rem;
|
|
|
- font-weight:500;
|
|
|
- color:rgba(70,78,86,1);
|
|
|
- line-height:25px;
|
|
|
+ font-size: 1.125rem;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(70, 78, 86, 1);
|
|
|
+ line-height: 25px;
|
|
|
}
|
|
|
-.hint > span::after{
|
|
|
- content: "";
|
|
|
- width: 0.0625rem;
|
|
|
- height: 4.25rem;
|
|
|
- border-left: 1px solid #000000;
|
|
|
- margin-left: 10px;
|
|
|
+.hint > span::after {
|
|
|
+ content: "";
|
|
|
+ width: 0.0625rem;
|
|
|
+ height: 4.25rem;
|
|
|
+ border-left: 1px solid #000000;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
.inputs {
|
|
@@ -249,17 +280,17 @@ export default {
|
|
|
right: 15.4375rem;
|
|
|
top: 12.375rem;
|
|
|
text-align: center;
|
|
|
- box-shadow:0px 10px 20px 0px rgba(47,111,243,0.23);
|
|
|
+ box-shadow: 0px 10px 20px 0px rgba(47, 111, 243, 0.23);
|
|
|
padding: 4.5625rem 3.75rem;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.inputs > span {
|
|
|
- font-size:2.25rem;
|
|
|
- font-weight:500;
|
|
|
- color:rgba(0,0,0,1);
|
|
|
- line-height:3.125rem;
|
|
|
+ font-size: 2.25rem;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ line-height: 3.125rem;
|
|
|
}
|
|
|
|
|
|
.footer {
|
|
@@ -313,8 +344,8 @@ export default {
|
|
|
border: none;
|
|
|
line-height: 4.25rem;
|
|
|
border-left: solid 1px gray;
|
|
|
- font-size:14px;
|
|
|
- font-weight:500;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.iconfont:after {
|
|
@@ -333,8 +364,8 @@ export default {
|
|
|
border: none;
|
|
|
line-height: 4.25rem;
|
|
|
border-left: solid 1px gray;
|
|
|
- font-size:14px;
|
|
|
- font-weight:500;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.inputcode {
|
|
@@ -342,8 +373,8 @@ export default {
|
|
|
width: 55%;
|
|
|
border: none;
|
|
|
line-height: 4.25rem;
|
|
|
- font-size:14px;
|
|
|
- font-weight:500;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
.createcode {
|
|
|
height: 30px;
|