1

pages/baoyou-city/baoyou-city.vue

@@ -1,185 +1,211 @@
 <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">
-        我们很高兴为以下城市的用户提供一键包邮的便捷服务，进一步简化旧衣回收流程，降低参与环保行动的门槛。期待未来能将这一服务拓展至更多地区，邀请全国人民共同投身于旧衣回收的环保事业中。
-      </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>
+	<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);
-      }
-    });
-  },
-  methods: {
-    goBack() {
-      uni.navigateBack()
-    }
-  }
-}
+	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> 
+	.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>