frontend-app/components/common/address-popup.vue

<template>
	<up-popup
	  :show="show"
	  :round="24"
	  :closeOnClickOverlay="false"
	  mode="bottom"
	>
	  <view class="address-popup-view" >
		  <view class="head-view">
		  	<text class="text-32 text-zu1 text-bold">{{headText}}</text>
			<MyBtn text="确定" @ok="onOk" v-if="!dataList.length" mh="48rpx" wd="128rpx" fz="24rpx"></MyBtn>
			<u-icon size="48rpx" name="close-circle-fill" color="#333" @click="onClose"></u-icon>
		  </view>
		  <scroll-view :scroll-x="true" class="address-select-view">
			  <view class="address-select-view-scroll">
			  	<view class="select-box" @click="onSelectItrm(item,index)" v-for="(item,index) in selectList" :key="index">
			  		<text class="text-28 text-gray" :style="{color:index == curSelect ? '#7934F6' : '#333',
			  		'white-space':'nowrap',}">{{item.name}}</text>
			  		<view class="select-line" v-if="index == curSelect"></view>
			  	</view>
			  </view>
		  	
		  </scroll-view>
		  <scroll-view :scroll-y="true" class="address-bottom-list" :scroll-into-view="scrollId">
		  	<view class="address-data-view" v-for="(item,index) in dataList" :key="index" :id="item.zi">
		  		<text class="text-32 text-gray text-bold">{{item.zi}}</text>
				<view class="address-data-data" @click="onItem(item,xItem)" v-for="(xItem,xIndex) in item.data" :key="xIndex">
					<text class="text-32 text-gray ">{{xItem.name}}</text>
				</view>
		  	</view>
		  </scroll-view>
		  <view class="right-zi-view" v-if="dataList.length">
		  	<view class="zi-box" v-for="(item,index) in dataList" @click="onMao(item.zi)" :key="index">
				<text class="text-24 text-gray">{{item.zi}}</text>
		  	</view>
		  </view>
	  </view>
	</up-popup>
</template>

<script>
	import Func from '/utils/func'
	import MyBtn from '@/components/common/my-btn.vue'
	export default {
		components:{MyBtn},
		data() {
		  return {
			  scrollId:'',
		  }
		},
		props:{
			show:{
				type:Boolean,
				default:false
			},
			headText:{
				type:String,
				default:'请选择所在地区'
			},
			dataList:{
				type:Array,
				default:[]
			},
			selectList:{
				type:Array,
				default:[]
			},
			curSelect:{
				type:Number,
				default:0
			}
			
		},
	
		methods: {
			onClose(){
				this.$emit('close')
			},
			onOk(){
				this.$emit('ok');
			},
			onMao(item){
				 this.scrollId = item;
			},
			onSelectItrm(item,index){
				if(index != this.curSelect){
					this.$emit('select',item,index);
				}
			},
			onItem(item,xItem){
				Func.debounce(()=>this.onItemOne(item,xItem));
			},
			onItemOne(item,xItem){
				this.$emit('itemSelect',item,xItem);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-popup-view{
		width:100vw;
		height:1000rpx;
		min-height:1000rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		border-radius: 24rpx;
		position: relative;
		box-sizing: border-box;
		.right-zi-view{
			width:64rpx;
			max-height:600rpx;
			overflow-y: auto;
			position: absolute;
			right:32rpx;
			border-radius: 32rpx;
			padding: 32rpx 0;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: rgba(128,128,128,0.3);
		}
		.address-bottom-list{
			width:100%;
			height:calc(100% - 88rpx - 88rpx - 32rpx);
			margin-top:32rpx;
			display: flex;
			flex-direction: column;
			overflow-y: auto;
			.address-data-view{
				width:100%;
				padding: 0 32rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				border-bottom:1rpx solid #eee;
				.address-data-data{
					padding-top: 24rpx;
					box-sizing: border-box;
					display: flex;
					padding: 24rpx 0;
				}
			}
			
		}
		.address-select-view{
			width:100%;
			height:88rpx;
			min-height:88rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
			.address-select-view-scroll{
				width:100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				
				.select-line{
					width:50rpx;
					height:8rpx;
					min-height:8rpx;
					background-color: #7934F6;
					border-radius: 4rpx;
					
				}
				.select-box{
					margin-right:24rpx;
					height:56rpx;
					min-height:56rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
				}
			}
			
		}
		.head-view{
			width:100vw;
			height:88rpx;
			min-height:88rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			
			padding: 0 32rpx;
			box-sizing: border-box;
		}
	}
</style>