# overseas-h5 > Use vue3 vite eslint SSR vuex vue-router vant less Latest version **0.0.1** (published 2022-11-05) · MIT license · 0 weekly downloads ## Install ```sh npm install overseas-h5 pnpm add overseas-h5 yarn add overseas-h5 bun add overseas-h5 ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; large bundle; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.1 | | Published | 2022-11-05 | | First published | 2022-11-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 32 | | Unpacked size | 37.2 MB | | Known vulnerabilities | 0 (+27 in 3 direct dependencies) | | Install scripts | yes | | GitHub stars | 158 | | Author | AAGame | | Maintainers | luker-inc-acb | ## Links - npm: https://www.npmjs.com/package/overseas-h5 - Repository: https://github.com/vok123/vue3-ts-vite-ssr-starter - Homepage: https://github.com/vok123/vue3-ts-vite-ssr-starter#readme - Issues: https://github.com/vok123/vue3-ts-vite-ssr-starter/issues - npm.io page: https://npm.io/package/overseas-h5 ## Dependencies (32) - [md5](https://npm.io/package/md5.md) ^2.3.0 - [vue](https://npm.io/package/vue.md) ^3.2.33 - [vant](https://npm.io/package/vant.md) 3.4.9 - [vuex](https://npm.io/package/vuex.md) ^4.0.0 - [axios](https://npm.io/package/axios.md) ^0.21.1 - [dayjs](https://npm.io/package/dayjs.md) ^1.10.6 - [vivus](https://npm.io/package/vivus.md) ^0.4.6 - [qrcode](https://npm.io/package/qrcode.md) ^1.5.0 - [echarts](https://npm.io/package/echarts.md) ^5.2.1 - [inquirer](https://npm.io/package/inquirer.md) ^8.2.4 - [video.js](https://npm.io/package/video.js.md) ^7.20.1 - [vue-i18n](https://npm.io/package/vue-i18n.md) 9.1.10 - [js-cookie](https://npm.io/package/js-cookie.md) ^3.0.1 - [nprogress](https://npm.io/package/nprogress.md) ^0.2.0 - [ahooks-vue](https://npm.io/package/ahooks-vue.md) ^0.12.7 - [vue-router](https://npm.io/package/vue-router.md) ^4.0.13 - [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1 - [vue-request](https://npm.io/package/vue-request.md) ^1.2.4 - [@vueuse/head](https://npm.io/package/@vueuse/head.md) ^0.6.0 - [dom-to-image](https://npm.io/package/dom-to-image.md) ^2.6.0 - [vue3-marquee](https://npm.io/package/vue3-marquee.md) ^3.0.7 - [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1 - [vue-countupjs](https://npm.io/package/vue-countupjs.md) ^1.0.0 - [vue3-count-to](https://npm.io/package/vue3-count-to.md) ^1.1.0 - [vue3-clipboard](https://npm.io/package/vue3-clipboard.md) ^1.0.0 - [socket.io-client](https://npm.io/package/socket.io-client.md) ^2.3.0 - [vue-list-marquee](https://npm.io/package/vue-list-marquee.md) ^1.0.48 - [vuex-router-sync](https://npm.io/package/vuex-router-sync.md) ^6.0.0-rc.1 - [vue-awesome-swiper](https://npm.io/package/vue-awesome-swiper.md) ^3.1.3 - [@better-scroll/core](https://npm.io/package/@better-scroll/core.md) ^2.4.2 - [google-translate-api](https://npm.io/package/google-translate-api.md) ^2.3.0 - [smoothscroll-polyfill](https://npm.io/package/smoothscroll-polyfill.md) ^0.4.4 ## Recent versions - 0.0.1 (latest) — 2022-11-05 ## README # 包网3.0架构 ------ > 本仓库最先应用于海外版架构，故此取名 `overseas-h5`。 ## 技术栈 - [x] Vue3 全家桶 - [x] Axios + ElementPlus + Scss + I18n国际化 - [ ] 乾坤 (已停用) - [ ] SSR (已停用) ------ ## 目录结构释义（部分文件/夹名语义强的未做释义） ```bash > 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 多入口是同一个项目可以配置多个入口，使用同一个架构进行开发多个项目。 [具体文档](https://vitejs.dev/guide/build.html#multi-page-app) ## 目录结构释义 ```bash 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表示当前赛程。| |比赛累计时间|有些比赛时正常累计时间，有些是倒计时。| ## 第三方接口 [第三方接口文档](https://github.com/Saba-sports/OddsDirectAPI_CN/wiki) 注意第三方的接口参数比较灵活，可以自定义很多数据查询，类似sql语句: [Odata Query](https://github.com/Saba-sports/OddsDirectAPI_CN/wiki/Odata-Query) |接口|析义| |-----|-----| |GetEvents|获取赛事数据,注意默认的参数会带上盘口，但是这些盘口是常用盘口，不完全| |GetSports|获取一定时间内的体育类型和赛事数量| |GetStreaming|获取赛事的直播数据| |GetMarkets|获取赔率| |GetLeagues|获取所有联赛| |GetPromotions|获取热门赛事| |GetEventResult|获取赛果，但是不是实时的，会有延迟| --- _Source: https://npm.io/package/overseas-h5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._