src/student/register/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, ref } from 'vue'
+import { defineComponent, nextTick, reactive, ref } from 'vue'
 import styles from './index.module.less'
 import iconTop from './images/icon-top.png'
 import iconBird from './images/icon-bird.png'
@@ -33,7 +33,7 @@ export default defineComponent({
       smsCode: null
     })
     const checked = ref(false) // 是否同意协议
-
+    const subBtn = ref(false) // 是否显示提交按钮
     const imgCodeStatus = ref(false) // 是否显示图片验证码
 
     const countDownTime = ref(1000 * 60) // 倒计时时间，单位毫秒
@@ -50,11 +50,13 @@ export default defineComponent({
     }
     const onCodeSend = () => {
       countDownStatus.value = false
-      countDownRef.value?.start()
+      nextTick(() => {
+        countDownRef.value?.start()
+      })
     }
     const onFinished = () => {
-      countDownStatus.value = true
       countDownRef.value?.reset()
+      countDownStatus.value = true
     }
 
     // 跳转协议
@@ -94,6 +96,7 @@ export default defineComponent({
         if (!checked.value) {
           return Toast('请同意用户注册协议和隐私政策')
         }
+        subBtn.value = true
         // 提交注册信息
         await request.post('/api-auth/smsLogin', {
           requestType: 'form',
@@ -112,6 +115,8 @@ export default defineComponent({
         router.push('/registerDownload')
       } catch {
         //
+      } finally {
+        subBtn.value = false
       }
     }
     return () => (
@@ -164,7 +169,7 @@ export default defineComponent({
                     </span>
                   ) : (
                     <CountDown
-                      ref={countDownRef.value}
+                      ref={(el: any) => (countDownRef.value = el)}
                       auto-start={false}
                       time={countDownTime.value}
                       onFinish={onFinished}
@@ -208,17 +213,23 @@ export default defineComponent({
             </span>
           </div>
           <div class={styles.btnBox}>
-            <Button round block type="primary" onClick={onSubmit}>
+            <Button
+              round
+              block
+              type="primary"
+              onClick={onSubmit}
+              disabled={subBtn.value}
+            >
               立即登录
             </Button>
           </div>
         </div>
 
+{/* registerType="REGISTER" */}
         {imgCodeStatus.value ? (
           <ImgCode
             v-model:value={imgCodeStatus.value}
             phone={forms.phone}
-            registerType="REGISTER"
             onClose={() => {
               imgCodeStatus.value = false
             }}