mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 17:07: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) => {
|
export const getLogin = (data: object) => {
|
||||||
return http.request("post", "/login", data);
|
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: "退出全屏",
|
hsexitfullscreen: "退出全屏",
|
||||||
hsrefreshRoute: "刷新路由",
|
hsrefreshRoute: "刷新路由",
|
||||||
hslogin: "登陆",
|
hslogin: "登陆",
|
||||||
hsregister: "注册",
|
|
||||||
hsadd: "新增",
|
hsadd: "新增",
|
||||||
hsmark: "标记/取消",
|
hsmark: "标记/取消",
|
||||||
hssave: "保存",
|
hssave: "保存",
|
||||||
@ -116,7 +115,6 @@ export const buttonConfig = {
|
|||||||
hsexitfullscreen: "exitFullscreen",
|
hsexitfullscreen: "exitFullscreen",
|
||||||
hsrefreshRoute: "refreshRoute",
|
hsrefreshRoute: "refreshRoute",
|
||||||
hslogin: "login",
|
hslogin: "login",
|
||||||
hsregister: "register",
|
|
||||||
hsadd: "Add",
|
hsadd: "Add",
|
||||||
hsmark: "Mark/Cancel",
|
hsmark: "Mark/Cancel",
|
||||||
hssave: "Save",
|
hssave: "Save",
|
||||||
|
|||||||
@ -194,7 +194,7 @@ export function resetRouter() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 路由白名单
|
// 路由白名单
|
||||||
const whiteList = ["/login", "/register"];
|
const whiteList = ["/login"];
|
||||||
|
|
||||||
router.beforeEach((to, _from, next) => {
|
router.beforeEach((to, _from, next) => {
|
||||||
if (to.meta?.keepAlive) {
|
if (to.meta?.keepAlive) {
|
||||||
|
|||||||
@ -11,16 +11,6 @@ const remainingRouter = [
|
|||||||
rank: 101
|
rank: 101
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/register",
|
|
||||||
name: "register",
|
|
||||||
component: () => import("/@/views/register.vue"),
|
|
||||||
meta: {
|
|
||||||
title: "message.hsregister",
|
|
||||||
showLink: false,
|
|
||||||
rank: 102
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "/redirect",
|
path: "/redirect",
|
||||||
name: "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 {
|
.hidden {
|
||||||
display: none !important;
|
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