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.
 
 
 
 
high-mini/pages/address/addNewAddress/addressPicker.vue

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>