1 changed files with 204 additions and 178 deletions
Unified View
Diff Options
-
+204 -178pages/baoyou-city/baoyou-city.vue
+ 204
- 178
pages/baoyou-city/baoyou-city.vue
View File
| @ -1,185 +1,211 @@ | |||||
| <template> | <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> | </template> | ||||
| <script> | <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> | </script> | ||||
| <style lang="scss" scoped> | <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> | |||||