先说下后端返回的数据
后端省市县返回数据格式如下:
code:编码,为空时返回所有省份
type : 类型 ,1返回市 2 返回区县,不传就返回省
例如:(下面是省的数据)如果再传(type:1,code:130000)就会返回河北省的数据
<view v-if="visible"
class="ad_box">
<view class="title">
<view class="left"
@tap="cancel">取消</view>
<view class="right"
@tap="exactly">确定</view>
</view>
<picker-view style="height:140px"
class="picker_box"
:indicator-style="indicatorStyle"
@change="changePicker">
<picker-view-column class="picker_col">
<view v-for="item in provinceData"
:key="item.region_code">{{item.region_name}}</view>
</picker-view-column>
<picker-view-column class="picker_col">
<view v-for="item in cityData"
:key="item.region_code">{{item.region_name}}</view>
</picker-view-column>
<picker-view-column class="picker_col">
<view v-for="item in areaData"
:key="item.region_code">{{item.region_name}}</view>
</picker-view-column>
</picker-view>
<view class="mask"></view> <!-- 遮罩层 -->
</view>
</view>
<script>
import * as loginServer from '@/api/login/login'
import { mapState } from 'vuex'
export default {
data () {
return {
visible: false,
PCAType: { //临时储存type 与code
code: '',
type: 0
},
valueArr: [0, 0, 0], //用于判断当前滑动的那一列
provinceData: [], //省数据
cityData: [],//市数据
areaData: [] //区数据
}
},
methods: {
changePicker (val) {
console.log(val)
console.log(val.detail.value)
let arr = val.detail.value //拿到改变的数组
if (this.valueArr[0] !== arr[0]) {
this.PCAType.code = this.provinceData[arr[0]].region_code
this.cityGetRegion()
} else if (this.valueArr[1] !== arr[1]) {
this.PCAType.code = this.cityData[arr[1]].region_code
this.areaGetRegion()
}
this.valueArr = arr
},
enable () { //打开省市县选择器
this.visible = true
this.provinceGetRegion()
},
cancel () { //取消
console.log('cancel')
this.PCAType.type = 0
this.PCAType.code = ''
this.valueArr = [0, 0, 0]
this.visible = false
},
exactly () { //确定
this.PCAType.code = 0
this.PCAType.type = 0
this.userAllInfo.province = this.provinceData[this.valueArr[0]].region_name
this.userAllInfo.city = this.cityData[this.valueArr[1]].region_name
this.userAllInfo.county = this.areaData[this.valueArr[2]].region_name
this.valueArr = [0, 0, 0]
this.visible = false
},
provinceGetRegion () { //获取省市县数据
loginServer.getRegion(this.PCAType)
.then(res => {
this.PCAType.code = res[0].region_code
console.log(res)
this.provinceData = res
this.cityGetRegion()
})
},
cityGetRegion () { //获取市数据
this.PCAType.type = 1
loginServer.getRegion(this.PCAType)
.then(res => {
this.PCAType.code = res[0].region_code
console.log(res)
this.cityData = res
this.areaGetRegion()
})
},
areaGetRegion () { //获取区县数据
this.PCAType.type = 2
loginServer.getRegion(this.PCAType)
.then(res => {
console.log(res, '===============')
this.areaData = res
})
}
}
}
</script>