小程序仿某东三级联动选择地址和搜索提示

小程序仿某东三级联动选择地址和搜索提示

调用腾讯地图小程序sdk三个接口

三级联动

map.getCityList 来获取全部的城市,返回三个数组包括省市区
map.getDistrictByCityId来根据城市的id来返回下级城市列表,
注意事项。 点击城市列表的时候需要给城市添加一个属性来展示选中和点击已经选中地址的来判断是第一次查询还是第二次查询
项目需要还要判断下选择的是不是直辖市,
三级联动的时候保存下省市区,坐标,
搜索提示的需要传省市,
搜素提示点击的时候覆盖下省市区和坐标 
onLoad: function (options) {
map.getCityList({
success: function (res) {
if (res.status == 0) {
_this.setData({
cityList: res.result[0]
})
} else {
console.log(‘未获取到数据‘)
}
}
})
},
onShow: function () {

},
nameInput: function (e) {
this.setData({
name: e.detail.value
});
},
tapgender(e) {
this.setData({
gender: e.currentTarget.dataset.id
})
},

phoneInput: function (e) {
this.setData({
phoneNumber: e.detail.value
});
},

addressInput: function (e) {
let _t = this
clearTimeout(t)
t = setTimeout(() => { _t.serachkeywords(e.detail.value) }, 200)
this.setData({
houseNum: e.detail.value
});
},
serachkeywords(keyword) {
let _t = this;
demo.getSuggestion({
keyword: keyword,
region: _t.data.selectStr,
region_fix: 1,
policy: 0,
success: function (res) {
let data = res.data
for (let i in data) {
data[i].address = data[i].address.replace(data[i].province, ‘‘)
data[i].address = data[i].address.replace(data[i].city, ‘‘)
data[i].address = data[i].address.replace(data[i].district, ‘‘)
}
_t.setData({
datalits: data
})
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
}
});
},
itemtap: function (e) {
let index = e.currentTarget.dataset.index
let str = `${this.data.datalits[index].address}${this.data.datalits[index].title}`
this.setData({
province: this.data.datalits[index].province,
city: this.data.datalits[index].city,
county: this.data.datalits[index].district,
houseNum: str,
onFocus: true,
latitude: this.data.datalits[index].location.lat,
longitude: this.data.datalits[index].location.lng
})
},
openmap: function () {
this.maskShow()
},
selectCity: function (e) { // 三级联动选择城市
let item = e.currentTarget.dataset.item
item.name ? item.name = item.name : item.name = item.fullname
let arr = this.data.selectedCity
let cityList = this.data.cityList
let sel = cityList.filter((e) => {
return e.select == true
})
if (sel.length != 0) {
arr = arr.slice(0, this.data.selectedIndex)
this.setData({
hasChild: true
})
}
for (let i in cityList) {
if (item.id == cityList[i].id) {
cityList[i].select = true
} else {
cityList[i].select = false
}
}
this.setData({
cityList: cityList
})
let _this = this
if (this.data.hasChild) {
arr.push(item)
}
demo.getDistrictByCityId({
id: item.id,
success: function (res) {
if (res.status == 0) {
_this.setData({
cityList: res.result[0]
})
}
},
fail: function (error) {
if (error.status == 363) {
_this.setData({
hasChild: false,
selectedIndex: _this.data.selectedCity.length - 1
})
_this.maskHide()
}
}
})
this.setData({
selectedCity: arr
})
},
subheadSelect: function (e) {
let index = e.currentTarget.dataset.index
this.setData({
selectedIndex: index
})
let id = e.currentTarget.dataset.item.id
let _this = this
let selectId = ‘‘
if (index == 0) {
demo.getCityList({
success: function (res) {
if (res.status == 0) {
let cityList = res.result[0]
for (let i in cityList) {
if (id == cityList[i].id) {
cityList[i].select = true
}
}
_this.setData({
cityList: cityList
})
} else {
console.log(‘未获取到数据‘)
}
}
})
} else {
selectId = this.data.selectedCity[index - 1].id
demo.getDistrictByCityId({
id: selectId,
success: function (res) {
if (res.status == 0) {
let cityList = res.result[0]
for (let i in cityList) {
if (id == cityList[i].id) {
cityList[i].select = true
}
}
_this.setData({
cityList: cityList
})
}
},
fail: function (error) {
if (error.status == 363) {
_this.setData({
hasChild: false
})
_this.maskHide()
}
}
})
}
},
maskHide: function () {
let str = ‘‘
let selectStr = ‘‘
let arr = this.data.selectedCity
let municipality = [‘北京市‘, ‘天津市‘, ‘上海市‘, ‘重庆市‘]
for (let i in this.data.selectedCity) {
str += this.data.selectedCity[i].fullname
if (i < 2) {
selectStr += this.data.selectedCity[i].name
}
}
if (municipality.indexOf(arr[0].fullname) == 0) {
this.setData({
maskStatus: false,
address: str,
selectStr: selectStr,
province: arr.length > 0 ? arr[0].fullname : ‘‘,
city: arr.length > 0 ? arr[0].fullname : ‘‘,
county: arr.length > 1 ? arr[1].fullname : ‘‘,
latitude: arr[arr.length-1].location.lat,
longitude: arr[arr.length-1].location.lng
})
} else {
this.setData({
maskStatus: false,
address: str,
selectStr: selectStr,
province: arr.length > 0 ? arr[0].fullname : ‘‘,
city: arr.length > 1 ? arr[1].fullname : ‘‘,
county: arr.length > 2 ? arr[2].fullname : ‘‘,
latitude: arr[arr.length-1].location.lat,
longitude: arr[arr.length-1].location.lng
})
}
},
maskShow: function () {
this.setData({
maskStatus: true
})
},
next_step: function (e) {
if (this.data.name.trim() == "") {
wx.showToast({
title: ‘请填写姓名‘,
icon: ‘none‘,
duration: 2000
})
return false;
}
if (this.data.name.length > 10) {
wx.showToast({
title: ‘姓名不能超过8位字符!‘,
icon: ‘none‘,
duration: 2000
})
return false;
}
var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
if (!myreg.test(this.data.phoneNumber)) {
wx.showToast({
title: ‘请填写正确的手机号码‘,
icon: ‘none‘,
duration: 2000
})
return false;
}
if (this.data.address.trim() == "") {
wx.showToast({
title: ‘请选择地址‘,
icon: ‘none‘,
duration: 2000
})
return false;
}
if (this.data.houseNum.trim() == "") {
wx.showToast({
title: ‘请填写门牌号‘,
icon: ‘none‘,
duration: 2000
})
return false;
}

let param = {
addressee: this.data.name,
city: this.data.city,
country: ‘中国‘,
county: this.data.county,
deliveryAddress: this.data.address,
gender: this.data.gender + "",
phone: this.data.phoneNumber,
province: this.data.province,
houseNumber: this.data.houseNum,
latitude: this.data.latitude,
longitude: this.data.longitude
}
wx.showLoading();
if (this.data.update == 0) {
http.post("/deliveryAddress", param,
function (res) {
wx.hideLoading();
wx.navigateBack({
delta: 1
})
}, "POST");
} else {
http.post("/deliveryAddress/" + this.data.id, param,
function (res) {
wx.hideLoading();
wx.navigateBack({
delta: 1
})
}, "PUT");
}
}

小程序仿某东三级联动选择地址和搜索提示

上一篇:微信机器人(实现自动回复,数据统计)


下一篇:实现微信第三方登录