<template><a-form class="main" ref="addCardFormRef" :model="formData" :rules="rules" :colon="false":label-col="{ style: { width: '120px' } }"><a-form-item label="验证码" name="templateId"><a-input v-model:value="formData.templateId" placeholder="请输入验证码" allow-clear><template #suffix><div @click="sendMsg()" v-if="!isSend">{{ sendText }}</div><div v-if="isSend">{{ countDown }}</div></template></a-input></a-form-item></a-form></template><script lang="ts" setup>const sendText = ref('获取验证码')const countDown = ref('')const isSend = ref(false)/*** @description: 发送验证码* @return {*}*/const sendMsg = () => {const params = {// 参数这块得根据后端需要的类型来传mobileNo: formData.phone,tmpCode: 'xxxxx',type: 2}const count = () => {isSend.value = truelet timer = 60countDown.value = `(${timer}S)`const timeFun = setInterval(() => {--timercountDown.value = `(${timer}S)`if (timer === 0) {isSend.value = falsesendText.value = '重新发送'clearInterval(timeFun)}}, 1000)}// sendText.value = '获取验证码'return new Promise((resolve, reject) => {addCardFormRef.value.validateFields('phone') // 发送验证码前，校验手机号码.then((values: any) => {ACCOUNT_API.sendVerCode(params).then((res: any) => {// console.log('验证通过:', res)resolve(res)count()// if (res[1].code === 200) {// count()// }}).catch((err: any) => {console.log('验证码验证不通过:', err)reject(err)})}).catch((error: any) => {console.log(error)})})}</script>
