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"
				:scroll-top="scrollTop">
				<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: '',
			scrollTop: 0,
		}
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		headText: {
			type: String,
			default: '请选择所在地区'
		},
		dataList: {
			type: Array,
			default: []
		},
		selectList: {
			type: Array,
			default: []
		},
		curSelect: {
			type: Number,
			default: 0
		}
	},
	watch: {
		dataList() {
			this.resetScroll();
		},
		curSelect() {
			this.resetScroll();
		}
	},
	methods: {
		resetScroll() {
			this.scrollId = '';
			this.scrollTop = this.scrollTop === 0 ? 0.01 : 0;
			this.$nextTick(() => {
				this.scrollTop = 0;
			});
		},
		onClose() {
			this.$emit('close')
		},
		onOk() {
			this.$emit('ok');
		},
		onMao(item) {
			this.scrollId = item;
		},
		onSelectItrm(item, index) {
			if (index != this.curSelect) {
				this.resetScroll();
				this.$emit('select', item, index);
			}
		},
		onItem(item, xItem) {
			// 传入第二个参数 150 毫秒
			Func.debounce(() => this.onItemOne(item, xItem), 150);
		},
		onItemOne(item, xItem) {
			this.resetScroll();
			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% - 60rpx - 88rpx - 32rpx);
		margin-top: 20rpx;
		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: 60rpx;
		min-height: 60rpx;
		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>