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

feat: 登录补充验证码

Browse Source
This commit is contained in:
xuziqiang
2024-06-17 16:59:30 +08:00
parent 91dd7a7d0c
commit 09fa01122c
14 changed files with 238 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/saas/store/modules/app-config.ts
View File

@@ -4,6 +4,7 @@ import { useApi, HttpRequestConfig } from '/nerv-lib/use/use-api';
interface AppConfig {
projectType: string;
projectName: string;
baseApi: string;
timeout: number;
pagePermission: boolean;

5
lib/saas/theme/variable.less
View File

@@ -1,4 +1,4 @@
@primary-color: #37abc4; // 全局主色
@primary-color: #2778FF; // 全局主色
@white: #fff;
@black: #000;
@@ -25,6 +25,9 @@
// Border color
@border-color-base: hsv(0, 0, 85%); // base border outline a component
// border
@border-radius-base: 4px;
//btn
//@btn-disable-color: #9b9b9b; //禁用按钮color
//@btn-disable-bg: #f5f5f5; //禁用按钮background

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

@@ -16,24 +16,31 @@
backgroundSize: 'cover',
}">
<div class="lg_card">
<h1 class="lg_card_title">账号登录</h1>
<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
placeholder="登录账号"
v-model:value="userName"
style="height: 48px; margin-bottom: 20px">
<!-- <p class="lg_card_tip">用户名/手机号</p> -->
<a-input class="loginInfo" placeholder="用户名" v-model:value="userName">
<template #prefix>
<ns-icon class="loginIcon" name="userName" size="25" style="margin-right: 5px" />
<ns-icon class="loginIcon" name="userName" size="19" style="margin-right: 20px" />
</template>
</a-input>
<p class="lg_card_tip">密码</p>
<a-input-password placeholder="登录密码" v-model:value="password" style="height: 48px">
<!-- <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="25" style="margin-right: 5px" />
<ns-icon class="loginIcon" name="passWord" size="19" style="margin-right: 20px" />
</template>
</a-input-password>
<!-- 验证码 -->
<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-button
@click="submit"
:loading="loading"
@@ -55,7 +62,7 @@
import { authorizationService } from '/nerv-base/store/modules/authorization-service';
import { Cookies } from '/nerv-lib/util/cookie';
import { storeToRefs } from 'pinia';
import { http } from '/nerv-lib/util';
export default defineComponent({
name: 'UserLogin',
setup() {
@@ -69,20 +76,37 @@
const router = useRouter();
const title = ref<string>('');
const initUrl = ref('');
const verifyCode = ref('');
const code = ref();
title.value = '账号登录';
// title.value = appConfig.title ? appConfig.title : '账号登录';
const loading = ref<boolean>(false);
const configStore = appConfigStore();
const { getThemeConfig: themeConfig } = storeToRefs(configStore);
console.log(configStore);
const { getThemeConfig: themeConfig, projectName } = storeToRefs(configStore);
const useAuthorization = authorizationService();
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;
}
if (userName.value !== '' && password.value !== '') {
errorShow.value = false;
@@ -159,7 +183,13 @@
? (url.value = 'src/assetimg/background.jpg')
: (url.value = 'src/assetimg/background.png');
};
const onGetCode = (res) => {
verifyCode.value = res;
};
return {
projectName,
onGetCode,
code,
title,
themeConfig,
url,
@@ -173,6 +203,7 @@
checkoutLogo,
checkoutBg,
errorShow,
configStore,
};
},
created() {
@@ -219,12 +250,12 @@
// border-radius: 50%;
}
.lg_card .loginIcon {
color: @primary-color !important;
}
// .lg_card .loginIcon {
// color: @primary-color !important;
// }
.ant-layout-header {
min-height: 64px;
background: #fff !important;
// background: #fff !important;
}
.ant-layout-content {
@@ -234,7 +265,7 @@
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 100px;
padding-right: 10%;
}
.ant-layout-footer {
@@ -250,32 +281,56 @@
}
.lg_card {
width: 385px;
height: 409px;
width: 500px;
height: 570px;
background: #fff;
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 5%), 0 0 18px 0 rgb(0 0 0 / 8%);
border-radius: 6px;
margin: 0 30px 0 30px;
padding: 35px;
padding: 50px;
border-radius: 10px;
// background: ;
border: 3px solid rgba(255, 255, 255, 1);
.lg_card_tip {
color: #a7b6c9;
margin-bottom: 12px;
}
.loginInfo {
height: 48px;
width: 100%;
margin-bottom: 31px;
:deep(.ant-input) {
font-size: 16px !important;
}
:deep(.ant-input-group) {
height: 100%;
.ant-input-affix-wrapper {
height: 100%;
}
.ant-input-group-addon {
padding: 0;
}
}
}
}
.lg_card .lg_card_title {
height: 28px;
font-size: 20px;
font-weight: bold;
color: #172e3d;
line-height: 28px;
text-align: left;
text-align: center;
font-size: 32px;
font-weight: 700;
letter-spacing: 0px;
line-height: 42px;
color: @primary-color;
text-align: center;
vertical-align: top;
}
.lg_card_error {
text-align: left;
color: #e4393c;
font-size: 14px;
color: #e00e12;
font-size: 16px;
}
.lg_card .loginIcon {
color: @primary-color !important;