创建vue组件
选择地区
- {{province.name}}
- {{city.name}}
- {{area.name}}
- {{street.name}}
-
{{item.ext_name}}
-
{{item.ext_name}}
-
{{item.ext_name}}
-
{{item.ext_name}}
const CHINA_REGIONS = require('./address.json')
export default {
data() {
return {
province: {
name: "请选择"
},
city: {
name: "请选择"
},
area: {
name: "请选择"
},
street: {
name: "请选择"
},
cityDataAll: '', // 市的所有數據
getAreaAll: '', // 区的所有数据
getStreetsAll: '', // 街道的所有数据
presentIndex: [],
proIndex: 0,
cityIndex: 0,
areaIndex: 0,
provinceData: '', // 当前展示的省数据
cityData: '', // 当前展示的市数据
areaData: '', //当前展示的区数据
streetsData: [], //当前展示的区数据
showIndex: 0,
heightCot: 0,
bb: ''
}
},
created() {
uni.getSystemInfo({
success: res => {
console.log(res.safeArea.height)
this.heightCot = (res.safeArea.height * 2) / 2
}
})
},
mounted() {
this.provinceData = CHINA_REGIONS;
this.cityDataAll = Array.from(CHINA_REGIONS[0].childs);
this.getAreaAll = CHINA_REGIONS[0].childs[0].childs;
this.getStreetsAll = CHINA_REGIONS[0].childs[0].childs[0].childs
},
methods: {
anewSelect(num) {
switch (num) {
case 0:
this.showIndex = 0;
// 控制头部选择其他是否消失,在消失li里面用v-if控制
// this.areaData = [];
// this.streetsData = [];
// this.city.name = '请选择';
// this.area.name = '请选择';
// this.street.name = '请选择'
break;
case 1:
this.showIndex = 1;
// this.areaData = [];
// this.streetsData = [];
// this.area.name = '请选择';
// this.street.name = '请选择'
break;
case 2:
this.showIndex = 2;
// this.areaData = [];
// this.streetsData = [];
// this.street.name = '请选择'
break;
case 3:
console.log(11111);
break;
}
},
selectPro(index, name, code) {
console.log(this.province.name)
const {
cityDataAll
} = this;
// 如果选择的省是一样的就不操作
if (this.province.name == name) {
this.showIndex = 1;
} else {
this.proIndex = index; // 当前省的下标
this.province = {
code,
name
};
this.city.name = '请选择';
this.area.name = '请选择';
this.street.name = '请选择'
this.cityData = CHINA_REGIONS[index].childs;
// console.log('city',CHINA_REGIONS[index].childs)
this.showIndex = 1;
}
},
selectCity(index, name, code) {
const {
proIndex
} = this;
// console.log(this.getAreaAll)
// 如果选择的市是一样的就不操作
if (this.city.name == name) {
this.showIndex = 2;
} else {
this.city = {
code,
name
};
this.cityIndex = index; // 当前市的下标
this.areaData = CHINA_REGIONS[proIndex].childs[index].childs;
this.showIndex = 2;
this.code = code
this.area.name = '请选择';
this.street.name = '请选择'
}
},
selectaArea(index, name, code) {
console.log('sss')
const {
proIndex,
cityIndex
} = this;
this.area = {
code,
name
};
this.showIndex = 3;
// console.log(index)
this.streetsData = CHINA_REGIONS[proIndex].childs[cityIndex].childs[index].childs
// console.log('lll',this.CHINA_REGIONS[0].childs[0].childs[0])
},
selectStreet(index, name, code) {
this.street = {
code,
name
};
const {
province,
city,
area,
street
} = this;
this.$emit('conceal', {
province,
city,
area,
street
})
// this.showIndex = 4;
}
}
}
ul,
li {
list-style: none;
}
.area-container {
width: 100%;
background: #fff;
position: fixed;
bottom: 0;
.select {
color: red;
position: relative;
&::after {
content: '';
width: 40upx;
height: 6upx;
background: red;
position: absolute;
left: 50%;
bottom: -8upx;
margin-left: -20upx;
}
}
li {
font-size: 26upx;
}
.content,
.name-list {
padding: 0 20upx;
}
.title {
font-size: 32upx;
margin: 30upx 20upx;
}
.name-list {
display: flex;
li {
margin-right: 40upx;
padding-bottom: 6upx;
}
}
.content {
margin-top: 20upx;
height: 600upx;
overflow-y: auto;
li {
border-bottom: 1px solid #f1f1f1;
padding: 20upx 0;
}
li:last-child {
border-bototm: none !important;
}
}
}
在另一个需要的地方引入
// 引入组件
import areaPicker from '@/components/erha-picker/erha-picker.vue';
export default {
components: {
areaPicker,
},
data() {
return {
popup: false,
}
},
methods: {
conceal(value) {
// 获取到传过来的 省 市 区 县数据
console.log('res', value);
// 选择完毕后隐藏
this.popup = false;
},}
}



