captain-ui
Version:
有赞vue wap业务组件库
238 lines (219 loc) • 5.38 kB
Markdown
<script>
window._global = {
url: {
imgqn: 'https://img.yzcdn.cn/'
}
}
export default {
data() {
const data = Array.from({ length: 2 }).map(item => ({
isEnd: 0,
imageUrl: 'https://img.yzcdn.cn/upload_files/2018/01/24/FgrL_umDVTjVVK2pqzxNSba6Gk_J.jpg?imageView2/2/w/100/h/100/q/75/format/webp',
goodsInfo: {
totalStock: 10,
attachmentUrl: 'https://img.yzcdn.cn/upload_files/2018/01/24/FgrL_umDVTjVVK2pqzxNSba6Gk_J.jpg?imageView2/2/w/100/h/100/q/75/format/webp',
alias: 'xxxx'
},
skus: [{price: 5999, description: 'xxxxx'}],
title: '周期购测试商品周期购测试商品周期购测试商周期购测试商品品',
description: '我是描述'
}));
return {
goodsList: data,
isShowViewMore: true,
size: 0,
showBuyBtn: 1,
buyBtnType: 1,
showTitle: 1,
showDesc: 1,
baseUrl: 'https://h5.youzan.com/v2'
}
}
}
</script>
## UmpPeriodbuy 周期购活动组件
### 使用指南
#### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
```javascript
import { UmpPeriodbuy } from 'captain-ui';
```
### 代码演示
#### 基本用法
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="size"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
:hide-goods-end="0"
:show-origin-price="showOriginPrice">
</cap-ump-periodbuy>
```
:::
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="1"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
:hide-goods-end="0"
:show-origin-price="showOriginPrice"
:image-fill-style="1"
>
</cap-ump-periodbuy>
```
:::
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="2"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
:hide-goods-end="0"
:show-origin-price="showOriginPrice"
:image-fill-style="1"
>
</cap-ump-periodbuy>
```
:::
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="size"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
:hide-goods-end="0"
:show-origin-price="showOriginPrice"
ratio="3,2">
</cap-ump-periodbuy>
```
:::
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="size"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
:hide-goods-end="0"
ratio="3,2"
:image-fill-style="1">
</cap-ump-periodbuy>
```
:::
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="1"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
:hide-goods-end="0"
:image-fill-style="1">
</cap-ump-periodbuy>
```
:::
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="1"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
:hide-goods-end="0"
:image-fill-style="2">
</cap-ump-periodbuy>
```
:::
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="1"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
:image-fill-style="2"
>
</cap-ump-periodbuy>
```
:::
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="2"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
:image-fill-style="1">
</cap-ump-periodbuy>
```
:::
:::demo 基本用法
```html
<cap-ump-periodbuy
:goods-list="goodsList"
:is-show-view-more="isShowViewMore"
:size="2"
:show-buy-btn="showBuyBtn"
:buy-btn-type="buyBtnType"
:show-title="showTitle"
>
</cap-ump-periodbuy>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| goodsList | 活动商品列表 | `array` | [] | |
| size | 列表展示类型 | `number` | | 0 \|1\ |2 |
| ratio | 主图宽高比例 | `string` | '1,1' | '1,1' \| '2,3' |
| isShowViewMore | 是否展示更多按钮 | `boolean` | false | true | false |
| showBuyBtn | 是否展示购买按钮 | `number` | 1 | 0 \| 1 |
| showDesc | 是否展示介绍 | `number` | 1 | 0 \| 1 |
| showTitle | 是否展示标题 | `number` | 1 | 0 \| 1 |
| hideGoodsEnd | 是否隐藏售罄商品 | `number` | 1 | 0 \| 1 |
| buyBtnType | 按钮风格 | `number` | 0 | 0 \| 1 \| 2 \| 3 |
| imageFillStyle | 主图填充类型 | `number` | 2 | 1 \| 2 |
| isPreview | 是否预览，pc预览用 | `boolean` | false | true \| false |
#### goodsList数据结构
```js
[
{
id: 'xxx', // 商品id
title: 'xxxx', // 商品标题
description: 'xxx', // 商品描述
skus: [{
price: 'xxx'
}],
totalStock: 'xxx', // 库存数
goodsInfo: {
alias: 'xxx', // 商品alias
totalStock: 'xxx', // 商品库存
attachmentUrl: 'xxx', // 商品主图
}
},
...
]
```