新增用户注册功能

This commit is contained in:
zjl 2024-12-20 09:07:01 +08:00
parent 54881ca611
commit ea9859b523
2 changed files with 40 additions and 12 deletions

View File

@ -22,6 +22,22 @@ export function getUserInfo() {
}); });
} }
/**
* @description:
*/
export function register(params) {
return http.request(
{
url: '/register',
method: 'POST',
params,
},
{
isTransformResponse: false,
},
);
}
/** /**
* @description: * @description:
*/ */

View File

@ -4,12 +4,12 @@
:show-label="false" :show-label="false"
:show-require-mark="false" :show-require-mark="false"
size="large" size="large"
:model="formInline" :model="formData"
:rules="rules" :rules="rules"
class="register-form" class="register-form"
> >
<n-form-item path="username"> <n-form-item path="username">
<n-input v-model:value="formInline.username" placeholder="请输入用户名"> <n-input v-model:value="formData.username" placeholder="请输入用户名">
<template #prefix> <template #prefix>
<n-icon size="18" color="#808695"> <n-icon size="18" color="#808695">
<UserOutlined /> <UserOutlined />
@ -18,7 +18,7 @@
</n-input> </n-input>
</n-form-item> </n-form-item>
<n-form-item path="mobile"> <n-form-item path="mobile">
<n-input v-model:value="formInline.mobile" placeholder="请输入手机号码"> <n-input v-model:value="formData.mobile" placeholder="请输入手机号码">
<template #prefix> <template #prefix>
<n-icon size="18" color="#808695"> <n-icon size="18" color="#808695">
<MobileOutlined /> <MobileOutlined />
@ -27,7 +27,7 @@
</n-input> </n-input>
</n-form-item> </n-form-item>
<n-form-item path="code"> <n-form-item path="code">
<n-input v-model:value.trim="formInline.code" placeholder="验证码"> <n-input v-model:value.trim="formData.code" placeholder="验证码">
<template #prefix> <template #prefix>
<n-icon size="18" color="#808695"> <n-icon size="18" color="#808695">
<SafetyCertificateOutlined /> <SafetyCertificateOutlined />
@ -42,7 +42,7 @@
</n-form-item> </n-form-item>
<n-form-item path="password"> <n-form-item path="password">
<n-input <n-input
v-model:value="formInline.password" v-model:value="formData.password"
type="password" type="password"
show-password-on="mousedown" show-password-on="mousedown"
placeholder="请输入密码" placeholder="请输入密码"
@ -56,7 +56,7 @@
</n-form-item> </n-form-item>
<n-form-item path="retPassword"> <n-form-item path="retPassword">
<n-input <n-input
v-model:value="formInline.retPassword" v-model:value="formData.retPassword"
type="password" type="password"
show-password-on="mousedown" show-password-on="mousedown"
placeholder="请再次输入密码" placeholder="请再次输入密码"
@ -74,7 +74,7 @@
<n-form-item class="default-color" path="agreement"> <n-form-item class="default-color" path="agreement">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex-initial"> <div class="flex-initial">
<n-checkbox v-model:checked="formInline.agreement">我同意隐私协议</n-checkbox> <n-checkbox v-model:checked="formData.agreement">我同意隐私协议</n-checkbox>
</div> </div>
</div> </div>
</n-form-item> </n-form-item>
@ -85,6 +85,8 @@
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import { useMessage } from 'naive-ui'; import { useMessage } from 'naive-ui';
import { rule } from '@/utils/validate'; import { rule } from '@/utils/validate';
import { ResultEnum } from '@/enums/httpEnum';
import { register } from '@/api/system/user';
import { import {
UserOutlined, UserOutlined,
MobileOutlined, MobileOutlined,
@ -100,13 +102,12 @@
const loading = ref(false); const loading = ref(false);
const codeMsg: any = ref('获取验证码'); const codeMsg: any = ref('获取验证码');
const isGetCode = ref(false); const isGetCode = ref(false);
const emit = defineEmits(['backLogin']); const emit = defineEmits(['backLogin']);
/** /**
* 定义表单参数 * 定义表单参数
*/ */
const formInline = reactive({ const formData = reactive({
username: '', username: '',
password: '', password: '',
retPassword: '', retPassword: '',
@ -162,10 +163,21 @@
.validate() .validate()
.then(async () => { .then(async () => {
loading.value = true; loading.value = true;
try {
const { code, msg } = await register(formData);
if (code == ResultEnum.SUCCESS) {
message.success('注册成功,请登录');
backLogin(); backLogin();
} else {
message.error(msg || '注册失败');
}
} finally {
loading.value = false; loading.value = false;
}
}) })
.catch((error) => { .catch((error) => {
console.log(error);
message.error('请填写完整信息'); message.error('请填写完整信息');
}); });
}; };
@ -181,7 +193,7 @@
* 获取验证码 * 获取验证码
*/ */
function getCode() { function getCode() {
if (!formInline.mobile) { if (!formData.mobile) {
formRef.value?.validate( formRef.value?.validate(
(errors) => {}, (errors) => {},
(rule) => { (rule) => {