63 lines
1.9 KiB
Markdown
63 lines
1.9 KiB
Markdown
# MarketCard.vue
|
||
|
||
**路径**：`src/components/MarketCard.vue`
|
||
|
||
## 功能用途
|
||
|
||
首页事件卡片组件，展示市场标题、概率、Yes/No 或 Up/Down 按钮。支持单一（single）与多选项（multi）两种展示类型：
|
||
|
||
- single：展示一组 Yes/No（或 Up/Down）按钮
|
||
- multi：在固定高度区域内以**上下滚动列表**展示多个 outcome，每行右侧提供 Yes/No 快捷下单按钮
|
||
|
||
点击卡片本体会跳转详情页；点击按钮会触发下单事件（不会触发卡片跳转）。
|
||
|
||
## Props
|
||
|
||
| 属性 | 类型 | 说明 |
|
||
|------|------|------|
|
||
| id | string | 事件 ID |
|
||
| marketTitle | string | 市场标题 |
|
||
| chanceValue | number | 概率值（0–100） |
|
||
| marketInfo | string | 如 "$1.2k Vol." |
|
||
| imageUrl | string | 图片 URL |
|
||
| category | string | 分类 |
|
||
| expiresAt | string | 到期日 |
|
||
| displayType | 'single' \| 'multi' | 展示类型 |
|
||
| outcomes | EventCardOutcome[] | 多选项时每项数据 |
|
||
| yesLabel / noLabel | string | 按钮文案 |
|
||
| isNew | boolean | 是否显示 NEW 角标 |
|
||
| marketId | string | 市场 ID |
|
||
| clobTokenIds | string[] | 下单用 token ID |
|
||
|
||
## 事件
|
||
|
||
- `openTrade(side, market?)`：点击 Yes/No 发起交易，携带 market 信息（single 时为当前 market；multi 时为当前 outcome）
|
||
|
||
## 使用方式
|
||
|
||
```vue
|
||
<MarketCard
|
||
:id="item.id"
|
||
:market-title="item.marketTitle"
|
||
:chance-value="item.chanceValue"
|
||
:market-info="item.marketInfo"
|
||
:image-url="item.imageUrl"
|
||
:category="item.category"
|
||
:expires-at="item.expiresAt"
|
||
:display-type="item.displayType"
|
||
:outcomes="item.outcomes"
|
||
:yes-label="item.yesLabel"
|
||
:no-label="item.noLabel"
|
||
:is-new="item.isNew"
|
||
:market-id="item.marketId"
|
||
:clob-token-ids="item.clobTokenIds"
|
||
@openTrade="openTrade"
|
||
/>
|
||
```
|
||
|
||
## 扩展方式
|
||
|
||
1. **新展示类型**：扩展 `displayType`，如 `compact`、`featured`
|
||
2. **收藏/分享**：增加图标按钮与对应事件
|
||
3. **骨架屏**：增加 loading 态 props
|