# 注单详情页面（betDetails）

简洁通用的注单详情静态页面，用于后台通过 iframe 嵌入展示单笔注单信息。页面应自包含资源与逻辑，便于在不同后台系统中复用。

## 功能目的
- 展示单笔注单的详细信息（订单号、时间、玩法、投注明细、状态、备注等）。
- 支持通过 query 参数或 postMessage 接收父页面传入的数据。
- 可在 iframe 环境下与父页面安全交互（建议使用 postMessage）。

## 使用方式
- 直接访问（本地预览）：/betDetails/index.html?orderId=12345
- 建议传入 orderId 或直接通过 postMessage 传入完整订单数据。

示例（通过 query 参数）：
```
/betDetails/index.html?orderId=12345
```

示例（通过 postMessage）：
```js
// 父页面发送
iframeEl.contentWindow.postMessage({ type: 'BET_DETAILS', data: { orderId: '12345' } }, targetOrigin);

// 子页面接收（需校验 origin）
window.addEventListener('message', (e) => {
  if (e.origin !== expectedOrigin) return;
  if (e.data?.type === 'BET_DETAILS') {
    renderOrder(e.data.data);
  }
});
```

## 本地预览
- 推荐使用 serve：
```bash
npx serve . -s -l 8080
# 访问 http://localhost:8080/betDetails/index.html?orderId=12345
```
- 或使用 Python：
```bash
python3 -m http.server 8080
```

## 部署与注意事项
- 建议部署到静态托管或 CDN（Nginx、Netlify、Vercel 等）。
- 若与父页面不同域，注意配置 CORS 与 CSP，并在 postMessage 中严格校验 origin。
- 避免依赖父窗口全局变量，优先使用 query 参数或 postMessage 传参。

## 调试建议
- 在集成环境测试 iframe 尺寸与响应式，确保不会被裁剪或出现不必要滚动条。
- 开启 source map 以便线上调试（构建时根据需要配置）。