## UmpTimelimitedDiscount 限时折扣活动组件 ### 使用指南 #### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐) ```javascript import { UmpTimelimitedDiscount } from 'captain-ui'; ``` ### 代码演示 #### btn-type :::demo 基本用法 ```html ``` ::: :::demo 基本用法 ```html ``` ::: :::demo 基本用法 ```html ``` ::: :::demo 基本用法 ```html ``` ::: :::demo 基本用法 ```html ``` ::: :::demo 基本用法 ```html ``` ::: #### size :::demo 基本用法 ```html ``` ::: :::demo 基本用法 ```html ``` ::: :::demo 基本用法 ```html ``` ::: ### API | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | goodsList | 活动商品列表 | `array` | [] | | | activityStatus | 活动状态 | `number` | | 0 \| 1 \| 2 | | size | 列表展示类型 | `number` | | 0 \| 1 \| 2 | | ratio | 主图宽高比例 | `string` | '1,1' | '1,1' \| '2,3' | | showCountdown | 是否展示倒计时 | `number` | 1 | 0 \| 1 | | showBuyBtn | 是否展示购买按钮 | `number` | 1 | 0 \| 1 | | showTitle | 是否展示标题 | `number` | 1 | 0 \| 1 | | showTimeLimit | 是否展示折扣进度条 | `number` | 1 | 0 \| 1 | | showStockNum | 是否展示库存 | `number` | 1 | 0 \| 1 | | buyBtnType | 按钮风格 | `number` | 0 | 0 \| 1 \| 2 \| 3 | | imageFillStyle | 主图填充类型 | `number` | 2 | 1 \| 2 | | isPreview | 是否预览，pc预览用 | `boolean` | false | true \| false | #### goodsList数据结构 ```js [ { itemId: 'xxx', // 商品id title: 'xxxx', // 商品标题 imageUrl: 'xxxx',// 商品图 kdtUrl: 'xxx', //商品链接 stockNum: 'xxx', // 库存 discountType: 'xxx', // 折扣类型 discountValue: 'xxx', // 折扣数值 discountPrice: 'xxx', // 折扣价 description: 'xxx', // 活动标签 startAt: 'xxx', //活动开始时间 endAt: 'xxx', // 活动结束时间 totalSoldNum: 'xxx', // 销售量 price: 'xxx', // 商品原价 }, ... ] ```