<template>
<view class="picker-wrapper">
<!-- <view class="uni-padding-wrap">
<view class="uni-title">当前选择：{{provice}} {{city}} {{area}}</view>
</view> -->
<picker-view v-if="visible" :value="value" @change="bindChange"
class="pickerViewp">
<picker-view-column>
<view class="item11" v-for="(item,index) in provices" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in citys" :key="index">{{item}}</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item,index) in areas" :key="index">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
import { columnsCitys } from '../../utils/commonData.js'
export default {
data() {
return {
provices:[],
provice: '河南省',
city:'郑州市',
area:'中原区',
value: [0,0,0],
visible: true,
// indicatorStyle: `height:200rpx;color:red`,
oldArr:[0,0,0],
firstIndex: 0,
secondIndex: 0,
columnsCitys,
}
},
mounted() {
let arr = '河南省:41,郑州市:4101,中原区:410102'
this.$emit('getData', arr)
this.provices = this.columnsCitys.map(item=>{
return item.text
})
},
computed:{
citys:function(){
let arr = this.columnsCitys[this.firstIndex].children.map(item=>{
return item.text
})
return arr
},
areas:function(){
let arr =this.columnsCitys[this.firstIndex].children[this.secondIndex].children.map(item=>{
return item.text
})
return arr
}
},
methods: {
bindChange: function(e) {
this.arr = e.detail.value
if(this.oldArr[0]!==this.arr[0]){
this.firstIndex = this.arr[0]
}else if(this.oldArr[1]!==this.arr[1]){
this.secondIndex = this.arr[1]
}
this.oldArr = this.arr
this.getData()
},
getData(){
let arr = []
this.provice = this.columnsCitys[this.oldArr[0]].text
const proviceCode = this.columnsCitys[this.oldArr[0]].code
arr.push(this.provice)
this.city = this.columnsCitys[this.oldArr[0]].children[this.oldArr[1]].text
const cityCode = this.columnsCitys[this.oldArr[0]].children[this.oldArr[1]].code
arr.push(this.city)
this.area = this.columnsCitys[this.oldArr[0]].children[this.oldArr[1]].children[this.oldArr[2]].text
const areaCode = this.columnsCitys[this.oldArr[0]].children[this.oldArr[1]].children[this.oldArr[2]].code
arr.push(this.area)
const str = `${this.provice}:${proviceCode},${this.city}:${cityCode},${this.area}:${areaCode}`
this.$emit('getData', str)
}
}
}
</script>
<style lang="scss">
.picker-wrapper {
height: 250rpx;
}
// .pickerViewp {
// height: 200rpx;
// }
// .pickerViewp {
// width: 100%;
// height: 100%;
// margin-top: 20rpx;
// }
.item {
height: 200rpx;
line-height: 200rpx;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
