|
|
@@ -1,27 +1,15 @@
|
|
|
<template>
|
|
|
- <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
|
|
|
- <el-form-item prop="username">
|
|
|
- <el-input v-model="loginForm.username" placeholder="用户名：admin / user">
|
|
|
- <template #prefix>
|
|
|
- <el-icon class="el-input__icon">
|
|
|
- <user />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
+ <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-position="top" hide-required-asterisk="false">
|
|
|
+ <el-form-item label="账号" prop="username">
|
|
|
+ <el-input class="no-border" v-model="loginForm.username" placeholder="请输入账号" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="password">
|
|
|
- <el-input v-model="loginForm.password" type="password" placeholder="密码：123456" show-password autocomplete="new-password">
|
|
|
- <template #prefix>
|
|
|
- <el-icon class="el-input__icon">
|
|
|
- <lock />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
+ <el-form-item label="密码" prop="password">
|
|
|
+ <el-input class="no-border" v-model="loginForm.password" type="password" placeholder="请输入密码" show-password autocomplete="new-password"/>
|
|
|
</el-form-item>
|
|
|
+ <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
|
|
|
</el-form>
|
|
|
<div class="login-btn">
|
|
|
- <el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)"> 重置 </el-button>
|
|
|
- <el-button :icon="UserFilled" round size="large" type="primary" :loading="loading" @click="login(loginFormRef)">
|
|
|
+ <el-button style="width: 100%;" size="large" type="primary" :loading="loading" @click="login(loginFormRef)">
|
|
|
登录
|
|
|
</el-button>
|
|
|
</div>
|
|
|
@@ -57,6 +45,7 @@ const loginRules = reactive({
|
|
|
|
|
|
const loading = ref(false);
|
|
|
const loginForm = reactive<Login.ReqLoginForm>({
|
|
|
+ rememberMe: false,
|
|
|
username: "",
|
|
|
password: ""
|
|
|
});
|
|
|
@@ -67,6 +56,18 @@ const login = (formEl: FormInstance | undefined) => {
|
|
|
formEl.validate(async valid => {
|
|
|
if (!valid) return;
|
|
|
loading.value = true;
|
|
|
+
|
|
|
+ if (loginForm.rememberMe) {
|
|
|
+ localStorage.setItem('username', String(loginForm.username));
|
|
|
+ localStorage.setItem('password', String(loginForm.password));
|
|
|
+ localStorage.setItem('rememberMe', String(loginForm.rememberMe));
|
|
|
+ } else {
|
|
|
+ // 否则移除
|
|
|
+ localStorage.removeItem('username');
|
|
|
+ localStorage.removeItem('password');
|
|
|
+ localStorage.removeItem('rememberMe');
|
|
|
+ }
|
|
|
+
|
|
|
try {
|
|
|
// 1.执行登录接口
|
|
|
const { data } = await loginApi({ ...loginForm, password: md5(loginForm.password) });
|
|
|
@@ -93,6 +94,15 @@ const login = (formEl: FormInstance | undefined) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+const getLoginData = () => {
|
|
|
+ const username = localStorage.getItem('username');
|
|
|
+ const password = localStorage.getItem('password');
|
|
|
+ const rememberMe = localStorage.getItem('rememberMe');
|
|
|
+ loginForm.username = username === null ? String(loginForm.username) : username
|
|
|
+ loginForm.password = password === null ? String(loginForm.password) : String(password)
|
|
|
+ loginForm.rememberMe = rememberMe === null ? false : Boolean(rememberMe)
|
|
|
+};
|
|
|
+
|
|
|
// resetForm
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
if (!formEl) return;
|
|
|
@@ -107,6 +117,7 @@ onMounted(() => {
|
|
|
login(loginFormRef.value);
|
|
|
}
|
|
|
};
|
|
|
+ getLoginData()
|
|
|
});
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
@@ -116,4 +127,9 @@ onBeforeUnmount(() => {
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@import "../index.scss";
|
|
|
+::v-deep .no-border .el-input__wrapper {
|
|
|
+ box-shadow: 0 0 0 0px!important;
|
|
|
+ background-color: #F2F2F2;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
cxs