优化登录、注册

src/views/login/LoginForm.vue

@@ -95,6 +95,9 @@
   const captchaImg = ref('');
   // 动态加载滑块验证码组件
 
+  /**
+   * 定义表单参数
+   */
   interface FormState {
     username: string;
     password: string;
@@ -102,13 +105,18 @@
     key: string;
   }
 
+  /**
+   * 定义参数
+   */
   const emit = defineEmits(['backLogin']);
   const formRef = ref();
-
   const loading = ref(false);
   const autoLogin = ref(true);
   const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
 
+  /**
+   * 定义表单参数
+   */
   const formInline = reactive({
     username: '',
     password: '',
@@ -116,16 +124,21 @@
     key: '',
   });
 
+  /**
+   * 定义验证规则
+   */
   const rules = {
     username: { required: true, message: '请输入登录账号', trigger: 'blur' },
     password: { required: true, message: '请输入密码', trigger: 'blur' },
     code: { required: true, message: '请输入验证码', trigger: 'blur' },
   };
-  const userStore = useUserStore();
 
+  /**
+   * 执行提交表单
+   */
+  const userStore = useUserStore();
   const router = useRouter();
   const route = useRoute();
-
   const handleSubmit = () => {
     if (!formRef.value) return;
     formRef.value
@@ -163,15 +176,25 @@
       });
   };
 
+  /**
+   * 获取验证码
+   */
   const getCaptcha = async () => {
     let { key, captcha } = await getInfoCaptcha();
     formInline.key = key;
     captchaImg.value = captcha;
   };
+
+  /**
+   * 执行去注册
+   */
   const goRegister = () => {
     emit('backLogin', false);
   };
 
+  /**
+   * 获取验证码
+   */
   getCaptcha();
 </script>
 

src/views/login/PhoneForm.vue

@@ -50,36 +50,44 @@
   const captchaImg = ref('');
   // 动态加载滑块验证码组件
 
+  /**
+   * 定义表单接口
+   */
   interface FormState {
-    username: string;
-    password: string;
+    mobile: string;
     code: string;
     key: string;
   }
 
+  /**
+   * 定义参数
+   */
   const formRef = ref();
-
   const loading = ref(false);
-
   const codeMsg: any = ref('获取验证码');
   const isGetCode = ref(false);
-  const autoLogin = ref(true);
   const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
 
+  /**
+   * 定义表单参数
+   */
   const formInline = reactive({
     mobile: '',
     code: '',
     key: '',
   });
 
+  /**
+   * 定义验证规则
+   */
   const rules = {
     mobile: { required: true, message: '请输入手机号码', trigger: 'blur' },
     code: { required: true, message: '请输入验证码', trigger: 'blur' },
   };
-  const userStore = useUserStore();
 
-  const router = useRouter();
-  const route = useRoute();
+  /**
+   * 获取验证码
+   */
   function getCode() {
     if (!formInline.mobile) {
       formRef.value.validateFields('mobile');
@@ -96,6 +104,13 @@
       }
     }, 1000);
   }
+
+  /**
+   * 执行提交表单
+   */
+  const userStore = useUserStore();
+  const router = useRouter();
+  const route = useRoute();
   const handleSubmit = () => {
     if (!formRef.value) return;
     formRef.value.validate(async (valid) => {
@@ -103,8 +118,7 @@
         loading.value = true;
 
         const params: FormState = {
-          username: formInline.username,
-          password: formInline.password,
+          mobile: formInline.mobile,
           code: formInline.code,
           key: formInline.key,
         };
@@ -131,14 +145,6 @@
       }
     });
   };
-
-  const getCaptcha = async () => {
-    let { key, captcha } = await getInfoCaptcha();
-    formInline.key = key;
-    captchaImg.value = captcha;
-  };
-
-  getCaptcha();
 </script>
 
 <style lang="less" scoped>

src/views/login/RegisterForm.vue

@@ -76,7 +76,6 @@
 <script lang="ts" setup>
   import { reactive, ref } from 'vue';
   import { message } from 'ant-design-vue';
-  import { rule } from '@/utils/validate';
   import type { Rule } from 'ant-design-vue/es/form';
   import type { FormInstance } from 'ant-design-vue';
   import {
@@ -86,14 +85,18 @@
     LockOutlined,
   } from '@ant-design/icons-vue';
 
+  /**
+   * 定义参数
+   */
   const formRef = ref<FormInstance>();
-
   const loading = ref(false);
   const codeMsg: any = ref('获取验证码');
   const isGetCode = ref(false);
-
   const emit = defineEmits(['backLogin']);
 
+  /**
+   * 定义表单参数
+   */
   const formInline = reactive({
     username: '',
     password: '',
@@ -103,6 +106,11 @@
     agreement: false,
   });
 
+  /**
+   * 验证手机号
+   * @param _rule 验证规则
+   * @param value 参数值
+   */
   const validatePhone = async (_rule: Rule, value: string) => {
     var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
     if (!value) {
@@ -113,6 +121,10 @@
       return Promise.resolve();
     }
   };
+
+  /**
+   * 验证规则定义
+   */
   const rules: Record<string, Rule[]> = {
     username: { required: true, message: '请输入用户名', trigger: 'blur' },
     mobile: [{ required: true, validator: validatePhone, trigger: 'blur' }],
@@ -133,6 +145,9 @@
     },
   };
 
+  /**
+   * 执行提交表单
+   */
   const handleSubmit = () => {
     formRef.value
       .validate()
@@ -146,10 +161,16 @@
       });
   };
 
+  /**
+   * 执行去登录
+   */
   const backLogin = () => {
     emit('backLogin', true);
   };
 
+  /**
+   * 获取验证码
+   */
   function getCode() {
     if (!formInline.mobile) {
       formRef.value.validateFields('mobile');

src/views/login/index.vue

@@ -47,15 +47,33 @@
   import QrcodeForm from './QrcodeForm.vue';
   import RegisterForm from './RegisterForm.vue';
   import { UserAddOutlined, RollbackOutlined, ArrowLeftOutlined } from '@ant-design/icons-vue';
+
+  /**
+   * 定义参数
+   */
   const loginFlag = ref(true);
   const activeIndex = ref(0);
   const tabData = ref(['账号登录', '手机号登录', '扫码登录']);
+
+  /**
+   * 执行切换TAB
+   * @param index 参数
+   */
   const handleClick = (index) => {
     activeIndex.value = index;
   };
+
+  /**
+   * 执行切换登录、注册
+   */
   const handleCornerClick = () => {
     loginFlag.value = !loginFlag.value;
   };
+
+  /**
+   * 执行去登录
+   * @param type 参数
+   */
   const goLogin = (type) => {
     loginFlag.value = type;
   };