You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
171 lines
3.9 KiB
171 lines
3.9 KiB
<template>
|
|
<wybPopup ref="popup" type="bottom" width="500" scrollY="true" radius="0" :showCloseIcon="false">
|
|
<view class="popup">
|
|
<view class="top-title dis-flex flex-sp pd-main border-b">
|
|
<view class="left" @click="close">取消</view>
|
|
<view class="right" @click="confirm">确定</view>
|
|
</view>
|
|
|
|
<picker-view :indicator-style="bootStyle" :value="selectList" @change="selectData">
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in province" :key="item.id">{{item.name}}</view>
|
|
</picker-view-column>
|
|
<!-- v-if="province[selectList[0]]" -->
|
|
<picker-view-column >
|
|
<view class="item" v-for="(item,index) in citylist" :key="index">{{item.name}}</view>
|
|
</picker-view-column>
|
|
<!-- v-if="citylist[selectList[0]]" -->
|
|
<picker-view-column >
|
|
<view class="item" v-for="(item,index) in arealist" :key="index">{{item.name}}</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
|
|
</view>
|
|
</wybPopup>
|
|
</template>
|
|
|
|
<script>
|
|
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
|
|
let AllAddress = require('./address.json')
|
|
export default {
|
|
data() {
|
|
return{
|
|
addInfo:"请选择省市区", //显示用的:广东省 广州市 天河区
|
|
bootStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
|
|
selectList: [0, 0, 0], //第一个元素表示滑动省列表,以此类推
|
|
oldSelectList:[],
|
|
province: [], // 省列表
|
|
citylist:[], //市列表
|
|
arealist:[], //区列表
|
|
|
|
}
|
|
},
|
|
components:{
|
|
wybPopup
|
|
},
|
|
methods:{
|
|
show(){
|
|
this.province=JSON.parse(JSON.stringify(AllAddress)) ;
|
|
this.initData();
|
|
this.$refs.popup.show()
|
|
},
|
|
|
|
|
|
|
|
//选择地址确定按钮事件
|
|
confirm() {
|
|
|
|
var sheng = ""; //省
|
|
var city = ""; //市
|
|
var area = ""; //区
|
|
if(this.province){
|
|
sheng = this.province[this.selectList[0]].name;
|
|
}
|
|
if(this.citylist){
|
|
city = this.citylist[this.selectList[1]].name;
|
|
}
|
|
if(this.arealist){
|
|
area = this.arealist[this.selectList[2]].name;
|
|
}
|
|
var value = sheng;
|
|
if(city){
|
|
value += " " + city;
|
|
}
|
|
if(area){
|
|
value += " " + area;
|
|
}
|
|
this.addInfo = value;
|
|
|
|
this.$emit("getAddress",this.addInfo)
|
|
this.$refs.popup.close()
|
|
},
|
|
|
|
|
|
|
|
//关闭地址选择
|
|
close() {
|
|
this.$refs.popup.close()
|
|
},
|
|
// picker-view的change事件
|
|
selectData(e) {
|
|
const val = e.detail.value;
|
|
this.oldSelectList=this.selectList;
|
|
this.selectList=val;
|
|
|
|
let that = this;
|
|
let arr=[];
|
|
// console.log(this.selectList,1)
|
|
this.selectList.map((item,index1)=>{
|
|
that.oldSelectList.map((item2,index2)=>{
|
|
|
|
if(index1 == index2 && item != item2 ){
|
|
if(index1!=2){
|
|
if(index1 == 0){
|
|
arr = [item,0,0];
|
|
}
|
|
if(index1 == 1){
|
|
arr = [that.selectList[index1-1],item,0];
|
|
}
|
|
|
|
that.selectList=arr;
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
})
|
|
})
|
|
// console.log(that.selectList,2)
|
|
|
|
|
|
this.initData()
|
|
},
|
|
initData(){
|
|
|
|
// console.log(this.selectList[0],this.selectList[1],"aa",this.selectList)
|
|
this.citylist = this.province[this.selectList[0]].children; //放到市数组
|
|
this.arealist = this.province[this.selectList[0]].children[this.selectList[1]].children; //放到区数组
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// .top-title{
|
|
// height: 40px;
|
|
// line-height: 40px;
|
|
// }
|
|
// .picker-v{
|
|
// height:calc(100% - 40px);
|
|
// box-sizing: border-box;
|
|
// }
|
|
|
|
uni-picker-view {
|
|
display: block;
|
|
}
|
|
uni-picker-view .uni-picker-view-wrapper {
|
|
display: flex;
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
background-color: white;
|
|
}
|
|
uni-picker-view[hidden] {
|
|
display: none;
|
|
}
|
|
picker-view {
|
|
width: 100%;
|
|
// height: 600upx;
|
|
height: 400rpx;
|
|
margin-top: 20upx;
|
|
}
|
|
.item {
|
|
line-height: 100upx;
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|
|
|