< template>
< el-form :model = " formValue" :rules = " rules" ref = " form" >
< el-form-item prop = " phone" >
< el-input v-model.number = " formValue.phone" class = " form-input" placeholder = " 请输入手机号" />
</ el-form-item>
< el-form-item prop = " validationCode" >
< el-input v-model.number = " formValue.validationCode" class = " form-input" placeholder = " 请输入验证码" >
< template #suffix >
< span id = " suffix-span" >
< span> |</ span>
< span id = " suffix-span-2" @click = " sendValidationCode(formValue.phone)" ref = " spanRef" >
{{ isSendValidationCode }}
</ span>
</ span>
</ template>
</ el-input>
</ el-form-item>
...
</ el-form>
</ template>
< script setup lang = " ts" >
import { sendCheckCode } from '@/api'
const form = ref< FormInstance> ( )
const formValue = ref ( {
phone : '' ,
validationCode : ''
} )
const spanRef = ref ( )
const isSendValidationCode = ref< string> ( '发送验证码' )
async function sendValidationCode ( phone : string) {
if ( ! checkAgree. value) {
showCheck. value = true
return
}
if ( ! isSendValidationCode. value. endsWith ( '发送验证码' ) ) return
await form. value! . validateField ( 'phone' )
isSendValidationCode. value = '60秒后重新发送'
spanRef. value. style = 'color: gray;'
const countDown = ref< number> ( 60 )
const temp = setInterval ( ( ) => {
countDown. value--
isSendValidationCode. value = countDown. value + '秒后重新发送'
if ( ! countDown. value) {
clearInterval ( temp)
spanRef. value. style = 'color: #1764FF;'
isSendValidationCode. value = '重新发送验证码'
countDown. value = 60
}
} , 1000 )
try {
const res = await sendCheckCode ( { username : phone } )
if ( res) ElMessage. success ( '验证码发送成功' )
} catch {
ElMessage. error ( '验证码发送失败' )
}
}
</ script>