xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: 登录校验调整

Browse Source
This commit is contained in:
xuziqiang
2024-07-05 18:19:03 +08:00
parent c7bbc1f003
commit 9316629faa
1 changed files with 86 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
lib/saas/view/system/login.vue
View File

@@ -19,33 +19,51 @@
<h1 class="lg_card_title">{{ configStore.projectName }}</h1>
<p v-show="!errorShow" style="height: 8px"></p>
<p v-show="errorShow" class="lg_card_error">{{ errorMsg }}</p>
<a-form name="basic" :model="formState" @finish="submit">
<a-form-item name="userName" :rules="[{ required: true, message: '请输入用户名' }]">
<!-- <p class="lg_card_tip">用户名/手机号</p> -->
<a-input class="loginInfo" placeholder="用户名" v-model:value="userName">
<template #prefix>
<ns-icon class="loginIcon" name="userName" size="19" style="margin-right: 20px" />
</template>
</a-input>
</a-form-item>
<a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
<!-- <p class="lg_card_tip">密码</p> -->
<a-input-password class="loginInfo" placeholder="密码" v-model:value="password">
<template #prefix>
<ns-icon class="loginIcon" name="passWord" size="19" style="margin-right: 20px" />
</template>
</a-input-password>
<!-- 验证码 -->
</a-form-item>
<a-form-item name="code" :rules="[{ validator }]">
<!-- 验证码 -->
<a-input v-model:value="code" placeholder="验证码" class="loginInfo">
<template #prefix>
<ns-icon class="loginIcon" name="verifyIcon" size="19" style="margin-right: 20px" />
<ns-icon
class="loginIcon"
name="verifyIcon"
size="19"
style="margin-right: 20px" />
</template>
<template #addonAfter>
<ns-verify @get-code="onGetCode" />
</template>
</a-input>
</a-form-item>
<!-- <a-form-item name="remember"> -->
<!-- 记住密码 -->
<a-checkbox v-model:checked="isRemember" class="loginInfo">记住密码</a-checkbox>
<a-button @click="submit" :loading="loading" type="primary" class="loginInfo"
>登录</a-button
>
<!-- </a-form-item> -->
<a-form-item>
<a-button html-type="submit" :loading="loading" type="primary" class="loginInfo">
登录
</a-button>
</a-form-item>
</a-form>
</div>
</a-layout-content>
<!-- <a-layout-footer>Copyright 2021 xu科技 All Rights Reserved</a-layout-footer> -->
@@ -54,7 +72,7 @@
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { appConfigStore } from '/nerv-lib/saas/store/modules/app-config';
import { authorizationService } from '/nerv-base/store/modules/authorization-service';
@@ -81,11 +99,12 @@
// title.value = appConfig.title ? appConfig.title : '账号登录';
const loading = ref<boolean>(false);
const configStore = appConfigStore();
console.log(configStore);
const formState = reactive({ userName, password, code });
const { getThemeConfig: themeConfig, projectName } = storeToRefs(configStore);
const useAuthorization = authorizationService();
const rememberFunc = (data) => {
console.log(isRemember.value);
if (!isRemember.value) return;
@@ -97,29 +116,33 @@
const { accountNo, password: pwd } = JSON.parse(data);
userName.value = accountNo;
password.value = pwd;
formState.userName = userName.value;
formState.password = password.value;
}
});
const submit = (): void => {
if (password.value === '') {
errorMsg.value = '请输入密码';
errorShow.value = true;
return;
}
if (userName.value === '') {
errorMsg.value = '请输入账号';
errorShow.value = true;
return;
}
if (!code.value) {
errorMsg.value = '请输入验证码';
errorShow.value = true;
return;
}
if (code.value.toLocaleLowerCase() !== verifyCode.value.toLocaleLowerCase()) {
errorMsg.value = '请输入正确的验证码';
errorShow.value = true;
return;
}
const submit = (value): void => {
console.log(value);
// if (password.value === '') {
// errorMsg.value = '请输入密码';
// errorShow.value = true;
// return;
// }
// if (userName.value === '') {
// errorMsg.value = '请输入账号';
// errorShow.value = true;
// return;
// }
// if (!code.value) {
// // errorMsg.value = '请输入验证码';
// // errorShow.value = true;
// return;
// }
// if (code.value.toLocaleLowerCase() !== verifyCode.value.toLocaleLowerCase()) {
// errorMsg.value = '请输入正确的验证码';
// errorShow.value = true;
// return;
// }
if (userName.value !== '' && password.value !== '') {
errorShow.value = false;
let data = JSON.stringify({
@@ -208,7 +231,15 @@
const onGetCode = (res) => {
verifyCode.value = res;
};
const validator = async (rule, value) => {
if (!value) return Promise.reject('请输入验证码');
if (value?.toLocaleLowerCase() !== verifyCode.value.toLocaleLowerCase())
return Promise.reject('请输入正确的验证码');
};
return {
validator,
formState,
projectName,
onGetCode,
code,
@@ -323,7 +354,7 @@
.loginInfo {
height: 48px;
width: 100%;
margin-bottom: 24px;
// margin-bottom: 24px;
font-size: 16px !important;
:deep(.ant-input) {
@@ -340,10 +371,12 @@
}
}
.loginInfo:last-child {
margin-bottom: 16px;
// margin-bottom: 16px;
}
.loginInfo:nth-child(5n + 2) {
margin-bottom: 0px;
.loginInfo:nth-child(4) {
width: fit-content;
// margin-bottom: 0px;
// height: 20px !important;
}
}