{
return myBets.value.reduce((total, betItem) => total + (Number(betItem.payout) || 0), 0)
})
-// 详情页押注对象数据：三列分别为主胜、平局、客胜，上方为我的下注额，下方为选项奖池。
+// 详情页押注对象数据：三列分别为主胜、平局、客胜，上方为选项奖池，下方为我的下注额。
const detailBetOptions = computed(() => [
{
option: 1,
@@ -681,7 +701,7 @@ const hasUserBetOnOption = (option) => {
return getMyBetAmountSum(option) > 0
}
-// 押注对象样式：未开始时展示用户当前点击选中态，已开始后展示用户历史押注态。
+// 押注对象样式：未开始时只展示用户当前点击选中态，已开始后展示用户历史押注态。
const getDetailBetOptionStyle = (option) => {
if (canSubmitBet.value) {
return Number(selectedBetOption.value) === Number(option)
@@ -692,6 +712,11 @@ const getDetailBetOptionStyle = (option) => {
return hasUserBetOnOption(option) ? betOptionSelectedStyle : betOptionDefaultStyle
}
+// 已结束胜方标识：只有已结束赛事根据 result 字段给对应押注项叠加 frameWinner。
+const isDetailBetOptionWinner = (option) => {
+ return Number(matchInfo.value.status) === 2 && Number(matchInfo.value.result) === Number(option)
+}
+
// 点击押注对象：仅未开始赛事允许选择押注对象，默认不选中任何项。
const handleBetOptionClick = (option) => {
if (!canSubmitBet.value) return
@@ -748,6 +773,13 @@ const completePreloading = async () => {
}
}
+// 连接 App 并设置接口请求头：详情页所有接口请求必须在 connectToApp 成功后执行。
+const connectToAppHandler = async () => {
+ await connectToApp(() => {
+ completePreloading()
+ })
+}
+
// 押注接口占位：后续第三模块接入押注按钮时统一调用该方法。
const submitWorldCupBet = async (betOption, betAmount) => {
if (!matchId.value) return
@@ -785,7 +817,7 @@ onMounted(() => {
countdownTimer = window.setInterval(() => {
nowTime.value = Date.now()
}, 1000)
- completePreloading()
+ connectToAppHandler()
})
onBeforeUnmount(() => {
diff --git a/src/views/Activities/WorldCup/EventDetail/页面创建信息.md b/src/views/Activities/WorldCup/EventDetail/页面创建信息.md
index 58d18f8..0871531 100644
--- a/src/views/Activities/WorldCup/EventDetail/页面创建信息.md
+++ b/src/views/Activities/WorldCup/EventDetail/页面创建信息.md
@@ -9,6 +9,7 @@
- 能使用内联样式处理的页面样式，优先使用内联样式。
- 新建或更新 `index.vue` 时必须使用统一加载动画：`isLoading` 阶段只渲染 `LoadingContent`，关键图片和初始化接口完成后再渲染正式背景图与业务节点。
- 普通业务模块不提前设置 `min-height` 和 `line-height`；`min-height` 只在基础页面容器按需使用，`itemCenter` 的 `min-height` 只在页面开发完成后确实需要稳定图片容器高度时再补。
+- 页面使用接口前必须先调用 `connectToApp` 设置请求头；当前详情页通过 `connectToAppHandler()` 包裹 `completePreloading()`，赛事详情和我的竞猜记录接口都在连接成功后请求。
## 1. 基础信息
@@ -53,7 +54,7 @@
- 开赛时间文案在所有状态下固定展示，文案根据 `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`。
+- 当前页面会预加载 `detailPageBg`、`statusNotStarted`、`statusInProgress`、`statusEndedWin`、`statusEndedfail`、`numPeopleGold`、`drawSign`、`frameWinner`、`footballSign`。
## 5. 押注模块
@@ -63,8 +64,9 @@
- 押注对象上方金额展示当前选项奖池：`homePoolFormat` / `drawPoolFormat` / `awayPoolFormat`，没有格式化字段时回退 `homePool` / `drawPool` / `awayPool`。
- 押注对象下方金额展示用户在当前选项的累计下注额：`myHomeBetFormat` / `myDrawBetFormat` / `myAwayBetFormat`，详情接口缺失时按 `myBets` 中 `betOption` 汇总兜底。
- 押注对象金额上下行只对调字段展示，样式以当前详情页实现为准，不和首页 `Ended` 列表样式强行合并。
-- 未开始赛事中，押注对象允许点击选择，默认不选中任何项；选中的押注项使用首页 `Ended` 选中态样式。
+- 未开始赛事中，押注对象允许点击选择，默认不选中任何项；即使上方展示了用户在每个选项已押注金币数，也不会自动使用选中态，选中态仅用于用户当前点击选择的一个押注项，方便继续点击下方金币金额下注。
- 已开始或已结束赛事中，押注对象不可点击，选中态用于展示用户已押注过的选项。
+- 已结束赛事中，根据接口 `result` 字段判断胜方或平局结果，`1` 主胜、`2` 平局、`3` 客胜，并在对应押注项图片容器内叠加 `frameWinner`；该用法和首页 `Ended` 列表项保持一致。
- 押注金额模块只在未开始赛事展示，金额选项为 `100`、`1000`、`10000`、`100000`，每个金额左侧展示 coin 图片。
- 押注流程为：先选择押注对象，再点击押注金额；点击金额时调用 `apiPostWorldCupBet({ matchId, betOption, betAmount })`。
- 押注成功后清空当前选中押注对象，并重新拉取 `apiGetWorldCupMatchDetail` 和 `apiPostWorldCupMyBetList` 刷新页面状态。
diff --git a/src/views/Activities/WorldCup/index.vue b/src/views/Activities/WorldCup/index.vue
index a5ed960..3611460 100644
--- a/src/views/Activities/WorldCup/index.vue
+++ b/src/views/Activities/WorldCup/index.vue
@@ -752,10 +752,11 @@
![]()
+
+
![]()
{
return selectedBetAmount !== null && selectedBetAmount !== undefined && selectedBetAmount !== ''
}
+// Ended 胜方标识：根据 result 字段给主胜、平局或客胜对应押注项叠加 frameWinner。
+const isEndedBetOptionWinner = (matchItem = {}, option) => {
+ return Number(matchItem.result) === Number(option)
+}
+
// Ended 押注项样式：用户押注过的选项展示选中态，未押注选项展示默认样式。
const getEndedBetOptionStyle = (matchItem = {}, option) => {
return isEndedBetOptionSelected(matchItem, option)
@@ -1693,8 +1718,15 @@ const completePreloading = async () => {
}
}
+// 连接 App 并设置接口请求头：所有业务接口必须在 connectToApp 成功后再请求。
+const connectToAppHandler = async () => {
+ await connectToApp(() => {
+ completePreloading()
+ })
+}
+
onMounted(() => {
- completePreloading()
+ connectToAppHandler()
})
diff --git a/src/views/Activities/WorldCup/页面创建信息.md b/src/views/Activities/WorldCup/页面创建信息.md
index 0914426..dee8189 100644
--- a/src/views/Activities/WorldCup/页面创建信息.md
+++ b/src/views/Activities/WorldCup/页面创建信息.md
@@ -8,6 +8,7 @@
- 能使用内联样式处理的页面样式，优先使用内联样式。
- 页面根容器使用 `height: 100vh`，内部主内容垂直滚动并隐藏滚动条，页面任何模块都不展示可见滚动条。
- 接口返回的远程图片链接不要使用 `v-smart-img`，直接使用原生 `
![]()
` 展示，不走本地图片缓存。
+- 页面使用接口前必须先调用 `connectToApp` 设置请求头；当前首页通过 `connectToAppHandler()` 包裹 `completePreloading()`，排行榜和赛事列表接口都在连接成功后请求。
## 1. 基础信息
@@ -62,6 +63,7 @@
| EventlistBg | 赛事列表模块背景 |
| matchBg | Predict Now 赛事列表项背景 |
| drawSign | Ended 平局押注项图片 |
+| frameWinner | Ended 列表胜方或平局结果叠加框 |
| numPeople | 赛事列表右上角参与人数图标 |
| rightBt | 总奖池入口右侧箭头 |
| vip1-vip6 | VIP 等级图片 |
@@ -70,7 +72,7 @@
### 3.2 阻塞预加载图片
-`bg2`、`bg`、`ruleBt`、`ruleBg`、`EventlistBg`、`matchBg`、`drawSign`、`numPeople`、`rightBt`、`RankingMain`、`RankingItem`、`RankingBottomBorder`、`myRankingBg`、`giftBt`、`rewardBg`、`showMoreBt`、`frameTop1`、`frameTop2`、`frameTop3`、`vip1-vip6`、`userLevel1Bg-userLevel5Bg`、`wealthLevel1Bg-wealthLevel5Bg`。
+`bg2`、`bg`、`ruleBt`、`ruleBg`、`EventlistBg`、`matchBg`、`drawSign`、`frameWinner`、`numPeople`、`rightBt`、`RankingMain`、`RankingItem`、`RankingBottomBorder`、`myRankingBg`、`giftBt`、`rewardBg`、`showMoreBt`、`frameTop1`、`frameTop2`、`frameTop3`、`vip1-vip6`、`userLevel1Bg-userLevel5Bg`、`wealthLevel1Bg-wealthLevel5Bg`。
页面进入时必须展示统一加载动画，阻塞预加载完成后再展示主内容。
@@ -178,6 +180,7 @@ Ended 列表项规则：
- 平局展示 `drawSign`、`DRAW`、`drawPercent`。
- 客方展示 `awayFlag`、`awayTeam`、`awayPercent`。
- Ended 押注项旗帜图片来源不同：主客方 `homeFlag` / `awayFlag` 是接口返回链接，不使用 `v-smart-img`；平局 `drawSign` 是 OSS 素材，单独使用 `v-smart-img`。
+- Ended 列表用户押注过的选项都使用选中态样式；胜方或平局结果根据接口 `result` 字段判断，`1` 主胜、`2` 平局、`3` 客胜，并在对应押注项图片容器内叠加 `frameWinner`，该图片绝对定位贴顶、宽度 `100%`、最高层展示。
- 押注项金额信息分为上下两行，中间使用 `background: #E9D089` 分割线；上方展示选项奖池 `homePoolFormat` / `drawPoolFormat` / `awayPoolFormat`，下方展示用户累计下注额 `myHomeBetFormat` / `myDrawBetFormat` / `myAwayBetFormat`，空值展示 `0`。
- 首页 `Ended` 列表和详情页押注对象虽然字段接近，但样式按各自当前页面实现为准，后续只按需求调整字段或内容，不直接合并样式。