附上本人网上搜索到的省市区格式的js：(自己去百度妈妈搜一个
)
let Area
=
{
"result"
:
[
{
"city"
:
[
{
"area"
:
[
{
"name"
:
"东城区"
,
"id"
:
37
},
{
"name"
:
"西城区"
,
"id"
:
38
},
{
"name"
:
"朝阳区"
,
"id"
:
41
},
{
"name"
:
"丰台区"
,
"id"
:
42
},
{
"name"
:
"石景山区"
,
"id"
:
43
},
{
"name"
:
"海淀区"
,
"id"
:
44
},
{
"name"
:
"门头沟区"
,
"id"
:
45
},
{
"name"
:
"房山区"
,
"id"
:
46
},
{
"name"
:
"通州区"
,
"id"
:
47
},
{
"name"
:
"顺义区"
,
"id"
:
48
},
{
"name"
:
"昌平区"
,
"id"
:
49
},
{
"name"
:
"大兴区"
,
"id"
:
50
},
{
"name"
:
"怀柔区"
,
"id"
:
51
},
{
"name"
:
"平谷区"
,
"id"
:
52
}
],
"name"
:
"北京市"
,
"id"
:
36
},
{
"area"
:
[
{
"name"
:
"密云县"
,
"id"
:
53
},
{
"name"
:
"延庆县"
,
"id"
:
54
}
],
"name"
:
"县"
,
"id"
:
5030
}
],
"name"
:
"北京"
,
"id"
:
1
},
{
"city"
:
[.............................
wxml页面：
<!--pages/my/address/addressAdd.wxml-->
<
view
class=
"add-address"
>
<
view
class=
"add-form"
bindsubmit=
"formSubmit"
>
<
view
style=
"display:none;"
>
<
input
class=
""
name=
"id"
value=
"{{id}}"
/
></
view
>
<
view
class=
"form-item"
>
<
input
class=
"input"
name=
"name"
bindinput=
"bindinputName"
value=
"{{name}}"
placeholder=
"姓名"
auto-focus
/
>
</
view
>
<
view
class=
"form-item"
>
<
input
class=
"input"
name=
"mobile"
bindinput=
"bindinputMobile"
value=
"{{mobile}}"
placeholder=
"手机号码"
/
>
</
view
>
<
view
class=
"form-item"
bindtap=
"openPickerView"
>
<
input
class=
"input"
wx:if=
"{{!district}}"
value=
"{{district}}"
placeholder=
"省份、城市、区县"
/
>
<
input
class=
"input"
wx:if=
"{{district}}"
value=
"{{district}}"
/
>
</
view
>
<
view
class=
"form-item"
>
<
input
class=
"input"
name=
"detailAddress"
bindinput=
"bindinputDetailAddress"
value=
"{{detailAddress}}"
placeholder=
"详细地址: 如街道、楼盘号等"
/
>
</
view
>
<
view
class=
"form-default"
>
<
icon
class=
"icon-default"
type=
"{{is_default?'success':'circle'}}"
size=
"18"
bindtap=
"bindIsDefault"
></
icon
>
<
text
>设为默认地址
</
text
>
</
view
>
<
view
class=
"btns"
>
<
button
class=
"cannel"
bindtap=
"cancelAddress"
>取消
</
button
>
<
button
class=
"save"
bindtap=
'saveAddress'
>保存
</
button
>
</
view
>
</
view
>
<!--省市区三级联动-->
<
view
wx:if=
"{{showPickerView}}"
class=
"picker-view-container"
>
<
view
class=
"picker-view-title"
>
<
text
style=
"margin-left:10rpx"
bindtap=
"closePickerView"
>取消
</
text
>
<
text
>选择地址
</
text
>
<
text
style=
"margin-right:10rpx"
bindtap=
"confirmPickerView"
>确定
</
text
>
</
view
>
<
picker-view
class=
"area-picker-view"
indicator-class=
"area-indicator-class"
value=
"{{value}}"
bindchange=
"bindChange"
>
<
picker-view-column
>
<
view
wx:for=
"{{provArr}}"
wx:key=
"id"
class=
"picker-view-column"
>{{item.name}}
</
view
>
</
picker-view-column
>
<
picker-view-column
>
<
view
wx:for=
"{{cityArr}}"
wx:key=
"id"
class=
"picker-view-column"
>{{item.name}}
</
view
>
</
picker-view-column
>
<
picker-view-column
>
<
view
wx:for=
"{{areaArr}}"
wx:key=
"id"
class=
"picker-view-column"
>{{item.name}}
</
view
>
</
picker-view-column
>
</
picker-view
>
</
view
>
</
view
>
js页面：
// pages/my/address/addressAdd.js
const AreaData
=
require
(
"../../../utils/Area.js"
);
Page
({
/**
* 页面的初始数据
*/
data
:
{
id
:
0
,
//地址id
name
:
''
,
//姓名
mobile
:
''
,
//手机号
district
:
''
,
//区域
detailAddress
:
''
,
//详细地址
is_default
:
false
,
//是否为默认
provId
:
''
,
//省ID
cityId
:
''
,
//市ID
areaId
:
''
,
//区ID
showPickerView
:
false
,
//控制省市区三级联动显隐
value
:
[
0
,
0
,
0
],
tempValue
:
[
0
,
0
,
0
],
provArr
: AreaData
.result
,
//省数组
cityArr
: AreaData
.result
[
0
].city
,
//市数组
areaArr
: AreaData
.result
[
0
].city
[
0
].area
,
//区数组
numType
:
''
,
//接口类型 0新增 1更新
},
/**
* 生命周期函数--监听页面加载
*/
onLoad
:
function
(options
)
{
wx
.setNavigationBarTitle
({
title
: options
.navbartitle
,
});
let that
=
this
;
that
.setData
({
numType
: options
.numType
});
console
.log
(
'options'
, options
);
if
(options
.numType
==
1
)
{
let addressData
= JSON
.parse
(options
.addressData
);
that
.saveAddressData
(addressData
);
}
},
/*saveAddressData(addressData) {
let ProvArr = AreaData.result;
let valArr = [];
for (let i = 0; i < ProvArr.length; i++) { // 遍历省数组
console.log(ProvArr[i].id); // 找到省对应的id
if (ProvArr[i].id == addressData.province) {
let provName = ProvArr[i].name; //提取对应省名
valArr.push(i); // 提取对应省名在数组中对应的id
let cityArr = ProvArr[i].city; // 提取对应省名下的城市数组
console.log('provName:', provName);
console.log('valArr:', valArr);
for (let j = 0; j < ProvArr[i].city.length; j++) { // 遍历对应省名下的城市数组
//console.log("cityId", ProvArr[i].city[j].id);
if (ProvArr[i].city[j].id == addressData.city) { // 找到市对应的id
let cityName = ProvArr[i].city[j].name; // 提取对应市名
valArr.push(j); // 提取对应市名在数组中对应的id
let areaArr = ProvArr[i].city[j].area; // 提取对应市名下的区数组
console.log('cityName:', cityName);
console.log('valArr:', valArr);
for (let k = 0; k < ProvArr[i].city[j].area.length; k++) { // 遍历对应市名下的区数组
//console.log('areaId', ProvArr[i].city[j].area[k].id);
if (ProvArr[i].city[j].area[k].id == addressData.region) { // 找到区对应的id
let areaName = ProvArr[i].city[j].area[k].name; // 提取对应区名
valArr.push(k); // 提取对应区名在数组中对应的id
console.log('areaName:', areaName);
console.log('valArr:', valArr);
let addressName = provName + cityName + areaName;
this.setData({
name: addressData.name,
mobile: addressData.buyerPhone,
detailAddress: addressData.address,
district: addressName,
value: valArr,
cityArr: cityArr,
areaArr: areaArr,
provId: addressData.province,
cityId: addressData.city,
areaId: addressData.region,
is_default: addressData.is_default == 1 ? true : false
})
}
}
}
}
}
}
},*/
bindinputName
(e
)
{
//姓名
this
.setData
({name
:e
.detail
.value
});
console
.log
(
"姓名："
, e
);
},
bindinputMobile
(e
)
{
//手机号
this
.setData
({mobile
: e
.detail
.value
})
console
.log
(
'手机号'
, e
)
},
//三级联动触发方法
bindChange
:
function
(e
)
{
let val
= e
.detail
.value
if
(val
[
0
]
!=
this
.data
.tempValue
[
0
])
{
val
=
[val
[
0
],
0
,
0
]
}
if
(val
[
1
]
!=
this
.data
.tempValue
[
1
])
{
val
=
[val
[
0
], val
[
1
],
0
]
}
console
.log
(
'bindChange:'
, val
);
this
.setData
({
tempValue
: val
,
value
: val
,
cityArr
: AreaData
.result
[val
[
0
]].city
,
areaArr
: AreaData
.result
[val
[
0
]].city
[val
[
1
]].area
,
})
},
//打开 省市区三级联动
openPickerView
()
{
//确定
this
.setData
({ showPickerView
:
true
});
},
//关闭 省市区三级联动
closePickerView
()
{
//取消
this
.setData
({ showPickerView
:
false
});
},
//省市区三级联动 确定
confirmPickerView
()
{
let val
=
this
.data
.value
;
let provName
= AreaData
.result
[val
[
0
]].name
;
let cityName
= AreaData
.result
[val
[
0
]].city
[val
[
1
]].name
;
let areaName
= AreaData
.result
[val
[
0
]].city
[val
[
1
]].area
[val
[
2
]].name
;
var addressName
= provName
+ cityName
+ areaName
;
let provId
= AreaData
.result
[val
[
0
]].id
;
let cityId
= AreaData
.result
[val
[
0
]].city
[val
[
1
]].id
;
let areaId
= AreaData
.result
[val
[
0
]].city
[val
[
1
]].area
[val
[
2
]].id
;
this
.setData
({
district
: addressName
,
provId
: provId
,
cityId
: cityId
,
areaId
: areaId
,
showPickerView
:
false
,
})
},
//详细地址
bindinputDetailAddress
(e
)
{
this
.setData
({ detailAddress
:e
.detail
.value
})
console
.log
(
'详细地址'
, e
)
},
//设为默认地址 true为默认
bindIsDefault
()
{
//let that =this;
this
.setData
({ is_default
:
!
this
.data
.is_default
});
},
cancelAddress
()
{
//取消
/* wx.navigateBack();*/
wx
.navigateBack
({
delta
:
1
,
// 回退前 delta(默认为1) 页面
})
},
saveAddress
(){
//保存
var content
=
''
;
var that
=
this
;
var flag
=
false
;
let addressData
= that
.data
;
console
.log
(
"保存对象："
, addressData
)
console
.log
(
"保存对象姓名："
, addressData
.name
)
if
(addressData
.name
==
''
)
{
wx
.showModal
({
title
:
'提示'
,
content
:
'请输入姓名'
,
})
return
false
;
}
else
if
(addressData
.mobile
==
''
)
{
wx
.showModal
({
title
:
'提示'
,
content
:
'请输入手机号码'
,
})
return
false
;
}
else
if
(!(/^1(3|4|5|7|8)\d{9}$/
.test
(addressData
.mobile
)))
{
wx
.showModal
({
title
:
'提示'
,
content
:
'手机号格式不正确'
,
})
return
false
;
}
else
if
(addressData
.district
==
''
)
{
wx
.showModal
({
title
:
'提示'
,
content
:
'请输入省市区'
,
})
return
false
;
}
else
if
(addressData
.detailAddress
==
''
)
{
wx
.showModal
({
title
:
'提示'
,
content
:
'请输入详细地址'
,
})
return
false
;
}
else
{
flag
=
true
;
console
.log
(
'form发生了submit事件，携带数据为：'
, val
)
that
.request
(api
.saveAddress
,
{
id
: addressData
.id
,
//id
name
: addressData
.name
,
//姓名
mobile
: addressData
.mobile
,
//手机号
district
: addressData
.district
,
//区域
detailAddress
: addressData
.detailAddress
,
//详细地址
is_default
: addressData
.is_default
,
//是否为默认
},
'POST'
).then
(
function
(res
)
{
if
(res
.errno
===
0
)
{
wx
.navigateTo
({
url
:
'/pages/my/address/address'
,
})
}
});
}
return
true
;
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide
:
function
()
{
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload
:
function
()
{
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh
:
function
()
{
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom
:
function
()
{
},
/**
* 用户点击右上角分享
*/
onShareAppMessage
:
function
()
{
}
})
wxml页面的样式自己写吧！练练自己的样式基础还是不错的
之后的跳转页面还没写完，唉！手疼抽筋了...