小程序php：省市区三级联动

import { getCity } from '../../api/api.js';
  data: {
      region: ['省', '市', '区'],
      valueRegion: [0, 0, 0],
      id:0,//地址id
      cityId:0,
      district:[],
      multiArray:[],
      multiIndex: [0, 0, 0]
  }
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getCityList();
  },
  getCityList:function(){
    let that = this;
    getCity().then(res=>{
      that.setData({ district:res.data});
      that.initialize();
    })
  },
  initialize:function(){
    let that = this, province = [], city = [], area = [];
    if (that.data.district.length) {
      let cityChildren = that.data.district[0].c || [];
      let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
      that.data.district.forEach(function (item) {
        province.push(item.n);
      });
      cityChildren.forEach(function (item) {
        city.push(item.n);
      });
      areaChildren.forEach(function (item) {
        area.push(item.n);
      });
      that.setData({
        multiArray: [province, city, area],
      });
    }
  },
  bindRegionChange: function (e) {
    let multiIndex = this.data.multiIndex, province = this.data.district[multiIndex[0]] || { c: [] }, city = province.c[multiIndex[1]] || { v: 0 }, multiArray = this.data.multiArray, value = e.detail.value;
    console.log(value);
    console.log(province);
    this.setData({
      region: [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]],
      cityId: city.v,
      valueRegion: [0,0,0]
    });
    this.initialize();
  },
  bindMultiPickerColumnChange:function(e){
    let that = this, column = e.detail.column, value = e.detail.value, currentCity = this.data.district[value] || { c: [] }, multiArray = that.data.multiArray, multiIndex = that.data.multiIndex;
    multiIndex[column] = value;
    switch (column){
      case 0:
        let areaList = currentCity.c[0] || { c: [] };
        multiArray[1] = currentCity.c.map((item)=>{
          return item.n;
        });
        multiArray[2] = areaList.c.map((item)=>{
          return item.n;
        });
      break;
      case 1:
        let cityList = that.data.district[multiIndex[0]].c[multiIndex[1]].c || [];
        multiArray[2] = cityList.map((item)=>{
          return item.n;
        });
      break;
      case 2:
      
      break;
    }
    this.setData({ multiArray: multiArray, multiIndex: multiIndex});
  }

export function getCity() {
  return request.get('service/xcx/city_list', { }, { noAuth: true });
}

/**
     * 获取省市区
     */
    public function city_list(){
        $list = SystemCity::with('children')->field(['city_id', 'name', 'id', 'parent_id'])->where('parent_id', 0)->order('id asc')->select()->toArray();
        $data = [];
        foreach ($list as &$item) {
            $value = ['v' => $item['city_id'], 'n' => $item['name']];
            if ($item['children']) {
                foreach ($item['children'] as $key => &$child) {
                    $value['c'][$key] = ['v' => $child['city_id'], 'n' => $child['name']];
                    unset($child['id'], $child['area_code'], $child['merger_name'], $child['is_show'], $child['level'], $child['lng'], $child['lat'], $child['lat']);
                    if (SystemCity::where('parent_id', $child['city_id'])->count()) {
                        $child['children'] = SystemCity::where('parent_id', $child['city_id'])->field(['city_id', 'name', 'id', 'parent_id'])->select()->toArray();
                        foreach ($child['children'] as $kk => $vv) {
                            $value['c'][$key]['c'][$kk] = ['v' => $vv['city_id'], 'n' => $vv['name']];
                        }
                    }
                }
            }
            $data[] = $value;
        }
        return json_encode($data);
    }

<?php


namespace app\common\model;



use app\common\constants\MenuConstant;
use app\common\model\TimeModel;

/**
 * 菜单  model
 * Class SystemMenus
 * @package app\admin\model\system
 */
class SystemCity extends TimeModel
{
    /**
     * 数据表主键
     * @var string
     */
    protected $pk = 'id';

    /**
     * 模型名称
     * @var string
     */
    protected $name = 'system_city';

    /**
     * 获取子集分类查询条件
     * @return \think\model\relation\HasMany
     */
    public function children()
    {
        return $this->hasMany(self::class, 'parent_id', 'city_id')->order('id ASC');
    }
}

<form bindsubmit="formSubmit" report-submit='true'>
<view class='addAddress'>
   <view class='list'>
      <view class='item acea-row row-between-wrapper'>
          <view class='name'>姓名</view>
          <input type='text' placeholder='请输入姓名' name='real_name' value="{{userAddress.real_name}}" placeholder-class='placeholder'></input>
      </view>
      <view class='item acea-row row-between-wrapper'>
          <view class='name'>联系电话</view>
          <input type='text' placeholder='请输入联系电话' name="phone" value='{{userAddress.phone}}' placeholder-class='placeholder'></input>
      </view>
      <view class='item acea-row row-between-wrapper'>
          <view class='name'>所在地区</view>
          <picker mode="multiSelector" bindchange="bindRegionChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{valueRegion}}" custom-item="{{customItem}}" range="{{multiArray}}">
            <view class='acea-row row-between-wrapper'>
              <view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
              <view class='iconfont icon-dizhi font-color'></view>
            </view>
          </picker>
      </view>
        <view class='item acea-row row-between-wrapper'>
          <view class='name'>详细地址</view>
          <input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder' value='{{userAddress.detail}}'></input>
      </view>
   </view>
   <button class='keepBnt bg-color' formType="submit">立即保存</button>
</view>
</form>

/* pages/user_address/index.wxss */
.addAddress .list{background-color:#fff;}
.addAddress .list .item{padding:0 30rpx;height:90rpx;border-top:1rpx solid #eee;}
.addAddress .list .item .name{width:195rpx;font-size:30rpx;color:#333;}
.addAddress .list .item input{width:475rpx;font-size:30rpx;}
.addAddress .list .item .placeholder{color:#ccc;}
.addAddress .list .item picker{width:475rpx;}
.addAddress .list .item picker .picker{width:410rpx;font-size:30rpx;}
.addAddress .list .item picker .iconfont{font-size:43rpx;}
.addAddress .default{padding:0 30rpx;height:90rpx;background-color:#fff;margin-top:23rpx;}
.addAddress .default checkbox{margin-right:15rpx;}
.addAddress .keepBnt{width:690rpx;height:86rpx;border-radius:50rpx;text-align:center;line-height:86rpx;margin:50rpx auto;font-size:32rpx;color:#fff;}
.bg-color {
  background-color: #395f64!important;
}