1.7 KiB
1.7 KiB
MarketCard.vue
路径：src/components/MarketCard.vue
功能用途
首页事件卡片组件，展示市场标题、概率、Yes/No 或 Up/Down 按钮、多选项轮播。支持单一（single）与多选项（multi）两种展示类型，点击可跳转交易详情或直接发起交易。
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 |
事件
navigate：点击卡片跳转trade：点击 Yes/No 发起交易，携带 market 信息
使用方式
<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"
@navigate="goToDetail"
@trade="openTrade"
/>
扩展方式
- 新展示类型：扩展
displayType，如compact、featured - 收藏/分享：增加图标按钮与对应事件
- 骨架屏：增加 loading 态 props