open-index/open-npm huggingface dataset:
npm package: @retailwe/ui-image
Description: ## 引入
Latest version: 0.0.13

# Image 图片

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-image src="{{imgUrl}}"></wr-image>
```

```javascript
Page({
  data: {
    imgUrl:
      'http://bl-material-qa-1300977798.cos.ap-guangzhou.myqcloud.com/persist/1/b236c5b77acd4908b5868e828687f531-1.jpg',
  },
});
```

### 添加cdn裁剪参数

```html
<wr-image src="{{imgUrl}}" width="150" height="150"></wr-image>
```

### 使用加载占位图

```html
<wr-image
  src="https://errurl"
  width="200"
  height="200"
  loading-image="yunshuzhong"
  load-failed-image="tips">
</wr-image>
<wr-image
  src="https://errurl"
  width="200"
  height="200"
  use-loading-slot
  useLoad-failed-slot>
  <view slot="loading" style="color: gray; font-size: 24rpx">正在加载</view>
  <view slot="failed" style="color: gray; font-size: 24rpx">加载失败</view>
</wr-image>
```

### 传入自定义样式

```html
<wr-image
  src="https://errurl"
  width="200" height="200"
  loading-image="yunshuzhong"
  load-failed-image="tips"
  img-style="color: white; font-size: 60rpx; background-color: lightblue;">
</wr-image>
<wr-image
  src="{{imgUrl}}"
  width="200"
  height="200"
  img-style="opacity: 0.8; border-radius: 50%; border: 3px solid gold; box-sizing: border-box;">
</wr-image>
```

## API

### Image Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| src | 图片地址，透传给原生image | _string_ | - | - |
| img-style | 图片自定义样式 | _string_ | - | - |
| mode | 填充样式，透传给原生image，可参考小程序官方文档 | _string_ | `scaleToFill` | - |
| webp | 透传给原生image，可参考小程序官方文档 | _boolean_ | `true` | - |
| width | 图片的宽度，会自动拼接到src，单位rpx | _string\|number_ | - | - |
| height | 图片的高度，会自动拼接到src，单位rpx | _string\|number_ | - | - |
| lazy-load | 是否启用懒加载，透传给原生image，可参考小程序官方文档 | _boolean_ | - | - |
| loading-image | 自定义加载中状态图片/icon, 传入值带`/`就认为是图片, 否则默认为icon | _string_ | - | - |
| use-loading-slot | 使用loading slot, 这时会忽略 loading-image 的传值 | _boolean_ | - | - |
| load-failed-image | 自定义加载中状态图片/icon, 传入值带`/`就认为是图片, 否则默认为icon | _string_ | `jiazaishibai` | - |
| use-load-failed-slot | 使用failed slot, 这时会忽略 load-failed-image 的传值 | _boolean_ | - | - |

### Image Event

| 事件名      | 说明           | 参数                                     |
| ----------- | -------------- | ---------------------------------------- |
| load | 图片加载完毕后触发 | event.detail: {height, width} |
| error | 图片加载失败后触发 | event.detail: {errMsg} |

### Image Slot

| 名称        | 说明           |
| ----------- | -------------- |
| loading | 图片加载完成前的占位内容 |
| failed | 图片加载失败后的占位内容   |

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

# info 图标

## 引入

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

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

## 代码演示

**注意：使用info组件时，务必将其父节点设为 `position: relative`**  

### 基础用法

```html
<view style="position: relative;">消息<wr-info info="99+"/></view>
```

### 显示红点

```html
<view style="position: relative;">消息<wr-info dot/></view>

## API

### info Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| info | 需要显示的角标内容 | *string* | - | - |
| dot | 是否需要显示右上角红点，优先级比info高 | *boolean* | `false` | - |

### info 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 根节点外部样式类 |
npm package: @retailwe/ui-like-animation
Description: ## 引入
Latest version: 0.1.2

# like-animation 直播间点赞动画组件

## 引入

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

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

## 代码演示

### 基础用法

```html
 <wr-like-animation wr-class="like-animation" senceType="live" count="{{likeCount}}" height="680" width="160" iconSize="76"></wr-like-animation>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| count | 总点赞数量，通过监听count值的变化触发点赞效果 | *number* | 0 | - |
| height | canvas画布的高度 | *number*  | 340 | - |
| width | canvas画布的宽度 |  *number*  | 140 | - |
| iconSize | 点赞气泡图标的大小 | *number* | 40 | - |
| iconUrl | 点赞气泡图标链接数组，支持网络图片、本地图片 | *Array* | ['https://***.com//like1.png','https://***.com//like2.png'] | - |
| iconSize | 点赞气泡图标的大小 | *number* | 40 | - |
| senceType | 特殊应用情景，当senceType==='live'时，组件初始化时，会连续执行3s左右的动画，后续间隔20s执行一次动画。senceType为其它值时无效。 | *string* | `` | - |

### 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 点赞动画画布的样式布局 |

### 其它

注意，动画采用`setTimeout`实现，这是因为调用canvas 2d的`requestAnimationFrame` API会导致部分机型动画卡顿，定格成静止画面。

动画实现原理可参考：[小程序直播-疯狂点赞canvas动画实现原理解析](http://km.oa.com/articles/show/468146)
npm package: @retailwe/ui-live-video
Description: live-video是一款可以自定义播放控件样式和位置的视频播放组件。 ## 1 引入
Latest version: 0.0.2

# live-video 视频播放组件

live-video是一款可以自定义播放控件样式和位置的视频播放组件。
## 1 引入

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

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

## 2 代码演示

### 2.1 基础用法

```html
  <wr-live-video url="{{videoURI}}" offsetBottom="{{100}}" />
```

## 3 API说明

### 3.1 Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| url | 要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID | *String* | - | - |
| autoplay | 是否自动播放 | *Boolean* | true | - |
| loop | 是否循环播放 | *Boolean* | true | - |
| muted | 是否静音播放 | *Boolean* | false | - |
| initialTime | 指定视频的初始播放位置 | *Number* | 0 | - |
| objectFit | 当视频大小与 video 容器大小不一致时，视频的表现形式 | *String* | 'contain' | - |
| offsetBottom | 播放控件距离底部的距离 | *Number* | 160 | - |

### 3.2 objectFit的合法值

| 值 | 说明 |
|-----------|-----------|
| contain | 包含 |
| fill | 填充 |
| cover | 覆盖 |
npm package: @retailwe/ui-loading
Description: ## 引入
Latest version: 0.0.17

# loading 加载状态

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-loading></wr-loading>
```

### 包含文字

```html
<wr-loading>加载中</wr-loading>
```

### 文字显示在loading下方

```html
<wr-loading vertical>加载中</wr-loading>
```

### loading类型

```html
<wr-loading>circular</wr-loading>
<wr-loading type="spinner">spinner</wr-loading>
```

### 指定size

```html
<wr-loading size="40rpx"></wr-loading>
<wr-loading size="60rpx"></wr-loading>
```

### 指定文字size

```html
<wr-loading text-size="24rpx">加载中</wr-loading>
<wr-loading text-size="32rpx">加载中</wr-loading>
```

### 指定颜色

```html
<wr-loading></wr-loading>
<wr-loading color="blue"></wr-loading>
<wr-loading color="red"></wr-loading>
```

## API

### loading Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| type | 类型，可选值`circular`, `circular-ext`, `spinner` | *string* | `circular` | - |
| vertical | 文字是否显示在loading下方 | *boolean* | `false` | - |
| size | loading的大小 | *string* | `50rpx` | - |
| textSize | 文字的大小 | *string* | `24rpx` | - |
| color | loading的颜色 | *string* | `#c8c9cc` | - |
| backgroundColor | loading背景色，`circular-ext`必填 | *string* | - | - |
| reverse | 反向旋转 | *boolean* | `false` | - |
| duration | 动画循环一次的时间，决定动画速度 | *number* | `0.8` | - |
| paused | 暂停动画 | *boolean* | `false` | - |

### Slots

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

### loading 外部样式类

### 外部样式类

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

# loading-content 加载状态，用于占位

## 引入

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

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

## 代码演示

### 基础用法，铺满父容器

```html
<wr-loading-content>loading</wr-loading-content>
```

### 绝对定位，遮盖父容器的内容

**注意：** 需配合将父容器的 position 为 relative

```html
<view
  style="width: 100%; height: 200rpx; background-color: yellow; position: relative;"
>
  容器内容
  <wr-loading-content position="absolute">loading</wr-loading-content>
</view>
```

### 绝对定位，遮盖窗口

```html
<wr-loading-content position="fixed">loading</wr-loading-content>
```

## API

### loading-content Props

| 参数     | 说明                              | 类型      | 默认值     | 版本 |
| -------- | --------------------------------- | --------- | ---------- | ---- |
| type     | 类型，可选值`circular`和`spinner` | _string_  | `circular` | -    |
| vertical | 文字是否显示在 loading 下方       | _boolean_ | `false`    | -    |
| size     | loading 的大小                    | _string_  | `50rpx`    | -    |
| textSize | 文字的大小                        | _string_  | `24rpx`    | -    |
| color    | loading 的颜色                    | _string_  | `#c8c9cc`  | -    |

### Slots

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

### loading-content 外部样式类

### 外部样式类

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

# logistics-info 物流节点信息

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-logistics-info nodes="{{ nodes }}"/>
```

```javascript
Page({
  data: {
    nodes: [] as any,
    nodesR: [] as any,
  },

  onLoad() {
    const nodes = [
      {
        title: '派件中',
        desc: '小哥正在派件中，联系电话16267883998',
        date: '2020-07-15 17:30:01',
        icon: 'beihuozhong',
      },
      {
        desc: '快件已分配小哥，准备前往派送',
        date: '2020-07-15 17:30:01',
      },
      {
        title: '运输中',
        desc: '快件已到达高新区配送站',
        date: '2020-07-15 17:30:01',
        icon: 'yunshuzhong',
      },
      {
        desc: '快件已达到高新区中转站，准备发往高新区配送站',
        date: '2020-07-15 17:30:01',
      },
      {
        desc: '快件已分拣，准备发往南山区中转站',
        date: '2020-07-15 17:30:01',
      },
      {
        title: '已发货',
        desc: '商品正在出库',
        date: '2020-07-15 17:30:01',
        icon: 'yifahuo',
      },
      {
        title: '已下单',
        desc: '描述信息',
        date: '2020-07-15 17:30:01',
        icon: 'yixiadan',
      },
    ];
    this.setData({
      nodes,
      nodesR: nodes.reverse(),
    });
  },
});
```

### 反向

```html
<wr-logistics-info nodes="{{ nodesReversed }}" reverse/>
```

### 自定义样式

可以通过 `active-color` 和 `active-background-color` 属性控制当前激活点的颜色和背景色

```html
<wr-logistics-info nodes="{{ nodes }}" active-color="black" active-background-color="green"/>
```

## API

### Steps Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| nodes | 节点数据 | *array* | - | - |
| reverse | 是否反向（默认激活点在最上方，`reverse`为`true`时激活点会调整到最下方） | *boolean* | `false` | - |
| active-color | 激活状态颜色 | *string* | `white` | - |
| active-background-color | 未激活状态颜色 | *string* | `#FA550F` | - |

### 外部样式类

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

# NoticeBar 通告栏

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-notice-bar
  left-icon="wr-star-filled"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动"
/>
```

### 禁用滚动

文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动

```html
<wr-notice-bar
  scrollable="false"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动"
/>
```

### 多行展示

禁用滚动时，可以设置`wrapable`来开启多行展示

```html
<wr-notice-bar
  wrapable
  scrollable="false"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动"
/>
```

### 使用左右插槽

使用`left-icon`插槽和`right-icon`插槽自定义左右固定内容

```html
<wr-notice-bar
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动。"
>
  <text slot="left-icon">[公告]</text>
  <text slot="right-icon">[结束]</text>
</wr-notice-bar>
```

### 通告栏模式

默认模式为空，支持`closeable`和`link`。

```html
<!-- closeable 模式，在右侧显示关闭按钮 -->
<wr-notice-bar
  mode="closeable"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动。"
/>

<!-- link 模式，在右侧显示链接箭头 -->
<wr-notice-bar
  mode="link"
  text="文字内容多于一行时，可通过`scrollable`参数控制是否开启滚动。"
/>
```

### 自定义滚动速率

使用`speed`属性控制滚动速率

```html
<wr-notice-bar
  text="{{ text }}"
  speed="{{speedValue}}"
  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
/>
```

## API

### Props

| 参数            | 说明                                                 | 类型      | 默认值     | 版本 |
| --------------- | ---------------------------------------------------- | --------- | ---------- | ---- |
| mode            | 通告栏模式，可选值为 `closeable` `link`              | _string_  | `''`       | -    |
| delay           | 动画延迟时间 (s)                                     | _number_  | `1`        | -    |
| speed           | 滚动速率 (px/s)                                      | _number_  | `50`       | -    |
| scrollable      | 是否在长度溢出时滚动播放                             | _boolean_ | `true`     | -    |
| left-icon       | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_  | -          | -    |
| color           | 文本颜色                                             | _string_  | `#ed6a0c`  | -    |
| backgroundColor | 滚动条背景                                           | _string_  | `#fffbe8`  | -    |
| open-type       | 微信开放能力                                         | _string_  | `navigate` | -    |

### Events

| 事件名     | 说明         | 参数 |
| ---------- | ------------ | ---- |
| bind:click | 点击事件回调 | -    |

### Slot

| 名称       | 说明               |
| ---------- | ------------------ |
| left-icon  | 自定义左侧固定内容 |
| right-icon | 自定义右侧固定内容 |

### 外部样式类

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

# Notify 消息提示

## 引入

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

## 代码演示

### 基础用法

```html
<!-- 在页面内添加对应的节点 -->
<wr-notify id="title1" type="{{type}}" message="{{message}}"> </wr-notify>
```

### 通知类型

支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`

```js
Page({
  data: {
    duration: 500,
    message: '危险notify',
  },
  handleTap(e) {
    const { index } = e.currentTarget.dataset;
    const notify = this.selectComponent(`#title${index}`);
    notify.show();
  },
});
```

## API

### 方法

| 方法名 | 说明 | 参数 | 返回值 |
| ------ | ---- | ---- | ------ |


### 参数

| 参数      | 说明                                     | 类型     | 默认值   | -   |
| --------- | ---------------------------------------- | -------- | -------- | --- |
| type      | 提示类型                                 | _string_ | `danger` | -   |
| bgColor   | 背景颜色                                 | _string_ | `red`    | -   |
| message   | 展示文案                                 | _string_ | `` | -   |
| duration  | 展示时长(ms)，值为 0 时，notify 不会消失 | _number_ | `3000`   | -   |
| textColor | 文案颜色                                 | _string_ | `#fff`   | -   |
| fontSize  | 文案字体大小                             | _string_ | `26rpx`  | -   |
npm package: @retailwe/ui-order-goods-card
Description: 用法可查看`order-card`的说明
Latest version: 0.0.31

# order-goods-card 商品卡片（order-card的子组件）

用法可查看`order-card`的说明

## 关于样式覆盖

`external.less`文件是覆盖其他组件的样式，页面less必须直接/间接的引入该文件。
npm package: @retailwe/ui-order-group
Description: ## 引入
Latest version: 0.0.22

# order-group 订单分类

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-order-group orderTagInfos="{{orderTagInfos1}}" bind:click="onClick" bind:clickTop="onClickTop" />
```


```js
Page({
  data: {
    orderTagInfos: [
         {
           title: '待付款',
           iconName: 'wallet',
         },
         {
           title: '待发货',
           iconName: 'wuliu-1',
         },
         {
           title: '待收货',
           iconName: 'packaging',
         },
         {
           title: '退款/售后',
           iconName: 'money',
         },
       ],
  },
  onClick(e) {
    console.log('onClick', e);
  },
  onClickTop() {
    console.log('onClickTop');
  },
});
```

## API

### order-group Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| title | top标题 | *string* | `我的订单` | - |
| value | top右侧展示文字 | *string* | `全部订单` | - |
| isTop | 是否显示top | *boolean* | `true` | - |
| orderTagInfos | 订单分类数据源，最多设置四个分类 | *array* | [] | - |


### orderTagInfos Props

| 参数      | 说明             | 类型      | 默认值     | 版本 |
| --------- | ---------------- | --------- | ---------- | ---- |
| title   | 分类标题   | _string_  | -     | -    |
| iconName      | 分类图标icon         | _string_ | - | -    |
| orderNum | 角标展示的数量，如果不设置或参数是0则不展示 | _number_   | - | - |
| dot     | 角标是否展示为小点，配合orderNum参数使用 | _boolean_  | `false` | - |
| ...     | 其他参数 | _any_  |

### order-group Event

| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| click | 点击单元格时触发 | - |
| clickTop | 点击单元格时触发 | - |
npm package: @retailwe/ui-period-selector
Description: ### 使用效果（参考图）
Latest version: 0.0.15

### period-selector 时间段选择器

### 使用效果（参考图）

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

![image-20200716151447319](/Users/sydzou/Library/Application Support/typora-user-images/image-20200716151447319.png)

### 使用方法

```html
<!--- wxml文件 --->
<wr-period-selector bind:onConfirm="onSearch" show="{{show}}" bgColor="red" start="{{createTimeInterval[0]}}" end="{{createTimeInterval[1]}}" dayType="{{dayType}}" bind:onHide="billFilterHide" maxYearAfter="{{0}}" limitDay="{{365}}" />  
```

```tsx
// 脚本文件
Page({
  data: {
    dayType: 0,
    createTimeInterval: [],
    qid: false,
    show: false,
  },
  onTap() {
    this.setData({
      show: true,
    });
  },
  onSearch(e) {
    const { createTimeInterval, showTime } = e.detail || {};
    let cardTitle = '今日';
    if (showTime === '时间段') {
      cardTitle =
        this.formatDate(createTimeInterval[0]) +
        ' - ' +
        this.formatDate(createTimeInterval[1]);
    } else if (showTime !== '') {
      cardTitle = showTime + '数据';
    }
    this.setData({
      cardTitle,
    });
    this.billFilterHide(); // 手动关闭弹窗
    this.setData({ createTimeInterval });
  },
  billFilterHide() {
    this.setData({
      show: false,
    });
  },
  formatDate(timestamp: number) {
    if (!timestamp || typeof timestamp !== 'number') {
      return '';
    }
    const date = new Date(Number(timestamp));
    return (
      date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
    );
  },
});

```


#### Props

| 参数             | 说明                       | 要求            | 默认值     |
| ---------------- | -------------------------- | --------------- | ---------- |
| limitDay |限制范围时长|Number|                                默认-1，不限制|
| bgColor            | 唯一入参‘red’红色卡片，不传为蓝色      | string    | 卡片颜色 |
|show |显示隐藏|boolean|false|
| start        | 时间段开始日期的时间戳     | 时间戳          | -          |
| end          | 时间段结束日期的时间戳     | 时间戳          | -          |
| maxYearBefore | 最早可选时间相距年数 | Number          | 5 |
| maxYearAfter | 最晚可选时间相距年数 | Number          | 5 |
| dayType   | 0：今天，1:近7日， 2:近30日 3：近3个月, 设置这个后初始化会覆盖start和end | Number          | -1 |



#### Events

| 事件              | 说明                         |
| ----------------- | ---------------------------- |
| onConfirm         | 当确定按钮被点击时触发       |
| onHide           | 关闭回调       |
| onReset           | 关闭回调  , 默认重置初始值，可覆盖     |
| onSelectTag | 点击时间标签回调 |
```
// onConfirm回调
{createTimeInterval: Array(2), showTime: "今日"}
```


#### 外部样式类

| 样式类名             | 说明                       |
| -------------------- | -------------------------- |
| picker-wrapper-class  | 根样式   |
| active-label-class   | 时间段标签被选择后的样式   |
| datetime-range           | 选择时间的样式             |
| confirm-btn-class    | 确认按钮的样式             |
| reset-class          | 重置的样式                 |
| picker-confirm-class | 日期选择器中确认按钮的样式 |
| picker-cancel-class  | 日期选择器中取消按钮的样式 |

**注意**⚠️：为使外部样式生效，其CSS属性最好以`!important`声明。
npm package: @retailwe/ui-price
Description: ## 引入
Latest version: 0.0.20

# price 价格

## 引入

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

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

## 代码演示

### 基础用法

通过`price`属性传入金额
*注意：金额的单位是分，即`100`代表1元*

```html
<price price="{{100}}"></price>
<price price="{{10}}"></price>
<price price="{{1}}"></price>
```

### 细体 黑色 删除线 贯通删除线

```html
<price price="{{1}}" type="lighter"></price>
<price price="{{1}}" type="mini"></price>
<price price="{{1}}" type="del"></price>
<price price="{{1}}" type="delthrough"></price>
```

### 美元 无货币符号

```html
<price price="{{1}}" symbol="$"></price>
<price price="{{1}}" symbol=""></price>
```

### 小数部分缩小

```html
<price price="{{1}}" decimalSmaller></price>
```

### 填充保持两位小数

```html
<price price="{{100}}" fill></price>
<price price="{{110}}" fill></price>
<price price="{{101}}" fill></price>
```

### 使用外部样式类控制样式

```html
<price
  price="{{9999}}"
  wr-class="custom-price"
  symbol-class="custom-price__symbol"
  decimal-class="custom-price__decimal"
></price>
```

## API

### wr-price Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ---------------------- | -------- | --------- | ---- |
| price | 金额，单位是`分` | *string\|number* | `success` | - |
| type | 样式类型 |*string* | - | main 粗体, lighter 细体, mini 黑色, del 中划线, delthrough 中划线，包括货币符号 |
| symbol | 货币符号 | *string* | `¥` | - |
| fill | 是否始终保持两位小数 |*boolean* | - | - |
| decimalSmaller | 缩小小数部分字号 | *boolean* | - | - |

### 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 根节点样式类 |
| symbol-class | 货币符号样式类 |
| decimal-class | 小数部分样式类 |

### CSS Var
| 类名 | 说明 | 默认值 |
| --------------- | -------- | ------ |
| --ui-price-display | 价格布局基础 | inline-block |
| --ui-price-color | 价格颜色 | - |
| --ui-price-size | 价格字体大小 | - |
| --ui-price-weight | 价格字体总量 | - |
| --ui-price-decoration | 价格装饰线(text-decoration)设定 | - |
| --ui-price-symbol-color | 价格单位颜色 | inherit |
| --ui-price-symbol-size | 价格单位字体大小 | inherit |
| --ui-price-pprice-margin | 价格单位右方block的margin | 0 0 0 4rpx |
| --ui-price-integer-color | 价格整数颜色 | inherit |
| --ui-price-integer-size | 价格整数字体大小 | inherit |
| --ui-price-decimal-color | 价格浮点数颜色 | inherit |
| --ui-price-decimal-size | 价格浮点数字体大小 | inherit |
npm package: @retailwe/ui-promotion-popup
Description: ## 引入
Latest version: 0.0.21

# 促销弹窗

## 引入

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

## 代码演示

```
  <wr-promotion-popup list="{{activityList}}" bind:closePromotionPopup="closePromotionPopup" show="{{isShowPromotionPop}}"></wr-promotion-popup>
  // Events
  closePromotionPopup() {
    this.setData({
      isShowPromotionPop: false,
    });
  }
  promotionChange(e) {
    const { index } = e.detail;
    console.log('index:', index);
  }
```

#### 入参

| 参数 |   说明   |    类型 | 默认值 | 是否必要 |
| :--- | :------: | ------: | ------ | -------- |
| list | 促销列表 |   Array | []     | 是       |
| show | 显示隐藏 | Boolean | ''     | 否       |
| title | 弹窗标题 | String | '促销说明'     | 否       |

#### list 促销列表说明

| 参数     |     说明     |   类型 | 默认值 | 是否必要 |
| :------- | :----------: | -----: | ------ | -------- |
| tag      |    标签名    | String | ''     | 是       |
| linkText | 跳转按钮文案 | String | ''     | 否       |
| label    |   促销内容   | String | ‘’     | 是       |

#### Events

| 事件                | 是否必要 |               说明 |
| :------------------ | :------: | -----------------: |
| promotionChange     |    是    | 按钮回调, 返回索引 |
| closePromotionPopup |    是    |           弹窗关闭 |

#### 外部样式类

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

#### slot

| name             | 说明         |
| ---------------- | ------------ |
| promotion-bottom | 弹窗底部插槽 |
npm package: @retailwe/ui-rate
Description: ## 引入
Latest version: 0.0.22

# 评分

## 引入

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

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

### 基本用法

```html
<rate bind:onChange="onChange"></rate>
```

### 值设置

stars 数组中五个元素，每个代表一颗星，0 为空，1 为半星，2 为全星

```html
<rate stars="{{[2,2,2,1,0]}}" disabled="{{true}}"></rate>
```

### rate Props

| 参数        | 说明                                     | 类型                                  | 默认值     | 版本   |
| ----------- | ---------------------------------------- | ------------------------------------- | ---------- | ------ |
| i-class      | 自定义 class 类名                        | _string_                              | -          | -      |
| count       | star 总数                                | _number_                              | 默认 5 个  | -      |
| size        | star 图标大小                            | _number_                              | 24         | -      |
| disabled    | 不允许修改                               | _bolean_                              | \*         | false  |
| half        | 是否存在个 半个星星                      | _boolean_                             | false      |
| stars       | []                                       | _ 0 未选中 1 选中半个星星 2 整个星星_ | -          | -      |
| star-icon-cls | 自定义icon              | _string_                              | - xingxing | -      |
| image-icon   | 是否启用图片 icon                        | _boolean_                             | - false    | -      |
| star-half    | imageIcon 设置 true 后，可替换半星图片   | _string_                              | -          | -      |
| star-on      | imageIcon 设置 true 后，可替换整个星图片 | _string_                              | -          | -      |
| star-off     | imageIcon 设置 true 后，可替换空星图片   | _string_                              | -          | -      |

### rate Event

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

### rate 外部样式类

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

# search 搜索框

## 引入

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

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

### 代码演示

```html
<wr-search
  bind:change="onChange"
  bind:clear="onClear"
  keyword="{{key}}"
></wr-search>
```

```js
Page({
  data: {
    key: '',
  },
  onChange: function(e) {
    var value = e.detail.value;
    this.setData({ key: value });
  },
  onClear: function() {
    this.setData({ key: '' });
  },
});
```

### search Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| keyword | 值 | *string* | - | - |
| placeholder | 占位符 | *string* | - | - |
| disabled | 是否为禁用状态 | *boolean* | `false` | - |
| actionText | 自定义右侧cancel文字 | *boolean* | - | - |
| userAction | 是否隐藏右侧cancel文字 | *boolean* | - | - |
| focus | 是否聚焦 | *boolean* | - | - | - |

### search Event

| 事件名      | 说明             | 参数 |
| ----------- | ---------------- | ---- |
| bind:change | 值发生变化时触发 | -    |
| bind:clear  | 点击清除时触发   | -    |
| bind:submit | 点击完成时时触发 | -    |
| bind:cancel  | 点击右侧cancel文字时触发   | -    |
npm package: @retailwe/ui-sidebar
Description: ## 引入
Latest version: 0.0.17

# Sidebar 侧边导航

## 引入

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

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

## 代码演示

### 基础用法

通过在`sidebar`上设置`activeKey`属性来控制选中项

```html
<sidebar active-key="{{ activeKey }}" bind:change="onChange">
  <sidebar-item title="标签名称" />
  <sidebar-item title="标签名称" />
  <sidebar-item title="标签名称" />
</sidebar>
```

```javascript
Page({
  data: {
    activeKey: 0,
  },

  onChange(event) {
    wx.showToast({
      icon: 'none',
      title: `切换至第${event.detail.index}项`,
    });
  },
});
```

### 提示气泡

设置`dot`属性后，会在右上角展示一个小红点。设置`info`属性后，会在右上角展示相应的徽标

```html
<wr-sidebar active-key="{{ activeKey }}">
  <wr-sidebar-item title="标签名称" dot />
  <wr-sidebar-item title="标签名称" info="5" />
  <wr-sidebar-item title="标签名称" info="99+" />
</wr-sidebar>
```

## API

### Sidebar Props

| 参数      | 说明         | 类型               | 默认值 | 版本 |
| --------- | ------------ | ------------------ | ------ | ---- |
| activeKey | 选中项的索引 | _string \| number_ | `0`    | -    |

### Sidebar Event

| 事件名 | 说明           | 参数               |
| ------ | -------------- | ------------------ |
| change | 切换选项时触发 | 当前选中选项的索引 |

### Sidebar 外部样式类

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

### SidebarItem Props

| 参数     | 说明                 | 类型               | 默认值    | 版本    |
| -------- | -------------------- | ------------------ | --------- | ------- |
| title    | 内容                 | _string_           | `''`      | -       |
| disabled | 是否禁用             |                    | _boolean_ | `false` | - |
| dot      | 是否显示右上角小红点 | _boolean_          | `false`   | -       |
| info     | 提示消息             | _string \| number_ | `''`      | -       |

### SidebarItem Event

| 事件名 | 说明           | 参数           |
| ------ | -------------- | -------------- |
| click  | 点击徽章时触发 | 当前徽章的索引 |

### SidebarItem 外部样式类

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

# skeleton 骨架屏

## 引入

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

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

## 代码演示

### 基础用法

通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数

```html
<wr-skeleton title row="3" />
```

### 显示头像

通过`avatar`属性显示头像占位图

```html
<wr-skeleton title avatar row="3" />
```

### 展示子组件

将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件

```html
<wr-skeleton title avatar row="3" loading="loading">
  <view>实际内容</view>
</wr-skeleton>
```

```js
Page({
  data: {
    loading: true,
  },
  onReady() {
    this.setData({
      loading: false,
    });
  },
});
```

## API

### Props

### Props

| 参数         | 说明                                        | 类型                 | 默认值  | 版本 |
| ------------ | ------------------------------------------- | -------------------- | ------- | ---- |
| row          | 段落占位图行数                              | _number_             | `0`     | -    |
| row-width    | 段落占位图宽度，可传数组来设置每一行的宽度  | _string \| string[]_ | `100%`  | -    |
| title        | 是否显示标题占位图                          | _boolean_            | `false` | -    |
| title-width  | 标题占位图宽度                              | _string \| number_   | `40%`   | -    |
| avatar       | 是否显示头像占位图                          | _boolean_            | `false` | -    |
| avatar-size  | 头像占位图大小                              | _string \| number_   | `32px`  | -    |
| avatar-shape | 头像占位图形状，可选值为`square`            | _string_             | `round` | -    |
| loading      | 是否显示占位图，传`false`时会展示子组件内容 | _boolean_            | `true`  | -    |
| animate      | 是否开启动画                                | _boolean_            | `true`  | -    |
npm package: @retailwe/ui-specs-goods-card
Description: ## 引入
Latest version: 0.0.34

# SpecsGoodsCard 带已选规格的商品卡片

## 引入

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

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

## 代码演示

### 基础用法

该组件基于`components\goods-card`组件，透传`components\goods-card`的所有参数，可替代使用。
可参考`\we-retail\src\supermarket\components\order-goods-card`中的用法。

```js
Page({
  data: {
    /** @type { GoodBase } */
    good: {
      thumb: '123123',
      num: 3,
      title: '当季新裤',
      desc: '欧美网红款',
      specs: ['比利时进口', 'L - 180', '长袖', '天蓝'],
      tags: ['双十一', '裤子'],
      price: 20.1 * 100,
      originPrice: 45.2 * 100,

      /** 指定某个key不展示 */
      hideKey: {
        thumbTag: true
      }
    }
  }
})
```

```xml
<wr-specs-goods-card data="{{good}}" />
```

### 自定义样式

本组件在`goods-card`的基础上增加了弹框展示。
*由于组件中有两处使用`goods-card`组件，并且样式不同，页面在通过样式覆盖实现自己的样式时，要注意区分。*

```html
<wr-specs-goods-card
  class="order-goods-card"
  wx:if="{{!hidden}}"
  data="{{good}}"
></wr-specs-goods-card>
```

```less
/* 限定样式覆盖范围，避免同时覆盖了组件中的两处`goods-card` */
/* 限定仅覆盖 .order-goods-card > wr-goods-card 下的goods-card样式 */
.order-goods-card > wr-goods-card {
  .wr-goods-card {
    background-color: white;

    &__thumb {
      width: 140rpx;
      height: 140rpx;
      background-color: white;
    }
    // 更多...
  }
}
```

## API

### Props

*透传`goods-card`需要的属性的属性*，具体参考`goods-card`的README.md

*以下是新增的属性*
| 参数 | 说明 | 类型 | 默认值 | 说明 |
| disable-popup | 禁止弹框 | *boolean* | `false` | - |

### Events

*透传`goods-card`的所有事件*，具体参考`goods-card`的README.md
*以下是新增的事件*
| Event  | Description                   | Arguments |
| ------ | ----------------------------- | --------- |
| specstap  | 点击规格弹框时触发 | - |
| specsopen  | 打开规格弹框时触发 | - |
| specsclose  | 关闭规格弹框时触发 | - |

### 关于样式覆盖

本组件下`external.less`文件是覆盖弹框中的`goods-card`样式，页面less必须直接/间接的引入该文件。

#### 外部样式类透传

`goods-card`所有的`外部样式类`除了`card-class`之外都可以透传，`card-class`被占用了不会透传。
npm package: @retailwe/ui-specs-popup
Description: ## 引入
Latest version: 0.0.30

# SpecsPopup 已选规格弹框

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-specs-popup
  wx:if="{{specsPopup.insert}}"
  show="{{specsPopup.show}}"
  title="{{title}}"
  price="{{price}}"
  thumb="{{thumb}}"
  specs="{{specs}}"
  bindclose="closeSpecsPopup"
  bindcloseover="removeSpecsPopup"
/>
```

## API

### Props

*透传`good-card`需要的属性的属性*，具体参考`good-card`的README.md

*以下是新增的属性*
| 参数 | 说明 | 类型 | 默认值 | 说明 |
| show | 是否显示规格弹框 | *array* | `boolean` | - |
| title | 商品title | *array* | `string` | - |
| price | 商品价格 | *array* | `number \| string` | - |
| thumb | 商品图片 | *array* | `string` | - |
| specs | 规格字符串列表 | *array* | `[]` | - |

### Events

*透传`good-card`的`clickThumb`事件*，具体参考`good-card`的README.md
*以下是新增的事件*
| Event  | Description                   | Arguments |
| ------ | ----------------------------- | --------- |
| close  | 点击我知道了触发，此时可以切换show来关闭弹框，但是不能移除节点，否则看不到关闭动画 | - |
| closeover  | 关闭动画结束时触发，此时可以移除节点而不影响动画 | - |

### 关于样式覆盖

本组件下`external.less`文件是覆盖弹框中的`good-card`样式，页面less必须直接/间接的引入该文件。
npm package: @retailwe/ui-stepper
Description: ## 引入
Latest version: 0.0.21

# stepper 数量选择

## 引入

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

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

## 代码演示

### 基础用法

通过`disabled`属性传入是否禁用
通过`value`属性传入默认数量
通过`min`, `max`上设置数量最大最小值
通过绑定`minus`传入点击减号的事件
通过绑定`plus`传入点击加号的事件
通过绑定`blur`传入输入框失去焦点的事件
通过绑定`overlimit`传入数值超过范围的事件

```html
  <stepper value="{{value}}"
    min="{{min}}"
    max="{{max}}"
    bind:minus="handleMinus"
    bind:plus="handlePlus"
    bind:overlimit="handleOverlimit"
    bind:blur="handleBlur">
  </stepper>

```

``` javascript
Page({
  /**
   * 页面的初始数据
   */
  data: {
    disabled: false,
    min: 3,
    max: 10,
    value: 4,
  },
  handleMinus(e) {
    this.setData({
      value: e.detail.value,
    });
  },
  handlePlus(e) {
    this.setData({
      value: e.detail.value,
    });
  },
  handleOverlimit() {
    console.log('当前数量不符合规范');
  },
  handleBlur(e) {
    this.setData({
      value: e.detail.value,
    });
  },
});

```

## API

### goods-category Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| disabled | 是否禁用 | *Boolean* | `false` | - |
| value | 当前数量值 | *Number* | `0` | - |
| min | 允许最小值 | *boolean* | `0` | - |
| max | 允许最大值 | *infinity* | `0` | - |


### goods-category Event

| 事件名 | 说明 | 参数 |
|------|------|------|
| minus | 点击减号 | 当前值减一 |
| plus | 点击加号 | 当前值加一 |
| blur | 输入框失去焦点 | 当前输入的值 |
| overlimit | 当前值超出范围 | 无 |

### goods-category 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| classname | 根节点样式类 |
npm package: @retailwe/ui-steps
Description: ## 引入
Latest version: 0.0.24

# steps 进度

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-steps
  steps="{{ steps }}"
  active="{{ active }}"
/>
```

```javascript
Page({
  data: {
    steps: [
      {
        title: '步骤一',
        desc: '描述信息'
        icon: 'success',
      },
      {
        title: '步骤二',
        desc: '描述信息'
      },
      {
        title: '步骤三',
        desc: '描述信息'
      },
      {
        title: '步骤四',
        desc: '描述信息'
      }
    ]
  }
});
```

### 自定义样式

可以通过 `active-icon` 和 `active-color` 属性设置激活状态下的图标和颜色

```html
<wr-steps
  steps="{{ steps }}"
  active="{{ active }}"
  active-icon="success"
  active-color="#38f"
/>
```

### 竖向步骤条

可以通过设置`direction`属性来改变步骤条的显示方式

```html
<wr-steps
  steps="{{ steps }}"
  active="{{ active }}"
  direction="vertical"
  active-color="#ee0a24"
/>
```

## API

### Steps Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
| active | 当前步骤 | *number* | 0 | - |
| direction | 显示方向，可选值为 `horizontal` `vertical` | *string* | `horizontal` | - |
| active-color | 激活状态颜色 | *string* | `#07c160` | - |
| inactive-color | 未激活状态颜色 | *string* | `#969799` | - |
| active-icon | 激活状态底部图标名称 | *string* | `checked` | - |
| inactive-icon | 未激活状态底部图标名称 | *string* | - | - |

### 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 根节点样式类 |
| wr-desc | 描述信息样式类 |
npm package: @retailwe/ui-submit-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-submit-bar
  total-amount="{{cartGroupData.totalAmount}}"
  bindsubmit="onSubmit"
/>
<wr-toast id="wr-toast"/>
```

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

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

  onSubmit() {
    Toast({ text: '点击了提交&支付按钮' });
  },
});
```

### 禁用按钮

```html
<wr-submit-bar
  total-amount="{{cartGroupData.totalAmount}}"
  isDisabled="{{true}}"
  bindsubmit="onSubmit"
/>
```

### 固定在页面底部

```html
<wr-submit-bar
  total-amount="{{cartGroupData.totalAmount}}"
  fixed="{{true}}"
  bindsubmit="onSubmit"
/>
```

### cart-bar Props

| 参数      | 说明             | 类型      | 默认值     | 版本 |
| --------- | ---------------- | --------- | ---------- | ---- |
| totalAmount      | 总金额         | _number_ | - | -    |
| disabled      |  是否禁用提交&支付按钮         | _boolean_ | - | -    |
| fixed  | 是否固定在页面底部   | _boolean_  | -     | -    |

### cart-bar Event

| 事件名     | 说明 | 参数 |
| ---------- | ---- | ---- |
| submit | 点击提交&支付按钮触发 | - |
npm package: @retailwe/ui-swiper
Description: ## 引入
Latest version: 0.0.10

# swiper 商品图片展示组件

## 引入

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

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

## 代码演示

### 基础用法

通过`imgSrcs`属性传入多张商品图片

```html
<wr-swiper imgSrcs="{{imgSrcs}}"></wr-swiper>
```

``` javascript
// 模式一
Page({
  data: {
    imgSrcs: [
      'https://inews.gtimg.com/newsapp_bt/0/11292297544/1000',
      'https://inews.gtimg.com/newsapp_bt/0/11292420273/1000',
      'https://inews.gtimg.com/newsapp_bt/0/11292297544/1000',
    ],
  },
  onLoad() {},
  onShow() {},
});
// 模式二
Page({
  data: {
    imgSrcs: [{
      src: 'https://inews.gtimg.com/newsapp_bt/0/11292297544/1000',
      height: 400;
      width: 300
    }
    ],
  },
  onLoad() {},
  onShow() {},
});
```

### 点状指示器

```html
<wr-swiper
  imgSrcs="{{imgSrcs}}"
  mode="dot">
</wr-swiper>
```

### 箭头指示器

```html
<wr-swiper
  imgSrcs="{{imgSrcs}}"
  mode="direction">
</wr-swiper>
```

### 数字指示器

```html
<wr-swiper
  imgSrcs="{{imgSrcs}}"
  mode="number">
</wr-swiper>
```

### 点击全屏查看

```html
<wr-swiper
  imgSrcs="{{imgSrcs}}"
  full-screen="{{isFullScreen}}"
  bindtap="onSwiperTap">
</wr-swiper>
```

```ts
Page({
  data: {
    imgSrcs: [
      'https://inews.gtimg.com/newsapp_bt/0/11292297544/1000',
      'https://inews.gtimg.com/newsapp_bt/0/11292420273/1000',
    ],
    isFullScreen: false,
  },
  onSwiperTap() {
    this.setData({
      'isFullScreen': !this.data.isFullScreen,
    });
  },
});
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 | 说明 |
|-----------|-----------|-----------|-------------|-------------|
| imgSrcs | 商品图片地址数组 | *array* | `[]` | - |
| duration | 滑动动画时长| *number* | `500` | - |
| autoplay | 是否自动切换 | *boolean* | `false` | - |
| interval | 自动切换时间间隔 | *number* | `5000` | - |
| circular | 是否采用衔接滑动（循环）| *boolean* | `true` | - |
| mode | 面板指示类型 | *string* | '' | 点-'dot'、数字-'number'、左右-'direction' |
| dots | 指示点数组，仅当`mode`为`dot`时有效 | *array* | - | 数组结构为`{type: string, value: string}`, type可选值`img`/`icon`/`text` |
| current | 当前展示图片的索引 | *number* | `0` | - |
| maxHeight | swiper最大高度 | *number* | `300` | 单位是rpx |
| imageMode | 图片填充模式，参考原生`image`的mode属性 | *string* | `aspectFill` | - |
| fullScreen | 是否全屏展示 | *boolean* | `false` | - |

### Events

| 事件名 | 说明 | 回调参数 |
|------|------|------|
| tapImage | 点击图片时触发 | `index`，被点击的图片索引 |
| change | 图片切换时触发 | `index`，切换后显示的图片索引 |

### 外部样式类

| 类名 | 说明 |
|-----------|-----------|
| wr-class | 根节点外部样式类 |
| wr-dot-class | 指示点样式 |
| wr-dot-active-class | 指示点激活时的样式 |
npm package: @retailwe/ui-swiper-cell
Description: ## 引入
Latest version: 0.0.21

# swiper-cell 可滑动单元格

## 引入

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

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

## 代码演示

### 基础用法

```html
<wr-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
  <view slot="left">选择</view>
  <wr-cell-group>
    <wr-cell title="单元格" value="内容" />
  </wr-cell-group>
  <view slot="right">删除</view>
</wr-swipe-cell>
```

### 异步关闭

当开启`async-close`时， 通过绑定`close`事件，可以自定义两侧滑动内容点击时的关闭行为

```html
<wr-swipe-cell id="swipe-cell" right-width="{{ 65 }}" left-width="{{ 65 }}" async-close bind:close="onClose">
  <view slot="left">选择</view>
  <wr-cell-group>
    <wr-cell title="单元格" value="内容" />
  </wr-cell-group>
  <view slot="right">删除</view>
</wr-swipe-cell>
```

```js
Page({
  onClose(event) {
    const { position, instance } = event.detail;
    switch (position) {
      case 'left':
        Dialog.alert({
          message: '选择成功'
        }).then(() => {
          instance.close();
        });
        break;
      case 'cell':
        instance.close();
        break;
      case 'right':
        Dialog.confirm({
          message: '确定删除吗？'
        }).then(() => {
          instance.close();
        }).catch(() => { console.log('取消删除'); });
        break;
    }
  }
});
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 标识符，可以在 close 事件的参数中获取到 | *string \| number* | - | - |
| left-width | 左侧滑动区域宽度 | *number* | `0` | - |
| right-width | 右侧滑动区域宽度 | *number* | `0` | - |
| async-close | 是否异步关闭 | *boolean* | `false` | - |
| disabled | 是否禁用滑动 | *boolean* | `false` | 1.3.4 |

### Slot

| 名称 | 说明 |
|------|------|
| - | 自定义显示内容 |
| left | 左侧滑动内容 |
| right | 右侧滑动内容 |

### Events

| 事件名 | 说明 | 参数 |
|------|------|------|
| click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) |

### close 参数

| 参数 | 类型 | 说明 |
|------|------|------|
| position | *string* | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
| instance | *object* | SwipeCell 实例 |
| name | 标识符 | *string* |

### 方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

| 方法名 | 参数 | 返回值 | 介绍 |
|------|------|------|------|
| open | position: `left | right` | - | 打开单元格侧边栏 |
| close | - | - | 收起单元格侧边栏 |
npm package: @retailwe/ui-switch
Description: ## 引入
Latest version: 0.0.16

# switch 开关

## 引入

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

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

### 代码演示

```html
<wr-switch
  value="{{value}}"
  min="{{min}}"
  max="{{max}}"
  bind:minus="handleMinus"
  bind:plus="handlePlus"
  bind:overlimit="handleOverlimit"
  bind:blur="handleBlur"
></wr-switch>
```

```js
Page({
  data: {
    disabled: false,
    min: 3,
    max: 10,
    value: 4,
  },
  handleMinus: function(e) {
    this.setData({
      value: e.detail.value,
    });
  },
  handlePlus: function(e) {
    this.setData({
      value: e.detail.value,
    });
  },
  handleOverlimit: function() {
    console.log('当前数量不符合规范');
  },
  handleBlur: function(e) {
    this.setData({
      value: e.detail.value,
    });
  },
});
```

### switch Props

| 参数   | 说明              | 类型     | 默认值 | 版本 |
| ------ | ----------------- | -------- | ------ | ---- |
| iClass | 自定义 class 类名 | _string_ | -      | -    |
| disabled | 是否禁用 | boolean | _false_ | - | - |
| color |  自定义颜色 |string | - | - |
| size | 大小，有效值：`s`, `m`, `l`  | string | `l` | - |
| checked | 是否选中 | boolean | false | - | - |


### switch Event

| 事件名 | 说明       | 参数 |
| ------ | ---------- | ---- |
| change | 组件改变时触发 | -    |
npm package: @retailwe/ui-tab
Description: ## 引入
Latest version: 0.0.21

# tab 顶部导航

## 引入

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

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

}
```

## 代码演示

### 基础用法

通过`tabList`属性传入 tab 项 tab 项为对象, text 设置文本, key 设置对应 tab 标识;
通过在`status`属性来初始化选中项

```html
<wr-tab
  status="{{status}}"
  bind:tabChange="tabChange"
  tabList="{{list}}"
  isScroll="{{true}}"
/>
```

```javascript
Page({
  data: {
    status: 0,
    list: [
      {
        text: '全部',
        key: 0,
      },
      {
        text: '待付款',
        key: 1,
      },
      {
        text: '待取货',
        key: 2,
      },
      {
        text: '已完成',
        key: 3,
      },
    ],
  },

  tabChange(e) {
    this.setData({
      status: e.detail,
    });
  },
});
```

## API

### tab Props

| 参数     | 说明                      | 类型      | 默认值 | 版本 |
| -------- | ------------------------- | --------- | ------ | ---- |
| tabList  | tab 数据                  | _array_   | `[]`   | -    |
| status   | 选中项的索引              | _number_  | `0`    | -    |
| isScroll | 配置 tab 是否支持横向滑动 | _boolean_ | `true` | -    |
| color  | 默认颜色            | _string_   | -   | -    |
| lineColor  | 激活颜色            | _string_   | -   | -    |
| lineHeight   | 激活底部线条高度            | _number_  | -   | -    |
| lineWidth |激活底部线条宽度 | _boolean_ | _number_ | -    |

*`tabList`属性声明*

```ts
interface TabList {
  [index: number]: {
    key: number | string; // 每个对象的唯一值，用于锁定当前选中的对象
    text: string; // tab文案
    dot?: boolean; // 是否显示红点角标，为true时info属性无效
    info?: number | string; // 角标内容
  };
}
```

### tab Event

| 事件名    | 说明           | 参数               |
| --------- | -------------- | ------------------ |
| tabChange | 切换选项时触发 | 当前选中选项的索引 |