LiveProductCard

live-product-card

小黄车讲解卡 · 序号链接角标 + 现价/划线原价 + 讲解中脉冲徽标 + 库存/已售 + 秒杀限量角标 + 抢购按钮插槽 + row 列表行/card 网格卡两布局(直播带货标配·只消费 token·区别通用 Card)

用法

基础用法

列表行布局（默认 row）：序号链接 + 缩略图 + 标题 + 价格 + 抢购钮。

冬季加厚羊羔绒外套男女同款直播专享

¥129

tsx

<LiveProductCard
  index={1}
  image={url}
  title="冬季加厚羊羔绒外套 男女同款 直播专享"
  price={129}
  action={<button>去抢购</button>}
/>

划线价 + 角标 + 销量

originalPrice 渲染划线原价；tag 角标；sold/stock 渲染已售与剩余。

秒杀

冬季加厚羊羔绒外套男女同款直播专享

¥129¥399

已售 1240 · 仅剩 86

tsx

<LiveProductCard
  index={1}
  image={url}
  title="冬季加厚羊羔绒外套"
  price={129}
  originalPrice={399}
  tag="秒杀"
  stock={86}
  sold={1240}
  action={<button>去抢购</button>}
/>

讲解中

explaining 在缩略图底部渲染脉冲「讲解中」徽标，标记主播正在讲的商品。

2讲解中

便携保温杯 316 不锈钢 500ml

¥49.90¥99

已售 3580

tsx

<LiveProductCard
  index={2}
  image={url}
  title="便携保温杯 316 不锈钢 500ml"
  price={49.9}
  originalPrice={99}
  explaining
  sold={3580}
  action={<button>去抢购</button>}
/>

网格卡

layout="card" 切竖向卡片，缩略图占满整行，适合商品橱窗网格。

限量

无线蓝牙耳机降噪版

¥199¥499

已售 920

4讲解中

桌面氛围灯 RGB 智能

¥69¥159

已售 460

tsx

<div className="grid grid-cols-2 gap-2">
  <LiveProductCard layout="card" index={3} image={url} title="无线蓝牙耳机 降噪版" price={199} originalPrice={499} tag="限量" sold={920} action={<button>去抢购</button>} />
  <LiveProductCard layout="card" index={4} image={url} title="桌面氛围灯 RGB 智能" price={69} originalPrice={159} explaining sold={460} action={<button>去抢购</button>} />
</div>

何时用

直播带货「小黄车」商品卡：序号链接、现价/划线原价、讲解中脉冲、库存已售、秒杀角标、抢购钮。中控弹层列表用 layout="row"，商品橱窗网格用 layout="card"。本组件是带货专用皮肤；要通用容器卡片用 [Card]，要价目对比用 PricingTable。

导入

import { LiveProductCard } from "@hulianui/ui"

Props

名称	类型	默认	说明
image*	`string`	—	商品图 URL
price*	`number`	—	现价（秒杀价）
index	`number`	—	第 N 号链接徽标
originalPrice	`number`	—	划线原价
explaining	`boolean`	—	「讲解中」脉冲徽标
stock	`number`	—	剩余库存
sold	`number`	—	已售数
currency	`string`	`"¥"`	货币符号
layout	`"row" \| "card"`	`"row"`	布局：row=列表行（中控/弹层），card=网格卡
className	`string`	—	自定义类

Events

事件	类型	说明
onClick	`() => void`	点击回调

Slots

插槽	类型	说明
title*	`ReactNode`	商品标题
tag	`ReactNode`	角标，如「秒杀」「限量」
action	`ReactNode`	抢购按钮（调用方传 Button 等）

禁忌 / 坑

action 是插槽，组件不内置按钮——抢购钮由调用方传入（Button 等），便于挂自己的下单逻辑。
划线原价仅在 originalPrice 存在时渲染；currency 同时作用于现价与原价。

相关

Sparkline · ImageViewer · DiffStat · ScoreRing · Badge · Dot

用法

基础用法

列表行布局（默认 row）：序号链接 + 缩略图 + 标题 + 价格 + 抢购钮。

冬季加厚羊羔绒外套男女同款直播专享

¥129

tsx

<LiveProductCard
  index={1}
  image={url}
  title="冬季加厚羊羔绒外套 男女同款 直播专享"
  price={129}
  action={<button>去抢购</button>}
/>

划线价 + 角标 + 销量

originalPrice 渲染划线原价；tag 角标；sold/stock 渲染已售与剩余。

秒杀

冬季加厚羊羔绒外套男女同款直播专享

¥129¥399

已售 1240 · 仅剩 86

tsx

<LiveProductCard
  index={1}
  image={url}
  title="冬季加厚羊羔绒外套"
  price={129}
  originalPrice={399}
  tag="秒杀"
  stock={86}
  sold={1240}
  action={<button>去抢购</button>}
/>

讲解中

explaining 在缩略图底部渲染脉冲「讲解中」徽标，标记主播正在讲的商品。

2讲解中

便携保温杯 316 不锈钢 500ml

¥49.90¥99

已售 3580

tsx

<LiveProductCard
  index={2}
  image={url}
  title="便携保温杯 316 不锈钢 500ml"
  price={49.9}
  originalPrice={99}
  explaining
  sold={3580}
  action={<button>去抢购</button>}
/>

网格卡

layout="card" 切竖向卡片，缩略图占满整行，适合商品橱窗网格。

限量

无线蓝牙耳机降噪版

¥199¥499

已售 920

4讲解中

桌面氛围灯 RGB 智能

¥69¥159

已售 460

tsx

<div className="grid grid-cols-2 gap-2">
  <LiveProductCard layout="card" index={3} image={url} title="无线蓝牙耳机 降噪版" price={199} originalPrice={499} tag="限量" sold={920} action={<button>去抢购</button>} />
  <LiveProductCard layout="card" index={4} image={url} title="桌面氛围灯 RGB 智能" price={69} originalPrice={159} explaining sold={460} action={<button>去抢购</button>} />
</div>

何时用

Props

名称	类型	默认	说明
image*	`string`	—	商品图 URL
price*	`number`	—	现价（秒杀价）
index	`number`	—	第 N 号链接徽标
originalPrice	`number`	—	划线原价
explaining	`boolean`	—	「讲解中」脉冲徽标
stock	`number`	—	剩余库存
sold	`number`	—	已售数
currency	`string`	`"¥"`	货币符号
layout	`"row" \| "card"`	`"row"`	布局：row=列表行（中控/弹层），card=网格卡
className	`string`	—	自定义类

事件

类型

说明

onClick

() => void

点击回调

插槽

类型

说明

title*

ReactNode

商品标题

tag

ReactNode

角标，如「秒杀」「限量」

action

ReactNode

抢购按钮（调用方传 Button 等）