recycle-front/pages/baoyou-city/baoyou-city.vue

<template>
	<view class="byc-container" :style="{paddingTop: (statusBarHeight + 88) + 'rpx'}">
		<!-- 顶部导航栏 -->
		<view class="nav-bar" :style="{height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px'}">
			<view class="back" @tap="goBack">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<!-- <text class="title">包邮服务城市</text> -->
		</view>
		<!-- 蓝色banner卡片 -->
		<view class="byc-banner">
			<image class="byc-banner-img"
				src="https://oss.budingxiaoshuo.com/upload/已开通包邮服务的城市-banner_1748252607736.png" mode="widthFix" />
		</view>
		<!-- 主内容卡片 -->
		<view class="byc-main-card">
			<view class="byc-main-title">已开通包邮服务的城市</view>
			<view class="byc-main-desc">
				{{ city_desc }}
				<!-- 我们很高兴为以下城市的用户提供一键包邮的便捷服务，进一步简化旧衣回收流程，降低参与环保行动的门槛。期待未来能将这一服务拓展至更多地区，邀请全国人民共同投身于旧衣回收的环保事业中。 -->
			</view>
			<view class="byc-dashed-line"></view>
			<view class="byc-province-list">
				<view class="byc-province-item" v-for="(province, idx) in cityList" :key="province.id">
					<view class="byc-province-name">{{ province.name }}</view>
					<view class="byc-city-list">
						<text v-for="(city, cidx) in (province.children || [])" :key="city.id" class="byc-city">
							<text v-if="cidx !== 0" class="byc-dot">·</text>{{ city.name }}
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 88, // 默认
				menuButtonInfo: null,
				cityList: [],
				bannerTop: 0 // banner距离顶部距离
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.statusBarHeight = sysInfo.statusBarHeight
			let menuButtonInfo = null
			try {
				menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			} catch (e) {}
			this.menuButtonInfo = menuButtonInfo
			if (menuButtonInfo && menuButtonInfo.height) {
				// 导航栏高度 = 胶囊 bottom + top - 状态栏高度
				this.navBarHeight = menuButtonInfo.bottom + menuButtonInfo.top - sysInfo.statusBarHeight
			} else {
				this.navBarHeight = 88 // 兜底
			}
			this.bannerTop = this.statusBarHeight + this.navBarHeight
			this.$api('getFreeCityList', {}, res => {
				if (res && res.success && Array.isArray(res.result)) {
					this.cityList = res.result.filter(item => item.open === 'Y');
					// console.log(this.cityList);
				}
			});
		},
		computed: {
			city_desc() {
				const item = getApp().globalData.configData.find(i => i.keyName === 'city_desc')
				return item ? item.keyContent : ''
			},
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.byc-container {
		min-height: 100vh;
		background: #f8f8f8;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.nav-bar {

		background: #2180ee;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		//   padding: 0 30rpx;
	}

	.back {
		width: 100%;
		padding: 10rpx;
		color: #fff;
		//   margin-left: -20rpx;
		left: 0;
		display: flex;
		align-items: center;
		// justify-content: center;
	}

	.byc-banner {
		margin: 0;
		//   border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 24rpx rgba(60, 167, 250, 0.10);
		background: none;
		position: relative;
		z-index: 1;
	}

	.byc-banner-left {
		flex: 1;
	}

	.byc-banner-title {
		color: #fff;
		font-size: 44rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
	}

	.byc-banner-desc {
		color: #e3f2fd;
		font-size: 28rpx;
		margin-top: 4rpx;
	}

	.byc-banner-img {
		width: 100%;
		display: block;
	}

	.byc-main-card {
		background: #fff;
		border-radius: 36rpx;
		margin: -60rpx 0 0 0;
		box-shadow: 0 8rpx 32rpx rgba(60, 167, 250, 0.08);
		padding: 48rpx 32rpx 32rpx 32rpx;
		position: relative;
		z-index: 2;
	}

	.byc-main-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 24rpx;
	}

	.byc-main-desc {
		color: #888;
		font-size: 28rpx;
		line-height: 1.7;
		margin-bottom: 32rpx;
	}

	.byc-dashed-line {
		border-bottom: 2rpx dashed #e5e5e5;
		margin-bottom: 32rpx;
	}

	.byc-province-list {
		.byc-province-item {
			margin-bottom: 36rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.byc-province-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #222;
			margin-bottom: 12rpx;
		}

		.byc-city-list {
			display: flex;
			flex-wrap: wrap;
			font-size: 28rpx;
			color: #999;
			line-height: 1.7;
		}

		.byc-city {
			margin-right: 18rpx;
			display: flex;
			align-items: center;
		}

		.byc-dot {
			margin-right: 8rpx;
			color: #bbb;
			font-size: 28rpx;
		}
	}
</style>