预售定金翻倍需前后端协同：前端用localStorage标记支付状态并动态渲染膨胀金额，结合时间戳校验活动期；后端必须二次校验，接口层防护重复提交，且须跨时区真机测试。
预售定金翻倍页面不是单纯“加个按钮+写段文案”就能生效的，核心在于用户行为与后台逻辑必须严格对齐：定金支付成功后，前端要能准确识别状态、展示对应膨胀金额，并阻止重复提交；否则用户看到“付100抵200”，结果结算时只抵100，投诉立刻就来。
如何用 HTML + 简单 JS 控制定金状态显示
纯静态 HTML 无法判断用户是否已付定金，所以必须引入轻量 JS 做状态标记。常见做法是监听支付回调（如微信/支付宝返回 success），然后在本地存储一个标识：
-
localStorage.setItem('deposit_paid', 'true')—— 支付成功后写入 - 页面加载时读取：
localStorage.getItem('deposit_paid') === 'true'，决定是否显示“已锁定”“膨胀生效”等文案 - 注意：
localStorage是域内共享的，同一域名下所有页面都能读到，适合做跨页状态同步 - 不要用
sessionStorage，关掉标签页就丢，用户跳转到商品页再回来就失效
定金膨胀金额不能写死在 HTML 里
“付100抵200”这种文案看似固定，但实际要支持多档规则（比如不同 SKU 定金比例不同、活动期间动态调整），硬编码在 HTML 中后期根本没法维护。
- 把规则抽成 JSON 配置，例如：
{ "sku_id": "A123", "deposit": 50, "offset": 150 } - 通过
data-sku属性绑定到对应商品区块：<div class="item" data-sku="A123"> - JS 根据当前
data-sku查配置，动态插入抵<em id="offset-amount">150</em>元，避免改 HTML 模板 - 切记：后端也要校验膨胀逻辑，前端展示只是提示，最终结算以服务端计算为准
防止用户绕过规则重复下单
光靠前端禁用按钮没用，有人会直接复制表单、用 curl 提交。真正有效的防护在接口层，但前端至少要做两件事：
立即学习“前端免费学习笔记（深入）”；
- 支付成功后立即
document.getElementById('pay-btn').disabled = true，并替换文字为“已锁定” - 用
pointer-events: none+opacity: 0.6视觉禁用，比单纯disabled更可靠（防某些浏览器忽略 disabled） - 检查
localStorage时加时间戳，比如存{ paid: true, ts: Date.now() }，避免用户清缓存后重新触发 - 关键：提交前必须校验
localStorage+ 当前时间是否在活动期内（用new Date()对比活动 start/end 时间戳），别只信后端传来的“活动状态”
最常被忽略的是时间同步问题：用户手机时间不准，会导致“活动还没开始”却显示已结束；或者服务器用 UTC 而前端用本地时区，差出 8 小时。上线前务必用不同时区设备真机测试，别只在开发机上点点就算完。
