50 lines
1.8 KiB
Markdown
50 lines
1.8 KiB
Markdown
# TradeComponent.vue
|
||
|
||
**路径**：`src/components/TradeComponent.vue`
|
||
|
||
## 功能用途
|
||
|
||
交易核心组件，支持 Buy/Sell、Market/Limit、Merge/Split。根据 `market` 与 `initialOption` 展示 Yes/No 或 Up/Down 价格，计算 Total、To win、You'll receive 等，并调用 `pmOrderPlace`、`pmMarketSplit`、`pmMarketMerge`。
|
||
|
||
## 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
|
||
|
||
## 使用方式
|
||
|
||
```vue
|
||
<TradeComponent
|
||
:market="tradeMarketPayload"
|
||
:initial-option="tradeInitialOption"
|
||
embedded-in-sheet
|
||
/>
|
||
```
|
||
|
||
## 国际化
|
||
|
||
Merge/Split 弹窗文案均通过 `trade.*` 键国际化：
|
||
|
||
- **Merge 弹窗**：`mergeDialogTitle`、`mergeDialogDesc`、`mergeAvailableShares`、`mergeNoMarket`、`mergeSubmitBtn`；复用 `trade.amount`、`trade.max`
|
||
- **Split 弹窗**：`splitDialogTitle`、`splitDialogDesc`、`splitAmountLabel`、`splitNoMarket`、`splitSubmitBtn`
|
||
|
||
`mergeDialogDesc`、`splitDialogDesc`、`mergeNoMarket`、`splitNoMarket` 支持 `{yesLabel}`、`{noLabel}` 插值。
|
||
|
||
## 扩展方式
|
||
|
||
1. **Limit 单**：完善 Limit 模式下的价格输入与下单逻辑
|
||
2. **订单确认**：增加确认弹窗
|
||
3. **滑点设置**：增加滑点配置
|