open-index/open-npm huggingface dataset:
npm package: @retailwe/ui
Description: ## 预览
Latest version: 0.0.40

# @retailwe/ui

## 预览

![](https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/miniapp/common/retailwe-ui.jpg?imageMogr2/thumbnail/!70p)

## 全量引入

### Step 1: 安装

```shell
npm i @retailwe/ui --save
```

### Step 2：构建npm

小程序IDE -> 工具 -> 构建npm

### Step 3：使用

```json
{
  "usingComponents": {
    "loading": "@retailwe/ui-loading"
  }
}
```

## 按需引入

### Step 1: 安装

```shell
npm i @retailwe/ui-loading --save
```

### Step 2：构建npm

小程序IDE -> 工具 -> 构建npm

### Step 3：使用

```json
{
  "usingComponents": {
    "loading": "@retailwe/ui-loading"
  }
}
```
npm package: @retailwe/ui-add-cart
Description: ## 引入
Latest version: 0.0.22

# add-cart 添加购物车

## 引入

全局引入，在miniprogram根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "add-cart": "@retailwe/ui-add-cart/index"
}
```

## 代码演示

### 基础用法

```html
<wr-add-cart wr-class="add-cart-icon" icon="add-cart" size="48" color="#FA550F" data-id="goods-0" data-index="{{0}}" bindclick="onAddCart" />
```

``` javascript
onAddCart(e: any) {
  const { callback } = e.detail;
  if (callback) {
    callback({
      startPos: { x: 10, y: 10 }, // 动画起始坐标
      endPos: {
        x: 200,
        y: 300,
      }, // 动画终止坐标
      image: {
        url: 'https://...',
        width: 50,
        height: 50,
      }, // 图片url及宽高
    });
  }
}
```

### 指定动画速度

```javascript
onAddCart(e: any) {
  const { callback } = e.detail;
  if (callback) {
    callback({
      startPos: { x: 10, y: 10 }, // 动画起始坐标
      endPos: {
        x: 200,
        y: 300,
      }, // 动画终止坐标
      image: {
        url: 'https://...',
        width: 50,
        height: 50,
        duration: 500,  // 单位ms
      }, // 图片url及宽高
    });
  }
}
```

## API

### add-cart  Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| icon | 加购按钮的iconfont图标 | *string* | `add-cart` | - |
| size | 图标大小 | *string \| number* | `48` | 传入数字时，将以rpx为单位 |
| color | 图标颜色 | *string* | `#FA550F` | - |
| info | 角标内容 | *string* | - | - |
| dot | 是否显示红点 | *boolean* | - | - |
| customStyle | 自定义样式 | *string* | - | - |

### add-cart  Event

| 事件名 | 说明 | 参数 |
|------|------|------|
| click | 点击加购时触发 | `callback`: 回调函数，用于触发加购动画, |

`callback`参数说明

```ts
type CallbackParams = {
  startPos: Point; // 起始点坐标，单位px
  endPos: Point; // 终止点坐标，单位px
  image: {
    url: string; // 图片url
    width: number; // 图片宽度，单位px
    height: number; // 图片高度，单位px
  }; // 图片
  duration?: number; // 动画持续时间，单位ms
};
```
npm package: @retailwe/ui-address-card
Description: ## 引入
Latest version: 0.0.24

# address-card 结算页地址展示卡片

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "address-card": "@retailwe/ui-address-card/index"
}
```

### 代码演示

### 尚未选择收货地址

```html
<wr-address-card
  addressData="{{addressData}}"
  bindaddclick="onAddTap"
  bindaddressclick="onAddressTap">
</wr-address-card>
```

```js
import Toast from 'components/toast/src/toast';

Page({
  data: {
    addressData: null,
  },
  onAddTap() {
    Toast({
      selector: '#wr-toast',
      context: this,
      text: '点击了添加收货地址',
      icon: '',
      duration: 500,
    });
  },
  onAddressTap() {
    Toast({
      selector: '#wr-toast',
      context: this,
      text: '点击了地址',
      icon: '',
      duration: 500,
    });
  },
});
```

### 已选收货地址

```ts
Page({
  data: {
    addressData: {
      detailAddress: '腾讯滨海大厦',
      provinceName: '广东省',
      cityName: '深圳市',
      districtName: '南山区',
      phone: '18942358108',
      name: '张三',
    },
  },
  ...
});
```

### 已选择默认收货地址

```ts
Page({
  data: {
    addressData: {
      addressTag: '默认',
      detailAddress: '腾讯滨海大厦',
      provinceName: '广东省',
      cityName: '深圳市',
      districtName: '南山区',
      phone: '18942358108',
      name: '张三',
    },
  },
  ...
});
```

#### address-card Prop

| 参数        | 说明     | 类型     | 默认值 | 版本 |
| ----------- | -------- | -------- | ------ | ---- |
| addressData | 地址信息 | _Object_ | -   | -    |

```ts
interface addressData {
  detailAddress: string; // 详细地址
  provinceName: string; // 省份名称
  cityName: string; // 城市名称
  districtName: string; // 区（县）名称
  phone: string; // 收货人手机
  name: string; // 收货人姓名
  addressTag?: string; // 地址标签
}
```

#### address-card Event

| 事件名           | 说明                               | 参数 |
| ---------------- | ---------------------------------- | ---- |
| addclick | 点击添加地址按钮触发 | - |
| addressclick | 点击地址时触发 | - |

### address-card 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 根节点样式类 |
npm package: @retailwe/ui-address-item
Description: ### 使用效果
Latest version: 0.0.27

## address-item 地址项

### 使用效果

正常效果

![image-20200709142159110](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggkp8awln3j30qw0fgdh0.jpg)

向左扫动

![image-20200709142219342](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggkp8fx6n9j30qi0ek75d.jpg)

外部自定义样式

![image-20200709172636234](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggkuk6niefj30p209emy1.jpg)

### 引入方法

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "address-item": "@retailwe/ui-address-item/index"
}
```

### 使用方法

```html
<!--- wxml文件 --->
<wr-address-item
	address="{{address}}"
	bind:onSelect="onSelect"
	bind:onDelete="onDelete"
	bind:onEdit="onEdit">
</wr-address-item>
```

```js
/* 脚本文件 */
Page({
  data: {
    address: {
      name: '张大锤', // 收货人姓名
      phone: '13438350000', //收货人电话
      isDefault: 1, //是否是默认地址，1是，0不是
      addressTag: '公司', // 标签，“公司”、“家”等
      fullAddress: '广东省深圳市南山区腾讯滨海大厦南塔7楼', // 地址信息
      addressId: '10001', //地址编号
    },
  },
  onDelete(e) {
    console.log('点击了删除', e.detail);
  },
  onSelect(e) {
    console.log('选择了地址', e.detail);
  },
  onEdit(e) {
    console.log('点击了编辑', e.detail);
  },
});

```

### 参数说明

接收4个参数：`address`、`onSelect`、`onDelete`、`onEdit`。

#### 数据参数：`address`

| 参数    | 说明     | 类型     | 默认值 | 版本 |
| ------- | -------- | -------- | ------ | ---- |
| address | 地址信息 | _Object_ | `{}`   | -    |

对于`address`对象的参数要求是：

| 参数        | 说明             | 类型      | 默认值 |
| ----------- | ---------------- | --------- | ------ |
| name        | 收件人名称       | _string_  | -      |
| phoneNumber | 联系电话         | _string_  | `''`   |
| address     | 详细地址         | _string_  | -      |
| isDefault   | 标识：是否是默认 | _boolean_ | `''`   |
| tag         | 类型标签         | _string_  | -      |
| id          | 地址编号         | _number_  | -      |

#### 事件参数：`onSelect`、`onDelete`、`onEdit`

| 事件名   | 说明                                   | 参数 |
| -------- | -------------------------------------- | ---- |
| onSelect | 点击卡片触发                           | e    |
| onDelete | 左拉卡片，点击删除触发                 | e    |
| onEdit   | 点击修改icon触发，在该事件中编程式跳转 | e    |

#### 外部样式类

| 类名               | 说明             |
| ------------------ | ---------------- |
| item-wrapper-class | 地址项根结点样式 |
| title-class        | 收货人及电话样式 |
| default-tag-class  | 默认标签样式     |
| normal-tag-class   | 普通标签样式     |
| address-info-class | 地址信息样式     |
| delete-class       | 左扫删除按钮样式 |

注意⚠️ ：由于小程序实现上的限制，外部样式类的优先级不能确定，建议增加`!important`覆盖生效。
npm package: @retailwe/ui-address-list
Description: ### 使用效果
Latest version: 0.0.24

## address-list 地址列表

### 使用效果

正常效果

![image-20200709195025075](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggkyptroqaj30ou0mimzi.jpg)

向左扫动

![image-20200709195044894](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggkyq5pabaj30pq0moacd.jpg)

外部自定义样式

![image-20200709212536621](https://tva1.sinaimg.cn/large/007S8ZIlgy1ggl1gvaxexj30qw0nimzr.jpg)

### 引入方法

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "address-list": "@retailwe/ui-address-list/index"
}
```

### 使用方法

```html
<!--- wxml文件 --->
<wr-address-list
  addresses="{{addresses}}"
  bind:onDelete="onDelete"
  bind:onSelect="onSelect"
  bind:onEdit="onEdit"
></wr-address-list>
```

```js
/* 脚本文件 */
Page({
  data: {
    addresses: [
      {
        name: '张大锤',
        phone: '13438350000',
        isDefault: 1, //默认
        addressTag: '公司',
        fullAddress:
          '深圳市 南山区 南山南深圳市 南山区 南山南深圳市 南山区 南山南',
        addressId: '10001',
      },
      {
        name: '李XX',
        phone: '18942358108',
        isDefault: 0, //默认
        addressTag: '家',
        fullAddress: '深圳市 南山区 南山南深圳市 南山区 南山南',
        addressId: '10002',
      },
      {
        name: '陈XX',
        phone: '18942358108',
        isDefault: 0, //默认
        addressTag: '公司',
        fullAddress: '深圳市 南山区 南山南',
        addressId: '10003',
      },
    ],
  },
  onDelete(e) {
    console.log('点击了删除', e.detail);
  },
  onSelect(e) {
    console.log('选择了地址', e.detail);
  },
  onEdit(e) {
    console.log('点击了编辑', e.detail);
  },
});
```

### 参数说明

接收4个参数：`addresses`、`onSelect`、`onDelete`、`onEdit`。

#### 数据参数：`addresses`

| 参数      | 说明     | 类型               | 默认值 |
| --------- | -------- | ------------------ | ------ |
| addresses | 地址信息 | _Array`<address>`_ | `[{}]` |

`addresses`参数是 [AddressItem](../address-item/README.md) 组件的接收参数`address`的数组形式，`address`的数据要求如下：

| 参数        | 说明             | 类型      | 默认值 |
| ----------- | ---------------- | --------- | ------ |
| name        | 收件人名称       | _string_  | -      |
| phoneNumber | 联系电话         | _string_  | `''`   |
| address     | 详细地址         | _string_  | -      |
| isDefault   | 标识：是否是默认 | _boolean_ | `''`   |
| tag         | 类型标签         | _string_  | -      |
| id          | 地址编号         | _number_  | -      |

#### 事件参数：`onSelect`、`onDelete`、`onEdit`

事件会透传给`AddressItem`组件

| 事件名   | 说明                                   | 参数 |
| -------- | -------------------------------------- | ---- |
| onSelect | 点击卡片触发                           | e    |
| onDelete | 左拉卡片点击删除触发                   | e    |
| onEdit   | 点击修改icon触发，在该事件中编程式跳转 | e    |

#### 外部样式类

| 类名               | 说明                    |
| ------------------ | ----------------------- |
| list-class         | 列表根节点样式          |
| item-wrapper-class | 地址项-根结点样式       |
| title-class        | 地址项-收货人及电话样式 |
| default-tag-class  | 地址项-默认标签样式     |
| normal-tag-class   | 地址项-普通标签样式     |
| address-info-class | 地址项-地址信息样式     |
| delete-class       | 地址项-左扫删除按钮样式 |

注意⚠️ ：由于小程序实现上的限制，外部样式类的优先级不能确定，建议增加`!important`覆盖生效。
npm package: @retailwe/ui-back-top
Description: ## 引入
Latest version: 0.0.21

# back-top 回到顶部

## 引入

全局引入，在miniprogram根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "back-top": "@retailwe/ui-back-top/index"
}
```

## 代码演示

### 基础用法

直接引入, 回到页面顶部, 可传入isIphoneX兼容页面展示, 可传文字，图标；可定制字体、图标颜色

```html
<back-top isIphoneX="{{isIphoneX}}" text="返回首页" iconName="star-filled" iconColor="blue" />
```

``` javascript
Page({
  data: {
    isIphoneX: true,
  },
});
```

## API

### tab Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| isIphoneX | 是否iphoneX | *boolean* | `false` | - |
| text | 文案 | *String* | `返回首页` | - |
| iconName | 图标 | *String* | `fixed-top` | - |
| iconColor | 颜色 | *String* | `#4a4a4a` | - |

### tab Event

| 事件名 | 说明 | 参数 |
|------|------|------|
| toTop | 点击触发 | 无 |
npm package: @retailwe/ui-buy-bar
Description: ## 引入
Latest version: 0.0.16

# 商详页购物栏

## 引入

```json
"usingComponents": {
  "wr-buy-bar": "@retailwe/buy-bar/index"
}
```

## 代码演示

```
<wr-buy-bar
    jumpArray="{{jumpArray}}"
    buttonType="{{buttonType}}"
    isStock="{{isStock}}"
    shopCartNum="{{cartNum}}"
    soldout="{{soldout}}"
    bind:toAddCart="toAddCart"
    bind:toNav="toNav"
    bind:toBuyNow="buyItNow"
    class="goods-details-card">
  </wr-buy-bar>

jumpArray: [
  {
    title: '首页',
    url: '/supermarket/pages/home/home/home',
    iconName: 'shangxiangye-shouye',
  },
  {
    title: '购物车',
    url: '/supermarket/pages/home/cart/cart',
    iconName: 'cart',
    showCartNum: true,
  },
],
```

#### 入参

| 参数         |       说明       |    类型 | 默认值           | 是否必要 |
| :----------- | :--------------: | ------: | ---------------- | -------- |
| jumpArray    |    跳转按钮组    |   Array | []               | 否       |
| soldout      |   商品是否下架   | Boolean | false            | 否       |
| isStock      |    是否有库存    | Boolean | true             | 否       |
| isSlotButton | 是否开启按钮插槽 | Boolean | false            | 否       |
| shopCartNum  |    购物车数量    |  Number | 0 不显示         | 否       |
| buttonType   |     栏目类型     |  Number | 0 不显示操作按钮 | 是       |

#### buttonType 说明

| 值  | 说明                                                                               |
| --- | ---------------------------------------------------------------------------------- |
| 0   | 不显示操作按钮，不包括跳转按钮组 ，如果 开启 isSlotButton 将在注入在跳转按钮组后面 |
| 1   | 显示“加入购物车”和“立即购买” ,如果 开启 isSlotButton 将在后面注入                  |

#### jumpArray 跳转按钮组说明

| 参数        |                说明                |    类型 | 默认值 | 是否必要 |
| :---------- | :--------------------------------: | ------: | ------ | -------- |
| title       |            跳转按钮名称            |  String | ''     | 是       |
| url         |              跳转 URL              |  String | ''     | 是       |
| iconName    | 跳转按钮 iconfont 名 和 按钮样式名 |  String | ‘’     | 是       |
| showCartNum |         是否显示购物车数量         | boolean | false  | 否       |

#### Events

| 事件      | 是否必要 |                                    说明 |
| :-------- | :------: | --------------------------------------: |
| toAddCart |    否    |        有库存时加入购物车和单个购买回调 |
| toNav     |    否    | 跳转按钮回调， 返回按钮事件和跳转的 url |
| toBuyNow  |    否    |         有库存时购买操作， 返回按钮事件 |

#### 外部样式类

| 类名        | 说明                     |
| ----------- | ------------------------ |
| wr-class    | 根节点样式类             |
| wr-sold-out | 售馨，下架提示的外部样式 |

#### slot

| name      | 说明     |
| --------- | -------- |
| buyButton | 按钮插槽 |
npm package: @retailwe/ui-cart-bar
Description: ## 引入
Latest version: 0.0.12

# cart-bar 购物车结算栏

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-cart-bar": "@retailwe/ui-cart-bar/index"
}
```

## 代码演示

### 基本用法

```html
<wr-cart-bar
  is-all-selected="{{cartGroupData.isAllSelected}}"
  total-amount="{{cartGroupData.totalAmount}}"
  total-goods-num="{{cartGroupData.totalGoodsNum}}"
  total-discount-amount="{{cartGroupData.totalDiscountAmount}}"
  bindselectall="onSelectAll"
  bindtosettle="onToSettle"
/>
```

```ts
import Toast from 'components/toast/src/toast';

Page({
  data: {
    cartGroupData: {
      isAllSelected: false,
      totalAmount: '19908',
      totalGoodsNum: 3,
      totalDiscountAmount: '3000',
    },
  },

  onSelectAll() {
    Toast({ text: '点击了全选按钮' });
  },

  onToSettle() {
    Toast({ text: '点击了结算按钮' });
  },
});
```

### 固定在底部(默认会在底部预留tabbar的空间)

```html
<wr-cart-bar
  is-all-selected="{{cartGroupData.isAllSelected}}"
  total-amount="{{cartGroupData.totalAmount}}"
  total-goods-num="{{cartGroupData.totalGoodsNum}}"
  total-discount-amount="{{cartGroupData.totalDiscountAmount}}"
  fixed="{{true}}"
  bindselectall="onSelectAll"
  bindtosettle="onToSettle"
/>
```

### cart-bar Props

| 参数      | 说明             | 类型      | 默认值     | 版本 |
| --------- | ---------------- | --------- | ---------- | ---- |
| isAllSelected   | 是否已全选   | _boolean_  | -     | -    |
| totalAmount      | 总金额         | _number_ | - | -    |
| totalGoodsNum      | 购买商品数量         | _number_ | - | -    |
| totalDiscountAmount  | 总优惠金额   | _number_  | -     | -    |
| bottomHeight  | 距离窗口底部的边距(比如页面底部有自定义tab-bar，则需传入tab-bar的高度)   | _number_  | -     | -    |
| fixed  | 是否固定在页面底部（通过`bottomHeight`控制预留底部tabbar的空间）   | _number_  | -     | -    |

### cart-bar Event

| 事件名     | 说明 | 参数 |
| ---------- | ---- | ---- |
| selectall | 点击全选按钮触发 | - |
| tosettle | 点击结算按钮触发 | - |
npm package: @retailwe/ui-cart-empty
Description: ## 引入
Latest version: 0.0.6

# cart-empty 空购物车

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-cart-empty": "@retailwe/ui-cart-empty/index"
}
```

## 代码演示

### 基本用法

```html
<wr-cart-empty bindbtnclick="onBtnClick"/>
```

```ts
import Toast from 'components/toast/src/toast';

Page({
  data: {
    cartGroupData: {
      isAllSelected: false,
      totalAmount: '19908',
      totalGoodsNum: 3,
      totalDiscountAmount: '3000',
    },
  },

  onBtnClick() {
    Toast({ text: '点击了逛一逛' });
  },
});
```

### 自定义图片/提示/按钮文案

```html
<wr-cart-empty
  img-url="https://cdn-we-retail.ym.tencent.com/miniapp/goods/liveDetailCart@2x.png"
  btn-text="转一转"
  tip="购物车空空"
  bindbtnclick="onBtnClick"
/>
```

### cart-empty Props

| 参数      | 说明             | 类型      | 默认值     | 版本 |
| --------- | ---------------- | --------- | ---------- | ---- |
| imgUrl   | 图片地址   | _string_  | -     | -    |
| tip      | 提示文案         | _string_ | - | -    |
| btnText      | 按钮文案         | _string_ | - | -    |

### cart-empty Event

| 事件名     | 说明 | 参数 |
| ---------- | ---- | ---- |
| btnclick | 点击按钮触发 | - |
npm package: @retailwe/ui-checkbox
Description: ## 引入
Latest version: 0.0.17

# checkbox 多选框

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-checkbox": "@retailwe/ui-checkbox/index"
}
```

### 代码演示

```html
<wr-checkbox items="{{items}}" bindchange="onChange"></wr-checkbox>
```

```js
Page({
  data: {
    items: [
      { name: '美国', value: 'USA' },
      { name: '中国', value: 'CHN', checked: 'true' },
      { name: '巴西', value: 'BRA' },
      { name: '日本', value: 'JPN', color: 'red' },
      { name: '英国', value: 'ENG', disabled: true },
    ],
  },
  onChange: function(e) {
    console.log(e);
  },
});
```

### checkbox Props

| 参数  | 说明   | 类型     | 默认值 | 版本 |
| ----- | ------ | -------- | ------ | ---- |
| items | object | _object_ | -      | -    |

包含 默认属性 { disbaled color name value checkout}
| iClass | 自定义 class 类名 | _string_ | - | - |
| disabled | boolean | _false_ | - | - |
| color | string | ** | - | - |
| name | string | ** | - | - |
| value | string | \** | - | - |
| checked | boolean | *false\* | - | - |

### radio Event

| 事件名 | 说明       | 参数 |
| ------ | ---------- | ---- |
| change | 组件时触发 | -    |

### atention css 只能在全局 Page 修改样式
npm package: @retailwe/ui-comments-card
Description: ## 引入
Latest version: 0.0.20

# 商品评论卡片

## 引入


```json
"usingComponents": {
  "comments-card": "@retailwe/comments-card/index"
}
```

## 代码演示

```
<wr-comments-card
    commentScore="{{item.commentScore}}"
    userName="{{item.userName}}"
    commentImageUrls="{{item.commentImageUrls}}"
    commentContent="{{item.commentContent}}"
    commentTime="{{item.commentTime}}"
    userHeadUrl="{{item.userHeadUrl}}"
></wr-comments-card>
```

#### 入参

| 参数             |      说明      |   类型 | 默认值 | 是否必要 |
| :--------------- | :------------: | -----: | ------ | -------- |
| commentScore     |      评分      |  Array | []     | 是       |
| userName         |   发表人名称   | String | ''     | 否       |
| commentImageUrls |    评论图片    |  Array | []     | 否       |
| commentContent   |    评论内容    | String | ‘’     | 否       |
| commentTime      |    评论时间    | string | ''     | 否       |
| userHeadUrl      | 发表人头像地址 | String |        | 否       |
| hideWordCount    |  多少字符隐藏  | Number | 240    | 否       |
| autoPreview    |  是否开启相册默认展示缩略图  | Boolean | 否    | 是       |
#### slot

| name             |      说明      | 默认值 | 
| :--------------- | :------------: | ------ | 
| specInfo     |     商品规格      |      |

#### Events

| 事件 | 是否必要 | 说明 |
| :--- | :------: | ---: |
|  showPreview  |  否  |  点击缩略图时返回该图所在评论图组中的索引index  |

### 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| wr-class | 根节点样式类 |
npm package: @retailwe/ui-coupon-card
Description: ## 引入
Latest version: 0.0.17

# coupon-card 优惠券卡片

## 引入

全局引入，在miniprogram根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-coupon-card": "@retailwe/ui-coupon-card/index"
}
```

## 代码演示

### 满减

```html
<wr-goods-card value="5.5" desc="无门槛使用" title="生鲜满减满折" timeLimit="2019.11.18至2019.12.18" />
```

### 满折

```ts
Page({
  data: {
    discountTag:
      'https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/miniapp/coupon/coupon-descount.png',
    priceTag:
      'https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/miniapp/coupon/coupon-price.png',
  },
});
```

```html
<wr-goods-card type="price" value="18" tag="{{priceTag}}" desc="满800元使用" title="生鲜满减满折" timeLimit="2019.11.18至2019.12.18">
  <view slot="operator">
    <radio></radio>
  </view>
</wr-goods-card>
```

### 不可操作

```html
<wr-goods-card status="useless" type="price" value="18" tag="{{priceTag}}" desc="满800元使用" title="生鲜满减满折" timeLimit="2019.11.18至2019.12.18">
  <view slot="operator">
    <radio></radio>
  </view>
</wr-goods-card>
<wr-goods-card status="disabled" type="price" value="18" tag="{{priceTag}}" desc="满800元使用" title="生鲜满减满折" timeLimit="2019.11.18至2019.12.18">
  <view slot="operator">
    <radio></radio>
  </view>
</wr-goods-card>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| status | 优惠券状态 | *string* | `default` | `default`-普通, `useless`-不可用 |
| type | 优惠券类型 | *string* | `discount` | `discount`-折扣, 其他值-满减 |
| value | 折扣或者满减值 | *string* | - | - |
| tag | 标签 | *string* | - | - |
| desc | 描述 | *string* | - | - |
| title | 标题 | *string* | - | - |
| timeLimit | 有效时间限制 | *string* | - | - |
| currency | 货币符号 | *string* | `¥` | - |

### coupon-card 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| coupon-class | 根节点外部样式类 |
npm package: @retailwe/ui-coupon-list
Description: ## 引入
Latest version: 0.0.15

# coupon-list 优惠券列表

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
{
  "usingComponents": {
    "wr-coupon-list": "@retailwe/ui-coupon-list/index"
  }
}
```

## 代码演示

### 普通

```xml
<wr-coupon-list data="{{[]}}" />
```

### 滚动

```xml
<wr-coupon-list data="{{[]}}" maxHeight="{{100}}" />
```

### 自定义优惠券组件

> [基础库版本: 1.9.6](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html)

对`coupon-card`有 slot 设定需求或数据有自定义时，可以本地建立一个 biz(业务)相关的修改版组件，自定义组件接受到所有`CouponCard`的值以及它在数组内的 index

```xml
<!-- ./custom-coupon-card/index.wxml -->
<view class="{{class}}">
  <wr-coupon-card status="{{status}}" type="{{type}}" tag="{{tag}}" value="{{value}}" desc="{{desc}}" title="{{title}}" time-limit="{{timeLimit}}" currency="{{currency}}">
    <view slot="operator">
      <view
        data-key="{{key}}"
        data-index="{{index}}"
        data-list="{{list}}"
        data-item="{{item}}"
      >渲染时会额外传入这里数据，方便扩展数据结构，做进一步状态自定义</view>
    </view>
  </wr-coupon-card>
</view>
```

```json
{
  "usingComponents": {
    "custom-coupon-card": "./custom-coupon-card/index"
  }
}
```

```xml
<wr-coupon-list data="{{[]}}" generic:coupon-card="custom-coupon-card" />
```

## API

### Types

```ts
export enum CouponCardStatus {
  /** 普通 */
  default = "default",
  /** 不可用 */
  useless = "useless",
  /** 禁用 */
  disabled = "disabled",
}
export enum CouponCardType {
  /** 折扣 */
  discount = "discount",
  /** 满减（其他） */
  price = "price",
}
export interface CouponCard {
  /** key */
  key: string;
  /** 优惠券状态 */
  status: CouponCardStatus;
  /** 优惠券类型 */
  type: CouponCardType;
  /** 折扣或者满减值 */
  value: string;
  /** 标签 */
  tag: string;
  /** 描述 */
  desc: string;
  /** 标题 */
  title: string;
  /** 有效时间限制 */
  timeLimit: string;
  /** 货币符号 */
  currency: string;
}
```

### Props

| 参数       | 说明                                                          | 类型           | 默认值 | 版本 |
| ---------- | ------------------------------------------------------------- | -------------- | ------ | ---- |
| data       | 列表数据                                                      | _CouponCard[]_ | `[]`   | -    |
| max-height | 列表最大高度, rpx, 向下取整;<br>优先级低于`i-style`(如有冲突) | _number_       | `-1`   | -    |
| i-class    | 自定义 class                                                  | _string_       | `''`   | -    |
| i-style    | 自定义 style                                                  | _string_       | `''`   | -    |

### 外部样式类

| 类名         | 说明               |
| ------------ | ------------------ |
| wr-class     | 根节点外部样式类   |
| coupon-class | 优惠券根节点样式类 |

### slot

| name     | 说明          |
| -------- | ------------- |
| list-top | 附加在列表顶部 |
| list-end | 附加在列表尾部 |
npm package: @retailwe/ui-coupon-popup
Description: ## 引入
Latest version: 0.0.21

# 优惠券弹出框

## 引入

```json
"usingComponents": {
  "wr-coupon-popup": "@retailwe/ui-coupon-popup/index"
}
```

## 代码演示

```
默认模式
  <wr-coupon-popup show="{{isShowCouponPop}}" wr-class="coupon-popup"  list="{{couponList}}" bind:closeCouponPopup="closeCouponPopup" bind:couponTap="couponChange" />

自定义优惠券组件模式
<wr-coupon-popup show="{{isShowCouponPop}}" wr-class="coupon-popup" isSlotCoupon="{{true}}" bind:closeCouponPopup="closeCouponPopup" bind:couponChange="couponChange">
<view slot="coupon-list">
    <view class="coupon-card" wx:for="{{coupons}}" wx:if="{{index < 10}}" wx:key="index">
    <coupon-card couponDTO="{{item}}" />
    </view>
</view>
<view slot="coupon-bottom" class="to-gain-center" wx:if="{{coupons.length > 10}}" bind:tap="toUserCenter">
    <view>领券中心查看更多</view>
    <wr-icon class="icon" name="arrow" size="24" />
</view>
</wr-coupon-popup>

```

```ts
enum CouponCardStatus {
  /** 普通 */
  default = 'default',
  /** 不可用 */
  useless = 'useless',
  /** 禁用 */
  disabled = 'disabled',
}

enum ButtonType {
  normal = 'normal',
  disabled = 'disabled',
}

interface CouponListItem { 
  /** 优惠券状态 */
  status: CouponCardStatus;
  /** 优惠券类型 */
  type: string;
  /** 折扣或者满减值 */
  value: string;
  /** 标签tag地址 */
  tag: string;
  /** 描述 */
  desc: string;
  /** 标题 */
  title: string;
  /** 有效时间限制 */
  timeLimit: string;
  /** 货币符号 */
  currency: string;
  /** 优惠券状图案 */
  sealImg: string;
  /** 按钮类型，正常或禁用 */
  buttonType: ButtonType;
  /** 操作按钮文案 */
  buttonText: string;
}
```

#### 入参

| 参数         |                   说明                   |             类型 | 默认值 | 是否必要 |
| :----------- | :--------------------------------------: | ---------------: | ------ | -------- |
| list         |                优惠券数据                | CouponListItem[] | []     | 否       |
| show         |                 显示隐藏                 |          Boolean | false  | 否       |
| title        |                 弹窗标题                 |           String | 优惠券 | 否       |
| isSlotCoupon | 是否开启组件插槽， 开启后不需要传入 list |          Boolean | false  | 否       |

#### Events

| 事件             | 是否必要 |                                                           说明 |
| :--------------- | :------: | -------------------------------------------------------------: |
| closeCouponPopup |    是    |                                                       关闭弹窗 |
| couponTap        |    否    | 默认模式下，点击优惠券操作按钮，回调当前点击优惠券的索引 index |

#### 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| wr-class | 根节点样式类 |

#### slot

| name          | 说明                 |
| ------------- | -------------------- |
| coupon-list   | 自定义优惠券组件插槽 |
| coupon-bottom | 弹出窗底部插槽       |
npm package: @retailwe/ui-dialog
Description: ## 引入
Latest version: 0.0.23

# Dialog 弹出框

## 引入

```json
"usingComponents": {
  "wr-dialog": "@retailwe/ui-dialog/index"
}
```

## 代码演示

### 基础用法

用于提示一些消息，只包含一个确认按钮

```html
<wr-dialog
  show="{{show3}}"
  message="{{message}}"
  bindconfirm="confirm"
  showCancelButton="{{showCancelButton}}"
>
</wr-dialog>
```

```javascript
Page({
  data: {
    show1: false,
    show2: false,
    show3: false,
    show7: false,
    show6: false,
    title: '标题',
    message: '弹框内容message',
    showCancelButton: true,
  },
  handleTap(e) {
    const { index } = e.currentTarget.dataset;
    if (index == 5) {
      Dialog.confirm({
        title: '标题',
        message: '编程式调用可以方便的回调~',
      })
        .then(() => {
          Toast({
            icon: 'success',
            text: '回调: 确定',
          });
        })
        .catch(() => {
          Toast({
            text: '回调: 取消',
          });
        });
    } else {
      this.setData({
        ['show' + index]: true,
      });
    }
  },
  dailogClose() {
    this.setData({
      show6: false,
    });
  },
});

```

## API

### Props

通过组件调用 Dialog 时，支持以下 Props:

| 参数              | 说明                       | 类型                              | 默认值     |
| ----------------- | -------------------------- | --------------------------------- | ---------- |
| show              | 是否显示弹窗               | _boolean_                         | -          |
| title             | 标题                       | _string_                          | -          |
| message           | 文本内容，支持通过`\n`换行 | _string_                          | -          |
| textAlign         | message 的文本对齐方式     | _`'center'`\|`'left'`\|`'right'`_ | `'center'` |
| z-index           | z-index 层级               | _number_                          | `100`      |
| showConfirmButton | 是否展示确认按钮           | _boolean_                         | `true`     |
| showCancelButton  | 是否展示取消按钮           | _boolean_                         | `false`    |
| confirmButtonText | 确认按钮的文案             | _string_                          | `确认`     |
| cancelButtonText  | 取消按钮的文案             | _string_                          | `取消`     |
| confirmOpenTypeValue  | 确认按钮微信开放能力，可参考[微信文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)             | _string_                          |      |
|asyncClose|是否支持异步关闭弹窗，开启后需要手动关闭弹窗|_boolean_| false|
| direction         | 按钮排列方式               | _`'row'`\|`'column'`              | `'row'`          |
| actions           | 按钮列表               | _array_                         | -          |

```ts
// `actions` props：
interface Action {
  name: string; // 按钮文案
  primary?: boolean; // 是否主要按钮（颜色与其他按钮不同）
  style?: string; // 自定义样式
}
```

### Events

| 事件        | 说明               | 回调参数 |
| ----------- | ------------------ | -------- |
| bindconfirm | 点击确认按钮时触发 | -        |
| bindcancel  | 点击取消按钮时触发 | -        |
npm package: @retailwe/ui-divider
Description: ## 介绍
Latest version: 0.0.17

# Wr-Divider 分割线

## 介绍

分割线

## 引入

在`app.json`或`index.json`中引入组件

```json
"usingComponents": {
  "wr-divider": "@retailwe/ui-divider/index"
}
```

## 代码演示

### 基础用法

```html
<wr-divider />
```

### 使用hairline

```html
<wr-divider hairline />
```

### 虚线

```html
<wr-divider dashed />
```

### 文本位置

```html
<wr-divider contentPosition="center">文本</wr-divider>
  <wr-divider contentPosition="left">文本</wr-divider>
  <wr-divider contentPosition="right">文本</wr-divider>
```

### 自定义属性

```html
<wr-divider contentPosition="center" textColor="#1989fa">文本颜色</wr-divider>
<wr-divider contentPosition="center" borderColor="#1989fa">border颜色</wr-divider>
```

### 自定义样式

```html
<wr-divider contentPosition="center" customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;">文本</wr-divider>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| dashed | 虚线 | *boolean* | false | - |
| hairline | 细线 | *boolean* | false | - |
| content-position | 文本位置，`left` `center` `right` | *string* | - | - |
| border-color | 线条颜色 | *string* | - | - |
| text-color | 文本颜色 | *string* | - | - |
| custom-style | 自定义样式 | *string* | - | - |

### Slot

| 名称 | 说明 |
|-----------|-----------|
| 默认 | 自定义文本内容 |
npm package: @retailwe/ui-empty
Description: ## 引入
Latest version: 0.0.17

# empty 空内容

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-empty": "@retailwe/ui-empty/index"
}
```

## 代码演示

### 基础用法

```html
<view style="width: 100%; height: 300rpx;">
  <wr-empty>空空如也</wr-empty>
</view>
```

### 指定图片大小

```html
<view style="width: 100%; height: 300rpx;">
  <wr-empty size="150rpx">空空如也</wr-empty>
</view>
```

### 指定文字大小

```html
<view style="width: 100%; height: 300rpx;">
  <wr-empty textSize="30rpx">空空如也</wr-empty>
</view>
```

### 指定文字颜色

```html
<view style="width: 100%; height: 300rpx;">
  <wr-empty textColor="blue">空空如也</wr-empty>
</view>
```

## API

### empty Props

| 参数      | 说明     | 类型     | 默认值                                                              | 版本 |
| --------- | -------- | -------- | ------------------------------------------------------------------- | ---- |
| src       | 图片地址 | _string_ | `https://cdn.ghsmpwalmart.com/saas/market/image/empty/no_goods.png` | -    |
| size      | 图片大小 | _string_ | `100rpx`                                                            | -    |
| textSize  | 文字大小 | _string_ | `24rpx`                                                             | -    |
| textColor | 文字颜色 | _string_ | `#969799`                                                           | -    |
| backColor | 背景颜色 | _string_ | -                                                                   | -    |

### Slots

| 名称 | 说明     |
| ---- | -------- |
| -    | 加载文案 |

### empty 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| wr-class | 根节点样式类 |
npm package: @retailwe/ui-field
Description: ## 引入
Latest version: 0.0.15

# field 文本框

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-field": "@retailwe/ui-field/index"
}
```

### 基本用法

```html
<field
  value="{{value}}"
  placeholder="请输入用户名"
  bind:change="onChange"
></field>
```

```js
Page({
  data: {
    value: 'hello world',
  },
  methods: {
    onChange: function(e) {
      var value = e.target.value;
      this.setData({ value: value });
    },
  },
});
```

### 自定义类型

```html
<field
  value="{{value}}"
  label="用户名"
  placeholder="请输入用户名"
  bind:change="onChange"
></field>
<field
  value="{{value}}"
  label="密码"
  placeholder="请输入密码"
  type="password"
  bind:change="onChange"
></field>
<field
  value="{{value}}"
  label="文本"
  placeholder="输入框已禁用"
  disabled="{{true}}"
  bind:change="onChange"
></field>
<field
  value="{{value}}"
  label="文本"
  placeholder="输入框已禁用"
  disabled="{{true}}"
  bind:change="onChange"
></field>
<field
  value="{{value}}"
  iconLeft="{{true}}"
  iconRight="{{true}}"
  placeholder="输入框已禁用"
  disabled="{{true}}"
  bind:change="onChange"
>
  <view slot="field-icon">
    <wr-icon name="money" color="blue" dot />
  </view>
  <view slot="field-right">button</view>
</field>
```

### field Props

| 参数         | 说明              | 类型      | 默认值 | 版本  |
| ------------ | ----------------- | --------- | ------ | ----- |
| iClass       | 自定义 class 类名 | _string_  | -      | -     |
| required     | 必填              | _boolean_ | -      | -     |
| label        | 标签              | _string_  | -      |
| disabled     | 禁填              | _bolean_  | \*     | false |
| placeholder  | input placeholder | _string_  |
| iconLeft     | 左边 slot         | _bolean_  | \*     | false |
| iconRight    | 右边 slot         | _bolean_  | \*     | false |
| value        | input value       | _string_  | -      |
| errorMessage | 错误的信息        | _string_  | -      |

### field Event

| 事件名  | 说明                | 参数 |
| ------- | ------------------- | ---- |
| change  | field 组件时触发    | -    |
| onClear | field cancel 时触发 | -    |
npm package: @retailwe/ui-filter
Description: ## 引入
Latest version: 0.0.20

# 商品筛选

## 引入

```json
"usingComponents": {
  "wr-filter": "@retailwe/wr-filter/index",
  "wr-filter-popup": "@retailwe/wr-filter/index"
}
```

## 代码演示

```
// 开启筛选后可插入slot
<wr-filter wr-class="filter-container" bind:change="handleFilterChange" layout="{{layout}}" sorts="{{sorts}}" overall="{{overall}}" bind:showFilterPopup="showFilterPopup">
<view slot="filterPopup">
    <wr-filter-popup  show="{{show}}"  bind:showFilterPopupClose="showFilterPopupClose" bind:reset="reset" bind:confirm="confirm">
        <view slot="filterSlot">
            <view class="price-container">
            <view class="price-between">价格区间</view>
            <view class="price-ipts-wrap">
                <input type="number" class="price-ipt {{minSalePriceFocus ? 'focus' : ''}} {{minActive ? 'active' : ''}}" bindfocus="handleMinPriceFocus" bindblur="handleMinPriceBlur" placeholder="最低价" value="{{minVal}}" bindinput="onMinValAction" />
                <text class="price-divided"></text>
                <input type="number" class="price-ipt {{maxSalePriceFocus ? 'focus' : ''}} {{maxActive ? 'active' : ''}}" bindfocus="handleMaxPriceFocus" bindblur="handleMaxPriceBlur" placeholder="最高价" value="{{maxVal}}" bindinput="onMaxValAction" />
            </view>
            </view>
        </view>
    </wr-filter-popup>
</view>
</wr-filter>


```

#### 入参

| 参数         |                   说明                   |             类型 | 默认值 | 是否必要 |
| :----------- | :--------------------------------------: | ---------------: | ------ | -------- |
| overall         |                1为综合默认 高亮   0为其它模式，不高亮                | Number| ''     | 否       |
| layout         |                 1为水平排序  0为垂直排序                 |          Number | 1  | 否       |
| sorts        |                 有三种模式 desc降序,asc升序, 默认为空             |           String | '' | 否       |
| color | 主颜色 |          String | #FA550F  | 否       |

#### Events

| 事件             | 是否必要 |                                                           说明 |
| :--------------- | :------: | -------------------------------------------------------------: |
| change |   否   |     返回配置参数 |
| showFilterPopup        |    否    | 开启筛选 |

#### 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| wr-class | 根节点样式类 |

#### slot

| name          | 说明                 |
| ------------- | -------------------- |
| filterPopup | 筛选弹窗slot |
npm package: @retailwe/ui-filter-popup
Description: ## 引入
Latest version: 0.0.18

# 商品筛选弹窗

## 引入

```json
"usingComponents": {
  "wr-filter-popup": "@retailwe/wr-filter/index"
}
```

## 代码演示

```
<wr-filter-popup  show="{{show}}"  bind:showFilterPopupClose="showFilterPopupClose" bind:reset="reset" bind:confirm="confirm">
    <view slot="filterSlot">
        <view class="price-container">
        <view class="price-between">价格区间</view>
        <view class="price-ipts-wrap">
            <input type="number" class="price-ipt {{minSalePriceFocus ? 'focus' : ''}} {{minActive ? 'active' : ''}}" bindfocus="handleMinPriceFocus" bindblur="handleMinPriceBlur" placeholder="最低价" value="{{minVal}}" bindinput="onMinValAction" />
            <text class="price-divided"></text>
            <input type="number" class="price-ipt {{maxSalePriceFocus ? 'focus' : ''}} {{maxActive ? 'active' : ''}}" bindfocus="handleMaxPriceFocus" bindblur="handleMaxPriceBlur" placeholder="最高价" value="{{maxVal}}" bindinput="onMaxValAction" />
        </view>
        </view>
    </view>
</wr-filter-popup>


```

#### 入参

| 参数         |                   说明                   |             类型 | 默认值 | 是否必要 |
| :----------- | :--------------------------------------: | ---------------: | ------ | -------- |
| show         |             显示隐藏               | Boolean| false    | 是       |


#### Events

| 事件             | 是否必要 |                                                           说明 |
| :--------------- | :------: | -------------------------------------------------------------: |
| showFilterPopupClose |   否   |     关闭弹窗 |
| reset        |    否    | 重设参数 |
| confirm        |    否    | 筛选确认 |

#### 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| wr-class | 筛选内容根节点样式类 |

#### slot

| name          | 说明                 |
| ------------- | -------------------- |
| filterSlot | 筛选内容插槽 |
npm package: @retailwe/ui-good-card
Description: ## 引入
Latest version: 0.0.23

# Card 商品卡片

## 引入

在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)

```json
"usingComponents": {
  "wr-goods-card": "@retailwe/ui-good-card/index"
}
```

## 代码演示

### 基础用法

```html
<wr-goods-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="{{ imageURL }}"
/>
```

### 高级用法

可以通过插槽添加定制内容

```html
<wr-goods-card
  num="2"
  tag="标签"
  price="10.00"
  desc="描述信息"
  title="商品标题"
  thumb="{{ imageURL }}"
>
  <view slot="footer">
    <button size="mini">按钮</button>
    <button size="mini">按钮</button>
  </view>
</wr-goods-card>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 | 说明 |
|-----------|-----------|-----------|-------------|-------------|
| thumb | 左侧图片 | *string* | - | - |
| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | *string* | `aspectFit` | - |
| title | 标题 | *string* | - | - |
| desc | 描述 | *string* | - | - |
| tag | 标签 | *string* | - | - |
| num | 商品数量 | *string \| number* | - | - |
| price | 商品价格 | *string \| number* | - | - |
| price-fill | 价格是否保持两位小数 | *boolean* | `true` | - |
| origin-price | 商品划线原价 | *string \| number* | - | - |
| layout | 图文布局 | *string* | `horizontal` | 横向-`horizontal`、纵向-`vertical` |
| centered | 内容是否垂直居中 | *string* | `false` | - |
| currency | 货币符号 |  *string* | `¥` | - |
| thumb-link | 点击左侧图片后跳转的链接地址 | *string* | - | - |
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - |
| lazy-load | 是否开启图片懒加载 | *boolean* | `false` | - |

### Slot

| 名称 | 说明 |
|-----------|-----------|
| title | 自定义标题栏，如果设置了`title`属性则不生效 |
| desc | 自定义描述栏，如果设置了`desc`属性则不生效 |
| thumb | 自定义 thumb，如果设置了`thumb`属性则不生效 |
| bottom | 自定义价格下方区域 |
| footer | 自定义 footer |
| tags | 自定义 tags |

### Events

| Event  | Description                   | Arguments |
| ------ | ----------------------------- | --------- |
| clickThumb | 点击商品图片触发 | - |

### 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| card-class | 根节点样式类 |
| thumb-class | 左侧图片样式类 |
| title-class | 标题样式类 |
| price-class | 价格样式类 |
| origin-price-class | 划线原价样式类 |
| desc-class | 描述样式类 |
| specs-class | 规格样式类 |
| num-class | 数量样式类 |
npm package: @retailwe/ui-goods-category
Description: ## 引入
Latest version: 0.0.19

# 商品分类

## 引入


```json
"usingComponents": {
  "goods-category": "@retailwe/goods-category/index"
}
```

## 代码演示

```
<wr-goods-category custom-class="goods-category-class" category="{{list}}" initActive="{{0}}" bindchange="onChange"></wr-goods-category>
```
```ts
interface categoryItem {
  name: string;
  thumbnail: string;
  children?: categoryItem[];
}
```
#### 入参

| 参数             |      说明      |   类型 | 默认值 | 是否必要 |
| :--------------- | :------------: | -----: | ------ | -------- |
| category     |      评分      |  categoryItem[] | []     | 是       |
| initActive         |  激活的卡页[一级索引，二级索引    ]   | Array | []     | 否       |
| level     |      分类等级      |  Number | 3    | 否       |
| isSlotRight     |      是否开启右侧插槽，开启后右侧需自己加载数据      |  Boolean | 3    | 否       |
|

#### Events

| 事件 | 是否必要 | 说明 |
| :--- | :------: | ---: |
|change|否|返回索引[]|
|changCategory|否|isSlotRight为false时，返回当前点击分类的数据|

### 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| custom-class | 根节点样式类 |
npm package: @retailwe/ui-goods-review-submit
Description: ### 引入
Latest version: 0.0.25

# 订单评价

### 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
{
  "usingComponents": {
    "wr-goods-review": "@retailwe/ui-goods-review-submit/index"
  }
}
```

### 基本用法

```xml
<wr-goods-review review-data="{{reviewData}}" upload-method="{{uploadMethod}}" bind:submit="onSubmit" />
```

### Props

```typescript
// 评价星星选中状态
// 0 - 未选中
// 1 - 半选中
// 2 - 全选中
type SignalStar = 0 | 1 | 2;

interface ReviewData {
  goods: {
    squid: string;
    skuId: string;
    detail: {
      image: string;
      title: string;
      /** 规格描述 */
      desc: string;
    };

    checkItems: [
      {
        name: "匿名评价";
        value: "anonymous";
        checked: boolean;
      }
    ];

    goodComment: {
      /** 商品评价 */
      rate: SignalStar;
      /** 评价内容 */
      label: string;
      /** 上传图片 */
      images: string[];
    };
  }[];

  storeComment: {
    /** 物流评价 */
    logisticsRate: SignalStar;
    /** 服务评价 */
    servicesRate: SignalStar;
  };
}
```

````typescript
// 上传函数出参
interface Result {
  url: string;
}

// 上传函数入参
interface UploadFilesParams {
  type: "image" | "video";
  name: string;
  path: string;
}

// 上传函数
interface UploadMethod {
  method: {
    /**
     * @example
     *
     * ```typescript
     * import { uploadFileRequest } from '@/services/cos';
     *
     * class examplePage {
     *  data: { uploadMethod: method: this.uploadMethod },
     *
     *  uploadMethod (file, onProgress) {
     *    const { name, type, path } = file;
     *
     *    return uploadFileRequest(
     *      // bizName / buckType 值应根据实际情况调整
     *      { bizName: 'rights', buckType: 1, type, name, path },
     *      onProgress,
     *    ).then(({ key }) => ({ url: key }))
     *  }
     * }
     * ```
     */
    (params: UploadFilesParams, onProgress: (...arg: any) => void): Promise<
      Result
    >;
  };
}
````

| 参数          | 说明                     | 类型           | 默认值 | 版本 |
| ------------- | ------------------------ | -------------- | ------ | ---- |
| i-class       | 自定义根节点 class 类名  | _string_       | -      | -    |
| review-data   | 评价数据，非受控         | _ReviewData_   | -      | -    |
| upload-method | 文件上传处理函数，非受控 | _UploadMethod_ | -      | -    |
| loading       | 加载中标志，受控         | _boolean_      | false  | -    |

### Event

| 事件名          | 说明                 | 参数                |
| --------------- | -------------------- | ------------------- |
| submit          | 点击 提交 组件时触发 | _ReviewData_        |
| validationError | 表单校验错误         | _{msg: string}_ |

### 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| wr-class | 根节点样式类 |
npm package: @retailwe/ui-goods-tab
Description: ## 引入
Latest version: 0.0.14

# goods-tab 商品详情页的 tab

## 引入


```json
"usingComponents": {
  "wr-goods-tab": "@retailwe/goods-tab/index"
}
```

### 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "goods-tab": "@retailwe/goods-tab/index"
}
```

## 代码演示

```
<wr-goods-tab id="goodsTab" tabList="{{goodsTabArray}}" />

goodsTabArray: [
      {
        name: '商品',
        value: '', // 空字符串代表置顶
      },
      {
        name: '详情',
        value: 'goods-page',
      },
    ]
 onPageScroll({ scrollTop }) {
    const goodsTab = this.selectComponent('#goodsTab');
    goodsTab && goodsTab.onScroll(scrollTop);
  }
```

#### 入参

| 参数    |    说明    |  类型 | 默认值 | 是否必要 |
| :------ | :--------: | ----: | ------ | -------- |
| tabList | tab 配置项 | Array | []     | 是       |

#### tabList 配置项

| 参数  |                   说明                   |   类型 | 是否必要 |
| :---- | :--------------------------------------: | -----: | -------- |
| name  |                tab 项名称                | string | 是       |
| value | tab 对应内容区域的 ID， 空字符串代表置顶 | string | 是       |

#### Events

| 事件      | 是否必要 |                        说明 |
| :-------- | :------: | --------------------------: |
| tabChange |    是    | 事件，点击到对应 value 区域 |

### 外部样式类

| 类名     | 说明         |
| -------- | ------------ |
| wr-class | 根节点样式类 |
npm package: @retailwe/ui-icon
Description: ## 引入
Latest version: 0.0.22

# icon 图标

## 引入

全局引入，在miniprogram根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-icon": "@retailwe/ui-icon/index"
}
```

## 代码演示

### 基础用法

```html
<wr-icon name="time"/>
<wr-icon name="loading"/>
```

### 指定大小

```html
<wr-icon name="time" size="24"/>
```

### 显示角标

```html
<wr-icon name="time" info="99+"/>
```

### 显示红点

```html
<wr-icon name="time" dot/>
```

### 指定颜色

```html
<wr-icon name="time" color="blue"/>
<wr-icon name="time" color="red"/>
<wr-icon name="time" color="gray"/>
```

## API

### icon Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| name | iconfont的类名（去除前缀部分）, 也可以是图片url | *string* | - | - |
| class-prefix | iconfont的类名前缀 | *string* | `market` | - |
| size | iconfont的字体大小，决定了图标的大小 | *number \| string* | `24` | - |
| color | icfongfont的字体颜色，决定了图标的颜色 | *string* | - | - |
| info | 需要显示的角标内容 | *string* | - | - |
| dot | 是否需要显示右上角红点，优先级比info高 | *boolean* | `false` | - |
| custom-style | 自定义样式 | *string* | - | - |

### icon Event

| 事件名 | 说明 | 参数 |
|------|------|------|
| tap | 点击图标组件时触发 | - |

### icon 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 根节点外部样式类 |

### icon css var

| 类名 | 说明 | 默认值 |
| --------------- | -------- | ------ |
| --ui-icon-host-display | 根容器定位方式 | inline-flex |
| --ui-icon-color | 颜色 | inherit |
| --ui-icon-size | 字体大小 | inherit |