修改获取验证码

src/views/center/findPassword.vue

@@ -48,10 +48,7 @@
                     </el-icon>
                   </template>
                   <template v-slot:append>
-                    <el-button :disabled="codeCd1" @click="handleCaptcha1('form')"
-                      >获取验证码
-                      <span v-if="codeCd1">({{ long1 }})</span>
-                    </el-button>
+                    <el-button type="primary" @click="getVerifyCode" :disabled="disabledVerify">{{ verify.buttonText }}</el-button>
                   </template>
                 </el-input>
               </el-form-item>
@@ -76,10 +73,7 @@
                     </el-icon>
                   </template>
                   <template v-slot:append>
-                    <el-button :disabled="codeCd2" @click="handleCaptcha2('form')"
-                      >获取验证码
-                      <span v-if="codeCd2">({{ long2 }})</span>
-                    </el-button>
+                    <el-button type="primary" @click="getVerifyCode" :disabled="disabledVerify">{{ verify.buttonText }}</el-button>
                   </template>
                 </el-input>
               </el-form-item>
@@ -152,10 +146,6 @@ const validatePhoneNumber = (rule, value, callback) => {
   }
   callback()
 }
-const codeCd1 = ref(false)
-const codeCd2 = ref(false)
-const long1 = ref('0')
-const long2 = ref('0')
 const ruleFormRef = ref()
 const form = ref({})
 const validatePassword = (rule, value, callback) => {
@@ -222,13 +212,34 @@ const toNext = async (formEl, item) => {
     })
   } else router.push({ path: '/login', query: { status: '1' } })
 }
-// 获取验证码
-const handleCaptcha1 = (item) => {
-  console.log(item)
+// 验证码
+const resetCount = () => {
+  clearInterval(timer)
+  timer = 0
 }
-// 获取验证码
-const handleCaptcha2 = (item) => {
-  console.log(item)
+
+let timer = 0
+const verify = reactive({
+  count: 60,
+  buttonText: '获取验证码'
+})
+const disabledVerify = computed(() => {
+  return !form.value.phone || verify.count <= 10
+})
+const getVerifyCode = () => {
+  ElMessage.success('验证码发送成功，请查看')
+  verify.count--
+  verify.buttonText = verify.count + ' 秒后重新获取验证码'
+  timer = window.setInterval(() => {
+    if (verify.count <= 1) {
+      resetCount()
+      verify.buttonText = '重新发送验证码'
+      verify.count = 60
+      return
+    }
+    verify.count--
+    verify.buttonText = verify.count + ' 秒后重新获取验证码'
+  }, 1000)
 }
 // 清空form
 const toClear = () => {

src/views/login/parts/login.vue

@@ -71,10 +71,7 @@
                   </el-icon>
                 </template>
                 <template v-slot:append>
-                  <el-button :disabled="codeCd" @click="handleCaptcha('form')"
-                    >获取验证码
-                    <span v-if="codeCd">({{ long }})</span>
-                  </el-button>
+                  <el-button type="primary" @click="getVerifyCode" :disabled="disabledVerify">{{ verify.buttonText }}</el-button>
                 </template>
               </el-input>
             </el-form-item>
@@ -156,6 +153,35 @@ const submitForm = async (formEl) => {
     }
   })
 }
+// 验证码
+const resetCount = () => {
+  clearInterval(timer)
+  timer = 0
+}
+
+let timer = 0
+const verify = reactive({
+  count: 60,
+  buttonText: '获取验证码'
+})
+const disabledVerify = computed(() => {
+  return !form.value.phone || verify.count <= 10
+})
+const getVerifyCode = () => {
+  ElMessage.success('验证码发送成功，请查看')
+  verify.count--
+  verify.buttonText = verify.count + ' 秒后重新获取验证码'
+  timer = window.setInterval(() => {
+    if (verify.count <= 1) {
+      resetCount()
+      verify.buttonText = '重新发送验证码'
+      verify.count = 60
+      return
+    }
+    verify.count--
+    verify.buttonText = verify.count + ' 秒后重新获取验证码'
+  }, 1000)
+}
 // 去注册
 const toRegister = () => {
   router.push({ path: '/login', query: { status: '0' } })

src/views/login/parts/register.vue

@@ -45,10 +45,7 @@
               </el-icon>
             </template>
             <template v-slot:append>
-              <el-button :disabled="codeCd" @click="handleCaptcha('form')"
-                >获取验证码
-                <span v-if="codeCd">({{ long }})</span>
-              </el-button>
+              <el-button type="primary" @click="getVerifyCode" :disabled="disabledVerify">{{ verify.buttonText }}</el-button>
             </template>
           </el-input>
         </el-form-item>
@@ -135,6 +132,35 @@ const rules = reactive({
   industry: [{ required: true, message: '请选择板块', trigger: 'blur' }],
   checkCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
 })
+// 验证码
+const resetCount = () => {
+  clearInterval(timer)
+  timer = 0
+}
+
+let timer = 0
+const verify = reactive({
+  count: 60,
+  buttonText: '获取验证码'
+})
+const disabledVerify = computed(() => {
+  return !form.value.phone || verify.count <= 10
+})
+const getVerifyCode = () => {
+  ElMessage.success('验证码发送成功，请查看')
+  verify.count--
+  verify.buttonText = verify.count + ' 秒后重新获取验证码'
+  timer = window.setInterval(() => {
+    if (verify.count <= 1) {
+      resetCount()
+      verify.buttonText = '重新发送验证码'
+      verify.count = 60
+      return
+    }
+    verify.count--
+    verify.buttonText = verify.count + ' 秒后重新获取验证码'
+  }, 1000)
+}
 // 注册
 const submitForm = async (formEl) => {
   if (!isAgree.value) {