增加停车场

pages/center/order/order.scss

@@ -64,4 +64,27 @@
 			}
 		}
 	}
+}
+
+.type-list {
+	height: 236rpx;
+	width: 116rpx;
+	position: fixed;
+	right: 53rpx;
+	bottom: 93rpx;
+	z-index: 100;
+	&-item {
+		width: 116rpx;
+		height: 116rpx;
+		line-height: 116rpx;
+		text-align: center;
+		background: url('../../../static/img/type-not-current.svg') no-repeat center center;
+		background-size: 100% 100%;
+		color: #008cff;
+	}
+	&-item-current {
+		background: url('../../../static/img/type-current.svg') no-repeat center center;
+		background-size: 100% 100%;
+		color: #fff;
+	}
 }

pages/center/order/order.vue

@@ -40,10 +40,12 @@
 										{{ orderItem.orderStatus | verifyStatusFilter }}
 									</view>
 								</view>
-								<view class="order-center">
+								<!-- 路段显示字段 -->
+								<view class="order-center" v-if="typeCurrent.value === 'road'">
 									<view class="order-center-item">订单编号：{{ orderItem.orderId }}</view>
 									<!-- <view class="order-center-item">入场时间：{{ orderItem.inTime }}</view> -->
-									<view class="order-center-item" v-if="orderItem.deviceType == 1">入场时间：{{ orderItem.inTime }}</view>
+									<view class="order-center-item" v-if="orderItem.deviceType == 1">
+										入场时间：{{ orderItem.inTime }}</view>
 									<view class="order-center-item" v-else>开始计费：{{ orderItem.inTime }}</view>
 									<template v-if="orderItem.deviceType == 1">
 										<view class="order-center-item"
@@ -90,6 +92,32 @@
 									<view class="order-center-item" v-if="Number(orderItem.deviceType) !== 1">
 										车位锁设备号：{{ orderItem.deviceNo }}</view>
 								</view>
+								<!-- 停车场显示字段 -->
+								<view class="order-center" v-if="typeCurrent.value === 'park'">
+									<view class="order-center-item">订单编号：{{ orderItem.orderId }}</view>
+									<view class="order-center-item">
+										入场通道：{{ orderItem.inTime }}</view>
+									<view class="order-center-item">
+										入场时间：{{ orderItem.inTime }}</view>
+									<view class="order-center-item">
+										出场通道：{{ orderItem.inTime }}</view>
+									<view class="order-center-item">
+										出场时间：{{ orderItem.inTime }}</view>
+									<view class="order-center-item">
+										免费时长：{{ orderItem.freeDuration || 0 }}</view>
+									<view class="order-center-item">
+										计费时长：{{ orderItem.calcDuration || 0 }}</view>
+									<view class="order-center-item">
+										累计停车时长：{{ orderItem.duration || 0 }}</view>
+									<view class="order-center-item">
+										应付金额：
+										<span class="pay-amount">{{ orderItem.payAmount || 0 }}</span>
+									</view>
+									<view class="order-center-item">
+										实缴金额：
+										<span class="pay-amount">{{ orderItem.actualAmount || 0 }}</span>
+									</view>
+								</view>
 								<view class="order-bottom">
 									<u-cell-item title="收费标准" @click.native.stop="jumpChargeStandard(orderItem)">
 									</u-cell-item>
@@ -102,6 +130,14 @@
 			</swiper>
 		</view>
 
+		<!-- 停车场和路段切换 -->
+		<view class="type-list">
+			<view class="type-list-item" v-for="(item, index) in typeList" :key="index"
+				:class="{'type-list-item-current':  typeCurrent.value === item.value}" @click="typeTabClick(item)">
+				{{ item.label }}
+			</view>
+		</view>
+
 		<u-toast ref="uToast" />
 	</view>
 </template>
@@ -120,28 +156,28 @@
 				list: [{
 						index: 0,
 						name: '全部',
-						orderStatu: null,
+						orderStatus	: null,
 						pageNum: 1,
 						total: null
 					},
 					{
 						index: 1,
 						name: '停放中',
-						orderStatu: 1,
+						orderStatus	: 1,
 						pageNum: 1,
 						total: null
 					},
 					{
 						index: 2,
 						name: '欠费未缴',
-						orderStatu: 2,
+						orderStatus	: 2,
 						pageNum: 1,
 						total: null
 					},
 					{
 						index: 3,
 						name: '已完成',
-						orderStatu: 4,
+						orderStatus	: 4,
 						pageNum: 1,
 						total: null
 					}
@@ -150,10 +186,22 @@
 				swiperCurrent: 0,
 				tabsHeight: 0,
 				dx: 0,
-				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore']
+				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
+				// 停车类型
+				typeList: [{
+						label: '路段',
+						value: 'road'
+					},
+					{
+						label: '停车场',
+						value: 'park'
+					}
+				],
+				typeCurrent: {}
 			}
 		},
 		onShow() {
+			this.typeCurrent = this.typeList[0]
 			// onShow 刷新数据
 			this.list[this.current].pageNum = 1
 			this.orderList = [
@@ -180,17 +228,16 @@
 				}
 			}
 		},
-		onBackPress(e){
+		onBackPress(e) {
 			// 返回主页面tabBar
 			uni.switchTab({
 				url: "../../center/index"
 			})
-		  // 此处一定要return为true，否则页面不会返回到指定路径
-		  return true;
+			// 此处一定要return为true，否则页面不会返回到指定路径
+			return true;
 		},
 		methods: {
 			reachBottom() {
-				// console.log('this.list[this.current]',this.list[this.current]);
 				if (this.orderList[this.current].length >= this.list[this.current].total) {
 					this.loadStatus.splice(this.list[this.current].index, 1, 'nomore')
 					return
@@ -203,11 +250,11 @@
 			getOrderList(orderType) {
 				const param = {
 					pageNum: orderType.pageNum,
-					orderStatus: orderType.orderStatu
+					orderStatus: orderType.orderStatus	
 				}
-				// 未出场: orderStatu = 1-停放中
-				// 缴费中: orderStatu = 2-出场中  && payStatus = 2-支付中
-				// 完成:   orderStatu = 4-完成
+				// 未出场: orderStatus	 = 1-停放中
+				// 缴费中: orderStatus	 = 2-出场中  && payStatus = 2-支付中
+				// 完成:   orderStatus	 = 4-完成
 				this.$u.api.getOrderList(param)
 					.then(res => {
 						for (const item of res.data.pageInfo.rows) {
@@ -223,14 +270,12 @@
 							title: err.msg,
 							type: 'error'
 						})
-						// console.log('getOrderList ',err)
 					})
 
 				this.loadStatus.splice(this.current, 1, 'loadmore')
 			},
 			// tab栏切换
 			change(index) {
-				// this.swiperCurrent = this.list[index].orderStatu;
 				this.swiperCurrent = index
 				this.getOrderList(this.list[index])
 			},
@@ -258,7 +303,8 @@
 				this.$u.route({
 					url: 'pages/center/order/orderDetails/orderDetails',
 					params: {
-						orderId: item.id
+						orderId: item.id,
+						type: this.typeCurrent.value
 					}
 				})
 			},
@@ -292,6 +338,13 @@
 						orderId: item.orderId
 					})
 				}
+			},
+			/**
+			 * 类型切换
+			 * @param {Object} item
+			 */
+			typeTabClick(item) {
+				// this.typeCurrent = item
 			}
 		},
 		filters: {

pages/center/order/orderDetails/orderDetails.vue

@@ -1,72 +1,34 @@
 <template>
-  <view class="wrap">
-    <view class="order-info">
-      <u-image
-        class="order-info-img"
-        width="90rpx"
-        height="90rpx"
-        src="../../../../static/img/position.png"
-      ></u-image>
-      <view class="addr">{{ orderInfo.roadName }}</view>
-      <view class="pay-amount" v-if="orderInfo.payAmount">-{{ orderInfo.payAmount }}</view>
-      <view class="pay-amount" v-else>{{ orderInfo.payAmount }}</view>
-      <u-cell-group :border="false">
-        <u-cell-item
-          title="车牌号"
-          :arrow="false"
-          :border-bottom="false"
-          :border-top="false"
-          :value="orderInfo.vehicleNo"
-        ></u-cell-item>
-        <u-cell-item
-          title="优惠总金额"
-          :arrow="false"
-          :border-bottom="false"
-          :border-top="false"
-          :value="(orderInfo.preferentialAmount ? orderInfo.preferentialAmount.toFixed(2) : 0) + ' 元'"
-        ></u-cell-item>
-      </u-cell-group>
-      <u-cell-group>
-        <u-cell-item
-          title="订单编号 "
-          :arrow="false"
-          :border-bottom="false"
-          :border-top="false"
-          :value="orderInfo.orderId"
-        ></u-cell-item>
-        <template v-if="orderInfo.deviceType == 1">
-        	<u-cell-item
-        	  title="入场时间 "
-        	  :arrow="false"
-        	  :border-bottom="false"
-        	  :border-top="false"
-        	  :value="orderInfo.inTime"
-        	></u-cell-item>
-        	<u-cell-item
-        	  title="出场时间 "
-        	  :arrow="false"
-        	  :border-bottom="false"
-        	  :border-top="false"
-        	  :value="orderInfo.outTime"
-        	></u-cell-item>
-        </template>
+	<view class="wrap">
+		<view class="order-info">
+			<u-image class="order-info-img" width="90rpx" height="90rpx" src="../../../../static/img/position.png">
+			</u-image>
+			<view class="addr">{{ orderInfo.roadName }}</view>
+			<view class="pay-amount" v-if="orderInfo.payAmount">-{{ orderInfo.payAmount }}</view>
+			<view class="pay-amount" v-else>{{ orderInfo.payAmount }}</view>
+			<u-cell-group :border="false">
+				<u-cell-item title="车牌号" :arrow="false" :border-bottom="false" :border-top="false"
+					:value="orderInfo.vehicleNo"></u-cell-item>
+				<u-cell-item title="优惠总金额" :arrow="false" :border-bottom="false" :border-top="false"
+					:value="(orderInfo.preferentialAmount ? orderInfo.preferentialAmount.toFixed(2) : 0) + ' 元'">
+				</u-cell-item>
+			</u-cell-group>
+			<u-cell-group>
+				<u-cell-item title="订单编号 " :arrow="false" :border-bottom="false" :border-top="false"
+					:value="orderInfo.orderId"></u-cell-item>
+				<template v-if="orderInfo.deviceType == 1">
+					<u-cell-item title="入场时间 " :arrow="false" :border-bottom="false" :border-top="false"
+						:value="orderInfo.inTime"></u-cell-item>
+					<u-cell-item title="出场时间 " :arrow="false" :border-bottom="false" :border-top="false"
+						:value="orderInfo.outTime"></u-cell-item>
+				</template>
 				<template v-else>
-					<u-cell-item
-					  title="开始计费 "
-					  :arrow="false"
-					  :border-bottom="false"
-					  :border-top="false"
-					  :value="orderInfo.inTime"
-					></u-cell-item>
-					<u-cell-item
-					  title="结束计费 "
-					  :arrow="false"
-					  :border-bottom="false"
-					  :border-top="false"
-					  :value="orderInfo.outTime"
-					></u-cell-item>
+					<u-cell-item title="开始计费 " :arrow="false" :border-bottom="false" :border-top="false"
+						:value="orderInfo.inTime"></u-cell-item>
+					<u-cell-item title="结束计费 " :arrow="false" :border-bottom="false" :border-top="false"
+						:value="orderInfo.outTime"></u-cell-item>
 				</template>
-        <!-- <u-cell-item
+				<!-- <u-cell-item
           title="停车时长 "
           :arrow="false"
           :border-bottom="false"
@@ -81,84 +43,37 @@
 				  :value="orderInfo.freeDuration"
 				></u-cell-item> -->
 				<template v-if="orderInfo.deviceType == 1">
-					<u-cell-item
-					  title="免费时长 "
-					  :arrow="false"
-					  :border-bottom="false"
-					  :border-top="false"
-					  :value="orderInfo.freeDuration"
-					></u-cell-item>
+					<u-cell-item title="免费时长 " :arrow="false" :border-bottom="false" :border-top="false"
+						:value="orderInfo.freeDuration"></u-cell-item>
 				</template>
 				<template v-else>
-					<u-cell-item
-					  title="免费时长 "
-					  :arrow="false"
-					  :border-bottom="false"
-					  :border-top="false"
-					  value="0天0时15分0秒"
-					></u-cell-item>
+					<u-cell-item title="免费时长 " :arrow="false" :border-bottom="false" :border-top="false"
+						value="0天0时15分0秒"></u-cell-item>
 				</template>
-				<u-cell-item
-				  title="计费时长 "
-				  :arrow="false"
-				  :border-bottom="false"
-				  :border-top="false"
-				  :value="orderInfo.calcDuration"
-				></u-cell-item>
-				<u-cell-item
-				  title="累计停车时长 "
-				  :arrow="false"
-				  :border-bottom="false"
-				  :border-top="false"
-				  :value="orderInfo.duration"
-				></u-cell-item>
-        <u-cell-item
-          v-if="orderInfo.createTime"
-          title="订单创建时间 "
-          :arrow="false"
-          :border-bottom="false"
-          :border-top="false"
-          :value="orderInfo.createTime"
-        ></u-cell-item>
-        <u-cell-item
-          v-if="orderInfo.payTime"
-          title="支付时间 "
-          :arrow="false"
-          :border-bottom="false"
-          :border-top="false"
-          :value="orderInfo.payTime"
-        ></u-cell-item>
-        <u-cell-item
-          v-if="orderInfo.payStatus == 1"
-          title="缴费方式 "
-          :arrow="false"
-          :border-bottom="false"
-          :border-top="false"
-          :value="orderInfo.paySource | verifyPaySource"
-        ></u-cell-item>
-      </u-cell-group>
-    </view>
-    <view
-      class="bottom-btn-wrap"
-      v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open'"
-    >
-      <view class="bottom-btn" @click="goPay(orderId)">去支付</view>
-    </view>
-		<view
-		  class="bottom-btn-wrap"
-		  v-if="openFlag === 'open' && orderInfo.payStatus == 1"
-		>
-		  <view class="bottom-btn" @click="jumpOrderList()">返回订单页</view>
+				<u-cell-item title="计费时长 " :arrow="false" :border-bottom="false" :border-top="false"
+					:value="orderInfo.calcDuration"></u-cell-item>
+				<u-cell-item title="累计停车时长 " :arrow="false" :border-bottom="false" :border-top="false"
+					:value="orderInfo.duration"></u-cell-item>
+				<u-cell-item v-if="orderInfo.createTime" title="订单创建时间 " :arrow="false" :border-bottom="false"
+					:border-top="false" :value="orderInfo.createTime"></u-cell-item>
+				<u-cell-item v-if="orderInfo.payTime" title="支付时间 " :arrow="false" :border-bottom="false"
+					:border-top="false" :value="orderInfo.payTime"></u-cell-item>
+				<u-cell-item v-if="orderInfo.payStatus == 1" title="缴费方式 " :arrow="false" :border-bottom="false"
+					:border-top="false" :value="orderInfo.paySource | verifyPaySource"></u-cell-item>
+			</u-cell-group>
 		</view>
-		
-    <!-- 支付方式 -->
-    <PaymentMethod
-      :payWayPop="payWayPop"
-      :curOrderList="orderList"
-	  :jumpUrl="jumpUrl"
-      @closePaymentMethod="closePaymentMethod"
-    ></PaymentMethod>
-		
+		<view class="bottom-btn-wrap"
+			v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open'">
+			<view class="bottom-btn" @click="goPay(orderId)">去支付</view>
+		</view>
+		<view class="bottom-btn-wrap" v-if="openFlag === 'open' && orderInfo.payStatus == 1">
+			<view class="bottom-btn" @click="jumpOrderList()">返回订单页</view>
+		</view>
+
+		<!-- 支付方式 -->
+		<PaymentMethod :payWayPop="payWayPop" :curOrderList="orderList" :jumpUrl="jumpUrl"
+			@closePaymentMethod="closePaymentMethod"></PaymentMethod>
+
 		<!-- 加载中遮罩 -->
 		<u-mask :show="loadingMask">
 			<view class="loading-warp">
@@ -170,152 +85,156 @@
 				</view>
 			</view>
 		</u-mask>
-    <u-toast ref="uToast" />
-  </view>
+		<u-toast ref="uToast" />
+	</view>
 </template>
 
 <script>
-import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
-export default {
-  components: {
-    PaymentMethod
-  },
-  data () {
-    return {
-      orderId: null,
-      openFlag: null,
-			polyOrderId: null,
-      // 订单信息
-      orderInfo: {},
-      // 立即支付弹框
-      payWayPop: false,
-      // 订单列表,一般长度为1的数组
-      orderList: [],
-			// 重定向页面
-			jumpUrl: location.href + '&type=open',
-			loadingMask: false
-    }
-  },
-  onLoad (page) {
-    this.orderId = page?.orderId
-		// 该标识判断是否是从支付完成页面回调回来
-		this.openFlag = page?.type
-		this.polyOrderId = page?.polyOrderId
-		if (this.orderId) {
-			// 如果type标识和支付订单id同时存在,证明需要执行轮询判断支付状态,否则直接查询
-			if (this.openFlag && this.polyOrderId) {
-				this.loadingMask = true
-				this.handlePayStatus(this.polyOrderId)
-				let time = 0
-				this.timer = setInterval(() => {
-					time ++
-					this.handlePayStatus(this.polyOrderId, this.openFlag)
-					// 超过60s直接清除轮询
-					if (time === 60) {
-						clearInterval(this.timer)
-					}
-				}, 1000)
-			} else {
-				this.handleGetOrderinfo(this.orderId)
+	import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue'
+	export default {
+		components: {
+			PaymentMethod
+		},
+		data() {
+			return {
+				orderId: null,
+				openFlag: null,
+				polyOrderId: null,
+				// 订单信息
+				orderInfo: {},
+				// 立即支付弹框
+				payWayPop: false,
+				// 订单列表,一般长度为1的数组
+				orderList: [],
+				// 重定向页面
+				jumpUrl: location.href + '&type=open',
+				loadingMask: false
 			}
-		}
-  },
-  methods: {
-		jumpOrderList() {
-			this.$u.route({
-				url: 'pages/center/order/order'
-			})
 		},
-		/**
-		 * 通过订单id去获取订单信息
-		 * */
-    handleGetOrderinfo (orderId) {
-      this.$u.api.getOrderDetail({ id: orderId })
-        .then(res => {
-          if (res.code === 200) {
-            this.orderInfo = res.data
-          } else {
-            this.$refs.uToast.show({
-              title: res.msg,
-              type: 'error'
-            })
-          }
-        })
-    },
-		/**
-		 * 查询支付状态
-		 * @param { String } orderId
-		 */
-		handlePayStatus(orderId) {
-			this.$u.api.getOrderInfo({ orderId }).then(res => {
-				if (res.code === 200) {
-					if (res.data.payStatus === 1 || res.data.payStatus === 3) {
+		onLoad(page) {
+			this.orderId = page?.orderId
+			// 该标识判断是否是从支付完成页面回调回来
+			this.openFlag = page?.type
+			this.polyOrderId = page?.polyOrderId
+			if (this.orderId) {
+				// 如果type标识和支付订单id同时存在,证明需要执行轮询判断支付状态,否则直接查询
+				if (this.openFlag && this.polyOrderId) {
+					this.loadingMask = true
+					this.handlePayStatus(this.polyOrderId)
+					let time = 0
+					this.timer = setInterval(() => {
+						time++
+						this.handlePayStatus(this.polyOrderId, this.openFlag)
+						// 超过60s直接清除轮询
+						if (time === 60) {
+							clearInterval(this.timer)
+						}
+					}, 1000)
+				} else {
+					this.handleGetOrderinfo(this.orderId)
+				}
+			}
+		},
+		methods: {
+			jumpOrderList() {
+				this.$u.route({
+					url: 'pages/center/order/order'
+				})
+			},
+			/**
+			 * 通过订单id去获取订单信息
+			 * */
+			handleGetOrderinfo(orderId) {
+				this.$u.api.getOrderDetail({
+						id: orderId
+					})
+					.then(res => {
+						if (res.code === 200) {
+							this.orderInfo = res.data
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error'
+							})
+						}
+					})
+			},
+			/**
+			 * 查询支付状态
+			 * @param { String } orderId
+			 */
+			handlePayStatus(orderId) {
+				this.$u.api.getOrderInfo({
+					orderId
+				}).then(res => {
+					if (res.code === 200) {
+						if (res.data.payStatus === 1 || res.data.payStatus === 3) {
+							this.loadingMask = false
+							clearInterval(this.timer);
+							this.handleGetOrderinfo(this.orderId)
+						}
+					} else {
+						this.$refs.uToast.show({
+							title: res.msg,
+							type: 'error'
+						})
 						this.loadingMask = false
 						clearInterval(this.timer);
-						this.handleGetOrderinfo(this.orderId)
 					}
+				}).catch(() => {
+					this.loadingMask = false
+					clearInterval(this.timer);
+				})
+			},
+			goPay(orderId) {
+				this.orderList = []
+				this.orderList.push(orderId)
+				if (this.orderList.length > 0) {
+					this.payWayPop = true
 				} else {
 					this.$refs.uToast.show({
-					  title: res.msg,
-					  type: 'error'
+						title: '当前订单编号不存在,请重新进入当前页面!',
+						type: 'warning'
 					})
-					this.loadingMask = false
-					clearInterval(this.timer);
 				}
-			}).catch(() => {
-				this.loadingMask = false
-				clearInterval(this.timer);
-			})
-		},
-    goPay (orderId) {
-      this.orderList = []
-      this.orderList.push(orderId)
-      if (this.orderList.length > 0) {
-        this.payWayPop = true
-      } else {
-        this.$refs.uToast.show({
-          title: '当前订单编号不存在,请重新进入当前页面!',
-          type: 'warning'
-        })
-      }
-    },
-    /**
-       * 关闭支付方式弹框
-       * */
-    closePaymentMethod () {
-      this.payWayPop = false
-    }
+			},
+			/**
+			 * 关闭支付方式弹框
+			 * */
+			closePaymentMethod() {
+				this.payWayPop = false
+			}
 
-  },
-  filters: {
-    verifyPaySource (value) {
-      if (value === 0) {
-        return '现金支付'
-      } else if (value === 1) {
-        return '微信支付'
-      } else if (value === 2) {
-        return '支付宝支付'
-      } else if (value === 3) {
-        return '贵州银行快捷支付'
-      } else if (value === 4) {
-        return '贵州银行扫码支付'
-      } else if (value === 5) {
-        return '贵州银行被扫支付'
-      } else if (value === 6) {
-        return '贵州银行无感支付'
-      } else {
-        return '其他'
-      }
-    }
-  },
-  destroyed() {
-	  if (this.timer) {
-		  clearInterval(this.timer)
-	  }
-  }
-}
+		},
+		filters: {
+			verifyPaySource(value) {
+				if (value === 0) {
+					return '现金支付'
+				} else if (value === 1) {
+					return '微信支付'
+				} else if (value === 2) {
+					return '支付宝支付'
+				} else if (value === 3) {
+					return '贵州银行快捷支付'
+				} else if (value === 4) {
+					return '贵州银行扫码支付'
+				} else if (value === 5) {
+					return '贵州银行被扫支付'
+				} else if (value === 6) {
+					return '贵州银行无感支付'
+				} else {
+					return '其他'
+				}
+			}
+		},
+		destroyed() {
+			if (this.timer) {
+				clearInterval(this.timer)
+			}
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
-@import "./orderDetails.scss";
+	@import "./orderDetails.scss";
 </style>

pages/parkingLists/parkingLists.vue

@@ -69,7 +69,7 @@
             </view>
             <view>
               <text>距离</text>
-              <text>{{item.distance|kmUnit}}</text>
+              <text>{{item.distance | kmUnit}}</text>
             </view>
           </view>
           <view class="swiper-item-button">
@@ -77,7 +77,7 @@
             <button
             type="default"
             :disabled="!item.monthAmount"
-            :class="{'disabled': !item.monthAmount}"
+            :class="{'disabled': !item.monthAmount }"
             @click="createMonth(item)">办理包月</button>
           </view>
           <view @click="lookParkingRule(item)">
@@ -166,6 +166,7 @@ export default {
   },
   onLoad (page) {
     this.getLocation()
+		// this.getNearRoadsl()
     if (page.keyword) {
       this.searchContent = page.keyword
       this.searchInputChange(page.keyword)
@@ -383,12 +384,14 @@ export default {
      * @returns {any}
      */
     clickSearchParking (item) {
-      this.$u.route({
-        url: 'pages/parkingInformation/parkingInformation',
-        params: {
-          roadInfo: JSON.stringify(item)
-        }
-      })
+			if (item.monthAmount) {
+				this.$u.route({
+				  url: 'pages/parkingInformation/parkingInformation',
+				  params: {
+				    roadInfo: JSON.stringify(item)
+				  }
+				})
+			}
     },
     /**
      * 跳转停车标准页面

pages/searchparking/searchparking.scss

@@ -1,6 +1,12 @@
 page{
 	background-color: #F6F6FF;
 }
+.tab-fixed {
+	position: fixed;
+	width: 100%;
+	background-color: #fff;
+	z-index: 100;
+}
 .parkinglist{
 	margin: 56rpx 40rpx;
 	.parkinglist-item{

pages/searchparking/searchparking.vue

@@ -1,26 +1,27 @@
 <template>
 	<view>
-		<u-navbar
-		 title="我的停车" 
-		 title-color="#fff" 
-		 :custom-back="customBack" 
-		 :border-bottom="false" 
-		 back-icon-color="#CCE8FF" 
-		 :background="{background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }">
+		<u-navbar title="我的停车" title-color="#fff" :custom-back="customBack" :border-bottom="false"
+			back-icon-color="#CCE8FF" :background="{background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }">
 		</u-navbar>
-		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
-		<view class="parkinglist">
-			<view class="parkinglist-item" v-for="(item,index) in parkinglist" :key="item.id" @click="navigation(item.latitude, item.longitude)">
-				<view class="up u-flex u-row-between">
-					<view class="vehicle-no">{{item.vehicleNo}}</view>
-					<view class="space-name">{{item.spaceName}}</view>
-				</view>
-				<view class="down u-flex u-row-left">
-					<u-icon name="map-fill" color="#008CFF" size="28"></u-icon>
-					<view class="road-name">{{item.roadName}}</view>
+		<view class="tab-fixed">
+			<u-tabs-swiper activeColor="#008CFF" ref="tabs" :list="tabList" :current="tabCurrent" @change="tabChange"
+				:is-scroll="false" swiperWidth="100%"></u-tabs-swiper>
+		</view>
+		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+			height="calc(100vh - 84px)" top="50rpx">
+			<view class="parkinglist">
+				<view class="parkinglist-item" v-for="(item,index) in parkinglist" :key="item.id"
+					@click="navigation(item.latitude, item.longitude)">
+					<view class="up u-flex u-row-between">
+						<view class="vehicle-no">{{item.vehicleNo}}</view>
+						<view class="space-name">{{item.spaceName}}</view>
+					</view>
+					<view class="down u-flex u-row-left">
+						<u-icon name="map-fill" color="#008CFF" size="28"></u-icon>
+						<view class="road-name">{{item.roadName}}</view>
+					</view>
 				</view>
 			</view>
-		</view>
 		</mescroll-body>
 		<u-toast ref="uToast" />
 	</view>
@@ -28,80 +29,133 @@
 
 <script>
 	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
-	export default{
+	export default {
 		mixins: [MescrollMixin], // 使用mixin
-		data(){
-			return{
-				parkinglist:[],
+		data() {
+			return {
+				parkinglist: [],
+				tabCurrent: 0,
+				tabCurrentItem: {},
+				tabList: [
+					{
+						name: '路段',
+						value: 'road'
+					},
+					{
+						name: '停车场',
+						value: 'park'
+					}
+				]
 			}
 		},
-		onLoad(){
-			
+		onLoad() {
+			this.tabCurrentItem = this.tabList[this.tabCurrent]
 		},
-		onShow(){
+		onShow() {
 			
 		},
-		methods:{
-			customBack(){
+		methods: {
+			customBack() {
 				this.$u.route({
-					type:'switchTab',
+					type: 'switchTab',
 					url: 'pages/index/index'
 				});
 			},
+			tabChange(cur) {
+				this.tabCurrent = cur
+				this.tabCurrentItem = this.tabList[cur]
+				this.mescroll.resetUpScroll();
+			},
 			/**
-			  * 导航 
-			  * */
-			navigation (lat, lon) {
+			 * 导航 
+			 * */
+			navigation(lat, lon) {
 				uni.openLocation({
 					latitude: parseFloat(lat),
 					longitude: parseFloat(lon),
 					scale: 18
 				})
 			},
-			downCallback(){
+			downCallback() {
 				this.mescroll.resetUpScroll();
 			},
-			upCallback(page){
-				console.log('upCallback ',page);
-				let pageNum = page.num; // 页码, 默认从1开始
-				let pageSize = page.size; // 页长, 默认每页10条
-				this.$u.api.getOrderList({orderStatus:1,pageNum:pageNum,pageSize:pageSize})
-				.then(res=>{
-					// uni.hideLoading();
-					// this.$refs.uToast.show({
-					// 	title: res.msg,
-					// 	type: 'success',
-					// });
+			upCallback(page) {
+				if (this.tabCurrentItem.value === 'park') {
+					this.getParkingLotParkingList(page)
+				} else {
+					this.getRoadParkingList(page)
+				}
+			},
+			/**
+			 * 获取路段我的停车
+			 */
+			getRoadParkingList({ num, size }) {
+				this.$u.api.getOrderList({
+					orderStatus: 1,
+					pageNum: num,
+					pageSize: size
+				})
+				.then(res => {
 					//设置列表数据
-					let curPageData = res.data.pageInfo.rows; 
+					let curPageData = res.data.pageInfo.rows;
 					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
-					let curPageLen = curPageData.length; 
-					let totalPage = res.data.pageInfo.pages; 
-					
-					if(page.num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
+					let curPageLen = curPageData.length;
+					let totalPage = res.data.pageInfo.pages;
+				
+					if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
 					this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据
-					
+				
 					// 请求成功,隐藏加载状态
 					//后台接口有返回列表的总页数 totalPage
 					this.mescroll.endByPage(curPageLen, totalPage);
-
-					if(this.parkinglist.length<=0){this.listEmpty = true};
 				
-					console.log('vehicleList',res)
-				}).catch(err=>{
-					// uni.hideLoading();
+					if (this.parkinglist.length <= 0) {
+						this.listEmpty = true
+					};
+				}).catch(err => {
 					this.$refs.uToast.show({
 						title: err.msg,
 						type: 'error',
 					});
-					console.log('vehicleList ',err)
 				});
+			},
+			/**
+			 * 获取停车场我的停车
+			 */
+			getParkingLotParkingList({ num, size }) {
+				this.$u.api.getOrderList({
+					orderStatus: 1,
+					pageNum:  num,
+					pageSize: size
+				})
+				.then(res => {
+					//设置列表数据
+					let curPageData = res.data.pageInfo.rows;
+					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
+					let curPageLen = curPageData.length;
+					let totalPage = res.data.pageInfo.pages;
+				
+					if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
+					this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据
+				
+					// 请求成功,隐藏加载状态
+					//后台接口有返回列表的总页数 totalPage
+					this.mescroll.endByPage(curPageLen, totalPage);
 				
+					if (this.parkinglist.length <= 0) {
+						this.listEmpty = true
+					};
+				}).catch(err => {
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+				});
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	@import  './searchparking.scss'
+	@import './searchparking.scss'
 </style>

static/img/type-current.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="116px" height="116px" viewBox="0 0 116 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <defs>
+        <circle id="path-1" cx="46" cy="46" r="46"></circle>
+        <filter x="-19.6%" y="-19.6%" width="139.1%" height="139.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0.549019608   0 0 0 0 1  0 0 0 0.261746066 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="停车列表" transform="translate(-581.000000, -1409.000000)">
+            <g id="椭圆形备份" transform="translate(593.000000, 1421.000000)">
+                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                <use fill="#008CFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+            </g>
+        </g>
+    </g>
+</svg>

static/img/type-not-current.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="116px" height="116px" viewBox="0 0 116 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <defs>
+        <circle id="path-1" cx="46" cy="46" r="46"></circle>
+        <filter x="-19.6%" y="-19.6%" width="139.1%" height="139.1%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="6" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.17 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="停车列表" transform="translate(-581.000000, -1529.000000)">
+            <g id="椭圆形" transform="translate(593.000000, 1541.000000)">
+                <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
+            </g>
+        </g>
+    </g>
+</svg>