mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 00:47:19 +08:00
refactor: login page
This commit is contained in:
xiaoxian521
parent
f19f27510b
commit
544e474e98
@ -9,8 +9,3 @@ export const getVerify = () => {
|
||||
export const getLogin = (data: object) => {
|
||||
return http.request("post", "/login", data);
|
||||
};
|
||||
|
||||
// 注册
|
||||
export const getRegist = (data: object) => {
|
||||
return http.request("post", "/register", data);
|
||||
};
|
||||
|
||||
@ -1,232 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, PropType, getCurrentInstance, watch, nextTick, toRef } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { initRouter } from "/@/router";
|
||||
import { storageSession } from "/@/utils/storage";
|
||||
|
||||
import bgText from "/@/assets/bg-text.png";
|
||||
import bgLogo from "/@/assets/bg-logo.png";
|
||||
|
||||
export interface ContextProps {
|
||||
userName: string;
|
||||
passWord: string;
|
||||
verify: number | null;
|
||||
svg: any;
|
||||
telephone?: number;
|
||||
dynamicText?: string;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
ruleForm: {
|
||||
type: Object as PropType<ContextProps>
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "onBehavior", evt: Object): void;
|
||||
(e: "refreshVerify"): void;
|
||||
}>();
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
const model = toRef(props, "ruleForm");
|
||||
let tips = ref<string>("注册");
|
||||
let tipsFalse = ref<string>("登录");
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
watch(
|
||||
route,
|
||||
async ({ path }): Promise<void> => {
|
||||
await nextTick();
|
||||
path.includes("register")
|
||||
? (tips.value = "登录") && (tipsFalse.value = "注册")
|
||||
: (tips.value = "注册") && (tipsFalse.value = "登录");
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const rules = ref<any>({
|
||||
userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
|
||||
passWord: [
|
||||
{ required: true, message: "请输入密码", trigger: "blur" },
|
||||
{ min: 6, message: "密码长度必须不小于6位", trigger: "blur" }
|
||||
],
|
||||
verify: [
|
||||
{ required: true, message: "请输入验证码", trigger: "blur" },
|
||||
{ type: "number", message: "验证码必须是数字类型", trigger: "blur" }
|
||||
]
|
||||
});
|
||||
|
||||
// 点击登录或注册
|
||||
const onBehavior = (evt: Object): void => {
|
||||
// @ts-expect-error
|
||||
instance.refs.ruleForm.validate((valid: boolean) => {
|
||||
if (valid) {
|
||||
emit("onBehavior", evt);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 刷新验证码
|
||||
const refreshVerify = (): void => {
|
||||
emit("refreshVerify");
|
||||
};
|
||||
|
||||
// 表单重置
|
||||
const resetForm = (): void => {
|
||||
// @ts-expect-error
|
||||
instance.refs.ruleForm.resetFields();
|
||||
};
|
||||
|
||||
// 登录、注册页面切换
|
||||
const changPage = (): void => {
|
||||
tips.value === "注册" ? router.push("/register") : router.push("/login");
|
||||
};
|
||||
|
||||
const noSecret = (): void => {
|
||||
storageSession.setItem("info", {
|
||||
username: "admin",
|
||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
|
||||
});
|
||||
initRouter("admin").then(() => {});
|
||||
router.push("/");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin: 20px 0 0 10px">
|
||||
<img :src="bgLogo" width="100" height="80" />
|
||||
<img :src="bgText" width="180" height="30" style="margin-bottom: 6px" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<el-form :model="model" :rules="rules" ref="ruleForm" class="rule-form">
|
||||
<el-form-item prop="userName">
|
||||
<el-input
|
||||
clearable
|
||||
v-model="model.userName"
|
||||
placeholder="请输入用户名"
|
||||
prefix-icon="el-icon-user"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="passWord">
|
||||
<el-input
|
||||
clearable
|
||||
type="password"
|
||||
show-password
|
||||
v-model="model.passWord"
|
||||
placeholder="请输入密码"
|
||||
prefix-icon="el-icon-lock"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="verify">
|
||||
<el-input
|
||||
maxlength="2"
|
||||
onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
|
||||
v-model.number="model.verify"
|
||||
placeholder="请输入验证码"
|
||||
></el-input>
|
||||
<span
|
||||
class="verify"
|
||||
title="刷新"
|
||||
v-html="model.svg"
|
||||
@click.prevent="refreshVerify"
|
||||
></span>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click.prevent="onBehavior">{{
|
||||
tipsFalse
|
||||
}}</el-button>
|
||||
<el-button @click="resetForm">重置</el-button>
|
||||
<span class="tips" @click="changPage">{{ tips }}</span>
|
||||
</el-form-item>
|
||||
<span title="测试用户 直接登录" class="secret" @click="noSecret"
|
||||
>免密登录</span
|
||||
>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.info {
|
||||
width: 30vw;
|
||||
height: 41vh;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba($color: #fff, $alpha: 0.2);
|
||||
background-size: cover;
|
||||
border-radius: 20px;
|
||||
right: 100px;
|
||||
top: 30vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: 800px) and (max-width: 1200px) {
|
||||
height: 38vh;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 421px) and (max-width: 799px) {
|
||||
width: 45vw;
|
||||
height: 35vh;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 321px) and (max-width: 420px) {
|
||||
width: 80vw;
|
||||
height: 48vh;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 0) and (max-width: 320px) {
|
||||
width: 90vw;
|
||||
height: 55vh;
|
||||
}
|
||||
|
||||
@media screen and (min-height: 600px) and (max-height: 800px) {
|
||||
height: 48vh;
|
||||
}
|
||||
|
||||
@media screen and (min-height: 400px) and (max-height: 599px) {
|
||||
height: 58vh;
|
||||
}
|
||||
|
||||
@media screen and (min-height: 0) and (max-height: 399px) {
|
||||
height: 78vh;
|
||||
}
|
||||
|
||||
.rule-form {
|
||||
width: 80%;
|
||||
|
||||
.verify {
|
||||
position: absolute;
|
||||
margin: -10px 0 0 -120px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #000;
|
||||
float: right;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secret {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -92,7 +92,6 @@ export const buttonConfig = {
|
||||
hsexitfullscreen: "退出全屏",
|
||||
hsrefreshRoute: "刷新路由",
|
||||
hslogin: "登陆",
|
||||
hsregister: "注册",
|
||||
hsadd: "新增",
|
||||
hsmark: "标记/取消",
|
||||
hssave: "保存",
|
||||
@ -116,7 +115,6 @@ export const buttonConfig = {
|
||||
hsexitfullscreen: "exitFullscreen",
|
||||
hsrefreshRoute: "refreshRoute",
|
||||
hslogin: "login",
|
||||
hsregister: "register",
|
||||
hsadd: "Add",
|
||||
hsmark: "Mark/Cancel",
|
||||
hssave: "Save",
|
||||
|
||||
@ -194,7 +194,7 @@ export function resetRouter() {
|
||||
}
|
||||
|
||||
// 路由白名单
|
||||
const whiteList = ["/login", "/register"];
|
||||
const whiteList = ["/login"];
|
||||
|
||||
router.beforeEach((to, _from, next) => {
|
||||
if (to.meta?.keepAlive) {
|
||||
|
||||
@ -11,16 +11,6 @@ const remainingRouter = [
|
||||
rank: 101
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/register",
|
||||
name: "register",
|
||||
component: () => import("/@/views/register.vue"),
|
||||
meta: {
|
||||
title: "message.hsregister",
|
||||
showLink: false,
|
||||
rank: 102
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/redirect",
|
||||
name: "redirect",
|
||||
|
||||
@ -65,15 +65,6 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
.login,
|
||||
.register {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: url("../assets/bg.jpg") no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 头部用户信息样式重置 */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { infoType } from "./type";
|
||||
import { useRouter } from "vue-router";
|
||||
import { reactive, onBeforeMount } from "vue";
|
||||
import { getVerify, getLogin } from "/@/api/user";
|
||||
import { storageSession } from "/@/utils/storage";
|
||||
import { warnMessage, successMessage } from "/@/utils/message";
|
||||
import info, { ContextProps } from "../components/ReInfo/index.vue";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 刷新验证码
|
||||
const refreshGetVerify = async () => {
|
||||
let { svg }: infoType = await getVerify();
|
||||
contextInfo.svg = svg;
|
||||
};
|
||||
|
||||
const contextInfo: ContextProps = reactive({
|
||||
userName: "",
|
||||
passWord: "",
|
||||
verify: null,
|
||||
svg: null
|
||||
});
|
||||
|
||||
const toPage = (info: Object): void => {
|
||||
storageSession.setItem("info", info);
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
// 登录
|
||||
const onLogin = async () => {
|
||||
let { userName, passWord, verify } = contextInfo;
|
||||
let { code, info, accessToken }: infoType = await getLogin({
|
||||
username: userName,
|
||||
password: passWord,
|
||||
verify: verify
|
||||
});
|
||||
code === 0
|
||||
? successMessage(info) &&
|
||||
toPage({
|
||||
username: userName,
|
||||
accessToken
|
||||
})
|
||||
: warnMessage(info);
|
||||
};
|
||||
|
||||
const refreshVerify = (): void => {
|
||||
refreshGetVerify();
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
// refreshGetVerify();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login">
|
||||
<info
|
||||
:ruleForm="contextInfo"
|
||||
@on-behavior="onLogin"
|
||||
@refreshVerify="refreshVerify"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,53 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, onBeforeMount } from "vue";
|
||||
import info, { ContextProps } from "../components/ReInfo/index.vue";
|
||||
import { getRegist, getVerify } from "/@/api/user";
|
||||
import { useRouter } from "vue-router";
|
||||
import { warnMessage, successMessage } from "/@/utils/message";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 刷新验证码
|
||||
const refreshGetVerify = async () => {
|
||||
let { svg } = await getVerify();
|
||||
contextInfo.svg = svg;
|
||||
};
|
||||
|
||||
const contextInfo: ContextProps = reactive({
|
||||
userName: "",
|
||||
passWord: "",
|
||||
verify: null,
|
||||
svg: null
|
||||
});
|
||||
|
||||
// 注册
|
||||
const onRegist = async () => {
|
||||
let { userName, passWord, verify } = contextInfo;
|
||||
let { code, info } = await getRegist({
|
||||
username: userName,
|
||||
password: passWord,
|
||||
verify: verify
|
||||
});
|
||||
code === 0
|
||||
? successMessage(info) && router.push("/login")
|
||||
: warnMessage(info);
|
||||
};
|
||||
|
||||
const refreshVerify = (): void => {
|
||||
refreshGetVerify();
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
// refreshGetVerify();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="register">
|
||||
<info
|
||||
:ruleForm="contextInfo"
|
||||
@on-behavior="onRegist"
|
||||
@refreshVerify="refreshVerify"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user