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

 更多技术可进群交流，定期发技术福利或物品福利，欢迎想秀技术、学技术的朋友加入：

index.js

import { getCity } from '../../api/api.js';data: {region: ['省', '市', '区'],valueRegion: [0, 0, 0],id:0,//地址idcityId: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});}

api.js

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

对应php代码【tp6】

/*** 获取省市区*/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模型

<?phpnamespace 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');}
}

 index.wxml

<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>

index.wxss

/* 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;
}

最后是mysql代码

https://download.csdn.net/download/TiaoZhanJi_Xian/20087538