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

引入

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

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

代码演示

尚未选择收货地址

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

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

已选收货地址

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

已选择默认收货地址

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

address-card Prop

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

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 | 根节点样式类 |