前置操作

前置操作有两步，必须做完这两步才能进行其他操作。

1. 设置全局request:

import request from '@/utils/request'; // 路径取决项目的request

// 设置全局 request
setRequest(request)

2. 获取token

import {useSportToken} from '@aagames-fe/sports-hooks';

const {
  // 未登录之前获取通用token
  getCommonToken,
  // 离开页面停止刷新token
  stopCommonTokenInterval,
  // 获取登录后的token，只有登录后才能调用，并且调用后才能进行投注
  getLoginToken
  // 停止ws, 在页面离开的时候调用，停止游戏
  stopWS
} = useSportToken(VITE_APP_WS_URL); // 传递游戏ws 域名，可以从 import.meta.env.VITE_APP_WS_URL 获取

await getCommonToken(); // 获取token后就可以进行其他请求, 比如useEventData的getEventList

hooks说明

useEventStat

这个hooks是按照原生体育获取当天的赛事统计数据

import {useSportState} from '@aagames-fe/sports-hooks';

const {
  // 统计的数据
  statData,
  // loading属性，reactive
  statLoading,
  // 设置关注的eventId，以进行关注的统计
  setFavList,
  // 手动获取state
  getStat,
} = useSportState();

useEventData

这个hooks是获取赛事数据和market盘口数据

import {useEventData} from '@aagames-fe/sports-hooks';

const {
  // 传入联赛筛选，为空则不筛选， reactive, 修改后自动刷新
  selectedLeagues,
  // 对应原生体育的统计范围： 今日 早盘 串关  'early' 'today' 'parlay'
  targetTimeRange,
  // 直播对象，是一个对象，key名字是赛事id，可以使用 streaming[eventId] 取，没有就是这场赛事没有直播
  streaming,
  // 手动出发请求获取赛事
  getEvents,
  // 刷新，分页重置为零
  refresh,
  // 滚动加载
  loadMore,
  // 加载中
  loading,
  // 赛事数据，用于列表和
  eventList,
  // 是否以及加载完，用在滚动加载
  finished,
  // 体育类型，reactive，修改后自动刷新
  sportType,
  // 排序，取值 ‘time' || 'leagueName', 根据 时间 ｜ 联赛名称 排序
  sort,
  // 推流的更新数据，reactive，watch根据数据更新
  marketES,
  /*
    将赛事的相同market聚合到一个一个数组，用于展示, 参数：
    markets: Array，赛事的markets数组
    betType: Number, 可选，根据投注类型筛选

    返回的数据为：
    {
      name: String 投注名称,
      betType: Number 投注类型,
      teams: String[] 比赛队伍名字， 只有让球类型有数据,
      markets: market[] 投注数据,
    }[]
  */
  transformMarketByBetType,
  /*
    使用event_id数组批量获取赛事
    参数: number[]
    return: Event[]
  */
  getEventListByEventIds,
  // 用户的越
  userBalance,
  // 刷新余额
  refreshBalance,
} = useEventData();

首页的列表有需要显示两个投注，分别是赛事列表中的firstMarket和secondMarket字段。

赔率显示是盘口的selections数组，title是赔率信息，赔率是oddsPrice对象，根据盘口选择数据。

详情页的显示有三种，一行两个赔率，一行三个赔率，是根据赔率类型取展示，具体展示是根据赔率类型来展示，具体可以长到原生体育BetItem组件的逻辑

赔率判断在constants.js文件有个方法getBetTypeName，可以根据投注类型betType获取到对应的投注大类型

/*
  {
    name: String 投注名称,
    betType: Number 投注类型,
    teams: String[] 比赛队伍名字， 只有让球类型有数据,
    markets: market[] 投注数据,
  }[]
 */

每个赛事下面有一个数据是 transformMarkets 这个数据用于详情页的数据聚合展示。对应字段截图如下

useBetRecord

用来请求历史注单的hooks

import {useBetRecord} from '@aagames-fe/sports-hooks';

const {
  // 数据, reactive
  recordData,
  /* 获取数据 传参:
  is_settled: boolean 已结算 未结算
  start: yyyy-MM-DDThh:mm:ss 开始时间，
  end: yyyy-MM-DDThh:mm:ss 结束时间，
  */
  getRecord,
  // loading
  loading,
  // 注单的状态表
  betStatus,
} = useBetRecord();

useFavList

获取关注数据的hooks，其返回的数组可以传递给 useEventStat 去作为关注赛事的请求，也可以自行根据第三方文档请求对应数据

import {useFavList} from '@aagames-fe/sports-hooks';

const {
  // 关注列表，赛事id组成的数组 reactive
  favList,
  // 添加到关注列表 传参
  /*
    {
      id, // 赛事id
      sportType // 体育类型
    }
   */
  addFavList,
  // 删除关注列表 传参:
  /*
    {
      id, // 赛事id
      sportType // 体育类型
    }
   */

  removeFavList,
  // 获取关注列表 
  getFavList,
} = useFavList();

usePlaceBet

这个hooks用于投注，投注又分为单注和串关投注

import {usePlaceBet} from '@aagames-fe/sports-hooks';

const {
  // 切换串关赔率，已存在就删除，不存在就添加，参数如下： odds = market
  /*
    {
    ...JSON.parse(JSON.stringify(event)), // 深拷贝整个赛事
    odds: { // 投注的market，这里方便理解做成odds
      ...odds,
      selected: odds?.selections[index] ? { ...odds.selections[index] } : {}, // 这个index就是点击的赔率在market的selections数组的哪个下标
    },
  }
   */
  toggleMultipleOdds,
  // 切换单个投注, 参数跟上面multipleOdds一致
  toggleSingleOdds,
  // 获取单注ticket
  getSingleTicket,
  // 提交单注投注
  submitSingleBet,
  // 对应单注赔率 reactive
  singleOdds,
  // 对应串关赔率 reactive 数组， 会保存到localeStorage，刷新页面会重新导入
  multipleOdds,
  // 获取串关赔率
  getParlayTicket,
  // 串关判断所有赔率是否正常
  allRunning,
  // 手动根据marketId更新串关数组的赔率
  updateMarket,
  // 提交串关投注
  submitParlay,
  // 串关的最少 combo
  maxCombo,
  // 串关的总投注字段
  totalStack,
  // 串关赔率列表是否存在先同一个
  hasSameEvent,
  // 单注的投注金额，reactive
  singleAmount,
  // 串关ticket返回的数据，串关投注必须使用这个进行色值金额来投注，金额是数据里面的 amount
  parlayTicketData,
} = usePlaceBet();

/src/apis.js

所有请求的文件，可以单独import进来，比如:

import {GetEvents} from '@aagames-fe/sports-hooks/src/apis.js';

```所有请求

## /src/constants.js

一些静态的配置的文件，可以单独import进来，比如:

javascript import {getBetTypeName} from '@aagames-fe/sports-hooks/src/constants.js';