captain-ui/es/ump-groupon/zh-CN.md

有赞vue wap业务组件库

<script>
window._global = {
  url: {
    imgqn: 'https://img.yzcdn.cn/'
  }
}

export default {
  data() {
    const data = Array.from({ length: 2 }).map(item => ({
      conditionNum: 1,
      isEnd: 0,
      thumbUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2432960747,1825653824&fm=27&gp=0.jpg',
      goodsInfo: {
        totalStock: 0
      },
      title: '拼团测试商拼团测试商拼团测试商拼团测试商拼团测试商拼团测试商拼团测试商品',
      skuPrices: {0: 5999},
      originSkuPrice: {0: 7999},
      groupNums: 5,
      imageIcon: 'https://img.yzcdn.cn/upload_files/2017/11/27/FsQbwe4BB_y0eEbjQ-2bm_XLfT0z.png',
      owl:  {
        owl_type: 2,
        media_type: 'xx',
        url: 'https://img.yzcdn.cn/upload_files/2017/11/27/FsQbwe4BB_y0eEbjQ-2bm_XLfT0z.png'
      }
    }));
    return {
      grouponGoodsList: data,
      isShowViewMore: true,
      size: 0,
      showBuyBtn: 1,
      buyBtnType: 1,
      showTitle: 1,
      showGrouponNum: 1,
      showOriginPrice: 1,
      baseUrl: 'https://h5.youzan.com/v2'
    }
  }
}
</script>
## UmpGroupon 拼团活动组件

### 使用指南
#### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
```javascript
import { UmpGroupon } from 'captain-ui';
```

### 代码演示

#### 基本用法

:::demo 基本用法
```html
<cap-ump-groupon
  :groupon-goods-list="grouponGoodsList"
  :is-show-view-more="isShowViewMore"
  :size="size"
  :show-buy-btn="showBuyBtn"
  :buy-btn-type="buyBtnType"
  :show-title="showTitle"
  :show-groupon-num="showGrouponNum"
  :show-origin-price="showOriginPrice">
</cap-ump-groupon>
```
:::

:::demo 基本用法
```html
<cap-ump-groupon
  :groupon-goods-list="grouponGoodsList"
  :is-show-view-more="isShowViewMore"
  :size="size"
  :show-buy-btn="showBuyBtn"
  :buy-btn-type="buyBtnType"
  :show-title="showTitle"
  :show-groupon-num="showGrouponNum"
  :show-origin-price="showOriginPrice"
  ratio="3,2">
</cap-ump-groupon>
```
:::

:::demo 基本用法
```html
<cap-ump-groupon
  :groupon-goods-list="grouponGoodsList"
  :is-show-view-more="isShowViewMore"
  :size="size"
  :show-buy-btn="showBuyBtn"
  :buy-btn-type="buyBtnType"
  :show-title="showTitle"
  :show-groupon-num="showGrouponNum"
  :show-origin-price="showOriginPrice"
  ratio="3,2"
  :image-fill-style="1">
</cap-ump-groupon>
```
:::

:::demo 基本用法
```html
<cap-ump-groupon
  :groupon-goods-list="grouponGoodsList"
  :is-show-view-more="isShowViewMore"
  :size="1"
  :show-buy-btn="showBuyBtn"
  :buy-btn-type="buyBtnType"
  :show-title="showTitle"
  :show-groupon-num="showGrouponNum"
  :show-origin-price="showOriginPrice"
  :image-fill-style="1">
</cap-ump-groupon>
```
:::

:::demo 基本用法
```html
<cap-ump-groupon
  :groupon-goods-list="grouponGoodsList"
  :is-show-view-more="isShowViewMore"
  :size="1"
  :show-buy-btn="showBuyBtn"
  :buy-btn-type="buyBtnType"
  :show-title="showTitle"
  :show-groupon-num="showGrouponNum"
  :show-origin-price="showOriginPrice">
</cap-ump-groupon>
```
:::

:::demo 基本用法
```html
<cap-ump-groupon
  :groupon-goods-list="grouponGoodsList"
  :is-show-view-more="isShowViewMore"
  :size="2"
  :show-buy-btn="showBuyBtn"
  :buy-btn-type="buyBtnType"
  :show-title="showTitle"
  :show-groupon-num="showGrouponNum"
  :show-origin-price="showOriginPrice"
  :image-fill-style="1">
</cap-ump-groupon>
```
:::

:::demo 基本用法
```html
<cap-ump-groupon
  :groupon-goods-list="grouponGoodsList"
  :is-show-view-more="isShowViewMore"
  :size="1"
  :show-buy-btn="showBuyBtn"
  :buy-btn-type="buyBtnType"
  :show-title="showTitle"
  :is-preview="true"
  :show-groupon-num="showGrouponNum"
  :show-origin-price="showOriginPrice">
</cap-ump-groupon>
```
:::

:::demo 基本用法
```html
<cap-ump-groupon
  :groupon-goods-list="grouponGoodsList"
  :is-show-view-more="isShowViewMore"
  :size="2"
  :show-buy-btn="showBuyBtn"
  :buy-btn-type="buyBtnType"
  :show-title="showTitle"
  :show-groupon-num="showGrouponNum"
  :show-origin-price="showOriginPrice">
</cap-ump-groupon>
```
:::

### API

| 参数       | 说明      | 类型       | 默认值       | 可选值       |
|-----------|-----------|-----------|-------------|-------------|
| grouponGoodsList | 活动商品列表 | `array`  | []  |  |
| isShowViewMore | 是否展示更多按钮 | `boolean` | false | true \| false |
| size | 列表展示类型 | `number` |  | 0 \| 1 \|2 |
| ratio | 主图宽高比例 | `string` | '1,1' | '1,1' \| '2,3' |
| showBuyBtn | 是否展示购买按钮 | `number` | 1 | 0 \| 1 |
| showTitle | 是否展示标题 | `number` | 1 | 0 \| 1 |
| showGrouponNum | 是否展示成团人数 | `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', // 商品标题
    thumbUrl: 'xxxx',// 商品图
    goodsUrl: 'xxx', //商品链接
    skuPrices: [], // 多sku活动价格
    originSkuPrice: [],  // 多sku商品价格
    groupNums: 'xxx', // 成团人数
    conditionNum: 'xxx', // 成团条件
    isEnd: 'xxx', // 活动是否已结束
    stockNum: 'xxx', // 库存
    goodsInfo: {
      id: 'xxx', // 商品id
      totalStock: 'xxx', // 商品库存
    }
  },
  ...
]
```