captain-ui
Version:
有赞vue wap业务组件库
246 lines (227 loc) • 5.54 kB
Markdown
<script>
window._global = {
url: {
imgqn: 'https://img.yzcdn.cn'
}
}
export default {
data() {
return {
goodsList: [
{
"goods_id": "342373809",
"title": "少时诵诗书",
"discount_type": "2",
"discount_value": "10",
"imageUrl": "https://img.yzcdn.cn/upload_files/2017/06/29/FnPSAKkEeh4FnDA09oIbmnlzWQrw.png",
"stock_num": 0,
"kdt_url": "https://h5.youzan.com/v2/showcase/goods?alias=2ohntjasyvmpx",
"price": "33d00.00",
"discount_price": "10.00",
startAt: +Date.now() + 1000000,
endAt: +Date.now() + 1900000,
rest: 1000,
id: 12,
sales: 123,
discountType: 2,
discountValue: 8.8,
discountPrice: '11.1',
stockNum: 1,
totalSoldNum: 20
},
{
"goods_id": "342373809",
"title": "少时诵诗书",
"discount_type": "2",
"discount_value": "10",
"imageUrl": "https://img.yzcdn.cn/upload_files/2017/06/29/FnPSAKkEeh4FnDA09oIbmnlzWQrw.png",
"stock_num": 0,
"kdt_url": "https://h5.youzan.com/v2/showcase/goods?alias=2ohntjasyvmpx",
"price": "100.00",
"discount_price": "10.00",
startAt: +Date.now() - 1000,
endAt: +Date.now() + 19000000,
rest: 1000,
id: 12,
sales: 123,
discountType: 2,
discountValue: 8.8,
discountPrice: '11.1',
stockNum: 0,
totalSoldNum: 20
}
]
};
}
};
</script>
## UmpTimelimitedDiscount 限时折扣活动组件
### 使用指南
#### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
```javascript
import { UmpTimelimitedDiscount } from 'captain-ui';
```
### 代码演示
#### btn-type
:::demo 基本用法
```html
<cap-ump-limitdiscount
:goods-list="goodsList"
:size="1"
:buy-btn-type="0"
:activity-status="0"
:show-title="1"
:show-countdown="1"
:show-time-limit="1"
:show-stock-num="1"
:show-buy-btn="1"
:image-fill-style="2"
ratio="1,1">
<cap-ump-limitdiscount/>
```
:::
:::demo 基本用法
```html
<cap-ump-limitdiscount
:goods-list="goodsList"
:size="0"
:buy-btn-type="0"
:activity-status="1"
:show-title="1"
:show-countdown="1"
:show-time-limit="1"
:show-stock-num="1"
:show-buy-btn="1"
:image-fill-style="2"
:is-preview="true"
ratio="3,2">
<cap-ump-limitdiscount/>
```
:::
:::demo 基本用法
```html
<cap-ump-limitdiscount
:goods-list="goodsList"
:size="0"
:buy-btn-type="0"
:activity-status="1"
:show-title="1"
:show-countdown="1"
:show-time-limit="1"
:show-stock-num="1"
:show-buy-btn="1"
:image-fill-style="2"
:is-preview="true"
ratio="1,1">
<cap-ump-limitdiscount/>
```
:::
:::demo 基本用法
```html
<cap-ump-limitdiscount
:goods-list="goodsList"
:size="0"
:buy-btn-type="1"
:activity-status="0"
:show-title="1"
ratio="3,2">
<cap-ump-limitdiscount/>
```
:::
:::demo 基本用法
```html
<cap-ump-limitdiscount
:goods-list="goodsList"
:size="0"
:buy-btn-type="2"
:activity-status="0"
:show-title="1"
ratio="3,2">
<cap-ump-limitdiscount/>
```
:::
:::demo 基本用法
```html
<cap-ump-limitdiscount
:goods-list="goodsList"
:size="0"
:buy-btn-type="3"
:activity-status="0"
:show-title="1"
ratio="3,2">
<cap-ump-limitdiscount/>
```
:::
#### size
:::demo 基本用法
```html
<cap-ump-limitdiscount
:goods-list="goodsList"
:size="0"
:buy-btn-type="0"
:activity-status="0"
:show-title="1"
ratio="3,2">
<cap-ump-limitdiscount/>
```
:::
:::demo 基本用法
```html
<cap-ump-limitdiscount
:goods-list="goodsList"
:size="1"
:buy-btn-type="1"
:activity-status="0"
:show-title="1"
ratio="3,2">
<cap-ump-limitdiscount/>
```
:::
:::demo 基本用法
```html
<cap-ump-limitdiscount
:goods-list="goodsList"
:size="2"
:buy-btn-type="2"
:activity-status="0"
:show-title="1"
ratio="3,2">
<cap-ump-limitdiscount/>
```
:::
### 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', // 商品原价
},
...
]
```