Web 验证码倒计时

场景说明

验证码倒计时是 Web 端常见的交互功能，常用于短信、邮箱等验证码场景，提升用户体验，防止重复请求。

数据模型设计

• 可选：新建验证码请求日志表（如 verification_code_log），字段建议：
  • 用户ID（user_id）
  • 手机号/邮箱（target）
  • 请求时间（created_at）
  • 状态（status）

组件搭建

1. 添加按钮组件，显示“获取验证码”
2. 添加文本组件，显示倒计时数字
3. 可添加输入框组件用于填写手机号/邮箱

交互逻辑

• 按钮点击后：
  • 禁用按钮，开始倒计时（如 60 秒）
  • 发送验证码请求（如调用后端 API）
  • 倒计时结束后恢复按钮可用
• 支持多次获取验证码，倒计时期间不可重复点击
• 可结合定时器组件、页面变量实现倒计时

操作步骤示例

第一步：页面组件搭建

• 拖入“获取验证码”按钮、“倒计时文本”组件、“手机号/邮箱输入框”

第二步：倒计时逻辑实现

• 按钮点击时：
  • 设置页面变量 countdown = 60
  • 启动定时器，每秒 countdown - 1，更新文本组件内容
  • countdown = 0 时，按钮恢复可用
• 可用平台内置定时器组件或自定义 JS 实现

第三步：验证码请求与日志

• 按钮点击时调用后端 API 发送验证码
• 可将请求日志写入 verification_code_log 表，便于统计和防刷

常见问题优化

• 如何防止用户重复点击？
  • 按钮倒计时期间禁用，页面变量控制
• 如何处理网络异常导致倒计时不同步？
  • 建议倒计时逻辑前端独立实现，接口异常时可提示用户重试
• 如何防止恶意刷验证码？
  • 可结合后端接口限流、日志表统计、IP/用户ID限制等

建议结合平台内置变量、定时器组件、后端接口等能力实现高效验证码倒计时功能。