包网3.0架构

本仓库最先应用于海外版架构，故此取名 overseas-h5。

技术栈

• [x] Vue3 全家桶
• [x] Axios + ElementPlus + Scss + I18n国际化
• [ ] 乾坤 (已停用)
• [ ] SSR (已停用)

目录结构释义（部分文件/夹名语义强的未做释义）

> overseas-web
├── .github // github action配置
│   ├── workflows
│   │   ├── dev-build.yml // 测试环境手动部署脚本
│   │   ├── dev-deploy.yml // 测试环境自动部署脚本
├── patches // 补丁目录（patch-package）
├── native-sports // 多入口项目，原生体育。仅在native-sports分支存在，下文详叙。
├── public // 静态资源，将直接移动至dist（不参与打包）
│   ├── data // 配置数据
│   ├── font // 字体
│   ├── images // 图片
│   ├── lang_bak // 多语言备份
│   ├── language // 多语言字典文件
│   ├── libs // 插件
│   ├── seo // SEO数据
│   ├── vi_ // 特殊语种设置（暂时注释）
│   ├── favicon.ico // 网站favicon
│   └── kefu.html // 客服静态html
├── **scripts** // 语法脚本（部分释义）
│   ├── ast.js // AST语法脚本
│   ├── autoGit.js // 子库批处理脚本
│   ├── build.js // 线上环境打包脚本
│   ├── buildTest.mjs // 测试环境打包脚本
│   ├── cli.mjs // 开发环境启动脚本
│   ├── init.js // 初始化脚本
│   ├── seo.js // SEO脚本
│   ├── spawn.js // node执行命令行功能封装
│   ├── submodule.js // 子库切换分支脚本（已废弃）
│   ├── tinypng.js // 图片压缩脚本
├── **src** // 主目录
│   ├── api // 接口文件
│   ├── assets // 静态资源文件
│   │   ├── dark // 暗色系文件目录
│   │   ├── data // 数据文件目录
│   │   ├── images // 图片目录
│   │   ├── style // 样式目录
│   │   ├── svg // SVG目录
│   ├── components // 公共封装组件
│   ├── config // 数据配置目录
│   ├── **current_project** // 子库目录
│   │   ├── config
│   │   │   ├── index.js // 子库配置文件（重要）
│   ├── directives // 指令
│   ├── plugins // 插件
│   ├── router // 路由
│   │   ├── modules // 理由模块文件
│   ├── store // 数据流
│   │   ├── modules // 数据流模块文件 
│   ├── utils // 工具方法
│   ├── views // 页面组件
│   ├── App.vue // 入口文件
├── subReplace // 子库批处理目录
├── translate // 全局翻译脚本
├── .env // 大陆版配置
├── .env.overseas // 海外版配置

1. 拉取项目代码（SSH方式）

一定要使用SSH方式拉取代码；github ssh配置可以百度。

2. 启动项目 (需要有overseas-h5-common仓库拉取权限。确保node版本在v14,推荐v14.17.0)

npm i // 安装依赖

npm start merchantNo env // 请注意，不要直接运行这条命令，此命令 merchantNo env为配置项，具体使用方式请参照下面表格

| 参数 | 类型 | 必填 |可选项 | 释义 | | :-: | :-: | :-: | :-: | :-: | | merchantNo | number | 否 | 10001|10029|... | 5位纯数字，决定子库current_project目录拉取，对应common仓库分支名；大陆版商户1开头，如10001、10029；海外版商户5开头，如：50001。例：npm start 10001 | | env | string | 否 | dev | prod | 单次运行指定使用线上或测试环境服务，与src/current_project/config/index.js 里 testUseProdInterface 配置关联，当 testUseProdInterface: true 值为true或具体商户号 testUseProdInterface: 10029时，使用dev将本次运行使用测试环境19001服务，prod 则反之。例：npm start 10001 dev。

多入口项目 native-sports

分支： native-sports

多入口是同一个项目可以配置多个入口，使用同一个架构进行开发多个项目。 具体文档

目录结构释义

native-sports
├── App.vue //入口
├── api // 请求
│   ├── bet.js
│   ├── focus.js
│   ├── home.js
│   └── user.js
├── components // 通用组件
│   ├── BetPopup.vue // 投注弹窗
│   ├── Empty.vue
│   ├── GameFilter.vue
│   ├── InputComps.vue // 光标输入
│   ├── KeyBoard.vue // 自定义键盘
│   ├── Layout
│   │   ├── NavBar.vue
│   │   └── index.vue
│   ├── ListEvent.vue // 列表赛事
│   ├── ListFocusEvent.vue
│   ├── OddsItem.vue // 盘口展示组件
│   ├── ParlayBtn.vue // 串关按钮
│   ├── Popup
│   │   └── SideMorePopup.vue // 侧边更多弹窗
│   ├── Popup.vue
│   ├── SuccessPopup.vue // 成功痰喘
│   └── VSNavBar.vue
├── const.js // 静态配置
├── i18n // 多语言
│   ├── en.mjs
│   ├── th.mjs
│   └── vi.mjs
├── index.html
├── main.js
├── router.js // 路由
├── store // vuex
│   ├── index.js
│   └── modules
│       ├── app.js
│       ├── game.js
│       └── user.js
├── styles
│   ├── dark.less // 暗黑模式样式
│   ├── main.less // 主要样式
│   ├── reset.less
│   ├── root.less
├── utils
│   ├── getSrc.js // 图片处理函数
│   └── index.js // 帮助函数
└── views // 路由页面
    ├── index // 主页tab
    │   ├── bet // 投注记录tab
    │   │   ├── components
    │   │   │   └── TimeFilter.vue
    │   │   └── index.vue
    │   ├── focus // 关注tab
    │   │   ├── components
    │   │   │   └── SportFocusMain.vue
    │   │   └── index.vue
    │   ├── home // 首页tab
    │   │   ├── components
    │   │   │   ├── SportFilter.vue
    │   │   │   ├── SportFind.vue
    │   │   │   ├── SportMain.vue
    │   │   │   ├── SportNotice.vue
    │   │   │   └── SportSkeleton.vue
    │   │   └── index.vue
    │   └── search // 搜索tab
    │       ├── components
    │       │   ├── SportSearchDefault.vue
    │       │   └── SportSearchRes.vue
    │       └── index.vue
    ├── multiple-bet // 串关页
    │   ├── confirm.vue
    │   └── index.vue
    ├── notice // 公告消息页
    │   ├── detail.vue
    │   └── index.vue
    ├── rules // 规则说明页
    │   ├── components
    │   │   ├── Big.vue
    │   │   ├── Item.vue
    │   │   ├── Rang.vue
    │   │   └── Regular.vue
    │   └── index.vue
    ├── sport-detail // 赛事详情页
    │   ├── components
    │   │   ├── BallTab.vue // 盘口区域
    │   │   ├── BetItem.vue // 盘口组件
    │   │   ├── ChatAction.vue // 地步聊天室
    │   │   ├── ChatRoom.vue // 聊天室
    │   │   ├── GameInfo.vue // 游戏信息
    │   │   ├── ScoreToast.vue // 进球提醒
    │   │   └── Skeleton.vue
    │   └── index.vue
    └── sport-detail-filter // 联赛下赛事切换页
        └── index.vue

原生体育业务逻辑

从第三方数据获取体育数据后，展示盘口数据。 用户点击盘口弹起投注弹窗，可以投单注也可以加入到串关列表中一同下注（需要盘口支持串关）。 投注后，等待赛事结束第三方结算，结算后进行派彩。

接口逻辑

因为数据是第三方的数据，所以数据类的接口全部直接请求第三方，除了投注外。 | 业务 | 解析 | |----------|------------------------------------------------------------------------------------------------------------------------------| | 数据推送 | 初始用Get请求接口获取数据后，通过EventSource监听服务器的数据推送实时更新盘口和比赛信息。 | | 直播 | 获取赛事信息后，通过赛事的数据单独请求直播数据(GetStreaming)才能获取直播的信息。有两种直播，一种是videojs拉流，一种是h5内嵌. | | 投注 | 投注分成两步，获取投注ticket然后根据ticket下注。 | | 串关 | 串关是把多个盘口放到一起投注，盘口有些支持有些不支持串关。串关有个最小串关数量的限制。 | | 盘口 | 目前支持是欧洲盘和香港盘口，各盘口赔率不同 | | 赔率 | 赔率是实时变化的，可能每秒都在变化。投注的时候可能因为赔率变化了投注失败。 | | 赛程 | 比如足球有上下半场，篮球有4节。其他体育比赛也有自身的赛程。 |

重要逻辑

| 逻辑 | 解析 | |-----|-----| |今日赛事|利用GetSports接口，从当前时间到24小时之后的同一时间。加总每种赛事的liveGameCount、gameCount| |早盘赛事|同样GetSports接口，但是是未来7天的赛事，同样是liveGameCount+gameCount| |串关赛事|跟早盘一样的请求，但是取得是parlayCount| |盘口类型|利用GetMarkets接口获取的数据。盘口类型有很多，同类型的盘口可能有一些小变化，比如上半场大小球、下半场大小球。每种体育类型可能有不同的盘口类型。比如电子竞技特有的地图胜负盘| |赔率变化|通过推流接口获取赔率更新，对比上一次赔率，如果有所上升显示红色字体，下降显示绿色字体。3秒后回复普通颜色| |投注|点击某个赔率后获取ticket，ticket中有最小投注、最大投注和ticket赔率，根据ticket的数据进行下注。但是赔率的变化有可能导致ticket失效| |串关投注|必须满足3点： 1、串关数量大于目标盘口中的最大combo字段。 2、同个赛事的盘口不能串关。 3、盘口必须处于running状态。| |赛程|除了网球和排球以外，其他的赛事都在livePeriod表示当前赛程。| |比赛累计时间|有些比赛时正常累计时间，有些是倒计时。|

第三方接口

第三方接口文档

注意第三方的接口参数比较灵活，可以自定义很多数据查询，类似sql语句: Odata Query

|接口|析义| |-----|-----| |GetEvents|获取赛事数据,注意默认的参数会带上盘口，但是这些盘口是常用盘口，不完全| |GetSports|获取一定时间内的体育类型和赛事数量| |GetStreaming|获取赛事的直播数据| |GetMarkets|获取赔率| |GetLeagues|获取所有联赛| |GetPromotions|获取热门赛事| |GetEventResult|获取赛果，但是不是实时的，会有延迟|