这两天有个需求,需要使用选择省市区,于是很自然的选择了uniapp的picker组件。
<picker mode="region" :value="areaRange" @change="handleAreaChange">
<view class="input">{{ selectedArea.join(' ') }}</view>
</picker>
看起来很简单,一分钟搞定呀,picker的mode="region"就好了呀。
但是,id提交到后端的时候,告诉我说id不对,原来,原先公司有自己定义好的省市区数据,那么没办法,只能前端改了。
看来接口返回的省市区数据,是一维数组,多层嵌套的结构的。如下,简单截个片段:
{
"status_code": 0,
"status_msg": "",
"data": {
"items": [
{
"id": 2,
"name": "辽宁省",
"region_id": 210000,
"children": [
{
"id": 3,
"name": "沈阳市",
"region_id": 210100,
"children": [
{
"id": 4,
"name": "经济技术开发区",
"region_id": 210190,
"children": []
},
而如果picker的mode改成multiSelector 的话接收的是二维数组,
想过使用第三方的插件,例如uni-data-picker等,但是我的省市区是在一个弹窗里的,会造成uni-data-picker弹出的弹窗只是撑满了弹窗的全屏,而不是页面,样式上很难看。
经过综合分析,还是觉得将返回的数据改成二维数组来得方便些,展示效果也会更好,于是封装如下。
<template>
<div>
<view class="form-item">
<view class="label">选择地区:</view>
<picker mode="multiSelector" :value="areaRange" :range="typeData" @change="changePickerOrigin"
@columnchange="columnPickerOrigin">
<view class="input">{{ selectedArea.join(' ') }}</view>
</picker>
</view>
</div>
</template>
<script>
const cityData = require('@/utils/regin.json')
export default {
data() {
return {
selectedArea: ["请选择", "请选择", "请选择"],
selectedCode: [],
regionArray: cityData.data.items,
areaRange: [0, 0, 0],//picker的位置
typeData: [[], [], []], // picker的选择数据
typeDataIds: [[], [], []], // 存储id
areaRange0: 0,//第一列变化的位置
typeData1: [],//存放市级数据
typeData2: [],//存放县级数据
typeDataId1: [],
typeDataId2: [],
}
},
mounted() {
this.getTree(cityData.data.items)
},
methods: {
getTree(res) {
res.forEach((item, index) => {
this.typeData[0].push(item.name)
this.typeDataIds[0].push(item.region_id)
if (index == 0 && item && item.children) {
item.children.forEach((item1, index1) => {
this.typeData[1].push((item1.name))
if (index1 == 0) {
item1.children.forEach((item2, index2) => {
this.typeData[2].push((item2.name))
})
}
})
}
if (item && item.children) {
let typeData1 = [],typeData22 = [];
let typeDataId1 = [],typeDataId22 = [];
item.children.forEach((item2, index2) => {
typeData1.push((item2.name))
typeDataId1.push((item2.region_id))
if (item2 && item2.children) {
let typeData2 = [];
let typeDataId2 = [];
item2.children.forEach((item3, index3) => {
typeData2.push(item3.name)
typeDataId2.push(item3.region_id)
})
typeData22.push(typeData2)
typeDataId22.push(typeDataId2)
}
})
this.typeData1.push(typeData1)
this.typeData2.push(typeData22)
this.typeDataId1.push(typeDataId1)
this.typeDataId2.push(typeDataId22)
}
})
console.log(1111, this.typeData)
},
//列数据变化的时候
columnPickerOrigin(e) {
const column = e.detail.column
const value = e.detail.value
if (column == 0) {
this.areaRange0 = value
this.$set(this.typeData, 1, this.typeData1[value])
this.$set(this.typeData, 2, this.typeData2[value][0])
this.typeDataIds.splice(1,1,this.typeDataId1[value])
this.typeDataIds.splice(2,1,this.typeDataId2[value][0])
this.areaRange = [value, 0, 0]
} else if (column == 1) {
this.$set(this.typeData, 2, this.typeData2[this.areaRange0][value])
this.typeDataIds.splice(2,1,this.typeDataId2[this.areaRange0][value])
this.areaRange = [this.areaRange0, value, 0]
}else if(column == 2){
this.areaRange[2] = value
}
console.log(this.areaRange)
},
// 点击确认的时候
changePickerOrigin(e) {
let provinceName = this.typeData[0][e.detail.value[0]]
let cityName = this.typeData[1][e.detail.value[1]]
let areaName = this.typeData[2][e.detail.value[2]]
let province = this.typeDataIds[0][this.areaRange[0]]
let city = this.typeDataIds[1][this.areaRange[1]]
let area = this.typeDataIds[2][this.areaRange[2]]
this.selectedArea = [provinceName,cityName,areaName]
this.selectedCode = [province,city,area]
},
}
}
</script>
<style lang="scss" scoped></style>
文章评论