1. 程式人生 > >小程序仿某東三級聯動選擇地址和搜索提示

小程序仿某東三級聯動選擇地址和搜索提示

fix loading address edi 項目 select county gets child

技術分享圖片

調用騰訊地圖小程序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"); } }

小程序仿某東三級聯動選擇地址和搜索提示