address-item 地址项

使用效果

正常效果

向左扫动

外部自定义样式

引入方法

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

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

使用方法

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

/* 脚本文件 */
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覆盖生效。