<template>
<div class="login-container">
<div class="login-box">
<div class="login-title">Login</div>
<el-form
:model="loginForm"
:rules="rules"
ref="loginForm"
class="login-form"
>
<el-form-item label="Name" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<!-- <el-form-item label="Gender" prop="gender">
<el-radio-group v-model="loginForm.gender">
<el-radio label="male">Male</el-radio>
<el-radio label="female">Female</el-radio>
</el-radio-group>
</el-form-item> -->
<el-form-item label="Password" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">Login</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
loginForm: {
name: "",
// gender: "male",
password: "12345678",
},
rules: {
username: [
{ required: true, message: "Please input name", trigger: "blur" },
],
// gender: [{ required: true, message: "Please select gender", trigger: "change" }],
password: [
{ required: true, message: "Please input password", trigger: "blur" },
],
},
};
},
methods: {
submitForm() {
this.$refs.loginForm.validate((valid) => {
if (valid && this.loginForm.username != "admin") {
this.$http
.post("/login", this.loginForm)
.then((res) => {
if (res.data.code == 0) {
localStorage.setItem("token", res.data.data);
this.$router.push({
path: "/list",
query: { username: this.loginForm.username },
});
} else {
this.$alert(res.data.msg, "Login Failed", {
confirmButtonText: "confirm",
type: "error",
});
}
})
.catch((err) => {
console.error(err);
});
} else if (this.loginForm.username == "admin") {
this.$router.push("/admin");
} else {
return false;
}
});
},
},
};
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 40%;
}
.login-box {
padding: 20px;
border: 1px solid #eee;
border-radius: 4px;
background-color: #fff;
width: 400px;
}
.login-title {
font-size: 30px;
text-align: center;
margin-bottom: 20px;
}
.login-form {
margin-top: 30px;
}
.el-form-item__label {
width: 80px;
}
.el-button {
width: 100%;
margin-top: 20px;
display: flex;
justify-content: center;
}
</style>