停车场信息页面

common/apiurl.js

@@ -38,7 +38,8 @@ const apiurl = {
 	
 	// 获取附近的路段
 	nearRoadslUrl:'/roadinfo/nearRoads',
-	
+	// 获取路段收费规则
+	roadsChargeRuleUrl:'/roadinfo/feeRule/',
 	
 	
 	// 贵州银行支付

common/http.api.js

@@ -35,6 +35,7 @@ const install = (Vue, vm) => {
 	let getOrderDetail = (params = {}) => vm.$u.get(apiurl.getOrderDetailUrl+params.id);
 	
 	let nearRoadsl = (params = {}) => vm.$u.post(apiurl.nearRoadslUrl,params);
+	let roadChargeRule = (params = {}) => vm.$u.get(apiurl.roadsChargeRuleUrl + params.roadNo);
 	
 	//贵州银行支付
 	let gzbank = (params = {}) => vm.$u.post(apiurl.gzbankurl, params);
@@ -60,7 +61,8 @@ const install = (Vue, vm) => {
 		getOrderList,
 		getOrderDetail,
 		gzbank,
-		nearRoadsl
+		nearRoadsl,
+		roadChargeRule
 	};
 }
 

pages.json

@@ -82,8 +82,8 @@
             {
                 "navigationBarTitleText": "停车场信息",
                 "enablePullDownRefresh": false,
-                "navigationBarBackgroundColor": "#008CFF",
-                "navigationBarTextStyle": "white"
+                "navigationBarBackgroundColor": "#ffffff",
+                "navigationBarTextStyle": "black"
             }
             
         }

pages/center/monthly/monthly.vue

@@ -8,11 +8,18 @@
 						<view>{{item.name}}</view>
 						<view>{{item.parking}}</view>
 					</view>
-					<view class="mlit-right">汽油车</view>
+					<view class="mlit-right" v-if="item.carType === 1">汽油车</view>
+					<view class="mlit-right" v-if="item.carType === 3">新能源</view>
 				</view>
 				<view class="monthly-list-item-bottom">
-					<view>包期：{{item.dateRange}}</view>
-					<view>剩余天数：{{item.balance}}天</view>
+					<view class="mlib-item">
+						<view>包期</view>:
+						<view>{{item.dateRange}}</view>
+					</view>
+					<view class="mlib-item">
+						<view>剩余天数</view>:
+						<view>{{item.balance}}天</view>
+					</view>
 				</view>
 			</view>
 		</view>
@@ -51,8 +58,16 @@
 				]
 			}
 		},
+		onShow () {
+			this.getCarsLicenseList()
+		},
 		methods: {
-			
+			getCarsLicenseList () {
+				this.$u.apiurl.mycarsUrl()
+					.then(res => {
+						console.log(res)
+					})
+			}
 		}
 	}
 </script>

pages/chargeStandard/chargeStandard.scss

@@ -1,10 +1,46 @@
 .charge {
 	background-color: #F6F6FF;
 	.charge-rules-container {
-		background-color: #fff;
-		border-radius: 25rpx;
-		padding: 32rpx 40rpx;
 		margin-bottom: 20rpx;
+		.charge-list {
+			width: 100%;
+			margin: 0 auto;
+			padding: 33rpx 38rpx;
+			display: flex;
+			justify-content: space-between;
+			background-color: #F6F6FF;
+			.charge-list-item {
+				width: 32%;
+				margin-right: 2%;
+				background-color: #fff;
+				border-radius: 10rpx;
+				padding: 29rpx;
+				text-align: center;
+				&:last-child {
+					margin-right: 0;
+				}
+				view {
+					&:first-child {
+						color: #008CFF;
+						font-size: 30rpx;
+						font-weight: 500;
+						line-height: 42rpx;
+					}
+					&:last-child {
+						color: #999999;
+						font-size: 24rpx;
+						font-weight: 400;
+						margin-top: 7rpx;
+						line-height: 33rpx;
+					}
+				}
+			}
+		}
+	}
+	.charge-rules-list {
+		padding: 32rpx 40rpx;
+		border-radius: 25rpx;
+		background-color: #fff;
 	}
 	.charge-type {
 		text {
@@ -63,37 +99,4 @@
 		color: #757575;
 		line-height: 40rpx;
 	}
-	.charge-list {
-		width: calc(100% - 78rpx);
-		margin: 0 auto;
-		padding: 33rpx 0;
-		display: flex;
-		justify-content: space-between;
-		.charge-list-item {
-			width: 32%;
-			margin-right: 2%;
-			background-color: #fff;
-			border-radius: 10rpx;
-			padding: 29rpx;
-			text-align: center;
-			&:last-child {
-				margin-right: 0;
-			}
-			view {
-				&:first-child {
-					color: #008CFF;
-					font-size: 30rpx;
-					font-weight: 500;
-					line-height: 42rpx;
-				}
-				&:last-child {
-					color: #999999;
-					font-size: 24rpx;
-					font-weight: 400;
-					margin-top: 7rpx;
-					line-height: 33rpx;
-				}
-			}
-		}
-	}
 }

pages/chargeStandard/chargeStandard.vue

@@ -1,105 +1,41 @@
 <template>
+	<!-- 收费标准 -->
 	<view class="charge">
-		<view class="charge-list">
-			<view class="charge-list-item">
-				<view>2.5元/小时</view>
-				<view>收费标准</view>
-			</view>
-			<view class="charge-list-item">
-				<view>15分钟内</view>
-				<view>免费时长</view>
-			</view>
-			<view class="charge-list-item">
-				<view>59元</view>
-				<view>封顶金额</view>
-			</view>
-		</view>
-		<view class="charge-rules-container">
-			<view class="charge-type">
-				<text>节假日规则</text>
-			</view>
-			<view class="charge-rules">
-				<view>小车</view>
-				<view class="charge-rules-right">
-					<view>
-						<text>7:00-22:00</text>
-						<text>5元/小时</text>
-					</view>
-					<view>
-						<text>22:00-次日7:00</text>
-						<text>3元/小时</text>
-					</view>
+		<view class="charge-rules-container" v-for="(item, index) in chargeRulesInfo" :key="index">
+			<view class="charge-list">
+				<!-- <view class="charge-list-item">
+					<view>2.5元/小时</view>
+					<view>收费标准</view>
+				</view> -->
+				<view class="charge-list-item">
+					<view>{{item.freeTime}}分钟内</view>
+					<view>免费时长</view>
 				</view>
-			</view>
-			<view class="charge-rules">
-				<view>大型车</view>
-				<view class="charge-rules-right">
-					<view>
-						<text>7:00-22:00</text>
-						<text>5元/小时</text>
-					</view>
-					<view>
-						<text>22:00-次日7:00</text>
-						<text>3元/小时</text>
-					</view>
-				</view>
-			</view>
-			<view class="charge-rules">
-				<view>摩托车</view>
-				<view class="charge-rules-right">
-					<view>
-						<text>7:00-22:00</text>
-						<text>5元/小时</text>
-					</view>
-					<view>
-						<text>22:00-次日7:00</text>
-						<text>3元/小时</text>
-					</view>
+				<view class="charge-list-item">
+					<view>{{item.topAmt}}元</view>
+					<view>封顶金额</view>
 				</view>
 			</view>
-		</view>
-		<view class="charge-rules-container">
-			<view class="charge-type">
-				<text>非节假日规则</text>
-			</view>
-			<view class="charge-rules">
-				<view>小车</view>
-				<view class="charge-rules-right">
-					<view>
-						<text>7:00-22:00</text>
-						<text>5元/小时</text>
+			<view class="charge-rules-list">
+				<view class="charge-type">
+						<text v-if="item.feePeriod ==1">节假日规则</text>
+						<text v-else>非节假日规则</text>
 					</view>
-					<view>
-						<text>22:00-次日7:00</text>
-						<text>3元/小时</text>
+					<view class="charge-rules" v-for="(type, tIndex) in item.list" :key="tIndex">
+						<view v-if="type.vehicleType == 0">小车</view>
+						<view v-if="type.vehicleType == 1">大车</view>
+						<view v-if="type.vehicleType == 2">超大型车</view>
+						<view v-if="type.vehicleType == 3">摩托车</view>
+						<view v-if="type.vehicleType == 4">非机动车</view>
+						<view v-if="type.vehicleType == 5">其他</view>
+						<view class="charge-rules-right">
+							<view v-for="(time, tIndex) in type.list" :key="tIndex">
+								<text>{{time.beginTime.substring(0, 5)}}-{{time.beginTime > time.endTime ? '次日': ''}}{{time.endTime.substring(0, 5)}}</text>
+								<text>{{time.amt}}元/小时</text>
+							</view>
+						</view>
 					</view>
-				</view>
-			</view>
-			<view class="charge-rules">
-				<view>大型车</view>
-				<view class="charge-rules-right">
-					<view>
-						<text>7:00-22:00</text>
-						<text>5元/小时</text>
-					</view>
-					<view>
-						<text>22:00-次日7:00</text>
-						<text>3元/小时</text>
-					</view>
-				</view>
-			</view>
-			<view class="charge-rules">
-				<view>摩托车</view>
-				<view class="charge-rules-right">
-					<view>
-						<text>7:00-22:00</text>
-						<text>5元/小时</text>
-					</view>
-					<view>
-						<text>22:00-次日7:00</text>
-						<text>3元/小时</text>
-					</view>
-				</view>
+				
 			</view>
 		</view>
 		<view class="charge-instructions">
@@ -123,14 +59,106 @@
 </template>
 
 <script>
+	import getUrlParams from './../../utils/getUrlParams.js'
 	export default {
 		data() {
 			return {
-				
+				roadNo: '',
+				info: {
+					freeTime: '',
+					topAmt: ''
+				},
+				chargeRulesInfo: []
 			}
 		},
-		methods: {
+		onLoad() {
+			let locationLocaturl = window.location.hash
+			const roadNo = getUrlParams(locationLocaturl, "roadNo"); // 截取roadId
+			if (roadNo) {
+				this.roadNo = roadNo
+				this.getChargeRulesInfo(roadNo)
+			} else {
+				uni.showToast({
+				    title: '参数丢失,返回上一个页面',
+				    duration: 2000,
+					icon: 'none',
+					mask: true
+				})
+			}
+		},
+		onShow() {
 			
+		},
+		methods: {
+			/**
+			  * 获取收费标准
+			  * {roadNo} 路段
+			  * */
+			getChargeRulesInfo (roadNo) {
+				this.$u.api.roadChargeRule({
+					roadNo: roadNo
+				})
+					.then(res => {
+						if (res.code === 200) {
+							// 数据整合后
+							let chargeRulesArr = []
+							for (let i = 0; i < res.data.length; i++) {
+								let item = res.data[i]
+								this.info.freeTime = res.data[0].freeTime
+								this.info.topAmt = res.data[0].topAmt
+								const obj = {
+									feeName: item.feeName,
+									feeNo: item.feeNo,
+									feePeriod: item.feePeriod,
+									feeStep: item.feeStep,
+									feeType: item.feeType,
+									freeTime: item.freeTime,
+									topAmt: item.topAmt,
+									id: item.id,
+									list: [],
+									repeatList: [] // 用来检验已存在
+								}
+								for (let j = 0; j < item.vehicleRules.length; j++) {
+									let jItem = item.vehicleRules[j]
+									const obj1 = {
+										amt: jItem.amt,
+										beginTime: jItem.beginTime,
+										endTime: jItem.endTime,
+										vehicleFeeNo: jItem.vehicleFeeNo,
+										vehicleType: jItem.vehicleType,
+										list: []
+									}
+									if (obj.repeatList.indexOf(jItem.vehicleType) === -1) {
+										obj.repeatList.push(jItem.vehicleType)
+										obj1.list.push(jItem)
+									} else {
+										for (let k = 0; k < item.vehicleRules.length; k++) {
+										  if (obj1.vehicleType === item.vehicleRules[k].vehicleType) {
+											obj1.list.push(item.vehicleRules[k])
+											obj.list.push(obj1)
+										  }
+										}
+									}
+								}
+								// 存在重复,去除重复操作
+								let obj2 = {}
+								obj.list = obj.list.reduce((cur,next) => {
+								    obj[next.vehicleType] ? "" : obj[next.vehicleType] = true && cur.push(next);
+								    return cur;
+								},[])
+								chargeRulesArr.push(obj)
+							}
+							this.chargeRulesInfo = chargeRulesArr
+						} else {
+							uni.showToast({
+							    title: `${res.msg}`,
+							    duration: 3000,
+								icon: 'none',
+								mask: true
+							})
+						}
+					})
+			}
 		}
 	}
 </script>

pages/handleMonthly/handleMonthly.vue

@@ -64,6 +64,7 @@
 			}
 		},
 		onLoad () {
+			this.getCarsLicenseList()
 		},
 		methods: {
 			/**
@@ -117,6 +118,25 @@
 			},
 			carLicenseListConfirm (item) {
 				this.form.carLicense = item[0]
+			},
+			getCarsLicenseList () {
+				this.$u.api.getMycars()
+					.then(res => {
+						console.log(res)
+						if (res.code === 200) {
+							if (res.data) {
+								this.carLicenseList = []
+								res.data.rows.forEach(item => {
+									const obj = {
+										value: item.id,
+										label: item.vehicleNo
+									}
+									this.carLicenseList.push(obj)
+								})
+								this.form.carLicense = this.carLicenseList[0]
+							}
+						}
+					})
 			}
 		}
 	}

pages/parkingInformation/parkingInformation.scss

@@ -1,5 +1,5 @@
 .parking-information {
-	background-color: #F6F6FF;
+	background-color: #fff;
 	width: 100%;
 	.parking-information-slider {
 		image {
@@ -13,11 +13,25 @@
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
+			border-bottom: solid 1px #979797;
+			padding-bottom: 25rpx;
 			.pict-left {
 				.title {
-					font-size: 34rpx;
-					color: #3A3A3A;
+					font-size: 32rpx;
+					color: #484848;
 					font-weight: 600;
+					text {
+						font-size: 24rpx;
+						color: #AAAAAA;
+						margin-left: 19rpx;
+					}
+				}
+				.subtitle {
+					font-size: 24rpx;
+					color: #969696;
+					font-weight: 400;
+					line-height: 33rpx;
+					margin-top: 10rpx;
 				}
 				.tags {
 					display: flex;
@@ -49,49 +63,51 @@
 			margin: 13rpx 0;
 		}
 		.parking-information-content-time {
-			color: #727275;
+			color: #555555;
 			font-size: 24rpx;
-			margin-bottom: 15rpx;
-			text {
-				font-size: 30rpx;
-				color: #1099FA;
-				margin-left: 10rpx;
+			margin-bottom: 73rpx;
+			margin-top: 23rpx;
+			display: flex;
+			flex-direction: row;
+			view {
+				width: 50%;
 			}
 		}
 		.parking-information-content-cars {
 			display: flex;
 			justify-content: space-between;
 			.picc-tag {
-				width: 324rpx;
-				height: 73rpx;
-				line-height: 73rpx;
-				background-color: #fff;
-				border-radius: 5px;
+				width: 48%;
+				background-color: #F6F6FF;
+				border-radius: 15rpx;
+				height: 139rpx;
+				align-items: center;
 				text-align: center;
-				font-size: 24rpx;
-				color: #838383;
-				font-weight: 400;
-				text:last-child {
-					font-size: 36rpx;
-					color: #525252;
-					font-weight: 500;
+				view {
+					line-height: 50rpx;
+					&:first-child {
+						color: #1997FF;
+						font-size: 56rpx;
+						padding-top: 28rpx;
+					}
+					&:last-child {
+						color: #838383;
+						font-size: 24rpx;
+					}
 				}
-				
 			}
 		}
 		.parking-information-content-price {
 			text-align: center;
-			margin: 25rpx 0 18rpx 0;
-			font-size: 24rpx;
-			color: #9D9D9D;
+			margin: 37rpx 0 81rpx 0;
+			font-size: 20rpx;
+			color: #A4A4A4;
 			font-weight: 400;
 			text {
-				font-size: 60rpx;
-				color: #FA6400;
-				font-weight: 500;
+				margin-right: 33rpx;
 			}
 		}
-		.parking-information-conetnt-button {
+		.parking-information-content-button {
 			background-color: #008CFF;
 			color: #fff;
 			height: 100rpx;

pages/parkingInformation/parkingInformation.vue

@@ -1,57 +1,38 @@
 <template>
 	<view class="parking-information">
 		<view class="parking-information-slider">
-			<image src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngfcc26df820e339ac79b1f066b7ed6ac52b440624fa7e7f4a3bf97030b2aac575" mode=""></image>
+			<image src="../../static/img/parking-info-bg.png" mode=""></image>
 		</view>
 		<view class="parking-information-content">
 			<view class="parking-information-content-title">
 				<view class="pict-left">
-					<view class="title">甜蜜小镇D18组团停车场</view>
-					<view class="tags">
-						<view class="tag">无感支付</view>
-						<view class="tag">电子支付</view>
-					</view>
+					<view class="title">甜蜜小镇D18组团停车场<text>地面</text></view>
+					<view class="subtitle">贵阳市云岩区中天未来方舟甜蜜小镇D18组团</view>
 				</view>
 				<view class="pict-right">
 					<image src="../../static/img/distance-icon.png" mode=""></image>
-					<view class="">238m</view>
+					<view class="m">238m</view>
 				</view>
 			</view>
-			<view class="parking-information-content-subtitle">
-				贵阳市云岩区中天未来方舟甜蜜小镇D18组团
-			</view>
 			<view class="parking-information-content-time">
-				服务时间<text>7:00-21:00</text>
+				<view>服务时间：<text>7:00-21:00</text></view>
+				<view>包月费用：<text>300</text>元</view>
 			</view>
 			<view class="parking-information-content-cars">
 				<view class="picc-tag">
-					<text>共有车位:</text>
-					<text>120</text>
+					<view>120</view>
+					<view>共有车位</view>
 				</view>
 				<view class="picc-tag">
-					<text>空闲车位:</text>
-					<text>30</text>
+					<view>30</view>
+					<view>空闲车位</view>
 				</view>
 			</view>
 			<view class="parking-information-content-price">
-				<view class="">
-					<text>10</text>元/小时
-				</view>
-				<view class="">
-					包月费用：300元
-				</view>
+				<text>点击查看停车规则</text>
+				<u-icon name="arrow-right"></u-icon>
 			</view>
 			<u-button class="parking-information-content-button">办理包月</u-button>
-			<view class="parking-information-content-rule">
-				<view>收费规则</view>
-				<view>1、停车不足30分钟，免费；</view>
-				<view>2、停车 超过20分钟，按2元/小时收费；</view>
-				<view>3、月卡会员在有效期内停车免费</view>
-			</view>
-			<view class="parking-information-content-telphone">
-				<view>电话</view>
-				<view>0851-88866688</view>
-			</view>
 		</view>
 	</view>
 </template>

pages/parkingLists/parkingLists.scss

@@ -89,7 +89,7 @@
 	transform: scaleY(0.9);
 	margin: 0 10rpx;
 	border-radius: 25rpx;
-	padding: 20rpx 30rpx;
+	padding: 30rpx;
 }
 .parking-current-address .swiper-item>view:first-child {
 	font-size: 32rpx;
@@ -102,16 +102,16 @@
 	line-height: 50rpx;
 }
 .parking-current-address .swiper-item>view:nth-child(3) {
-	background-image: url('./../../static/img/remaining-position-bg.png');
-	background-position: center center;
-	// background-size: 100% 100%;
 	display: flex;
 	flex-direction: row;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#fff), to(#F4F7FF));/*谷歌*/
+	background: linear-gradient(to right, #fff 0%, #F4F7FF 50%, #fff 100%);
 	justify-content: space-around;
-	line-height: 120rpx;
-	height: 120rpx;
+	height: 71rpx;
+	line-height: 71rpx;
 	border-radius: 20rpx;
 	margin-top: 20rpx;
+	margin-bottom: 20rpx;
 }
 .parking-current-address .swiper-item>view:nth-child(4) {
 	display: flex;
@@ -176,19 +176,22 @@
 	font-size: 28rpx;
 }
 .swiper-item-button button {
-	width: 45%;
-	height: 90rpx;
+	width: 48%;
+	height: 64rpx;
+	line-height: 64rpx;
+	font-size: 30rpx;
 }
 .swiper-item-button button:first-child {
 	border: solid 1px #008CFF;
 	color: #008CFF;
+	margin-right: 4%;
 }
 .swiper-item-button button:last-child {
 	background-color: #008CFF;
 	color: #fff;
 }
 .swiper-item-button .disabled {
-	background-color: #858585!important;
+	background-color: #d2d2d2!important;
 }
 .loading {
 	width: 100%;