准备发短信

1

src/views/login/components/codeLogin.tsx

@@ -36,11 +36,13 @@ export default defineComponent({
     const showPwd = ref(false);
     const userStore = useUserStore();
     const formInline = reactive({
-      username: 'admin',
-      password: '123456',
+      username: '',
+      password: '',
       isCaptcha: true
     });
-
+    const isDisabledCode = ref(false);
+    const starTimer = ref(10);
+    const codeName = '发送短信';
     const handleSubmit = async () => {
       formRef.value.validate(async (errors: any) => {
         if (!errors) {
@@ -90,6 +92,25 @@ export default defineComponent({
         }
       });
     };
+
+    const sendMessage = () => {
+      checkTimeOut();
+    };
+
+    const checkTimeOut = () => {
+      if (isDisabledCode.value) {
+        return;
+      }
+      isDisabledCode.value = true;
+      const tiemr = setInterval(() => {
+        starTimer.value--;
+        console.log(starTimer.value);
+        if (starTimer.value <= 0) {
+          isDisabledCode.value = false;
+          clearInterval(tiemr);
+        }
+      }, 1000);
+    };
     return () => (
       <div class={styles['view-account-form-wrap']}>
         {/* <div class={styles.formTitle}>
@@ -104,11 +125,11 @@ export default defineComponent({
           <NFormItem
             path="username"
             rule={[
-              { required: true, message: '请输入用户名', trigger: 'blur' }
+              { required: true, message: '请输入手机号', trigger: 'blur' }
             ]}>
             <NInput
               v-model:value={formInline.username}
-              placeholder="请输入用户名">
+              placeholder="请输入手机号">
               {{
                 prefix: () => (
                   <img src={useIcon} class={styles.prefixIcon} alt="" />
@@ -118,7 +139,9 @@ export default defineComponent({
           </NFormItem>
           <NFormItem
             path="password"
-            rule={[{ required: true, message: '请输入密码', trigger: 'blur' }]}>
+            rule={[
+              { required: true, message: '请输入验证码', trigger: 'blur' }
+            ]}>
             <NInputGroup>
               <NInput
                 v-model:value={formInline.password}
@@ -137,7 +160,12 @@ export default defineComponent({
                     <img src={lockIcon} class={styles.prefixIcon} alt="" />
                   ),
                   suffix: () => (
-                    <NButton class={styles.sendMsg}>发送短信</NButton>
+                    <NButton
+                      class={styles.sendMsg}
+                      disabled={isDisabledCode.value}
+                      onClick={() => sendMessage()}>
+                      {isDisabledCode.value ? starTimer.value : codeName}
+                    </NButton>
                   )
                 }}
               </NInput>