新增用户注册

src/api/system/user.ts

@@ -22,6 +22,22 @@ export function getUserInfo() {
   });
 }
 
+/**
+ * @description: 用户注册
+ */
+export function register(params) {
+  return http.request(
+    {
+      url: '/register',
+      method: 'POST',
+      params,
+    },
+    {
+      isTransformResponse: false,
+    },
+  );
+}
+
 /**
  * @description: 用户登录
  */
@@ -246,6 +262,6 @@ export function sendMsg(data) {
   return http.request({
     url: '/websocket/sendMsg',
     method: 'post',
-    data
+    data,
   });
 }

src/views/login/RegisterForm.vue

@@ -4,26 +4,26 @@
     :show-label="false"
     :show-require-mark="false"
     size="large"
-    :model="formInline"
+    :model="formData"
     :rules="rules"
     class="register-form"
   >
     <a-form-item name="username">
-      <a-input v-model:value="formInline.username" placeholder="请输入用户名">
+      <a-input v-model:value="formData.username" placeholder="请输入用户名">
         <template #prefix>
           <UserOutlined style="color: #808695; font-size: 18px" />
         </template>
       </a-input>
     </a-form-item>
     <a-form-item name="mobile">
-      <a-input v-model:value="formInline.mobile" placeholder="请输入手机号码">
+      <a-input v-model:value="formData.mobile" placeholder="请输入手机号码">
         <template #prefix>
           <MobileOutlined style="color: #808695; font-size: 18px" />
         </template>
       </a-input>
     </a-form-item>
     <a-form-item name="code">
-      <a-input v-model:value.trim="formInline.code" placeholder="验证码">
+      <a-input v-model:value.trim="formData.code" placeholder="验证码">
         <template #prefix>
           <SafetyCertificateOutlined style="color: #808695; font-size: 18px" />
         </template>
@@ -36,7 +36,7 @@
     </a-form-item>
     <a-form-item name="password">
       <a-input
-        v-model:value="formInline.password"
+        v-model:value="formData.password"
         type="password"
         show-password
         placeholder="请输入密码"
@@ -48,7 +48,7 @@
     </a-form-item>
     <a-form-item name="retPassword">
       <a-input
-        v-model:value="formInline.retPassword"
+        v-model:value="formData.retPassword"
         type="password"
         show-password
         placeholder="请再次输入密码"
@@ -66,7 +66,7 @@
     <a-form-item class="default-color" name="agreement">
       <div class="flex items-center justify-between">
         <div class="flex-initial">
-          <a-checkbox v-model:checked="formInline.agreement">我同意隐私协议</a-checkbox>
+          <a-checkbox v-model:checked="formData.agreement">我同意隐私协议</a-checkbox>
         </div>
       </div>
     </a-form-item>
@@ -77,7 +77,8 @@
   import { reactive, ref } from 'vue';
   import { message } from 'ant-design-vue';
   import type { Rule } from 'ant-design-vue/es/form';
-  import type { FormInstance } from 'ant-design-vue';
+  import { ResultEnum } from '@/enums/httpEnum';
+  import { register } from '@/api/system/user';
   import {
     UserOutlined,
     MobileOutlined,
@@ -88,7 +89,7 @@
   /**
    * 定义参数
    */
-  const formRef = ref<FormInstance>();
+  const formRef = ref();
   const loading = ref(false);
   const codeMsg: any = ref('获取验证码');
   const isGetCode = ref(false);
@@ -97,7 +98,7 @@
   /**
    * 定义表单参数
    */
-  const formInline = reactive({
+  const formData = reactive({
     username: '',
     password: '',
     retPassword: '',
@@ -125,7 +126,7 @@
   /**
    * 验证规则定义
    */
-  const rules: Record<string, Rule[]> = {
+  const rules = {
     username: { required: true, message: '请输入用户名', trigger: 'blur' },
     mobile: [{ required: true, validator: validatePhone, trigger: 'blur' }],
     code: { required: true, message: '请输入短信验证码', trigger: 'blur' },
@@ -153,10 +154,21 @@
       .validate()
       .then(async () => {
         loading.value = true;
-        backLogin();
+
-        loading.value = false;
+        try {
+          const { code, msg } = await register(formData);
+          if (code == ResultEnum.SUCCESS) {
+            message.success('注册成功，请登录');
+            backLogin();
+          } else {
+            message.error(msg || '登录失败');
+          }
+        } finally {
+          loading.value = false;
+        }
       })
       .catch((error) => {
+        console.log(error);
         message.error('请填写完整信息');
       });
   };
@@ -172,7 +184,7 @@
    * 获取验证码
    */
   function getCode() {
-    if (!formInline.mobile) {
+    if (!formData.mobile) {
       formRef.value.validateFields('mobile');
       return;
     }