overseas-h5 v0.0.1

包网3.0架构

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

技术栈

• Vue3 全家桶
• 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为配置项，具体使用方式请参照下面表格

多入口项目 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节。其他体育比赛也有自身的赛程。 |

重要逻辑

第三方接口

第三方接口文档

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