@retailwe/ui-logistics-info v0.0.13

logistics-info 物流节点信息

引入

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

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

代码演示

基础用法

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

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(),
    });
  },
});

反向

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

自定义样式

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

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

API

Steps Props

外部样式类