hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
aslan-h5/src/views/Activities/Games/BountyFootball/页面创建信息.md

11 KiB
Raw Blame History

页面创建信息

1. 基础信息

  • 页面类型：Activities
  • 页面名称：BountyFootball
  • 页面目录：src/views/Activities/BountyFootball
  • 参考页面：已存在 src/views/Activities/BountyFootball/index.vue
  • 备注：已按本地图片目录扫描结果同步图片清单、预加载和页面用图；按需求取消 index 中的活动礼物模块。

2. 路由和权限

  • route path：/activities/bounty-football
  • route name：bounty-football
  • 是否需要登录：否
  • 是否加入 src/config/security.js：是
  • 是否加入 src/utils/permissionManager.js：是

2.1 路由代码片段

{
  path: '/activities/bounty-football',
  name: 'bounty-football',
  component: () => import('../views/Activities/BountyFootball/index.vue'),
  meta: { requiresAuth: false },
}

2.2 安全白名单片段

'/activities/bounty-football',

2.3 权限页面片段

'/activities/bounty-football', // BountyFootball

3. OSS 图片目录

  • OSS 相对路径：Activities/BountyFootball/
  • 本地开发目录：public/oss/h5/Azizi/Activities/BountyFootball/
  • 是否需要 Codex 自动创建本地开发目录：是
  • 图片是否已放入本地目录：是

说明：本地开发目录只作为开发期 OSS 图片镜像使用，方便页面优先读取本地资源；发布时图片由你上传到真实 OSS，不随项目提交 Git。新建本地目录时不生成 .gitkeep，空目录不被 Git 跟踪是正常现象。

3.1 多语言图片清单

图片名 支持语言 备注
bg en 页面主背景
bg2 en .bg 容器第一层底图，作为内容最底层背景
helpBg en, ar, bn, tr 规则说明弹窗背景
helpBt en 规则/帮助按钮
myRankingBg en 底部我的排名固定栏背景
rankBg en 排行榜内容区背景
RankingBottomBorder en 排行榜底部边框
rankingBt en, ar, bn, tr 排行榜按钮
RankingItem en 排行榜列表项背景
RankingMain en 排行榜前三名展示区背景
rewardBgTop1 en 第一名奖励区背景
rewardBgTop2 en 第二名奖励区背景
rewardBgTop3 en 第三名奖励区背景
rewardBt en, ar, bn, tr 奖励按钮
timeBg en 倒计时背景
top1 en 第一名头像/排名装饰
top2 en 第二名头像/排名装饰
top3 en 第三名头像/排名装饰

3.2 进入页面前同步预加载图片

图片名 是否包含多语言 备注
bg 否 页面主背景
bg2 否 .bg 容器第一层底图，作为内容最底层背景
helpBt 否 规则/帮助按钮
timeBg 否 倒计时背景
rankingBt 是 标签页排行榜按钮
rewardBt 是 标签页奖励按钮
rankBg 否 排行榜内容区背景
RankingMain 否 排行榜前三名展示区背景
RankingItem 否 排行榜列表项背景
RankingBottomBorder 否 排行榜底部边框
myRankingBg 否 底部我的排名固定栏背景
helpBg 是 规则说明弹窗背景
top1 否 第一名头像/排名装饰
top2 否 第二名头像/排名装饰
top3 否 第三名头像/排名装饰
rewardBgTop1 否 第一名奖励区背景
rewardBgTop2 否 第二名奖励区背景
rewardBgTop3 否 第三名奖励区背景

3.3 进入页面后后台预加载图片

图片名 是否包含多语言 备注
当前 index.vue 会在进入页面前预加载全部已使用本地图片，暂无后台预加载项

4. 模块配置

没有填写的模块，初版页面先不处理。

4.1 标签页模块

{
  "enabled": true,
  "defaultValue": "ranking",
  "items": [
    {
      "value": "ranking",
      "label": "Ranking",
      "buttonImage": "rankingBt",
      "activeButtonImage": "rankingBt",
      "remark": "排行榜按钮，未选中时页面使用灰度效果"
    },
    {
      "value": "reward",
      "label": "Reward",
      "buttonImage": "rewardBt",
      "activeButtonImage": "rewardBt",
      "remark": "奖励按钮，未选中时页面使用灰度效果"
    }
  ]
}

4.2 页面区块模块

[
  {
    "name": "ranking",
    "label": "Ranking",
    "enabled": true,
    "apis": ["getRankingListAndMyRanking"],
    "loadMode": "client-incremental",
    "pageSize": 10,
    "images": ["rankBg", "RankingMain", "RankingItem", "RankingBottomBorder", "myRankingBg"],
    "previewImages": ["top1", "top2", "top3"],
    "remark": "默认展示排行榜；包含前三名、第四名以后列表和底部我的排名",
    "children": {}
  },
  {
    "name": "reward",
    "label": "Reward",
    "enabled": true,
    "apis": ["getThisWeekRewardsAndGifts"],
    "images": ["rewardBgTop1", "rewardBgTop2", "rewardBgTop3"],
    "previewImages": [],
    "remark": "只展示奖励列表；已按需求取消 index 中的活动礼物模块",
    "children": {}
  }
]

倒计时模块固定保留：

{
  "name": "countdown",
  "enabled": true,
  "deadline": "2026-06-12 05:00:00",
  "images": ["timeBg"],
  "fields": {
    "endTime": "2026-06-12 05:00:00",
    "remainingText": ""
  },
  "remark": "天/时/分/秒使用 timeBg 承载；当前 index.vue 目标时间为 2026-06-12 05:00:00。"
}

4.3 弹窗模块

[
  {
    "name": "help",
    "triggerImage": "helpBt",
    "backgroundImage": "helpBg",
    "contentImage": "",
    "apis": [],
    "remark": "规则说明弹窗；helpBg 支持多语言图片；MaskLayer 必须保持 fixed 顶层，不要被 .bg 子层级规则覆盖；规则文案按编号拆段，白色字体，字号 1em。"
  }
]

4.4 排行榜模块

{
  "enabled": "",
  "api": "",
  "loadMode": "",
  "pageSize": "",
  "topCount": "",
  "myRankingPath": "",
  "fieldMap": {
    "avatar": "",
    "name": "",
    "value": "",
    "userId": "",
    "rank": ""
  }
}

4.5 抽奖模块

{
  "enabled": "",
  "drawApis": [],
  "prizePoolApi": "",
  "drawCountApi": "",
  "extraApis": [],
  "displayMode": "",
  "slotCount": "",
  "historyButtonPosition": "",
  "images": {
    "background": "",
    "activeFrame": "",
    "singleDrawButton": "",
    "multiDrawButton": "",
    "historyButton": "",
    "resultBackground": ""
  },
  "remark": ""
}

5. 接口参数

{
  "templateId": "2061370141245067265",
  "activityType": 20,
  "cycleKey": "20260601"
}

6. 组件需求

需要哪个就填“是”，不需要或没填写的初版页面先不接。

[
  {
    "name": "BackgroundLayer",
    "enabled": "",
    "remark": "长背景分段"
  },
  {
    "name": "itemCenter",
    "enabled": "",
    "remark": "图片容器"
  },
  {
    "name": "topUser / TopUser",
    "enabled": "",
    "remark": "前三名用户展示"
  },
  {
    "name": "Barrage",
    "enabled": "",
    "remark": "弹幕"
  },
  {
    "name": "ActivityTabs",
    "enabled": "",
    "remark": "标签页"
  },
  {
    "name": "ActivityLotteryGrid",
    "enabled": "",
    "remark": "抽奖格子"
  }
]

6.1 当前页面布局记录

本节按当前 index.vue 的实时结构记录，后续如从 md 同步回 Vue，需要保留以下规则：

{
  "scrollContainer": {
    "selector": ".bg",
    "style": {
      "width": "100vw",
      "height": "100vh",
      "overflowX": "hidden",
      "overflowY": "auto",
      "scrollbar": "hidden",
      "position": "relative",
      "zIndex": 1
    },
    "remark": "页面上方内容在 .bg 内垂直滚动，隐藏滚动条。"
  },
  "backgroundLayer": {
    "image": "bg2",
    "placement": ".bg 的第一个子节点",
    "layer": "内容最底层",
    "style": {
      "position": "absolute",
      "top": 0,
      "left": 0,
      "zIndex": 0,
      "width": "100vw",
      "height": "100vh",
      "objectFit": "cover",
      "pointerEvents": "none"
    }
  },
  "maskLayer": {
    "component": "MaskLayer",
    "position": "fixed",
    "zIndex": 10000,
    "remark": ".bg > :not(.bg2-layer) 这类子层级规则不能覆盖 MaskLayer 根节点；当前 Vue 使用 .bg > :not(.bg2-layer):not(.mask-layer) 并用 :deep(.mask-layer) 保持遮罩在视口最上层。"
  },
  "helpPopupText": {
    "style": {
      "color": "#fff",
      "fontSize": "1em"
    },
    "paragraphs": [
      "1. The more coins a user accumulates during the event, the higher their ranking will be.",
      "2. The event will last for 15 days. After the event ends, rewards will be distributed to the top three users on the leaderboard.",
      "3. The top three users should contact the official staff in a timely manner to discuss how to obtain the USD reward.",
      "(1) Withdrawal: Please provide your USDT receiving account ID or receiving QR code.",
      "(2) No withdrawal: If converted to coins, we will give you an additional 5% gold coins on top of the original amount ($1:10500 coins).",
      "4.ID Rules: Users can locate official staff by providing a screenshot of their ranking and the number of the selected ID to use it (for example: when the reward is \"ID: ABBBBA\", the user can provide \"ID: 100001\" as their own ID, or grant the usage rights to another person).",
      "*Please note that the ID must not currently be in use by anyone else."
    ]
  }
}

7. 建页后记录

这部分由 Codex 建页后填写。

7.1 已完成

  • 已创建页面目录：src/views/Activities/BountyFootball
  • 已创建专属页面信息文件：src/views/Activities/BountyFootball/页面创建信息.md
  • 已创建初始配置文件：src/views/Activities/BountyFootball/page.config.js
  • 已创建本地开发图片目录：public/oss/h5/Azizi/Activities/BountyFootball/
  • 已扫描本地图片目录并更新 3.1 图片清单、3.2/3.3 预加载清单
  • 已同步更新 page.config.js 的 preload、modules、popups、features、images.localized
  • 已将 index.vue 的资源路径切换为 Activities/BountyFootball/ 下的 PNG 图片
  • 已取消 index.vue 中的活动礼物模块，保留排行榜与奖励列表模块
  • 已写入 src/router/index.js、src/config/security.js、src/utils/permissionManager.js
  • 已将页面内不存在的 Atu/coin.png 修正为项目现有的 Azizi/coin.png
  • 已补充 bg2 为 .bg 容器第一层底图，并将 .bg 改为 100vw/100vh 的隐藏滚动条纵向滚动容器
  • 已更新 templateId 为 2061370141245067265，并移除 page.config.js 中当前未使用的空接口参数
  • 已修复 MaskLayer 被 .bg 子层级样式覆盖导致遮罩出现在页面下方的问题，并补充规则弹窗文案与样式
  • 已重新扫描图片并替换前三名头像框与前三名奖励背景的新命名：top1/top2/top3、rewardBgTop1/rewardBgTop2/rewardBgTop3
  • 已将 help 弹窗硬编码文案切换为 src/locales 多语言 key：bounty_football_help_*

7.2 未填写所以跳过

  • 抽奖配置未补充，暂不处理
  • 其余接口参数当前页面未使用，已从 page.config.js 移除

7.3 待你微调

  • 确认规则文案是否需要后续接入多语言翻译 key

7.4 验证结果

  • npm run build：通过
  • 备注：构建通过；仍保留项目既有的 secondBg.png 运行时解析提示和 http.js 动态/静态导入提示。