<template>
<view class="mask1 fid-all" @click.stop='onBack'>
<view class="pop-top row_c fid-t-l">
<view class="top-back row_s abe-b-l" @click.stop='onBack'>
<image class="back" src="/static/images/index/back.png" mode="aspectFit"></image>
</view>
<view class="pop-title row_c">选择城市</view>
</view>
<!-- <view class="pop-boxs row_s" :style="{height:popboxHeight+'rpx'}"> -->
<view class="pop-boxs row_s">
<scroll-view scroll-y="true" class="pop-left-list abe-all left" :style="isall?'bottom:0':''">
<!-- <scroll-view scroll-y="true" class="pop-left-list abe-all left" :style="{bottom:(isall?0:''),height:listHeight+'rpx'}"> -->
<view class="left-box row_s" :class="typeIndex==index?'left-box-act':'left-box-nor'" v-for="(item,index) of typeList"
:key="index" @click.stop="onSelect(index)"><view :class="typeIndex==index?'act-line':'nor-line'"></view> {{item.name}}</view>
</scroll-view>
<scroll-view scroll-y="true" class="pop-left-list abe-all right" v-if='sonList.length>0' :style="isall?'bottom:0':''">
<!-- <scroll-view scroll-y="true" class="pop-left-list abe-all right" v-if='sonList.length>0' :style="{bottom:(isall?0:''),height:listHeight+'rpx'}"> -->
<view class="left-box row_s" :class="sonIndex==index?'left-box-act':'left-box-nor'" v-for="(item,index) of sonList"
:key="index" @click.stop="onSelectSon(index)">{{item.name}}</view>
</scroll-view>
</view>
<view class="pop-bot row_b fid-b-l" v-if="!isall">
<view class="pop-bot-btn nor row_c" @click.stop="onBack">返回</view>
<view class="pop-bot-btn act row_c" @click.stop="onConfirm">确定</view>
</view>
</view>
</template>
<script>
export default {
name: 'popCity',
components: {},
props: {
isall:{
type:Boolean,
default:false
}
},
data() {
return {
typeList:[],
typeIndex: 0,
sonIndex:0,
sonList:[],
popHeight:'',
swicthHeight:'',
listHeight:'',
popboxHeight:''
}
},
methods: {
//onSelect
onSelect(i) {
this.typeIndex = i;
this.getCity(this.typeList[i].id)
},
//onSelectSon
onSelectSon(i) {
this.sonIndex=i;
let data={
cityId: this.sonList[this.sonIndex].id,
cityName:this.sonList[this.sonIndex].name,
provinceId: this.typeList[this.typeIndex].id,
provinceName: this.typeList[this.typeIndex].name,
}
this.$emit('clickson',data);
},
//onBack
onBack(){
this.$emit('close');
},
//onConfirm
onConfirm(){
let index = this.typeIndex;
let i = this.sonIndex;
let data={
cityId: this.sonList[this.sonIndex].id,
cityName:this.sonList[this.sonIndex].name,
provinceId: this.typeList[this.typeIndex].id,
provinceName: this.typeList[this.typeIndex].name,
}
this.$emit('click',data);
// this.$emit('click',data);
},
//getCity
getCity(pid=0){
if(pid==-1){
this.sonIndex=0;
this.sonList=[{id:0,name:'全国'}];
return
}
let data={
id:pid
};
this.base.post('address/getAllByParentId',data).then(res=>{
if(data.id==0){
// res.data.unshift({id:0,name:'全部'});
if(this.isall){
res.data.unshift({id:-1,name:'全国'});
}
this.typeList=res.data;
}else{
if(this.isall){
res.data.unshift({id:0,name:'全部'});
}
this.sonIndex=0;
this.sonList=res.data;
}
})
},
// 获取顶部高度
getHeight(){
let view = uni.createSelectorQuery().in(this).select(".pop-top");
view.fields({
size: true,
scrollOffset: true
}, data => {
this.popHeight=data.height
uni.setStorageSync("popHeight",this.popHeight)
console.log("底部的高为" + this.popHeight);
}).exec();
},
//计算下拉列表高度
getListHeight(){
this.popHeight=uni.getStorageSync("popHeight")
this.listHeight= (uni.getStorageSync('screenHeight') - this.popHeight - this.swicthHeight) *2
this.popboxHeight=(uni.getStorageSync('screenHeight') - this.swicthHeight) *2
console.log("屏幕"+uni.getStorageSync('screenHeight'))
console.log("top"+ this.popHeight)
console.log("bottom"+this.swicthHeight)
console.log("list"+this.listHeight)
}
},
created() {
this.getCity();
},
mounted(){
//this.swicthHeight=uni.getStorageSync("swicthHeight")
//this.getHeight()
//this.getListHeight()
}
}
</script>
<style>
.mask1{width:100%;min-height:320rpx;background-color:rgba(144,144,144,.7);z-index:999}
.pop-top{width:100%;height:88rpx;padding-top:60rpx;background-color:#fff;border-bottom:#e1e1e1 1rpx solid}
.top-back{padding-left:30rpx;width:70rpx;height:88rpx}
.back{width:18rpx;height:88rpx}
.pop-title{font-size:32rpx;color:#333}
.pop-boxs{min-width:100rpx;height:100%;animation:xleft .3s}
.pop-left-list{top:152rpx;width:262rpx;min-height:1006rpx;background-color:#ffffff;bottom:88rpx}
.right{left:264rpx;width: 100%;}
.right .left-box{width: 100%;padding-left: 96rpx;}
.right .left-box-nor{background-color:#FFFFFF;}
.left-box{width:260rpx;height:96rpx;font-size:32rpx;font-stretch:normal;letter-spacing:0rpx}
.left-box-act{background-color:#FFFFFF;color:#A9CD39}
.left-box-nor{background-color:#F3F3F4;color:#666666}
.pop-bot{width:100%;border-top:1px solid rgba(122,122,122,.5);height:88rpx}
.pop-bot-btn{width:50%;height:88rpx;font-size:34rpx;font-weight:bold}
.nor{background-color:#999;color:#fff}
.act{background-color:#0e65fe;color:#fff}
.act-line,.nor-line{width: 8rpx;height: 40rpx;border-radius: 54rpx;margin-right: 48rpx;}
.act-line{background:#a9cd39;}
.nor-line{background:#fff;}
</style>
07-24
1031
11-08
423
09-13