web/plugins/login-auth/src/components/form/smsCaptchaInput.vue

<script setup>
import { computed } from 'vue'
import CountdownTimer from '@/module-model/countDown'

const props = defineProps({
  expands: {
    default: () => ({})
  },
  actions: {
    default: () => ({})
  }
})

defineEmits(['input'])

/**
 * 倒计时逻辑
 */

const countDown = new CountdownTimer().getInstance()

const canDoSetSms = computed(() => {
  return !countDown.isCounting.value && props.expands.preCheckState.value
})
async function doGetSms() {
  if (!canDoSetSms.value) {
    return
  }

  let canNext = true

  if (typeof props.actions.preSubmit === 'function') {
    const result = await props.actions.preSubmit()
    canNext = result
  }
  if (canNext) {
    countDown.start()
  }
}
</script>

<template>
  <div class="login-auth--form-after" :class="{ disable: !canDoSetSms }">
    <span v-if="!countDown.isCounting.value" @click="doGetSms">获取验证码</span>
    <span v-else>重新获取({{ countDown.countdown.value }}s)</span>
  </div>
</template>