侧拉城市选择 组件

<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>