yizhizan-h5/package/screen/city.vue

<template>
	<view class="page-container" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="close" color="#333" size="32"></u-icon>
				</view>
				<view class="nav-title">{{city}}</view>
				<view class="nav-right" v-if="onlyShowOneCity"></view>
				<view @click="goTo" class="nav-right" v-else>
					<image src="../../static/images/filter.svg" mode="widthFix"></image> 筛选城市
				</view>
			</view>
		</view>
		<view class="page-content">
		  <hg-level4-address :city="city" :county="county" :street="street" :onlyShowOneCity="onlyShowOneCity" @confirm="onAddressConfirm"></hg-level4-address>
		</view>
	</view>
</template>

<script>
	import hgLevel4Address from '@/components/hg-level4-address/hgLevel4Address.vue';
	export default {
		components: {
		        hgLevel4Address
		    },
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度
				city: '', //市
				county: '', //区
				street:'',//街道
				onlyShowOneCity: false, // 判断是否只显示一个城市
			};
		},
		onLoad(options) {
			// 获取状态栏高度
			let systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.city = options&&options.city||'深圳市'
			this.county = options&&options.county||''
			this.street = options&&options.street||''
			
			if (options.onlyShowOneCity) {
				this.onlyShowOneCity = true
			}
		},
		onShow() {

		},
		methods: {
			onAddressConfirm(selected) {
			  console.log("选中的地址：", selected);
							this.city = selected[1].name
							this.county = selected[2].name
							let data = {
								city: this.city=='全国'||this.city=='全部'?'':this.city,
								county: this.county == '全部' ? '' : this.county
							}
							uni.$emit('filterCity', data)
							uni.navigateBack()
						},
			goBack(){
				uni.navigateBack()
			},
			goTo(){
				uni.navigateTo({
					url:'/package/jobIntention/city?type=search&onlyShowOneCity=true'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container{
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #FBFBFB;
	}
	.custom-navbar {
		width: 100%;
		height: 88rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.navbar-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 32rpx;
			.nav-left, .nav-right {
				width: 146rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-left: 20rpx;
			}
			.nav-right{
				// width: fit-content;
				white-space: nowrap;
				color: #016Bf6;
				align-items: center;
				justify-content: flex-end;
				padding-left: 0rpx;
				image{
					width: 28rpx;
					display: block;
					margin-right:6rpx;
					position: relative;
					top:2rpx
				}
			}
			.nav-title {
				color: rgba(51, 51, 51, 1);
				font-family: DM Sans;
				font-size: 30rpx;
				font-weight: 700;
				line-height: 26px;
				letter-spacing: 0px;
				text-align: center;
			}
		}
	}
	.page-content {
		flex: 1;
		overflow: hidden;
		display: flex;
	}
</style>