From e94de011c6ed71c8c98d041e27eaf8181e7c3bb0 Mon Sep 17 00:00:00 2001 From: hzj <1304805162@qq.com> Date: Mon, 8 Jun 2026 19:25:19 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E4=B8=96=E7=95=8C=E6=9D=AF=E6=B4=BB?= =?UTF-8?q?=E5=8A=A8):=20=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=EF=BC=8C?= =?UTF-8?q?=E5=A5=96=E5=8A=B1=E5=BC=B9=E7=AA=97=E6=9A=82=E6=97=B6=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E6=B5=8B=E8=AF=95=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Activities/WorldCup/EventDetail/index.vue | 42 ++-- .../WorldCup/EventDetail/页面创建信息.md | 6 +- .../WorldCup/components/topUser.vue | 4 +- src/views/Activities/WorldCup/index.vue | 192 ++++++++++++++++-- .../Activities/WorldCup/世界杯接口说明.md | 4 +- src/views/Activities/WorldCup/页面创建信息.md | 28 ++- 6 files changed, 228 insertions(+), 48 deletions(-) diff --git a/src/views/Activities/WorldCup/EventDetail/index.vue b/src/views/Activities/WorldCup/EventDetail/index.vue index f686389..754dd7d 100644 --- a/src/views/Activities/WorldCup/EventDetail/index.vue +++ b/src/views/Activities/WorldCup/EventDetail/index.vue @@ -71,7 +71,7 @@ > @@ -200,7 +200,7 @@
- -
- - - {{ betOption.myBetAmount }} - -
-
-
+
+
+ +
+ + + {{ betOption.myBetAmount }} + +
diff --git a/src/views/Activities/WorldCup/EventDetail/页面创建信息.md b/src/views/Activities/WorldCup/EventDetail/页面创建信息.md index f389482..58d18f8 100644 --- a/src/views/Activities/WorldCup/EventDetail/页面创建信息.md +++ b/src/views/Activities/WorldCup/EventDetail/页面创建信息.md @@ -41,6 +41,7 @@ - 第一模块为赛事结果模块，使用 `itemCenter` 组件承载不同状态背景图。 - 第二模块为押注模块，负责展示押注对象、押注状态和未开赛时的押注金额入口。 - 第三模块为押注记录模块，负责展示当前赛事内用户押注对象、金额和押注时间。 +- 本页 `itemCenter` 的 `min-height` 按 `Math.ceil(实际展示宽度vw * 图片高度 / 图片宽度)` 计算；赛事结果模块在主内容区左右 `2vw` padding 后实际宽度为 `96vw`，`statusNotStarted` / `statusInProgress` / `statusEndedWin` / `statusEndedfail` 图片比例一致，计算后设置 `min-height: 53vw`。 ## 4. 赛事结果模块 @@ -59,8 +60,9 @@ - 押注模块使用普通 `section`，整体样式为绿色渐变背景、`12px` 圆角、`#5D6948` 边框和 `backdrop-filter`。 - 模块内部从上往下分为押注对象和押注金额两个小模块。 - 押注对象结构对齐首页 `Ended` 列表项中的三列押注选项：主胜、平局、客胜。 -- 押注对象上方金额展示用户在当前选项的累计下注额：`myHomeBetFormat` / `myDrawBetFormat` / `myAwayBetFormat`，详情接口缺失时按 `myBets` 中 `betOption` 汇总兜底。 -- 押注对象下方金额展示当前选项奖池：`homePoolFormat` / `drawPoolFormat` / `awayPoolFormat`，没有格式化字段时回退 `homePool` / `drawPool` / `awayPool`。 +- 押注对象上方金额展示当前选项奖池：`homePoolFormat` / `drawPoolFormat` / `awayPoolFormat`，没有格式化字段时回退 `homePool` / `drawPool` / `awayPool`。 +- 押注对象下方金额展示用户在当前选项的累计下注额：`myHomeBetFormat` / `myDrawBetFormat` / `myAwayBetFormat`，详情接口缺失时按 `myBets` 中 `betOption` 汇总兜底。 +- 押注对象金额上下行只对调字段展示，样式以当前详情页实现为准，不和首页 `Ended` 列表样式强行合并。 - 未开始赛事中，押注对象允许点击选择，默认不选中任何项；选中的押注项使用首页 `Ended` 选中态样式。 - 已开始或已结束赛事中，押注对象不可点击，选中态用于展示用户已押注过的选项。 - 押注金额模块只在未开始赛事展示，金额选项为 `100`、`1000`、`10000`、`100000`，每个金额左侧展示 coin 图片。 diff --git a/src/views/Activities/WorldCup/components/topUser.vue b/src/views/Activities/WorldCup/components/topUser.vue index 94fc942..93dcc38 100644 --- a/src/views/Activities/WorldCup/components/topUser.vue +++ b/src/views/Activities/WorldCup/components/topUser.vue @@ -66,7 +66,7 @@ {{ charmLevel || 0 }} @@ -74,7 +74,7 @@ {{ wealthLevel || 0 }} diff --git a/src/views/Activities/WorldCup/index.vue b/src/views/Activities/WorldCup/index.vue index 5845911..a5ed960 100644 --- a/src/views/Activities/WorldCup/index.vue +++ b/src/views/Activities/WorldCup/index.vue @@ -61,7 +61,7 @@ @@ -87,7 +87,7 @@ @@ -212,7 +212,7 @@ @@ -270,7 +270,7 @@ @@ -350,7 +350,7 @@
@@ -409,7 +409,7 @@ " > @@ -752,7 +752,7 @@
- {{ betOption.myBetAmount }} + {{ betOption.poolAmount }}
@@ -850,7 +850,7 @@ - {{ betOption.poolAmount }} + {{ betOption.myBetAmount }} @@ -896,7 +896,7 @@ @@ -941,7 +941,7 @@ />
@@ -950,7 +950,7 @@
@@ -991,7 +991,7 @@ v-if="showRewardPopup" style=" width: 100vw; - min-height: 100vh; + height: 100vh; display: flex; align-items: flex-start; justify-content: center; @@ -1002,10 +1002,138 @@ > + contentStyle="display: flex; flex-direction: column;justify-content: flex-start; gap: 12.5vw; padding: 34vw 6vw 0vw; box-sizing: border-box;" + > + +
+ +
+ +
+ +
+ + +
+ {{ showRewardDetail(rankReward.rewards[0].type, rankReward.rewards[0]) }} +
+
+ + +
+ +
+ +
+ +
+ + +
+ {{ showRewardDetail(reward.type, reward) }} +
+
+
+
+
@@ -1015,7 +1143,7 @@ v-if="showRulePopup" style=" width: 100vw; - min-height: 100vh; + height: 100vh; display: flex; align-items: flex-start; justify-content: center; @@ -1026,7 +1154,7 @@ > @@ -1042,13 +1170,15 @@ 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 { handleAvatarImageError } from '@/utils/image/imageHandler.js' +import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js' +import { formatRewardDisplay } from '@/utils/rewardFormatter.js' import MaskLayer from '@/components/MaskLayer.vue' import itemCenter from '@/components/itemCenter.vue' import TopUser from './components/topUser.vue' const assetPath = 'Activities/WorldCup/' const pngUrl = (filename) => getPngUrl(assetPath, filename) +const coinIcon = new URL('/src/assets/icon/Azizi/coin.png', import.meta.url).href const router = useRouter() const isLoading = ref(true) const ranking = ref([]) @@ -1067,6 +1197,19 @@ const showRewardPopup = ref(false) // 控制规则弹窗显示，点击 ruleBt 打开，点击弹窗上下空白区域关闭。 const showRulePopup = ref(false) +// 奖励弹窗静态数据：暂未配置 templateId，先仿照 BountyFootball 的奖励结构展示金币奖励。 +const rewardPopupList = ref( + [1, 2, 3].map((rankRange) => ({ + rankRange, + rewards: Array.from({ length: 5 }, () => ({ + type: 'GOLD', + cover: coinIcon, + content: '1', + quantity: 1, + })), + })), +) + const blockingImages = [ 'bg2', 'bg', @@ -1353,7 +1496,7 @@ const getEndedMatchBadgeStyle = (matchItem = {}) => { return `${baseStyle} background: linear-gradient(135deg, #A2A2A2 2.82%, #646464 99.15%);` } -// Ended 押注项数据：上方展示当前用户累计下注额，下方展示各选项奖池格式化金额。 +// Ended 押注项数据：上方展示各选项奖池格式化金额，下方展示当前用户累计下注额。 const getEndedBetOptions = (matchItem = {}) => { return [ { @@ -1510,6 +1653,11 @@ const handleCollapseRankingList = () => { showRankingList.value = false } +// 奖励内容展示格式：复用项目通用奖励格式化逻辑，保持和 BountyFootball 一致。 +const showRewardDetail = (type, reward) => { + return formatRewardDisplay(type, reward) +} + // 打开奖励弹窗，入口为 RankingMain 右上角 giftBt。 const handleOpenRewardPopup = () => { showRewardPopup.value = true diff --git a/src/views/Activities/WorldCup/世界杯接口说明.md b/src/views/Activities/WorldCup/世界杯接口说明.md index bd38c65..b638484 100644 --- a/src/views/Activities/WorldCup/世界杯接口说明.md +++ b/src/views/Activities/WorldCup/世界杯接口说明.md @@ -105,8 +105,8 @@ Body 参数： 页面对接注意： - `Predict Now` 和 `Ended` 底部总奖池入口优先展示 `totalPoolFormat`，没有格式化字段时回退 `totalPool`。 -- `Ended` 列表三列押注项的上方金额展示 `myHomeBetFormat` / `myDrawBetFormat` / `myAwayBetFormat`；字段不为 `null` 的选项视为当前用户已押注并展示选中态。 -- `Ended` 列表三列押注项的下方金额展示 `homePoolFormat` / `drawPoolFormat` / `awayPoolFormat`。 +- `Ended` 列表三列押注项的上方金额展示 `homePoolFormat` / `drawPoolFormat` / `awayPoolFormat`。 +- `Ended` 列表三列押注项的下方金额展示 `myHomeBetFormat` / `myDrawBetFormat` / `myAwayBetFormat`；字段不为 `null` 的选项视为当前用户已押注并展示选中态。 ### 2.2 押注 diff --git a/src/views/Activities/WorldCup/页面创建信息.md b/src/views/Activities/WorldCup/页面创建信息.md index 02819b9..0914426 100644 --- a/src/views/Activities/WorldCup/页面创建信息.md +++ b/src/views/Activities/WorldCup/页面创建信息.md @@ -74,6 +74,24 @@ 页面进入时必须展示统一加载动画，阻塞预加载完成后再展示主内容。 +### 3.3 itemCenter 最小高度 + +`itemCenter` 的 `min-height` 按 `Math.ceil(实际展示宽度vw * 图片高度 / 图片宽度)` 计算，当前页面已补充以下值： + +| 使用位置 | 图片 | 实际展示宽度 | min-height | +| --- | --- | --- | --- | +| 头部模块 | `bg` | `100vw` | `151vw` | +| 排行榜主图区 | `RankingMain` | `100vw` | `92vw` | +| 第四名以后排行榜项 | `RankingItem` | `100vw` | `23vw` | +| 首页魅力等级徽章 | `userLevel1Bg-userLevel5Bg` | `12vw` | `7vw` | +| 首页财富等级徽章 | `wealthLevel1Bg-wealthLevel5Bg` | `12vw` | `6vw` | +| 赛事列表模块 | `EventlistBg` | `100vw` | `244vw` | +| Predict Now 赛事卡片 | `matchBg` | `84vw`，来自 `EventlistBg` 内容区左右 `8vw` padding 后的可用宽度 | `52vw` | +| 我的排名贴底模块 | `myRankingBg` | `100vw` | `21vw` | +| 奖励弹窗 | `rewardBg` | `100vw` | `225vw` | +| 规则弹窗 | `ruleBg` | `100vw` | `178vw` | +| `components/topUser.vue` 等级徽章 | `userLevel*Bg` / `wealthLevel*Bg` | 当前父级最大 `26vw` 的 `30%` | `4vw` | + ## 4. 页面结构 ### 4.1 根容器 @@ -160,7 +178,8 @@ Ended 列表项规则： - 平局展示 `drawSign`、`DRAW`、`drawPercent`。 - 客方展示 `awayFlag`、`awayTeam`、`awayPercent`。 - Ended 押注项旗帜图片来源不同：主客方 `homeFlag` / `awayFlag` 是接口返回链接，不使用 `v-smart-img`；平局 `drawSign` 是 OSS 素材，单独使用 `v-smart-img`。 -- 押注项金额信息分为上下两行，中间使用 `background: #E9D089` 分割线；上方展示用户累计下注额 `myHomeBetFormat` / `myDrawBetFormat` / `myAwayBetFormat`，下方展示选项奖池 `homePoolFormat` / `drawPoolFormat` / `awayPoolFormat`，空值展示 `0`。 +- 押注项金额信息分为上下两行，中间使用 `background: #E9D089` 分割线；上方展示选项奖池 `homePoolFormat` / `drawPoolFormat` / `awayPoolFormat`，下方展示用户累计下注额 `myHomeBetFormat` / `myDrawBetFormat` / `myAwayBetFormat`，空值展示 `0`。 +- 首页 `Ended` 列表和详情页押注对象虽然字段接近，但样式按各自当前页面实现为准，后续只按需求调整字段或内容，不直接合并样式。 ### 4.5 弹窗模块 @@ -168,6 +187,12 @@ Ended 列表项规则： - 规则弹窗使用 `ruleBg` 的 `itemCenter`，弹窗宽度暂定 `100vw`。 - 奖励弹窗使用 `rewardBg` 的 `itemCenter`，弹窗宽度暂定 `100vw`。 - `ruleBg` 和 `rewardBg` 图片高度偏长，弹窗内容不做垂直居中，外层保留顶部和底部空白区域，点击空白区域退出弹窗。 +- 奖励弹窗当前暂未配置 `templateId`，先不调用 `src/api/activity.js` 的 `getThisWeekRewardsAndGifts`，使用本地静态数据模拟接口奖励结构。 +- 奖励弹窗静态数据为第 1、2、3 名各 5 个金币类型奖励，奖励类型为 `GOLD`，数量和展示内容均为 `1`。 +- `rewardBg` 的 `itemCenter` 内部使用 `flex-direction: column` 从上往下展示三名次奖励，名次之间用 `gap` 控制间距。 +- 单个名次奖励布局为左侧 1 个重点奖励，右侧 2 行 2 列共 4 个奖励；左右模块使用 `gap` 分隔，右侧模块 `flex: 1`。 +- 奖励项模块使用 `flex-direction: column`，背景图内已有奖励框，页面只用占位 `div` 居中奖励图；左侧奖励图占位比例为 `158.634/175.179`，右侧奖励图占位比例为 `1/1`。 +- 奖励信息展示复用 `src/utils/rewardFormatter.js` 的 `formatRewardDisplay(type, reward)`，图片加载失败时复用 `handleRewardImageError(event, reward.type)`。 ## 5. 接口说明 @@ -176,6 +201,7 @@ Ended 列表项规则： - `apiPostWorldCupMyBetList(data)`：我的竞猜记录，`POST /activity/worldcup/my/bet/list`。 - `apiPostWorldCupRankList()`：排行榜，`POST /activity/worldcup/rank/list`，接口无业务参数但 POST 仍传 `{}`。 - `apiGetWorldCupMatchDetail(matchId)`：比赛详情，`GET /activity/worldcup/match/detail`。 +- `getThisWeekRewardsAndGifts(templateId)`：奖励弹窗未来使用的公共奖励接口，来源为 `src/api/activity.js`；当前因为暂无 `templateId`，页面先使用本地静态金币奖励数据。 - 详细字段和返回示例见 `src/views/Activities/WorldCup/世界杯接口说明.md`。 ### 5.1 排行榜字段映射