微信小程序 ecshop地址三级联动实现实例代码
微信小程序ecshop地址3级联动实现实例代码
picker标签，官方给出的实例：
<viewclass="section">
<viewclass="section__title">地区选择器</view>
<pickerbindchange="bindPickerChange"value="{{index}}"range="{{array}}">
<viewclass="picker">
当前选择：{{array[index]}}
</view>
</picker>
</view>
Page({
data:{
array:['美国','中国','巴西','日本'],
index:0,
},
bindPickerChange:function(e){
console.log('picker发送选择改变，携带值为',e.detail.value)
this.setData({
index:e.detail.value
})
},
})
wxml页面：
<viewclass="add-listunder-line">
<viewclass="add-lab">收货地址</view>
<viewclass="add-text">
<pickerclass="w-3"bindchange="bindPickerProvince"value="{{provinceIndex}}"range="{{province}}">
<viewclass="picker">{{province[provinceIndex]}}</view>
</picker>
<pickerclass="w-3"bindchange="bindPickerCity"value="{{cityIndex}}"range="{{city}}">
<viewclass="picker">{{city[cityIndex]}}</view>
</picker>
<pickerclass="w-3"bindchange="bindPickerDistrict"value="{{districtIndex}}"range="{{district}}">
<viewclass="picker">{{district[districtIndex]}}</view>
</picker>
</view>
</view>
js页面：
varapp=getApp()
Page({
data:{
motto:'jxcat',
serverUrl:app.globalData.ajaxUrl,
baseUrl:app.globalData.baseUrl,
title:"收货地址",
address_id:"",
address:"",
province:[],
province_id:[],//后台返回的数据对应region_idcity,district与此相同
province_name:[],//后台返回的数据对应region_name
provinceIndex:0,//wxml页面选择的选项，从0开始
provinceId:0,//根据wxml页面选择的选项获取到province_id:[]对应的region_id
city:[].
city_id:[],
city_name:[],
cityIndex:0,
cityId:0,
district:[],
district_id:[],
district_name:[],
districtIndex:0,
districtId:0,
},
onLoad:function(options){
//页面初始化options为页面跳转所带来的参数
varthat=this
varget_data
wx.checkSession({
success:function(){
//登录态未过期
wx.getStorage({
key:'wcx_session',
success:function(sres){
get_data={
m:'api',
c:'user',
a:'edit_address',
wcx_session:sres.data,
}
if(options.act=='edit'){
get_data={
m:'api',
c:'user',
a:'edit_address',
id:options.id,
wcx_session:sres.data,
}
}
wx.request({
url:app.globalData.ajaxUrl,
data:get_data,
header:{
'content-type':'application/json'
},
success:function(res){
if(options.act=="edit"){
that.data.provinceId=res.data.consignee.province
that.data.cityId=res.data.consignee.city
that.data.districtid=res.data.consignee.district
}
for(vari=0;i<res.data.province_list.length;i++){{
that.data.province_id[i]=res.data.province_list[i].region_id//把region_id存入province_id
that.data.province_name[i]=res.data.province_list[i].region_name//把region_name存入province_name
if(res.data.consignee.province==res.data.province_list[i].region_id){
that.data.provinceIndex=i
}
}}
for(vari=0;i<res.data.city_list.length;i++){{
that.data.city_id[i]=res.data.city_list[i].region_id
that.data.city_name[i]=res.data.city_list[i].region_name
if(res.data.consignee.city==res.data.city_list[i].region_id){
that.data.cityIndex=i
}
}}
for(vari=0;i<res.data.district_list.length;i++){{
that.data.district_id[i]=res.data.district_list[i].region_id
that.data.district_name[i]=res.data.district_list[i].region_name
if(res.data.consignee.district==res.data.district_list[i].region_id){
that.data.districtIndex=i
}
}}
that.data.address_id=options.id
that.setData({
consignee:res.data.consignee,
province:that.data.province_name,
provinceIndex:that.data.provinceIndex,
city:that.data.city_name,
cityIndex:that.data.cityIndex,
district:that.data.district_name,
districtIndex:that.data.districtIndex
})
}
})
//request
}
})
},
fail:function(){
//登录态过期
wx.login()
}
})
},
bindPickerProvince:function(event){
varthat=this
vargetId=event.detail.value//获取到wxml选择的选项对应的下标，从0开始
that.data.provinceId=that.data.province_id[getId]//根据获取到的下标获取到region_name对应的region_id
wx.request({
url:app.globalData.ajaxUrl,
data:{
m:'api',
c:'public',
a:'region',
rtype:2,
rparent:that.data.provinceId,
},
header:{
'content-type':'application/json'
},
success:function(res){
for(vari=0;i<res.data.regions.length;i++){{
that.data.city_id[i]=res.data.regions[i].region_id
that.data.city_name[i]=res.data.regions[i].region_name
}}
that.setData({
city:that.data.city_name,
provinceIndex:getId,
})
},
})
},
bindPickerCity:function(event){
varthat=this
vargetId=event.detail.value
that.data.cityId=that.data.city_id[getId]
wx.request({
url:app.globalData.ajaxUrl,
data:{
m:'api',
c:'public',
a:'region',
rtype:3,
rparent:that.data.cityId,
},
header:{
'content-type':'application/json'
},
success:function(res){
for(vari=0;i<res.data.regions.length;i++){{
that.data.district_id[i]=res.data.regions[i].region_id
that.data.district_name[i]=res.data.regions[i].region_name
}}
that.setData({
district:that.data.district_name,
cityIndex:getId,
})
},
})
},
bindPickerDistrict:function(event){
varthat=this
vargetId=event.detail.value
that.data.districtId=that.data.district_id[getId]
that.setData({
districtIndex:getId,
})
},
formSubmit:function(event){
varthat=this
wx.checkSession({
success:function(){
//登录态未过期
wx.getStorage({
key:'wcx_session',
success:function(sres){
wx.request({
url:app.globalData.ajaxUrl,
data:{
m:'api',
c:'user',
a:'add_address',
address_id:that.data.address_id,
province:that.data.provinceId,//wxml页面选择的地址对应的region_id
city:that.data.cityId,
district:that.data.districtId,
address:event.detail.value.address,
consignee:event.detail.value.consignee,
mobile:event.detail.value.mobile,
zipcode:event.detail.value.zipcode,
wcx_session:sres.data,
},
header:{
'content-type':'application/json'
},
success:function(res){
console.log(res)
wx.redirectTo({
url:'address'
})
}
})
//request
}
})
},
fail:function(){
//登录态过期
wx.login()
}
})
},
})
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！