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

fix: 登录校验调整

main
xuziqiang 4 months ago
parent
c7bbc1f003
commit
9316629faa
1 changed files with 86 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 139
      lib/saas/view/system/login.vue

139
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>
<!-- <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>
<!-- <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 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-input v-model:value="code" placeholder="验证码" class="loginInfo">
<template #prefix>
<ns-icon class="loginIcon" name="verifyIcon" size="19" style="margin-right: 20px" />
</template>
<template #addonAfter>
<ns-verify @get-code="onGetCode" />
</template>
</a-input>
<!-- 记住密码 -->
<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 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" />
</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-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;
}
}

Write Preview
Loading…
Cancel
Save