xtraderClient/docs/components/TradeComponent.md
2026-02-14 19:47:08 +08:00

1.3 KiB
Raw Blame History

TradeComponent.vue

路径src/components/TradeComponent.vue

功能用途

交易核心组件,支持 Buy/Sell、Market/Limit、Merge/Split。根据 marketinitialOption 展示 Yes/No 或 Up/Down 价格,计算 Total、To win、You'll receive 等,并调用 pmOrderPlacepmMarketSplitpmMarketMerge

Props

属性 类型 说明
market object 市场信息,含 marketId、clobTokenIds、outcomes、outcomePrices 等
initialOption 'yes' | 'no' 初始选中的选项
embeddedInSheet boolean 是否嵌入底部弹窗(移动端)

核心能力

  • Buy/Sell Tab 切换
  • Market/Limit 类型、Merge/Split 菜单
  • Buy 模式 Amount 区:无论余额是否充足,均显示 Amount 标签、Balance、金额输入、+$1/+$20/+$100/Max 快捷按钮(桌面端、嵌入弹窗、移动端弹窗一致)
  • 余额不足时 Buy 显示 Deposit 按钮
  • 25%/50%/Max 快捷份额
  • 调用 market API 下单、Split、Merge

使用方式

<TradeComponent
  :market="tradeMarketPayload"
  :initial-option="tradeInitialOption"
  embedded-in-sheet
/>

扩展方式

  1. Limit 单:完善 Limit 模式下的价格输入与下单逻辑
  2. 订单确认:增加确认弹窗
  3. 滑点设置:增加滑点配置