npm package: @retailwe/ui-address-edit
Description: ## 引入
Latest version: 0.0.30

# address-edit 地址编辑

## 引入

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

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

### 代码演示

### 基础用法

```html
<!-- 使用内置地区选择组件 -->
<wr-address-edit
  areaData="{{areaData}}"
  locationState="{{formValidState}}"
  bind:triggerPickerVisible="triggerPickerVisible"
  bind:addressParse="addressParse"
  bind:formSubmit="formSubmit">
</wr-address-edit>


<!-- 使用自定义地区选择组件 -->
<wr-address-edit
  isCustomArea="{{true}}"
  locationState="{{formValidState}}"
  bind:triggerPickerVisible="triggerPickerVisible"
  bind:addressParse="addressParse"
  bind:formSubmit="formSubmit">
  <wr-area-picker
    slot="areapicker"
    show="{{areaPickerVisible}}"
    value="{{formValidState.districtCode}}"
    columns="{{3}}"
    area-data="{{areaData}}"
    title="选择地区"
    columns="{{3}}"
    bindconfirm="onConfirm" />
</wr-address-edit>
```

```js
Page({
  data: {
    areaData: [
      {
        name: '北京市',
        code: '110000',
        children: [
          {
            name: '北京市',
            code: '110100',
            children: [
              {
                name: '东城区',
                code: '110101',
                children: null,
              },
              {
                name: '西城区',
                code: '110102',
                children: null,
              },
              {
                name: '朝阳区',
                code: '110105',
                children: null,
              },
              {
                name: '丰台区',
                code: '110106',
                children: null,
              },
              {
                name: '石景山区',
                code: '110107',
                children: null,
              },
              {
                name: '海淀区',
                code: '110108',
                children: null,
              },
              {
                name: '门头沟区',
                code: '110109',
                children: null,
              },
              {
                name: '房山区',
                code: '110111',
                children: null,
              },
              {
                name: '通州区',
                code: '110112',
                children: null,
              },
              {
                name: '顺义区',
                code: '110113',
                children: null,
              },
              {
                name: '昌平区',
                code: '110114',
                children: null,
              },
              {
                name: '大兴区',
                code: '110115',
                children: null,
              },
              {
                name: '怀柔区',
                code: '110116',
                children: null,
              },
              {
                name: '平谷区',
                code: '110117',
                children: null,
              },
              {
                name: '密云区',
                code: '110118',
                children: null,
              },
              {
                name: '延庆区',
                code: '110119',
                children: null,
              },
            ],
          },
        ],
      },
      {
        name: '天津市',
        code: '120000',
        children: [
          {
            name: '天津市',
            code: '120100',
            children: [
              {
                name: '和平区',
                code: '120101',
                children: null,
              },
              {
                name: '河东区',
                code: '120102',
                children: null,
              },
              {
                name: '河西区',
                code: '120103',
                children: null,
              },
              {
                name: '南开区',
                code: '120104',
                children: null,
              },
              {
                name: '河北区',
                code: '120105',
                children: null,
              },
              {
                name: '红桥区',
                code: '120106',
                children: null,
              },
              {
                name: '东丽区',
                code: '120110',
                children: null,
              },
              {
                name: '西青区',
                code: '120111',
                children: null,
              },
              {
                name: '津南区',
                code: '120112',
                children: null,
              },
              {
                name: '北辰区',
                code: '120113',
                children: null,
              },
              {
                name: '武清区',
                code: '120114',
                children: null,
              },
              {
                name: '宝坻区',
                code: '120115',
                children: null,
              },
              {
                name: '滨海新区',
                code: '120116',
                children: null,
              },
              {
                name: '宁河区',
                code: '120117',
                children: null,
              },
              {
                name: '静海区',
                code: '120118',
                children: null,
              },
              {
                name: '蓟州区',
                code: '120119',
                children: null,
              },
            ],
          },
        ],
      },
    ],
     formValidState: {
      labelIndex: null,
      addressId: '',
      addressTag: '',
      cityCode: '',
      cityName: '',
      countryCode: '',
      countryName: '',
      detailAddress: '',
      districtCode: '',
      districtName: '',
      isDefault: 2, // 1默认地址 2 是 否
      name: '',
      phone: '',
      provinceCode: '',
      provinceName: '',
      codes: [],
      city: '',
      isEdit: false, //  是否编辑
      submitActive: false,
      isOrderDetail: false,
      isOrderSure: false,
    },
    areaPickerVisible: false,
  },
  formSubmit(e) {
    console.log('点击了保存', e.detail);
  },
  triggerPickerVisible(e) {
    this.areaPickerVisible = true
  },
  addressParse(e) {
    console.log('解析地址', e.detail);
  },
  onConfirm (e) {
    console.log('已选择地址', e.detail);
  }
});
```


### 数据参数说明

| 参数         | 类型               | 说明                                                 |
| ------------ | ------------------ | ---------------------------------------------------- |
| locationState | Object`<StateProps>` | 地址信息数据 |
| isCustomArea | boolean                                          | 是否通过slot使用自定义地区选择组件，默认值：false |
| areaData？ | Array<`areaProps`> | 使用内置地区选择组件有效，地区参数列表，默认值：[] |
| columns | number | 使用内置地区选择组件有效，级联选择参数，默认值：3 |


`StateProps`接口说明 --- 默认数据为新建空白数据

| 属性       | 类型         | 说明              |
| ---------- | ------------ | ----------------- |
| name | string | 收货人姓名，默认值: '' |
| phone | string \| number | 收货人手机号，默认值: '' |
| labelIndex | number \| null \| string | 选中标签下标，默认值: null |
| addressTag | string | 选中标签名称，默认值:  '' |
| addressId | string \| number | 地址信息Id，默认值:  '' |
| countryCode | string \| number | 国家Code，默认值:  '' |
| countryName | string | 国家名称，默认值:  '' |
| provinceCode | string \| number | 省-直辖市-自治区Code，默认值:  '' |
| provinceName | string | 省-直辖市-自治区名称，默认值:  '' |
| cityCode | string \| number | 城市Code，默认值:  '' |
| cityName | string | 城市名称，默认值:  '' |
| districtCode | string \| number | 区县Code，默认值:  '' |
| districtName | string | 区县名称，默认值:  '' |
| isDefault | number |默认地址 1：是 2：否，默认值：2 |
| detailAddress | string| 详细地址，默认值:  '' |
| isEdit | boolean| 是否编辑，默认值:  false |
| submitActive | boolean| 是否激活提交按钮，默认值:  false |
| isOrderDetail | boolean| 未使用-预留字段，默认值:  false |
| isOrderSure | boolean|  未使用-预留字段，默认值:  false |



`areaProps`接口说明
| 属性       | 类型         | 说明              |
| ---------- | ------------ | ----------------- |
| name | string| 地区名称 |
| code | string| 地区Code |
| children | Array<`areaProps`> |   |


### 事件参数说明

| 参数    | 类型                                             | 说明 |
| ---------- | ------------------------------------------------ | ---- |
| formSubmit | 点击触发自动接收一个参数，包含表单填写的地址信息 | e: { detail } |
| addressParse | 通过腾讯地图确定数据，触发解析函数               | e: { detail: {name, address} } |
| triggerPickerVisible？ | 点击触发自定义地区选择组件，通过slot使用自定义地区选择组件时必传 | e |

### 外部样式类

| 类名               | 说明             |
| ------------------ | ---------------- |
| theme-wrapper-class | 目前仅在激活提交按钮颜色设置时使用|