From 5cc696b4686f3ee53d52ef41965be966eb20635d Mon Sep 17 00:00:00 2001 From: minglipro Date: Wed, 20 Aug 2025 14:04:19 +0800 Subject: [PATCH] =?UTF-8?q?feat(auth):=20=E6=B7=BB=E5=8A=A0=E9=AA=8C?= =?UTF-8?q?=E8=AF=81=E7=A0=81=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 login 和 register 页面添加验证码输入和验证功能 - 新增 captcha API 用于获取验证码图片 - 修改 login 和 register API 以包含验证码参数- 优化页面样式，调整输入框和按钮布局 - 更新表单验证规则，增加验证码校验 --- src/apis/auth/index.ts | 7 +++- src/apis/auth/type.ts | 5 +++ src/page/chehaoca/index.vue | 25 +++++++------ src/page/user/login.vue | 73 +++++++++++++++++++++++++++++++------ src/page/user/register.vue | 70 ++++++++++++++++++++++++++--------- src/resource/css/index.scss | 8 ++++ 6 files changed, 147 insertions(+), 41 deletions(-) diff --git a/src/apis/auth/index.ts b/src/apis/auth/index.ts index c5a3eff..6a780fa 100644 --- a/src/apis/auth/index.ts +++ b/src/apis/auth/index.ts @@ -1,5 +1,5 @@ import alova, { type AlovaResponse } from '@/plugins/alova'; -import type { LoginBody, RegisterBody, ResUserInfo } from '@/apis/auth/type.ts'; +import type { LoginBody, RegisterBody, ResCaptcha, ResUserInfo } from '@/apis/auth/type.ts'; export const login = (lb: LoginBody) => alova.Post>('/auth/login', lb, { @@ -14,3 +14,8 @@ export const register = (rb: RegisterBody) => { export const info = () => { return alova.Get>('/auth/info', { meta: { notbefore: true } }); }; + +export const captcha = () => + alova.Get>('/auth/captcha', { + meta: { notbefore: true }, + }); diff --git a/src/apis/auth/type.ts b/src/apis/auth/type.ts index 9f2875f..61af249 100644 --- a/src/apis/auth/type.ts +++ b/src/apis/auth/type.ts @@ -1,6 +1,7 @@ export interface LoginBody { passWold: string; userName: string; + uuid: string; } export interface RegisterBody { @@ -27,3 +28,7 @@ export interface ResUserInfo { user: User; login: boolean; } +export interface ResCaptcha { + captcha: string; + uuid: string; +} diff --git a/src/page/chehaoca/index.vue b/src/page/chehaoca/index.vue index ebf18b5..6e5ac73 100644 --- a/src/page/chehaoca/index.vue +++ b/src/page/chehaoca/index.vue @@ -14,10 +14,18 @@
可上磅 - 已出库 - 已入库 - 已撤销 - 已出库 + + 已撤销 + + + 已入库 + + + 已撤销 + + + 已出库 + 不可上磅
@@ -58,13 +66,7 @@ import { onMounted, ref } from 'vue'; import { getMyCar } from '@/apis/bacth'; import { UserStore } from '@/plugins'; -import { - NAlert, - NButton, - NDescriptions, - NDescriptionsItem, - NGradientText -} from 'naive-ui'; +import { NAlert, NButton, NDescriptions, NDescriptionsItem, NGradientText } from 'naive-ui'; import type { CarDataResType } from '@/apis/bacth/type.ts'; import UseApiLoading from '@/utils/UseApiLoading.ts'; @@ -99,6 +101,7 @@ function getdata() { getMyCars().then((a) => { console.log(a.json().Data); data.value = a.json().Data; + console.log(data.value); }); } onMounted(() => { diff --git a/src/page/user/login.vue b/src/page/user/login.vue index 5842863..d6fc5b5 100644 --- a/src/page/user/login.vue +++ b/src/page/user/login.vue @@ -17,6 +17,21 @@ + +
+ + +
+ 记住我 @@ -33,20 +48,33 @@
diff --git a/src/page/user/register.vue b/src/page/user/register.vue index c5d6488..9b9346f 100644 --- a/src/page/user/register.vue +++ b/src/page/user/register.vue @@ -23,6 +23,21 @@ + +
+ + +
+
我已已经有账号了 @@ -46,33 +61,44 @@ import { NInput, NText } from 'naive-ui'; -import { reactive, ref } from 'vue'; +import { onMounted, reactive, ref } from 'vue'; import message from '@/utils/message.ts'; -import { register } from '@/apis/auth'; -import { router, UserStore } from '@/plugins'; +import { captcha, register } from '@/apis/auth'; +import { UserStore } from '@/plugins'; import UseApiLoading from '@/utils/UseApiLoading.ts'; +const cpaimg = ref(''); const formRef = ref(null); const userStore = UserStore(); -const fromdata = reactive({ tel: '', car: '', pass: '', passre: '' }); +const fromdata = reactive({ tel: '', car: '', pass: '', passre: '', captcha: '', uuid: '' }); const [[regis_login], regise] = UseApiLoading(register); const regis = () => { formRef.value?.validate((errors: any) => { if (!errors) { - regise(fromdata).then((a) => { - userStore.ishaslogin = true; - userStore.token = a.json().Data; - userStore.getLogin(); - router.push({ name: 'index' }); - }); + regise(fromdata) + .then((a) => { + userStore.ishaslogin = true; + userStore.token = a.json().Data; + userStore.getLogin(); + window.location.replace('/'); + }) + .catch(() => { + captchas(); + fromdata.captcha = ''; + }); } else { message.error('请确认 填写信息是否正确'); } }); }; - +const captchas = () => { + captcha().then((a) => { + fromdata.uuid = a.json().Data.uuid; + cpaimg.value = a.json().Data.captcha; + }); +}; const rules = { tel: { key: 'tel', @@ -97,14 +123,10 @@ const rules = { pass: { key: 'pass', required: true, - message: - '密码强度低\n至少包含字母、数字、特殊字符，最少9位，并且不能连续出现3个大小连续或相同的数字(如：456、654、888)', + message: '最小8位，最大256位', trigger: ['input'], - validator(rule: FormItemRule, value: string) { - return RegExp( - '^(?=.*\\d)(?!.*(\\d)\\1{2})(?!.*(012|123|234|345|456|567|678|789|987|876|765|654|543|432|321|210))(?=.*[a-zA-Z])(?=.*[^\\da-zA-Z\\s]).{1,9}$', - ).test(value); - }, + min: 8, + max: 256, }, passre: { key: 'passre', @@ -115,6 +137,18 @@ const rules = { return fromdata.pass === value; }, }, + captcha: { + key: 'captcha', + required: true, + message: '验证码格式不正确 4位数字', + trigger: ['input'], + validator(rule: FormItemRule, value: string) { + const a = RegExp('^\\d{4}$').test(value); + console.log(a); + return a; + }, + }, }; +onMounted(captchas); diff --git a/src/resource/css/index.scss b/src/resource/css/index.scss index f06c245..bb05fee 100644 --- a/src/resource/css/index.scss +++ b/src/resource/css/index.scss @@ -3,6 +3,10 @@ html[theme="dark"] { background-color: #202020; color: #d8d8d8; + + *[b-r] { + border: 1px solid rgb(62, 62, 62); + } } *[f-c-c] { @@ -15,3 +19,7 @@ a { color: #1bbb44; text-decoration: none; } + +*[b-r] { + border: 1px solid rgba(194, 194, 194, 1); +}