52 lines
1.8 KiB
Markdown
52 lines
1.8 KiB
Markdown
|
# 注单详情页面（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 以便线上调试（构建时根据需要配置）。
|