Livewire OTP短信登录倒计时计时器开发需求

1. 组件属性定义 #

在你的Livewire登录组件类中，添加用于控制倒计时的核心属性：

// 示例路径：app/Http/Livewire/LoginWithOtp.php
public $remainingSeconds = 0;
public $canResend = true;
protected $listeners = ['updateCountdown'];

2. 实现发送验证码与启动倒计时逻辑 #

编写发送验证码的方法，完成短信发送后触发倒计时流程：

public function sendOtp()
{
    // 替换为你的实际短信验证码发送逻辑
    // 比如调用短信服务商接口、生成并存储OTP记录等
    // ...

    // 启动60秒倒计时（可根据业务需求调整时长）
    $this->remainingSeconds = 60;
    $this->canResend = false;
    $this->dispatchBrowserEvent('startCountdown');
}

3. 编写倒计时更新方法 #

添加每秒更新剩余时间的方法，倒计时结束后恢复重发权限：

public function updateCountdown()
{
    if ($this->remainingSeconds > 0) {
        $this->remainingSeconds--;
    } else {
        $this->canResend = true;
    }
}

4. 前端视图渲染与定时器逻辑 #

在组件对应的Blade视图中，实现倒计时显示和重发按钮，并通过JS触发每秒更新：

<!-- 示例路径：resources/views/livewire/login-with-otp.blade.php -->
<div class="otp-resend-section">
    @if($canResend)
        <button wire:click="sendOtp" class="text-blue-500 hover:text-blue-700">重发验证码</button>
    @else
        <span class="text-gray-600">
            请等待 {{ gmdate('i:s', $remainingSeconds) }} 后重发
        </span>
    @endif
</div>

@push('scripts')
<script>
document.addEventListener('livewire:initialized', () => {
    let countdownTimer;

    Livewire.on('startCountdown', () => {
        // 清除已有定时器，避免重复触发
        if (countdownTimer) clearInterval(countdownTimer);
        
        countdownTimer = setInterval(() => {
            Livewire.dispatch('updateCountdown');
        }, 1000);
    });

    // 组件销毁时清理定时器，防止内存泄漏
    Livewire.on('destroy', () => {
        if (countdownTimer) clearInterval(countdownTimer);
    });
});
</script>
@endpush

可选：样式优化 #

添加简单CSS美化倒计时区域：

.otp-resend-section {
    margin-top: 1rem;
    font-size: 0.9rem;
}

注意事项 #

• 确保项目已正确引入Livewire的JavaScript文件（通常通过@livewireScripts指令）
• 短信发送逻辑需自行实现，建议加入异常处理避免倒计时异常启动
• 可根据业务需求调整倒计时总时长（比如将60秒改为120秒）

内容的提问来源于stack exchange，提问作者Firooz Meysami