1.9 KiB
1.9 KiB
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）
使用方式
<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"
/>
扩展方式
- 新展示类型：扩展
displayType，如compact、featured - 收藏/分享：增加图标按钮与对应事件
- 骨架屏：增加 loading 态 props