index.js
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});
}
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模型
<?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');
}
}
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代码