<template>
|
<div class="login-view">
|
<div class="login-view-wrap">
|
<div class="logo">
|
<img src="../../assets/logo.png" alt="" />
|
</div>
|
<Form ref="form" :model="form" :rules="rules">
|
<FormItem prop="login">
|
<Input type="text" v-model="form.login" placeholder="登录名">
|
<Icon type="ios-person-outline" slot="prepend"></Icon>
|
</Input>
|
</FormItem>
|
<FormItem prop="password">
|
<Input type="password" v-model="form.password" placeholder="口令" @on-enter="onClick">
|
<Icon type="ios-lock-outline" slot="prepend"></Icon>
|
</Input>
|
</FormItem>
|
</Form>
|
<Button type="primary" @click="onClick">登录</Button>
|
<Spin fix v-if="loading" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { webConfig, setSession } from "@/utils";
|
export default {
|
name: "LoginView",
|
data() {
|
return {
|
form: {
|
login: "",
|
password: "",
|
},
|
rules: {
|
login: [{ required: true, message: "登录名不能为空", trigger: "blur" }],
|
password: [
|
{ required: true, message: "口令不能为空", trigger: "blur" },
|
],
|
},
|
loading: false,
|
};
|
},
|
methods: {
|
onClick() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
// 登录验证
|
if (!webConfig.admin || !webConfig.admin.id || !webConfig.admin.pwd) {
|
return this.$Message.error("管理员信息配置不完整!");
|
}
|
if (this.form.login == webConfig.admin.id) {
|
if (this.form.password == webConfig.admin.pwd) {
|
// 管理员登录成功
|
setSession({ id: this.form.login, admin: 1 });
|
} else {
|
// 管理员登录失败
|
return this.$Message.error("管理员登录失败，密码不正确!");
|
}
|
} else {
|
// 普通用户登录成功
|
setSession({ id: this.form.login, admin: 0 });
|
}
|
this.$Message.success("登录成功!");
|
setTimeout(() => this.$router.push("/"), 500);
|
} else {
|
this.$Message.error("登录失败!");
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.login-view {
|
background-color: #eeefff;
|
font-size: 14px;
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
.login-view-wrap {
|
width: 280px;
|
padding: 28px;
|
text-align: center;
|
margin: 100px auto 0;
|
background-color: #fff;
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
position: relative;
|
.logo {
|
margin-bottom: 20px;
|
img {
|
width: 150px;
|
}
|
}
|
}
|
}
|
</style>
|
