<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>()
// 接收form
const formValue = ref({phone: '',validationCode: ''
})
// 驗證碼區域文字說明
const spanRef = ref()
const isSendValidationCode = ref<string>('發送驗證碼')
// 發送驗證碼
async function sendValidationCode(phone: string) {if (!checkAgree.value) {showCheck.value = truereturn}if (!isSendValidationCode.value.endsWith('發送驗證碼')) returnawait 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 }) // 返回booleanif (res) ElMessage.success('驗證碼發送成功')} catch {ElMessage.error('驗證碼發送失敗')}
}
</script>