# 页面创建信息

## 0. 建页规则关联

- 页面改动、模块补充、接口对接、样式同步和文档同步，都需要先联系 `docs/活动页/建页/` 下的建页规则执行。
- 本页面为 `WorldCup` 的赛事详情页，后续生成或更新时需要同步回 `src/views/Activities/WorldCup/页面创建信息.md` 的入口说明。
- 页面模块、div 结构、方法、接口处理都需要补充中文注释。
- 页面根容器使用 `100vh` 方案，内部滚动并隐藏滚动条，不展示可见滚动条。
- 能使用内联样式处理的页面样式，优先使用内联样式。
- 新建或更新 `index.vue` 时必须使用统一加载动画：`isLoading` 阶段只渲染 `LoadingContent`，阻塞图片预加载完成后再渲染正式背景图与业务节点；业务接口不参与 loading 阻塞。
- 普通业务模块不提前设置 `min-height` 和 `line-height`；`min-height` 只在基础页面容器按需使用，`itemCenter` 的 `min-height` 只在页面开发完成后确实需要稳定图片容器高度时再补。
- 页面使用接口前必须先调用 `connectToApp` 设置请求头；当前详情页的 `completePreloading()` 只负责阻塞图片预加载并控制 loading，赛事详情和我的竞猜记录接口已提取到 `loadInitialEventDetailData()`，在 `connectToAppHandler()` 连接成功后独立请求。

## 1. 基础信息

- 页面类型：Activities
- 页面名称：WorldCup EventDetail
- 页面目录：`src/views/Activities/WorldCup/EventDetail`
- 页面入口：`src/views/Activities/WorldCup/EventDetail/index.vue`
- 路由 path：`/activities/world-cup/event-detail`
- 路由 name：`world-cup-event-detail`
- 进入来源：WorldCup 首页赛事列表项下方的 `TOTAL PRIZE POOL` 模块。
- Query 参数：`matchId`，来自比赛列表接口返回的 `matchId`。
- `matchId` 必须按字符串处理和传参，禁止使用 `Number(matchId)`；比赛 ID 可能超过 JS 安全整数范围，转数字会丢失精度。

## 2. 业务规则

- 本页面用于展示世界杯赛事详情，并给用户提供押注服务。
- 押注只允许在赛事未开始时进行。
- 只要赛事开始，用户就不能再押注，只展示赛事状态和用户押注状态。
- 页面详情接口使用 `apiGetWorldCupMatchDetail(matchId)`。
- 押注接口使用 `apiPostWorldCupBet(data)`。
- 我的本场竞猜记录优先使用详情接口返回的 `myBets`。
- 页面进入参数为 `matchId`，由首页赛事列表总奖池入口跳转时通过 query 传入。

## 3. 页面结构

- 根容器固定 `100vw * 100vh`，背景色为 `#101E14`。
- 最底层背景图使用 `detailPageBg`，宽度设置为 `100vw`，高度按图片自身比例展示，不强制拉伸到页面高度。
- 顶部使用公共组件 `src/components/GeneralHeader.vue`，标题为 `World Cup`，非首页，使用组件默认返回键。
- `GeneralHeader` 返回键图片通过 `backImg` 指定为 `src/assets/icon/Azizi/arrowBack.png`，只影响当前详情页。
- 主内容区为内部滚动区域，使用 column 布局，`gap: 2vw`，隐藏可见滚动条。
- 第一模块为赛事结果模块，使用 `itemCenter` 组件承载不同状态背景图。
- 第二模块为押注模块，负责展示押注对象、押注状态和未开赛时的押注金额入口。
- 第三模块为押注记录模块，负责展示当前赛事内用户押注对象、金额和押注时间。
- 本页 `itemCenter` 的 `min-height` 按 `Math.ceil(实际展示宽度vw * 图片高度 / 图片宽度)` 计算；赛事结果模块在主内容区左右 `2vw` padding 后实际宽度为 `96vw`，`statusNotStarted` / `statusInProgress` / `statusEndedWin` / `statusEndedfail` 图片比例一致，计算后设置 `min-height: 53vw; max-height: 54vw`，避免图片加载出来之前容器高度异常撑高。

## 4. 赛事结果模块

- 未开始状态使用 `statusNotStarted`，角标文案为 `Not Started`，主文案根据 `kickoffTime` 展示倒计时，例如 `2D  18 : 59 : 59`。
- 正在进行状态使用 `statusInProgress`，角标文案为 `In Progress`，主文案展示 `The match is underway`。
- 已结束且至少有一个中奖押注时使用 `statusEndedWin`，角标文案为 `Ended`，主文案展示 `+ coin + payout合计`。
- 已结束且未中奖或未参与时使用 `statusEndedfail`，角标文案为 `Ended`，主文案展示 `Better luck next time!`。
- 第（2）行主文案只按状态切换展示内容，字体样式固定一致：`color: #F8E89A`、`font-size: 2em`、`font-weight: 500`。
- 开赛时间文案在所有状态下固定展示，文案根据 `kickoffTime` 格式化，例如 `Kick-off is at 18:00:00 on 12 June 2026.`。
- 分割线和底部信息行在所有状态下固定展示；底部信息行左侧展示 `total prize pool:`、coin 图片和 `totalPool`，右侧展示 `numPeopleGold` 图片和 `joinCount`。
- 中奖判断来自 `myBets`，`betStatus === 1` 或 `payout > 0` 都视为中奖。
- 当前页面会预加载 `detailPageBg`、`statusNotStarted`、`statusInProgress`、`statusEndedWin`、`statusEndedfail`、`numPeopleGold`、`drawSign`、`frameWinner`、`footballSign`。

## 5. 押注模块

- 押注模块使用普通 `section`，整体样式为绿色渐变背景、`12px` 圆角、`#5D6948` 边框和 `backdrop-filter`。
- 模块内部从上往下分为押注对象和押注金额两个小模块。
- 押注对象结构对齐首页 `Ended` 列表项中的三列押注选项：主胜、平局、客胜。
- 押注对象上方金额展示当前选项奖池：`homePoolFormat` / `drawPoolFormat` / `awayPoolFormat`，没有格式化字段时回退 `homePool` / `drawPool` / `awayPool`。
- 押注对象下方金额展示用户在当前选项的累计下注额：`myHomeBetFormat` / `myDrawBetFormat` / `myAwayBetFormat`，详情接口缺失时按 `myBets` 中 `betOption` 汇总兜底。
- 押注对象金额上下行只对调字段展示，样式以当前详情页实现为准，不和首页 `Ended` 列表样式强行合并。
- 未开始赛事中，押注对象允许点击选择，默认不选中任何项；即使上方展示了用户在每个选项已押注金币数，也不会自动使用选中态，选中态仅用于用户当前点击选择的一个押注项，方便继续点击下方金币金额下注。
- 已开始或已结束赛事中，押注对象不可点击，选中态用于展示用户已押注过的选项。
- 已结束赛事中，根据接口 `result` 字段判断胜方或平局结果，`1` 主胜、`2` 平局、`3` 客胜，并在对应押注项图片容器内叠加 `frameWinner`；该用法和首页 `Ended` 列表项保持一致。
- 押注金额模块只在未开始赛事展示，金额选项为 `100`、`1000`、`10000`、`100000`，每个金额左侧展示 coin 图片。
- 押注流程为：先选择押注对象，再点击押注金额；点击金额时调用 `apiPostWorldCupBet({ matchId: String(matchId), betOption, betAmount })`。
- 押注成功后清空当前选中押注对象，并重新拉取 `apiGetWorldCupMatchDetail` 和 `apiPostWorldCupMyBetList` 刷新页面状态。

## 6. 押注记录模块

- 押注记录模块使用普通 `section`，整体样式为绿色渐变背景、`12px` 圆角、`#5D6948` 边框和 `backdrop-filter`。
- 数据接口使用 `apiPostWorldCupMyBetList({ size: 100, current: 1, matchId })`，只获取一次，不做上拉加载。
- 模块内部从上往下分为固定标题和竞猜记录两个小模块。
- 固定标题为 `My prediction for this game:`，样式为 `color: #FFE083`、`font-weight: 500`。
- 竞猜记录为空时居中展示两行：第一行为 `footballSign` 图片，宽度暂定 `30vw`；第二行为 `No records yet.`，样式为 `color: #FFE083`、`font-size: 1.5em`、`font-weight: 500`。
- 竞猜记录不为空时，记录区域内部滚动并隐藏可见滚动条。
- 单条记录样式为金色描边渐变背景，内部左右 `space-between` 布局。
- 记录左侧展示两行：`Bets placed:` + `betOptionName`，以及格式化后的 `betTime`，时间格式为 `MM-DD-YYYY HH:mm:ss`。
- 记录右侧展示 coin 图片和 `betAmount`，金额文字为白色、`font-weight: 500`。

## 7. 路由代码片段

```js
{
  path: '/activities/world-cup/event-detail',
  name: 'world-cup-event-detail',
  component: () => import('../views/Activities/WorldCup/EventDetail/index.vue'),
  meta: { requiresAuth: false },
}
```

## 8. 验证记录

- `npm run build`：已通过。
- 当前已完成赛事结果模块、押注模块和押注记录模块。
- 本次已按 `docs/活动页/建页/` 规则调整详情页底座：loading/v-else 分离、中文注释、内部滚动隐藏滚动条、`<style lang="scss" scoped>`。
