优化登录、注册页

src/views/login/LoginForm.vue

@@ -106,6 +106,9 @@
   const captchaImg = ref('');
   // 动态加载滑块验证码组件
 
+  /**
+   * 定义表单参数
+   */
   interface FormState {
     username: string;
     password: string;
@@ -113,13 +116,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: '',
@@ -127,22 +135,26 @@
     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.validate(async (valid) => {
       if (valid) {
         loading.value = true;
-
         const params: FormState = {
           username: formInline.username,
           password: formInline.password,
@@ -150,7 +162,6 @@
           key: formInline.key,
           // grant_type:"password"
         };
-
         try {
           const { code, msg } = await userStore.login(params);
           if (code == ResultEnum.SUCCESS) {
@@ -175,15 +186,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

@@ -56,35 +56,51 @@
   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 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 userStore = useUserStore();
   const router = useRouter();
   const route = useRoute();
+
+  /**
+   * 获取手机验证码
+   */
   async function getCode() {
     if (!formInline.mobile) {
       formRef.value.validateField('mobile');
@@ -102,15 +118,19 @@
       }
     }, 1000);
   }
+
+  /**
+   * 执行提交表单
+   */
   const handleSubmit = () => {
     if (!formRef.value) return;
     formRef.value.validate(async (valid) => {
       if (valid) {
         loading.value = true;
 
+        // 提交参数
         const params: FormState = {
-          username: formInline.username,
-          password: formInline.password,
+          mobile: formInline.mobile,
           code: formInline.code,
           key: formInline.key,
         };
@@ -137,14 +157,6 @@
       }
     });
   };
-
-  const getCaptcha = async () => {
-    let { key, captcha } = await getInfoCaptcha();
-    formInline.key = key;
-    captchaImg.value = captcha;
-  };
-
-  getCaptcha();
 </script>
 
 <style lang="scss" scoped>

src/views/login/RegisterForm.vue

@@ -97,14 +97,18 @@
   import { PersonOutline } from '@vicons/ionicons5';
   import { SafetyCertificateOutlined } from '@vicons/antd';
 
+  /**
+   * 定义参数
+   */
   const formRef = ref();
-
   const loading = ref(false);
   const codeMsg: any = ref('获取验证码');
   const isGetCode = ref(false);
-
   const emit = defineEmits(['backLogin']);
 
+  /**
+   * 定义表单参数
+   */
   const formInline = reactive({
     username: '',
     password: '',
@@ -114,6 +118,9 @@
     agreement: false,
   });
 
+  /**
+   * 定义验证规则
+   */
   const rules = {
     username: { required: true, message: '请输入用户名', trigger: 'blur' },
     mobile: [
@@ -132,6 +139,9 @@
     },
   };
 
+  /**
+   * 执行提交表单
+   */
   const handleSubmit = () => {
     loading.value = true;
     formRef.value.validate(async (valid) => {
@@ -148,10 +158,16 @@
     });
   };
 
+  /**
+   * 定义返回登录
+   */
   const backLogin = () => {
     emit('backLogin', true);
   };
 
+  /**
+   * 获取验证码
+   */
   function getCode() {
     if (!formInline.mobile) {
       formRef.value.validateField('mobile');

src/views/login/index.vue

@@ -52,20 +52,41 @@
   import { UserAddOutlined } from '@vicons/antd';
   import { ArrowUndoOutline } from '@vicons/ionicons5';
   import { useDesignSettingStore } from '@/store/modules/designSetting';
-  const designStore = useDesignSettingStore();
-  //获取主题风格色
+
+  /**
+   * 获取主题风格色
+   */
   const getAppTheme = computed(() => {
     return designStore.appTheme;
   });
+
+  /**
+   * 定义参数
+   */
+  const designStore = useDesignSettingStore();
   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;
   };