60 lines
1.7 KiB
Markdown
60 lines
1.7 KiB
Markdown
# 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 信息
|
||
|
||
## 使用方式
|
||
|
||
```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"
|
||
@navigate="goToDetail"
|
||
@trade="openTrade"
|
||
/>
|
||
```
|
||
|
||
## 扩展方式
|
||
|
||
1. **新展示类型**：扩展 `displayType`，如 `compact`、`featured`
|
||
2. **收藏/分享**：增加图标按钮与对应事件
|
||
3. **骨架屏**：增加 loading 态 props
|