@retailwe/ui-address-card

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