yizhizan-h5/components/hg-level4-address/hgLevel4Address.vue

<template>
	<view class="address-page">
		<view class="picker-content">
			<!-- 市 -->
			<scroll-view scroll-y class="column city">
				<view v-for="(city, i) in filteredCities" :key="i" class="item"
					:class="{ cityActive: selectedCity && selectedCity.code === city.code }" @click="selectCity(city)">
					{{ city.name }}
				</view>
			</scroll-view>

			<!-- 区 -->
			<scroll-view scroll-y class="column district">
				<view v-for="(area, i) in filteredAreas" :key="i" class="item"
					:class="{ districtActive: selectedArea && selectedArea.code === area.code }" @click="selectArea(area)">
					{{ area.name }}
				</view>
			</scroll-view>

			<!-- 街道 -->
			<scroll-view scroll-y class="column street">
				<view v-for="(street, i) in filteredStreets" :key="i" class="item"
					:class="{ streetActive: selectedStreet && selectedStreet.code === street.code }"
					@click="selectStreet(street)">
					{{ street.name }}
				</view>
			</scroll-view>
		</view>

		<!-- 底部按钮 -->
		<view class="picker-footer">
			<!-- <button class="btn-clear" @click="clear">清除</button> -->
			<button class="btn-confirm" @click="handleConfirm">确定</button>
		</view>
	</view>
</template>

<script>
	import addressData from './level4_address.js'
	export default {
		name: "AddressPicker",
		props: {
			city: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				addressData,
				selectedProvince: null,
				selectedCity: null,
				selectedArea: {
					code: 'all',
					name: '全部'
				},
				selectedStreet: {
					code: 'all',
					name: '全部'
				}
			}
		},
		computed: {
			filteredProvinces() {
				return this.addressData || []
			},
			filteredCities() {
				return this.selectedProvince && this.selectedProvince.children ?
					this.selectedProvince.children :
					[]
			},
			filteredAreas() {
				if (!this.selectedCity) return []

				// 市为“全部”或者无子级，区返回一个“全部”
				const areas = this.selectedCity.children || []
				return [{
					code: 'all',
					name: '全部'
				}, ...areas]
			},
			filteredStreets() {
				if (!this.selectedArea) return []

				// 区为“全部”或者无子级，街道返回一个“全部”
				const streets = this.selectedArea.children || []
				return [{
					code: 'all',
					name: '全部'
				}, ...streets]
			}
		},
		mounted() {
			this.initByCity()
		},
		methods: {
			/** 根据 city code 或名称自动定位 */
			initByCity() {
				if (!this.addressData.length) return

				for (const province of this.addressData) {
					for (const city of province.children || []) {
						if (city.code == this.city || city.name.indexOf(this.city) !== -1) {
							this.selectedProvince = province
							this.selectedCity = city
							this.selectedArea = {
								code: 'all',
								name: '全部'
							}
							this.selectedStreet = {
								code: 'all',
								name: '全部'
							}
							return
						}
					}
				}

				// 没找到就选第一个省市
				this.selectedProvince = this.addressData[0]
				this.selectedCity = this.addressData[0]?.children?.[0] || null
				this.selectedArea = {
					code: 'all',
					name: '全部'
				}
				this.selectedStreet = {
					code: 'all',
					name: '全部'
				}
			},

			/** 市选择 */
			selectCity(city) {
				this.selectedCity = city
				this.selectedArea = {
					code: 'all',
					name: '全部'
				}
				this.selectedStreet = {
					code: 'all',
					name: '全部'
				}
			},

			/** 区选择 */
			selectArea(area) {
				this.selectedArea = area
				this.selectedStreet = {
					code: 'all',
					name: '全部'
				}
			},

			/** 街道选择 */
			selectStreet(street) {
				this.selectedStreet = street
			},

			// /** 清除选择 */
			// clear() {
			// 	this.selectedCity = this.selectedProvince?.children?.[0] || null
			// 	this.selectedArea = {
			// 		code: 'all',
			// 		name: '全部'
			// 	}
			// 	this.selectedStreet = {
			// 		code: 'all',
			// 		name: '全部'
			// 	}
			// },

			/** 确认选择 */
			handleConfirm() {
				const result = []
				if (this.selectedProvince)
					result.push({
						code: this.selectedProvince.code,
						name: this.selectedProvince.name
					})
				if (this.selectedCity)
					result.push({
						code: this.selectedCity.code,
						name: this.selectedCity.name
					})
				if (this.selectedArea)
					result.push({
						code: this.selectedArea.code,
						name: this.selectedArea.name
					})
				if (this.selectedStreet)
					result.push({
						code: this.selectedStreet.code,
						name: this.selectedStreet.name
					})

				this.$emit('confirm', result)
			}
		}
	}
</script>

<style scoped>
	.address-page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #FBFBFB;
		margin: 0 16rpx;
	}
	.picker-content {
		display: flex;
		flex: 1;
		overflow: auto;
		gap: 16rpx;
	}

	.column {
		padding: 40rpx 0;
		box-sizing: border-box;
		border-radius: 12rpx;
	}
	.city{
		width: 200rpx;
		background: rgba(245, 245, 245, 1);
		box-sizing: border-box;
	}
	.district{
		flex: 1;
		background: rgba(255, 255, 255, 1);
	}
	.street{
		flex: 1;
		background: linear-gradient(to right, rgba(251, 251, 251, 1), rgba(255, 255, 255, 1));
	}
	.item {
		padding: 15rpx 50rpx;
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 400;
		margin-bottom: 16rpx;
	}

	.item.cityActive {
		color: rgba(1, 107, 246, 1);
	}
	.item.districtActive{
		background: rgba(153, 196, 250, 0.4);
		color: rgba(1, 107, 246, 1);
	}
	.item.streetActive{
		background: rgba(1, 107, 246, 1);
		color: rgba(255, 255, 255, 1);
		border-radius: 0px 12rpx 12rpx 0px;
	}
	.picker-footer {
		display: flex;
		padding: 30rpx 0;
		height: 140rpx;
		box-sizing: border-box;
		margin: 0 4rpx;
	}

	.btn-clear,
	.btn-confirm {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 999px;
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.btn-clear {
		background: #f5f5f5;
		color: #333;
		margin-right: 20rpx;
	}

	.btn-confirm {
		box-shadow: 0px 2px 4px 0px rgba(9, 196, 116, 0.3);
		background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%);
	}
	uni-button:after{
		border: none;
	}
</style>