微信小程序通過後臺接口實現地址三級聯動

頁面代碼

<view class="citys">
  <picker class="select" mode="multiSelector" range="{{provincearr}}" bindcolumnchange="getcity">
    <text class="select-text">{{province}},{{city}},{{area}}</text>
  </picker>
</view>

css代碼

.citys{
  height:120rpx;
  line-height: 120rpx;
}
.select{
  border:1rpx solid #E7EBF1;
  border-radius: 10rpx;
  height: 80rpx;
  margin: 0 50rpx 0 50rpx;
  line-height: 80rpx;
}
.select-text{
  font-size: 28rpx;
  padding-left: 30rpx;
}

php代碼(tp5框架)

use app\common\util\Apiclass;
use app\api\model\AliAddress;
class Good extends Apiclass{
	public function getprovince()
	{
	    $id = input('id');
	    if(!$id) {
	        $id = 1;
	    }
	    $data = AliAddress::where('parent_id',$id)->field('id,name')->select();
	    $arr = [];
	    $arr[] = '請選擇';
	    foreach($data as $v)
	    {
	        $arr[] = $v['name'];
	    }
	    array_unshift($data,['id'=>0,'name'=>'請選擇']); //給數據的最前面添加一個空值，與arr的值索引對應
	    return $this->msg(true,'獲取成功',[$arr,$data]);
	}
}

js代碼

Page({
  data: {
    provincearr:[], //三個元素的數組，表示下拉框爲三列，第一個元素的數據是自動加載省名稱的一位數組
    provincedata:[], //自動加載省數據
    citydata:[], //選擇省後加載的市數據
    areadata:[], //選擇市後加載的區縣數據
    province:"請選擇", //選中省的字符串
    city:"請選擇", //選中市的字符串
    area:"請選擇", //選中區縣的字符串
    province_id:0, //選中省的id
    city_id:0, //選中市的id
    area_id:0 //選中區縣的id
  },
  onLoad: function () {
    this.getprovince() //加載省數據
  },
  getprovince:function(){
    let that = this
    wx.request({
      url: app.globalData.url+'api/good/getprovince',
      success:function(res){
        that.setData({
          provincearr:[res.data.data[0],['請選擇'],['請選擇']],
          provincedata:res.data.data[1]
        })
      }
    })
  },
  getcity:function(e){
    let that = this
    let value = e.detail.value //選中數據的索引
    let lay = e.detail.column //選擇的列
    let str = that.data.provincearr[lay][value] //選中的字符串
    let id = 0
    let key = ''
    if(lay == 0){ //如果是選擇省
      key = 'provincearr[1]'
      id = that.data.provincedata[value].id //選中數據的id
      let key2 = 'provincearr[2]' //選擇省時，重新渲染區縣數據的鍵
          that.setData({
            [key2]:['請選擇'],
            province:str
          })
    }else if(lay == 1){ //如果選擇市
      id = that.data.citydata[value].id
      key = 'provincearr[2]'
      that.setData({
        city:str
      })
    }else{ //如果選擇區縣
      id = that.data.areadata[value].id
      id = 0
      that.setData({
        area:str
      })
    }
    if(id != 0){ //選擇省或市請求下一級的數據
      wx.request({
        url: app.globalData.url+'api/good/getprovince',
        data:{id:id},
        success:function(res){
          if(key != ''){
            that.setData({
              [key]:res.data.data[0]
            })
            if(lay == 1){
              that.setData({
                areadata:res.data.data[1]
              })
            }else{
              that.setData({
                citydata:res.data.data[1]
              })
            }
          }
        } 
      })
    }
  }
})