报名弹窗关闭清除数据

src/components/layout/ApplyForm.vue

@@ -94,15 +94,12 @@ export default {
     handleSubmit() {
       const params = { ...this.ruleForm }
       api.postNes(params).then((response) => {
-        // this.$notify({ type: 'success', message: response.message })
-        // this.$dialog.alert({ message: response.message }).then(() => {
-        //   this.$emit('success')
-        // })
         this.$message.success(response.message)
         this.$emit('success')
         this.ruleForm.name = ''
         this.ruleForm.phone = ''
         this.phoneCode = ''
+        this.codeButtonDisabled = false
       })
     },
     // 校验短信验证码

src/components/layout/RightAside.vue

@@ -9,6 +9,8 @@ export default {
       tabBtnTarget: '',
       sendCode: '',
       isBtnDisabled: false,
+      disabledTime: 60,
+      timer: null,
       formInfo: {
         name: '',
         phone: '',
@@ -16,7 +18,11 @@ export default {
       }
     }
   },
-
+  computed: {
+    buttonText() {
+      return this.isBtnDisabled ? `${this.disabledTime}s` : '获取验证码'
+    }
+  },
   methods: {
     handleMsOver(type) {
       this.tabBtnActive = true
@@ -49,6 +55,11 @@ export default {
               message: '报名成功',
               duration: 5000
             })
+            this.formInfo.name = ''
+            this.formInfo.phone = ''
+            this.sendCode = ''
+            this.isBtnDisabled = false
+            this.tabBtnActive = false
           })
           .catch((err) => {
             if (err && err.type === 'checkcode') this.$message.error(err.msg)
@@ -97,7 +108,9 @@ export default {
               this.$message.success('验证码已发送，请注意查收')
             else this.$message.error('获取验证码失败，请稍后再试')
           })
-          .catch(() => {})
+          .catch(() => {
+            this.clearTimer()
+          })
       }
     },
     checkSendcode() {
@@ -126,19 +139,21 @@ export default {
     },
     btnDisabledTimer() {
       this.isBtnDisabled = true
-      let count = 60
-      document.querySelector('#checkedCode').innerHTML = count + 's'
-      const timer = setInterval(() => {
-        count--
-        if (count < 1) {
-          clearInterval(timer)
-          this.isBtnDisabled = false
-          document.querySelector('#checkedCode').innerHTML = '获取验证码'
-        } else {
-          document.querySelector('#checkedCode').innerHTML = count + 's'
+      this.disabledTime = 60
+      this.timer = setInterval(() => {
+        this.disabledTime--
+        if (this.disabledTime < 1) {
+          this.clearTimer()
         }
       }, 1000)
+    },
+    clearTimer() {
+      this.isBtnDisabled = false
+      this.timer && clearInterval(this.timer)
     }
+  },
+  destroyed() {
+    this.clearTimer()
   }
 }
 </script>
@@ -185,14 +200,14 @@ export default {
             v-model="sendCode"
             placeholder="请输入验证码"
             size="small"
-          ></el-input
-          ><el-button
+          ></el-input>
+          <el-button
             class="btn"
             :disabled="isBtnDisabled"
             id="checkedCode"
             @click="getSendCode"
           >
-            获取验证码
+            {{ buttonText }}
           </el-button>
         </div>
         <div class="p">