feat(世界杯活动): 补全请求头接口，调整样式

src/views/Activities/WorldCup/EventDetail/index.vue

@@ -200,10 +200,11 @@
                 <div
                   style="
                     width: 100%;
-                    aspect-ratio: 1 / 1.2;
+                    aspect-ratio: 1 / 1.1;
                     display: flex;
                     align-items: center;
                     justify-content: center;
+                    position: relative;
                   "
                 >
                   <img
@@ -211,13 +212,30 @@
                     v-smart-img.noFade
                     :src="betOption.flagUrl"
                     alt=""
-                    style="display: block; width: 78%; aspect-ratio: 1 / 1; object-fit: contain"
+                    style="display: block; width: 64%; aspect-ratio: 1 / 1; object-fit: contain"
                   />
                   <img
                     v-else
                     :src="betOption.flagUrl"
                     alt=""
-                    style="display: block; width: 78%; aspect-ratio: 1 / 1; object-fit: contain"
+                    style="display: block; width: 68%; aspect-ratio: 1 / 1; object-fit: contain"
+                  />
+                  <!-- 已结束胜方标识框：根据 result 字段叠加在主胜、平局或客胜对应图片上方 -->
+                  <img
+                    v-if="isDetailBetOptionWinner(betOption.option)"
+                    v-smart-img.noFade
+                    :src="pngUrl('frameWinner')"
+                    alt=""
+                    style="
+                      position: absolute;
+                      top: 0;
+                      left: 0;
+                      z-index: 3;
+                      display: block;
+                      width: 100%;
+                      object-fit: contain;
+                      pointer-events: none;
+                    "
                   />
                 </div>
                 <div
@@ -456,6 +474,7 @@ import {
   apiPostWorldCupBet,
   apiPostWorldCupMyBetList,
 } from '@/api/worldCup.js'
+import { connectToApp } from '@/utils/appConnector.js'
 import GeneralHeader from '@/components/GeneralHeader.vue'
 import itemCenter from '@/components/itemCenter.vue'
 import arrowBackImg from '@/assets/icon/Azizi/arrowBack.png'
@@ -481,6 +500,7 @@ const blockingImages = [
   'statusEndedfail',
   'numPeopleGold',
   'drawSign',
+  'frameWinner',
   'footballSign',
 ]
 
@@ -517,7 +537,7 @@ const winAmount = computed(() => {
   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(() => {

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` 刷新页面状态。

src/views/Activities/WorldCup/index.vue

@@ -752,10 +752,11 @@
                           <div
                             style="
                               width: 100%;
-                              aspect-ratio: 1 / 1.2;
+                              aspect-ratio: 1 / 1.1;
                               display: flex;
                               align-items: center;
                               justify-content: center;
+                              position: relative;
                             "
                           >
                             <img
@@ -765,7 +766,7 @@
                               alt=""
                               style="
                                 display: block;
-                                width: 78%;
+                                width: 68%;
                                 aspect-ratio: 1 / 1;
                                 object-fit: contain;
                               "
@@ -776,11 +777,28 @@
                               alt=""
                               style="
                                 display: block;
-                                width: 78%;
+                                width: 70%;
                                 aspect-ratio: 1 / 1;
                                 object-fit: contain;
                               "
                             />
+                            <!-- 胜方标识框：根据 result 字段叠加在主胜、平局或客胜对应图片上方 -->
+                            <img
+                              v-if="isEndedBetOptionWinner(matchItem, betOption.option)"
+                              v-smart-img.noFade
+                              :src="pngUrl('frameWinner')"
+                              alt=""
+                              style="
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                z-index: 3;
+                                display: block;
+                                width: 100%;
+                                object-fit: contain;
+                                pointer-events: none;
+                              "
+                            />
                           </div>
                           <div
                             style="
@@ -995,7 +1013,7 @@
           display: flex;
           align-items: flex-start;
           justify-content: center;
-          padding: 6vh 0 10vh;
+          padding: 10vh 0;
           box-sizing: border-box;
         "
         @click.self="handleCloseRewardPopup"
@@ -1147,7 +1165,7 @@
           display: flex;
           align-items: flex-start;
           justify-content: center;
-          padding: 6vh 0 10vh;
+          padding: 10vh 0;
           box-sizing: border-box;
         "
         @click.self="handleCloseRulePopup"
@@ -1170,6 +1188,7 @@ import { getPngUrl } from '@/config/imagePaths.js'
 import { preloadImages } from '@/utils/image/imagePreloader.js'
 import { apiPostWorldCupMatchList, apiPostWorldCupRankList } from '@/api/worldCup.js'
 import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
 import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
 import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
 import MaskLayer from '@/components/MaskLayer.vue'
@@ -1218,6 +1237,7 @@ const blockingImages = [
   'EventlistBg',
   'matchBg',
   'drawSign',
+  'frameWinner',
   'numPeople',
   'rightBt',
   'RankingMain',
@@ -1544,6 +1564,11 @@ const isEndedBetOptionSelected = (matchItem = {}, option) => {
   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()
 })
 </script>
 

src/views/Activities/WorldCup/页面创建信息.md

@@ -8,6 +8,7 @@
 - 能使用内联样式处理的页面样式，优先使用内联样式。
 - 页面根容器使用 `height: 100vh`，内部主内容垂直滚动并隐藏滚动条，页面任何模块都不展示可见滚动条。
 - 接口返回的远程图片链接不要使用 `v-smart-img`，直接使用原生 `<img :src="接口字段">` 展示，不走本地图片缓存。
+- 页面使用接口前必须先调用 `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` 列表和详情页押注对象虽然字段接近，但样式按各自当前页面实现为准，后续只按需求调整字段或内容，不直接合并样式。