address-edit 地址编辑
引入
全局引入,在 miniprogram 根目录下的app.json
中配置,局部引入,在需要引入的页面或组件的index.json
中配置。
// app.json 或 index.json
"usingComponents": {
"wr-address-edit": "@retailwe/ui-address-edit/index",
}
代码演示
基础用法
<!-- 使用内置地区选择组件 -->
<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>
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 | 目前仅在激活提交按钮颜色设置时使用 |