冲突

README.md

@@ -1,3 +1,7 @@
 ## 城市智慧停车
-
-
+### 打包需要修改
+- `common/http.interceptor.js` 中登录链接
+- `common/config.js` 配置信息
+#### iconfont
+- [iconfont 自定义图标](https://www.uviewui.com/guide/customIcon.html)
+- [字体默认不再生成 .eot、.svg 和 Base64](https://github.com/thx/iconfont-plus/issues/1948)

common/apiurl.js

@@ -37,10 +37,24 @@ const apiurl = {
 	getOrderDetailUrl:'/orderinfo/detail/',
 	//获取信息列表
 	getMessageListUrl:'/membernews',
+	//消息已读接口
+	messageReadUrl:'/membernews/read/',
 	// 获取附近的路段
 	nearRoadslUrl:'/roadinfo/nearRoads',
 	// 获取路段收费规则
 	roadsChargeRuleUrl:'/roadinfo/feeRule/',
+	//包月信息
+	monthInfoUrl:'/memberinfo/monthInfo/',
+	//创建包月
+	createMonthUrl:'/memberinfo/createMonth',
+	//包月支付
+	monthPayUrl:'/monthpay/gzbank/quick',
+	//包月支付查询
+	getMonthPayUrl:'/monthpay/query/',
+	//包月列表
+	getMonthListUrl:'/memberinfo/monthList',
+	//取消包月订单
+	cancelMonthUrl:'/memberinfo/cancelMonth/',
 	
 	//贵州银行快捷支付
 	payGzbankUrl: '/pay/gzbank/quick',

common/config.js

@@ -2,6 +2,8 @@ const config = {
 	wxAppid:'wxbe90cc7c5233dd84',// wxAppid 
 	// baseUrl:'http://wx.hw.hongweisoft.com/parking/client',//64
 	baseUrl:'http://wx.hw.hongweisoft.com/parking/client',//殷登顺
+	// 正式接口访问地址
+	// baseUrl:'http://parking.pdzhtc.com/client',
 	
 	
 	//登录链接

common/http.api.js

@@ -35,10 +35,18 @@ const install = (Vue, vm) => {
 	let getOrderDetail = (params = {}) => vm.$u.get(apiurl.getOrderDetailUrl+params.id);
 	
 	let getMessageList = (params = {}) => vm.$u.get(apiurl.getMessageListUrl,params);
+	let messageRead = (params ={}) => vm.$u.put(apiurl.messageReadUrl+params.newId);
 	
 	let nearRoadsl = (params = {}) => vm.$u.post(apiurl.nearRoadslUrl,params);
 	let roadChargeRule = (params = {}) => vm.$u.get(apiurl.roadsChargeRuleUrl + params.roadNo);
 	
+	let monthInfo = (params = {}) => vm.$u.get(apiurl.monthInfoUrl,params)
+	let createMonth = (params = {}) => vm.$u.post(apiurl.createMonthUrl, params);
+	let monthPay = (params = {}) => vm.$u.post(apiurl.monthPayUrl, params);
+	let getMonthPay = (params = {}) => vm.$u.get(apiurl.getMonthPayUrl + params.id);
+	let getMonthList= (params = {}) => vm.$u.get(apiurl.getMonthListUrl,params);
+	let cancelMonth= (params = {}) => vm.$u.put(apiurl.cancelMonthUrl+params.monthId);
+	
 	let payGzbank = (params = {}) => vm.$u.post(apiurl.payGzbankUrl, params);
 	
 	//贵州银行支付
@@ -68,7 +76,14 @@ const install = (Vue, vm) => {
 		nearRoadsl,
 		roadChargeRule,
 		getMessageList,
-		payGzbank
+		payGzbank,
+		monthInfo,
+		createMonth,
+		monthPay,
+		getMonthPay,
+		getMonthList,
+		cancelMonth,
+		messageRead
 	};
 }
 

common/http.interceptor.js

@@ -49,9 +49,15 @@ const install = (Vue, vm) => {
 			return res;  
 		} else if(res.msg == "令牌不能为空"||res.code == 401){
 			console.log('location',location)
-			alert('还未登录,即将跳转登录');			
-			setTimeout(()=>{location.href = location.href+'pages/center/phoneLogin/phoneLogin';});
-		}else return false;
+			console.log('location',location.href);
+			let storage = window.sessionStorage; 
+			storage.setItem('backUrl',location.href);
+			alert('还未登录,即将跳转登录');		
+			// setTimeout(()=>{location.href = 'http://h5.pdzhtc.com/#/pages/center/phoneLogin/phoneLogin';});//正式
+			// setTimeout(()=>{location.href = 'http://parkingh5.hw.hongweisoft.com/#/pages/center/phoneLogin/phoneLogin';});//64
+			setTimeout(()=>{location.href = 'http://127.0.0.1:8080/#/pages/center/phoneLogin/phoneLogin';});//本地
+			
+		}else return res;
 	}
 }
 

main.js

@@ -5,6 +5,8 @@ Vue.config.productionTip = false
 import { config } from './common/config'
 Vue.prototype.config = config;
 
+import './utils/filter' 
+
 App.mpType = 'app'
 
 // 引入全局uView

pages.json

@@ -83,6 +83,13 @@
 				"navigationBarTitleText":"消息中心"
 			}
 		},
+		{
+			"path": "pages/message/messageInfo",
+			"style": {
+				"navigationStyle":"custom",// 隐藏系统导航栏
+				"navigationBarTitleText":"消息中心"
+			}
+		},
 		{
 			"path": "pages/payLists/payLists",
 			"style": {
@@ -127,13 +134,41 @@
             "path" : "pages/center/monthly/monthly",
             "style" :                                                                                    
             {
+				 "navigationStyle":"custom",// 隐藏系统导航栏
                 "navigationBarTitleText": "我的包月",
                 "enablePullDownRefresh": false,
                 "navigationBarBackgroundColor": "#008CFF",
                 "navigationBarTextStyle": "white"
             }
             
-        }
+        },
+		{
+		    "path" : "pages/payLists/pay",
+		    "style" :                                                                                    
+		    {
+		        "navigationStyle":"custom",// 隐藏系统导航栏
+		        "navigationBarTitleText":"支付"
+		    }
+		    
+		},
+		{
+		    "path" : "pages/handleMonthly/monthPay",
+		    "style" :                                                                                    
+		    {
+		        "navigationStyle":"custom",// 隐藏系统导航栏
+		        "navigationBarTitleText":"包月支付"
+		    }
+		    
+		},
+		{
+		    "path" : "pages/searchparking/searchparking",
+		    "style" :                                                                                    
+		    {
+		        "navigationStyle":"custom",// 隐藏系统导航栏
+		        "navigationBarTitleText":"停车查询"
+		    }
+		    
+		}
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/center/index.vue

@@ -16,9 +16,9 @@
 		
 		<view class="u-m-t-20">
 			<u-cell-group>	
-				<u-cell-item title="贵州银行支付" @click="guizhouPay()">
+			<!-- 	<u-cell-item title="贵州银行支付" @click="guizhouPay()">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
-				</u-cell-item>
+				</u-cell-item> -->
 				<u-cell-item title="我的车辆" @click="openPage('pages/myCars/myCars')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodecheliang"></u-icon>
 				</u-cell-item>
@@ -29,36 +29,43 @@
 		</view>
 		<view class="u-m-t-20">
 			<u-cell-group>
-				<u-cell-item title="充值" @click="openPage('pages/myCars/myCars')">
+				<!-- <u-cell-item title="充值" @click="openPage('pages/myCars/myCars')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="chongzhi"></u-icon>
-				</u-cell-item>
+				</u-cell-item> -->
 				<u-cell-item title="包月" @click="openPage('pages/center/monthly/monthly')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="baoyue"></u-icon>
 				</u-cell-item>
-				<u-cell-item title="提现" @click="openPage('pages/center/order/order')">
+				<!-- <u-cell-item title="提现" @click="openPage('pages/center/order/order')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tixian"></u-icon>
-				</u-cell-item>
-				<u-cell-item title="退款" @click="openPage('pages/center/order/order')">
+				</u-cell-item> -->
+				<!-- <u-cell-item title="退款" @click="openPage('pages/center/order/order')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="tuikuan"></u-icon>
-				</u-cell-item>
-				<u-cell-item title="账单记录" @click="openPage('pages/center/order/order')">
+				</u-cell-item> -->
+				<!-- <u-cell-item title="账单记录" @click="openPage('pages/center/order/order')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="zhangdanjilu"></u-icon>
-				</u-cell-item>
+				</u-cell-item> -->
 			</u-cell-group>
 		</view>
-		<view class="u-m-t-20">
+	<!-- 	<view class="u-m-t-20">
 			<u-cell-group>
 				<u-cell-item title="我的优惠" @click="openPage('pages/myCars/myCars')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="wodeyouhui"></u-icon>
 				</u-cell-item>
 			</u-cell-group>
-		</view>
-		<view class="u-m-t-20">
+		</view> -->
+	<!-- 	<view class="u-m-t-20">
 			<u-cell-group>
 				<u-cell-item title="发票管理" @click="openPage('pages/center/invoice/invoice')">
 					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="fapiaoguanli"></u-icon>
 				</u-cell-item>
 			</u-cell-group>
+		</view> -->
+		<view class="u-m-t-20">
+			<u-cell-group>
+				<u-cell-item title="消息中心" @click="openPage('pages/message/message')">
+					<u-icon slot="icon" custom-prefix="custom-icon" size="35" name="xiaoxi"></u-icon>
+				</u-cell-item>
+			</u-cell-group>
 		</view>
 		<view class="u-m-t-20 u-m-b-40">
 			<u-cell-group>
@@ -137,21 +144,21 @@
 				});
 			},
 			// 贵州银行支付
-			guizhouPay(){
-				let tradeNo = new Date().getTime();
-				uni.setStorage({
-					key:'gzbankTradeNo',
-					data:tradeNo
-				});
-				this.$u.api.gzbank({orderId:tradeNo,openid:'111'})
-				.then(res=>{
-					let bankLink = res.msg;
-					location.href = bankLink;
-				}).catch(err=>{
-					console.log('gzbank err',err);
-				});
+			// guizhouPay(){
+			// 	let tradeNo = new Date().getTime();
+			// 	uni.setStorage({
+			// 		key:'gzbankTradeNo',
+			// 		data:tradeNo
+			// 	});
+			// 	this.$u.api.gzbank({orderId:tradeNo,openid:'111'})
+			// 	.then(res=>{
+			// 		let bankLink = res.msg;
+			// 		location.href = bankLink;
+			// 	}).catch(err=>{
+			// 		console.log('gzbank err',err);
+			// 	});
 				
-			},// 贵州银行支付
+			// },// 贵州银行支付
 
 		}
 	}

pages/center/monthly/monthly.scss

@@ -1,10 +1,13 @@
+page{
+	background-color: #F6F6FF
+}
 .monthly {
-	background-color: #F6F6FF;
 	padding: 37rpx 40rpx;
 	height: calc(100vh - 88rpx);
 	overflow-y: scroll;
 	.monthly-list {
 		.monthly-list-item {
+			overflow: hidden;
 			width: 100%;
 			background-color: #fff;
 			border-radius: 15rpx;
@@ -13,7 +16,7 @@
 				display: flex;
 				justify-content: space-between;
 				padding: 26rpx 39rpx;
-				border-bottom: solid 1px #979797;
+				border-bottom: solid 1px #DFDFDF;
 				.mlit-left {
 					view {
 						&:first-child {
@@ -33,14 +36,17 @@
 					}
 				}
 				.mlit-right {
-					width: 104rpx;
-					height: 50rpx;
 					line-height: 50rpx;
 					text-align: center;
-					border: solid 1px #BDBDBD;
 					border-radius: 5rpx;
 					color: #858585;
 					font-size: 24rpx;
+					.mlit-right-item{
+						padding: 0 15rpx;
+						border: solid 1px #BDBDBD;
+					}
+					.mlit-right-item.fee-status{color: #FA6400;border-color: #FA6400;}
+					.mlit-right-item + .mlit-right-item{margin-left: 10rpx;}
 				}
 			}
 			.monthly-list-item-bottom {
@@ -72,6 +78,18 @@
 					}
 				}
 			}
+			.button-wrap{
+				border-top: 1px solid #DFDFDF;
+				// padding: 26rpx 39rpx;
+				.tool-btn{
+					padding: 26rpx 39rpx;
+					flex: 1;
+					text-align: center;
+					&-cancel{
+						// background-color: red;
+					}
+				}
+			}
 		}
 	}
 }

pages/center/monthly/monthly.vue

@@ -1,75 +1,174 @@
 <template>
 	<!-- 包月 -->
 	<view class="monthly">
-		<view class="monthly-list">
-			<view class="monthly-list-item" v-for="(item, index) in monthlyList" :key="index">
-				<view class="monthly-list-item-top">
-					<view class="mlit-left">
-						<view>{{item.name}}</view>
-						<view>{{item.parking}}</view>
+		<u-navbar
+		 title-color="#fff" 
+		 :custom-back="customBack" 
+		 :border-bottom="false" 
+		 back-icon-color="#CCE8FF" 
+		 :background="{background: '#008CFF' }" title="我的包月"></u-navbar>
+		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
+			<!-- <scroll-view scroll-y style="height: 100%; width: 100%;" v-for="(monthlyItem, index) in  monthlyList" :key="monthlyItem.id"> -->
+				<view class="monthly-list">
+					<view class="monthly-list-item"  v-for="(monthlyItem, index) in  monthlyList" :key="monthlyItem.id">
+						<view class="monthly-list-item-top">
+							<view class="mlit-left">
+								<view>{{monthlyItem.vehicleNo}}</view>
+								<view>{{monthlyItem.roadName}}</view>
+							</view>
+							<view class="mlit-right u-flex">
+							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 0">未缴费</view>
+							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 1">已缴费</view>
+							<view class="mlit-right-item" v-if="monthlyItem.energyType === 1">汽油车</view>
+							<view class="mlit-right-item" v-if="monthlyItem.energyType === 2">新能源</view>
+							</view>
+						</view>
+						<view class="monthly-list-item-bottom" >
+							<view class="mlib-item">
+								<view>包期</view>:
+								<view>{{monthlyItem.beginTime}}-{{monthlyItem.endTime}}</view>
+							</view>
+							<view class="mlib-item">
+								<view>剩余天数</view>:
+								<view>{{monthlyItem.surplusDays}}天</view>
+							</view>
+						</view>
+						<view v-if="monthlyItem.feeStatus=='0'" class="button-wrap u-flex u-row-right">
+							<view class="tool-btn" 
+							:class="{'tool-btn-cancel':monthlyItem.feeStatus=='0'}" 
+							v-if="monthlyItem.feeStatus=='0'" 
+							@click="cancelMonth(monthlyItem.monthId)">取消订单</view>
+							<!-- <u-button class="btn" v-if="monthlyItem.feeStatus=='0'" type="error" size="mini" @click="cancelMonth(monthlyItem.monthId)">取消缴费</u-button> -->
+						</view>
 					</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 class="mlib-item">
-						<view>包期</view>:
-						<view>{{item.dateRange}}</view>
-					</view>
-					<view class="mlib-item">
-						<view>剩余天数</view>:
-						<view>{{item.balance}}天</view>
-					</view>
-				</view>
-			</view>
-		</view>
+			<!-- </scroll-view> -->
+		</mescroll-body>
+		<u-modal v-model="canclShow" content="确认取消该订单？" @confirm="confirm" :show-cancel-button="true"></u-modal>
+		<u-toast ref="uToast" />
 	</view>
 </template>
 
 <script>
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 	export default {
+		mixins: [MescrollMixin], // 使用mixin
 		data() {
 			return {
-				monthlyList: [
-					{
-						id: 1,
-						name: '贵A37W45',
-						parking: '甜蜜小镇D18组团停车场',
-						dateRange: '2021.04.21-2021.05.20',
-						balance: '20',
-						carType: 1
-					},
-					{
-						id: 2,
-						name: '贵A37W45',
-						parking: '甜蜜小镇D18组团停车场',
-						dateRange: '2021.04.21-2021.05.20',
-						balance: '20',
-						carType: 3
-					},
-					{
-						id: 3,
-						name: '贵A37W45',
-						parking: '甜蜜小镇D18组团停车场',
-						dateRange: '2021.04.21-2021.05.20',
-						balance: '20',
-						carType: 1
-					}
-				]
+				id:'',
+				canclShow: false,
+				monthlyList: [],
+				monthList:'',
+				beginTime:'',
+				endTime:'',
+				time:[],
 			}
 		},
-		onShow () {
-			this.getCarsLicenseList()
-		},
 		methods: {
-			getCarsLicenseList () {
-				this.$u.apiurl.mycarsUrl()
-					.then(res => {
-						console.log(res)
-					})
-			}
+			customBack(){
+				this.$u.route({
+					type:'switchTab',
+					url: 'pages/center/index'
+				});
+			},
+			/*下拉刷新的回调*/
+			downCallback(){
+				// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
+				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
+			},
+			/*上拉加载的回调*/
+			upCallback(page) {
+				let pageNum = page.num; // 页码, 默认从1开始
+				let pageSize = page.size; // 页长, 默认每页10条
+				// this.getMessageList()
+				this.$u.api.getMonthList({pageSize:pageSize ,pageNum: pageNum})
+				.then(res=>{
+					if(res.code == 200){
+					console.log('res',res)
+					// 接口返回的当前页数据列表 (数组)
+					let curPageData = res.data.rows;
+					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
+					let curPageLen = curPageData.length; 
+					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
+					let totalPage = res.data.pages; 
+					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
+					let totalSize = res.data.total; 
+					// 接口返回的是否有下一页 (true/false)
+					// let hasNext = data.pages; 
+					
+					//设置列表数据
+					if(page.num == 1) this.monthlyList = []; //如果是第一页需手动置空列表
+					this.monthlyList = this.monthlyList.concat(curPageData); //追加新数据
+					
+					// 请求成功,隐藏加载状态
+					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
+					this.mescroll.endByPage(curPageLen, totalPage); 
+					setTimeout(()=>{
+						this.mescroll.endSuccess(curPageLen)
+					},20)
+					this.monthList=[],
+					res.data.rows.forEach(item => {
+						const obj = {
+							beginTime: item.beginTime,
+							endTime: item.endTime,
+						}
+						this.monthList.push(obj)
+						console.log(obj)
+					});
+					this.time = this.monthList[0]
+					let Date1 = this.time.beginTime;
+					let Date2 = this.time.endTime;
+					// Date1 = Date1.valueOf() + 24 * 60 * 60 * 1000
+					Date1 = new Date(Date1)
+					const year = Date1.getFullYear()
+					const month = Date1.getMonth()+1
+					const day = Date1.getDate()
+					Date2 = new Date(Date2)
+					const year2 = Date2.getFullYear()
+					const month2 = Date2.getMonth()+1
+					const day2 = Date2.getDate()
+					this.beginTime = year + '.' + month + '.' + day
+					console.log(this.beginTime)
+					this.endTime = year2 + '.' + month2 + '.' + day2
+					}else{
+						this.mescroll.endErr()
+					}
+				}).catch(err=>{
+					// console.log('err',err);
+					// this.$refs.uToast.show({
+					// 	title: err.msg,
+					// 	type: 'error',
+					// });
+				});
+				
+			},
+			cancelMonth(monthId){
+				this.id=monthId;
+				this.canclShow = true;
+				console.log('monthId',monthId)
+			},
+			confirm(){
+				this.$u.api.cancelMonth({monthId: this.id})
+				.then(res=>{
+					if(res.code === 200){
+					this.$refs.uToast.show({ 
+						title: res.msg,
+						type: 'success',
+					});
+					this.downCallback()
+					}else{
+						
+					}
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+				})
 		}
 	}
+	}
 </script>
 
 <style lang="scss" scoped>

pages/center/order/order.scss

@@ -37,6 +37,10 @@
 				border-radius: 5rpx;
 				border: 1px solid #FA6400;
 				color: #FA6400;
+				&-finished{
+					border-color: #BDBDBD;
+					color: #858585;
+				}
 			}
 		}
 		.order-center{

pages/center/order/order.vue

@@ -14,7 +14,7 @@
 										<view class="car">{{orderItem.vehicleNo}}</view>
 										<view class="addr">{{orderItem.roadName}}</view>
 									</view>
-									<view class="order-top-right">{{orderItem.orderStatus | verifyStatusFilter}}</view>
+									<view class="order-top-right" :class="{'order-top-right-finished':orderItem.orderStatus=='4'}">{{orderItem.orderStatus | verifyStatusFilter}}</view>
 								</view>
 								<view class="order-center">
 									<view class="order-center-item">订单编号：{{orderItem.orderId}}</view>

pages/center/order/orderDetails/orderDetails.vue

@@ -63,12 +63,23 @@
 				
 			},
 			goPay(orderId){
-				this.$u.route({
-					url: 'pages/payPage/payPage',
-					params: {
-						orderId: orderId
-					}
+				let orderList=[];
+				orderList.push(orderId);
+				this.$u.api.payGzbank({orderList: orderList}).then(res=>{
+					let payUrl = res.data.url;
+					window.open(payUrl);
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
 				});
+				// this.$u.route({
+				// 	url: 'pages/payPage/payPage',
+				// 	params: {
+				// 		orderId: orderId
+				// 	}
+				// });
 			},	
 			
 			

pages/center/phoneLogin/phoneLogin.vue

@@ -130,11 +130,20 @@ export default {
 					// console.log('finish res',res);
 					this.$u.vuex('vuex_user', res.data);
 					this.$u.vuex('vuex_hasLogin', true);
-					this.$refs.uToast.show({
-						title: '操作成功',
-						url: '/pages/index/index',
-						isTab:true
-					});
+					let storage = window.sessionStorage;  
+					let backUrl = storage.getItem('backUrl');
+					let switchTabList = ['/pages/use/use'];
+					if(switchTabList.includes(res.data)){}
+					console.log('backUrl',backUrl);
+					location.href = backUrl;
+					// this.$refs.uToast.show({
+					// 	title: '操作成功',
+					// 	url: backUrl,
+					// 	// isTab:true,
+					// 	callback :function(err){
+					// 		console.log('err',err)
+					// 	}
+					// });
 					
 					// this.$u.api.getuseinfo().then(res => {
 					// 	console.log('getuseinfo',res.retBody);

pages/handleMonthly/handleMonthly.vue

@@ -10,11 +10,11 @@
 		<u-select v-model="isShowCarLicense" :list="carLicenseList" @confirm="carLicenseListConfirm"></u-select>
 		<view class="handle-monthly-item">
 			<view>车辆信息</view>
-			<view>汽油车</view>
+			<view>{{form.carLicense.value | verifyStatusFilter}}</view>
 		</view>
 		<view class="handle-monthly-item">
 			<view>包月金额</view>
-			<view class="handle-monthly-money">200元</view>
+			<view class="handle-monthly-money">{{form.monthAmount}}元</view>
 		</view>
 		<view class="handle-monthly-item">
 			<view>包月时长</view>
@@ -26,7 +26,7 @@
 		</view>
 		<view class="handle-monthly-item">
 			<view>包期</view>
-			<view>{{form.dateRange}}</view>
+			<view>{{dateRange}}</view>
 		</view>
 		<view class="handle-monthly-explain">
 			<view>包月说明</view>
@@ -35,36 +35,50 @@
 			<view>3、月卡会员在有效期内停车免费</view>
 		</view>
 		<view class="handle-monthly-confirm-button">
-			<button type="default">确认包月</button>
+			<button type="default"@click="submit(roadNo)">确认包月</button>
 		</view>
+		<u-toast ref="uToast" />
 	</view>
 </template>
 
 <script>
+	import getUrlParams from "../../utils/getUrlParams.js";
 	export default {
 		data() {
 			return {
-				carLicenseList: [
-					{
-						value: 1, label: '贵AWE45T'
-					},
-					{
-						value: 2, label: '贵AWE45F'
-					},
-				],
+				startTime:'',
+				endTime:'',
+				payUrl:'',
+				monthId: '',
+				vehicleNo:'',
+				monthEndTime:'',
+				monthStartTime:'',
+				lastActiveDate:null,
+				roadNo:null,
+				carLicenseList: [],
 				isShowCarLicense: false,
 				form: {
-					carLicense: {
-						value: 2,
-						label: '贵AWE45F'
-					},
+					energyType:[],
+					monthAmount: [],
+					carLicense: {},
 					month: 1,
-					dateRange: this.getMonthRange(new Date(), 1)
-				}
+					dateRange:""
+				},
+				label:""
 			}
 		},
-		onLoad () {
-			this.getCarsLicenseList()
+		onLoad (page) {
+			let locationLocaturl = window.location.hash;
+			// this.roadNo = this.$u.queryParams(page).slice();
+			this.roadNo = getUrlParams(locationLocaturl,"roadNo");
+			this.getMonthInfo(this.roadNo);
+			// this.form.dateRange=this.getMonthRange(this.lastActiveDate,1)
+			// this.getCarsLicenseList();
+			
+		},
+		mounted(){
+			// console.log(this.lastActiveDate)
+			// this.form.dateRange=this.getMonthRange(new Date(this.lastActiveDate),1)
 		},
 		methods: {
 			/**
@@ -73,12 +87,15 @@
 			  * {monthNum} Number  往后月数 
 			  * */
 			getMonthRange (date, monthNum) {
-				let Date1 = new Date(date)
-				Date1 = Date1.valueOf() + 24 * 60 * 60 * 1000
+				let Date1 = this.lastActiveDate;
+				// Date1 = Date1.valueOf() + 24 * 60 * 60 * 1000
 				Date1 = new Date(Date1)
 				const year = Date1.getFullYear()
-				const month = Date1.getMonth()
+				const month = Date1.getMonth()+1
 				const day = Date1.getDate()
+				const hours = Date1.getHours();
+				const minutes = Date1.getMinutes();
+				const seconds = Date1.getSeconds();
 				let days = new Date(year, month, 0)
 				days = days.getDate() //获取当前日期中的月的天数
 				let year2 = year;
@@ -87,7 +104,7 @@
 					year2 = parseInt(year2) + parseInt((parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12))
 					month2 = parseInt(month2) % 12;
 				}
-				const day2 = day;
+				let day2 = day;
 				let days2 = new Date(year2, month2, 0)
 				days2 = days2.getDate()
 				if (day2 > days2) {
@@ -98,6 +115,10 @@
 				}
 				const t1 = year + '.' + (month > 9 ? month : '0' + month) + '.' + (day > 9 ? day : '0' + day)
 				const t2 = year2 + '.' + month2 + '.' + day2
+				this.startTime=t1
+				this.endTime=t2
+				this.monthStartTime=year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + ' ' + hours + ':' + minutes + ':' +seconds
+				this.monthEndTime=year2 + '-' + month2 + '-' + day2 + ' ' + hours + ':' + minutes + ':' +seconds
 				return t1 + '-' + t2
 			},
 			/**
@@ -113,31 +134,101 @@
 			 * 月操作 加1
 			  * */
 			addMonthNum () {
+				if(this.form.month >=24){
+					this.$refs.uToast.show({
+						title: '最多24月',
+						type: 'warning',
+					})
+					return 
+				}
 				this.form.month += 1
+				
 				this.form.dateRange = this.getMonthRange(new Date, this.form.month)
 			},
 			carLicenseListConfirm (item) {
+				console.log('this.carLicenseList',this.carLicenseList);
+				console.log('item',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]
+			getMonthInfo(roadNo){
+				this.$u.api.monthInfo({roadNo: this.roadNo})
+				.then(res => {
+					if (res.code === 200){
+						this.lastActiveDate = res.data.lastActiveDate;
+						this.form.monthAmount=res.data.monthAmount;
+						this.carLicenseList = [];
+						res.data.vehicleList.forEach(item => {
+							const obj = {
+								value: item.energyType,
+								label: item.vehicleNo,
+								energyType:item.energyType
 							}
+							this.carLicenseList.push(obj)
+						});
+						console.log('this.carLicenseList',this.carLicenseList)
+						this.form.carLicense = this.carLicenseList[0]
+					}
+					
+				})
+			},
+			submit(roadNo){
+				// console.log(this.monthStartTime)
+				// console.log('this.form.carLicense',this.form.carLicense);
+				this.$u.api.createMonth({
+					roadNo:this.roadNo,
+					vehicleNo:this.form.carLicense.label,
+					energyType:this.form.carLicense.energyType,
+					monthStartTime:this.monthStartTime,
+					monthEndTime:this.monthEndTime,
+					monthCount:this.form.month})
+					.then(res => {
+						console.log("createMonth",res)
+						if(res.code === 200){
+							this.monthId = res.data.monthId
+							console.log(this.monthId)
+							this.$u.api.monthPay({
+								monthId:this.monthId
+							}).then(res => {
+								console.log("monthPay",res)
+								if(res.code === 200){
+									this.payUrl=encodeURIComponent(res.data.url);
+									this.$u.route({
+										url: 'pages/handleMonthly/monthPay',
+										params: {
+											payUrl:this.payUrl
+										}
+									});
+								}
+							})
+						}else{
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'warning',
+							});
 						}
-					})
+					}).catch(err=>{
+						
+					});
+				// this.getMonthInfo(roadNo)
 			}
+		},
+		computed:{
+			dateRange:function(){
+				return this.getMonthRange(this.lastActiveDate,this.form.month)
+			},
+		},
+		filters:{
+			verifyStatusFilter(value) {
+				if (value === 0) {
+				  return '';
+				} else if(value === 1){
+					return '汽油车';				
+				} else if(value === 2){
+					return '新能源';				
+				} else {
+				  return '';
+				}
+			},
 		}
 	}
 </script>

pages/handleMonthly/monthPay.vue

@@ -0,0 +1,29 @@
+<template>
+	<view>
+		<a ref="payUrlRef" :href="PayUrl"></a>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				PayUrl: "",
+			};
+		},
+		onLoad(page) {
+			// console.log('page',page);
+			// console.log('page1',this.$u.queryParams(page).slice(0));
+			//15是因为传了‘currentPayUrl’，不要更改参数名
+			this.PayUrl = this.$u.queryParams(page).slice(8);
+		},
+		mounted() {
+			// console.log('this.PayUrl',this.PayUrl);
+			// console.log('this.$refs.payUrlRef',this.$refs.payUrlRef);
+			this.$refs.payUrlRef.click();
+		}
+	}
+</script>
+
+<style>
+</style>

pages/index/index.scss

@@ -1,147 +1,206 @@
-page{background-color: $my-page-bg-color;}
-
-.header-bar{
-	background-color: $my-main-color;
-	height: 106rpx;
-	display: flex;
-	padding: 0 40rpx;
-	.city{
-		display: flex;
-		margin-right: 23rpx;
-		color: #fff;
-		align-items: center;
-		.city-name{
-			margin-right: 8rpx;
-		}
-	}
-	.scan{margin-left: 23rpx;}
-}
-.content-nav{
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	.content-nav-item{
-		.content-nav-item-icon-wrap{
-			width: 95rpx;
-			height: 95rpx;
-			margin: 0 auto 13rpx;
-			// border-radius: 30rpx;
-			// background: linear-gradient(163deg, #FFCC60 0%, #FF9221 100%);
-		}
-		.content-nav-item-icon-text{
-			font-size: 28rpx;
-			font-weight: 500;
-			color: #5A5A5A;
-			line-height: 1;
-		}
-	}
-	.content-nav-item + .content-nav-item{
-		// margin-left: 74rpx;
-	}
-}
-.pending-order-head{
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	color: $my-main-color;
-	.pending-order-head-left{
-		font-size: 30rpx;
-		b{font-weight: 500;font-size: 50rpx;margin-right: 5rpx;}
-	}
-	.pending-order-head-right{
-		font-size: 22rpx;
-		font-weight: 500;
-	}
-}
-.pending-order-body{
-	.pending-order-body-nav{
-		display: flex;
-		border-radius: 32px;
-		border: 1px solid $my-main-color;
-		margin-bottom: 36rpx;
-		.nav-item{
-			flex: 1;
-			height: 62rpx;
-			line-height: 62rpx;
-			font-size: 24rpx;
-			text-align: center;
-			&.active{
-				background: $my-main-color;
-				color: #fff;
-				border-radius: 32rpx;
-			}
-		}
-	}
-	.pending-order-body-wrap{
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		.pending-order-body-left-label{
-			font-size: 22rpx;
-			font-weight: 500;
-			color: #787878;
-		}
-	}
-	.pending-order-body-left{
-		.car-number{
-			margin-bottom: 32rpx;
-			font-size: 30rpx;
-			font-weight: 600;
-			color: #3A3A3A;
-			line-height: 42rpx;
-			letter-spacing: 1px;
-		}
-		.duration{
-			margin-bottom: 5rpx;
-			font-size: 26rpx
-		}
-		.cost{
-			.number{
-				font-size: 26rpx;
-				line-height: 50rpx;
-				color: $my-main-color;
-			}
-		}
-	}
-	.pending-order-body-right{
-		text-align: left;
-		font-size: 24rpx;
-		.order{
-			margin-bottom: 28rpx;			
-			font-weight: 400;
-			color: #9A9A9A;
-		}
-		
-	}
-	.go-pay-wrap{
-		margin-top: 150rpx;
-		width: 100%;
-		text-align: center;
-		.go-pay{
-			display: inline-block;
-			padding: 12rpx 39rpx 11rpx;
-			background: linear-gradient(90deg, #FF2727 0%, #FF9A13 100%, #FF0F0F 100%);
-			color: #fff;
-			border-radius: 35rpx;
-			cursor: pointer;
-		}
-	}
-	
-}
-
-.orderDetails{
-	color: #545454;
-	/deep/ dl{
-		margin: 20rpx 38rpx;
-		display: flex;
-		font-size: 30rpx;
-		dt{
-			width: 150rpx;
-			color: #A3A3A3;
-			text-align: right;
-		}
-		dd{
-			flex: 1;
-		}
+page{background-color: $my-page-bg-color;}
+
+.header-bar{
+	background-color: $my-main-color;
+	height: 106rpx;
+	display: flex;
+	padding: 0 40rpx;
+	.city{
+		display: flex;
+		margin-right: 23rpx;
+		color: #fff;
+		align-items: center;
+		.city-name{
+			margin-right: 8rpx;
+		}
+	}
+	.scan{margin-left: 23rpx;}
+}
+.content-nav{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	.content-nav-item{
+		.content-nav-item-icon-wrap{
+			width: 95rpx;
+			height: 95rpx;
+			margin: 0 auto 13rpx;
+			// border-radius: 30rpx;
+			// background: linear-gradient(163deg, #FFCC60 0%, #FF9221 100%);
+		}
+		.content-nav-item-icon-text{
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #5A5A5A;
+			line-height: 1;
+		}
+	}
+	.content-nav-item + .content-nav-item{
+		// margin-left: 74rpx;
+	}
+}
+.pending-order-head{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	color: $my-main-color;
+	.pending-order-head-left{
+		font-size: 30rpx;
+		b{font-weight: 500;font-size: 50rpx;margin-right: 5rpx;}
+	}
+	.pending-order-head-right{
+		font-size: 22rpx;
+		font-weight: 500;
+	}
+}
+.pending-order-body{
+	.pending-order-body-nav{
+		display: flex;
+		border-radius: 32px;
+		border: 1px solid $my-main-color;
+		margin-bottom: 36rpx;
+		.nav-item{
+			flex: 1;
+			height: 62rpx;
+			line-height: 62rpx;
+			font-size: 24rpx;
+			text-align: center;
+			&.active{
+				background: $my-main-color;
+				color: #fff;
+				border-radius: 32rpx;
+			}
+		}
+	}
+	.pending-order-body-wrap{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		.pending-order-body-left-label{
+			font-size: 22rpx;
+			font-weight: 500;
+			color: #787878;
+		}
+	}
+	.pending-order-body-left{
+		.car-number{
+			margin-bottom: 11rpx;
+			font-size: 30rpx;
+			font-weight: 600;
+			color: #3A3A3A;
+			line-height: 42rpx;
+			letter-spacing: 1px;
+		}
+		.item-cell{
+			margin-bottom: 5rpx;
+			font-size: 26rpx
+		}
+		.cost{
+			.number{
+				font-size: 26rpx;
+				line-height: 50rpx;
+				color: $my-main-color;
+			}
+		}
+	}
+	.pending-order-body-right{
+		text-align: left;
+		font-size: 24rpx;
+		.order{
+			margin-bottom: 28rpx;			
+			font-weight: 400;
+			color: #9A9A9A;
+		}
+		
+	}
+	.go-pay-wrap{
+		margin-top: 150rpx;
+		width: 100%;
+		text-align: center;
+		.go-pay{
+			display: inline-block;
+			padding: 12rpx 39rpx 11rpx;
+			background: linear-gradient(90deg, #FF2727 0%, #FF9A13 100%, #FF0F0F 100%);
+			color: #fff;
+			border-radius: 35rpx;
+			cursor: pointer;
+		}
+	}
+	
+}
+
+.popup-order-details{
+	color: #545454;
+	&-til{
+		padding: 61rpx 40rpx 16rpx;
+		font-size: 36rpx;
+		color: #008CFF;
+		line-height: 50rpx;
+		text-align: center;
+	}
+	&-con{
+		margin-bottom: 40rpx;
+	}
+	&-footer{
+		border-top: 1px solid #CECECE;
+		padding: 28rpx 0 26rpx;
+		font-size: 45rpx;
+		line-height: 63rpx;
+		text-align: center;
+		color: #008CFF;
+	}
+	dl{
+		margin: 20rpx 38rpx;
+		display: flex;
+		font-size: 30rpx;
+		dt{
+			width: 150rpx;
+			color: #A3A3A3;
+			text-align: right;
+		}
+		dd{
+			flex: 1;
+		}
+	}
+}
+
+.promotion{
+	margin: 20rpx 40rpx 40rpx;
+	background-color: #FFFFFF;
+	border-radius: 15rpx;
	&-header{
+		padding: 26rpx 40rpx 12rpx;
+		border-bottom: 1px solid #DFDFDF;
+		margin-bottom: 26rpx;
+		.promotion-header-til{
+			font-size: 30rpx;
+			color: #383838;
+			line-height: 42rpx;
+		}
+		.promotion-header-con{
+			font-size: 22rpx;
+			color: #787878;
+			line-height: 30rpx;
+		}
+	}
+	&-body{
+		padding: 0 40rpx 24rpx;
+		.promotion-body-til{
+			font-size: 26rpx;
+			color: #676767;
+			line-height: 37rpx;
+			margin-bottom: 15rpx;
+		}
+		.promotion-body-con{
+			font-size: 20rpx;
+			color: #A5A5A5;
+			line-height: 34rpx;
+		}
 	}
+}
+.notice-bar-wrap{
+	margin: 20rpx 40rpx;
+	background-color: #fff;
+	padding: 32rpx 0 25rpx 30rpx;
+	border-radius: 15rpx;
+	overflow: hidden;
 }

pages/index/index.vue

@@ -7,13 +7,24 @@
 				<u-icon name="arrow-down" color="#fff" size="32"></u-icon>
 			</view>
 			<u-search placeholder="搜索停车点" :show-action="false" @search="handleSearch" v-model="keyword"></u-search>
-			<u-icon class="scan" name="scan" color="#fff" size="48" @click="$refs.uToast.show({title: '建设中'})"></u-icon>
+			<!-- <u-icon class="scan" name="scan" color="#fff" size="48" @click="$refs.uToast.show({title: '建设中'})"></u-icon> -->
 		</view>
 		
 		<u-swiper :list="bannerList" border-radius="0"></u-swiper>
 		
 		<u-city-select v-model="cityOpen" @city-change="cityChange" :areaCode='["52", "5201"]' ></u-city-select>
 		
+		<view class="notice-bar-wrap u-flex" v-if="noticeList.length>=1" @click="openPage('pages/message/message')">
+			<u-icon custom-prefix="custom-icon" size="50" name="xiaoxi" color="#008CFF"></u-icon>
+			<u-notice-bar
+			 class="u-flex-1"
+			mode="vertical"
+			 :list="noticeList" 
+			 :volume-icon="false" 
+			 bg-color="#fff" 
+			 color="#727272"
+			 :more-icon="true"></u-notice-bar>
+		</view>
 		<u-card :show-head="false" :show-foot="false" border-radius="16" margin="20rpx 40rpx" padding="30">
 			<view class="content-nav" slot="body">
 				<view class="content-nav-item" @click="openPage('pages/payLists/payLists')">
@@ -34,7 +45,7 @@
 					</view>
 					<view class="content-nav-item-icon-text">车辆管理</view>
 				</view>
-				<view class="content-nav-item" @click="$refs.uToast.show({title: '建设中'})">
+				<view class="content-nav-item" @click="openPage('pages/searchparking/searchparking')">
 					<view class="content-nav-item-icon-wrap">
 						<u-image src="../../static/img/index-content-nav-04.png" width="95rpx" height="95rpx" mode="heightFix"></u-image>
 					</view>
@@ -58,23 +69,23 @@
 					<view class="pending-order-body-wrap" v-show="orderNav==0">
 						<view class="pending-order-body-left">
 							<view class="car-number">{{item.vehicleNo}}</view>
-							<view class="duration">
+							<view class="item-cell">
 								<span class="pending-order-body-left-label">入场时间:</span>
 								<span>{{item.inTime}}</span>
 							</view>
-							<view class="duration">
+							<view class="item-cell">
 								<span class="pending-order-body-left-label">出场时间:</span>
-								<span>{{item.outTime}}</span>
+								<span>{{item.outTime||'停放中'}}</span>
 							</view>
-							<view class="duration">
+							<view class="item-cell">
 								<span class="pending-order-body-left-label">停留时间:</span>
-								<span>{{item.duration}}</span>
+								<span>{{item.duration||'停放中'}}</span>
 							</view>
-							<view class="cost">
+							<view class="item-cell cost">
 								<span class="pending-order-body-left-label">停车费用:</span>
 								<span>
-									<span class="number">￥{{item.payAmount}}</span>
-									元
+									<span class="number" v-if="item.payAmount">￥{{item.payAmount}}</span>
+									<span class="number" v-else>停放中</span>
 								</span>
 							</view>
 						</view>
@@ -91,7 +102,16 @@
 				</view>
 			</u-card>
 		</template>
-		
+		<view class="promotion" @click="$refs.uToast.show({title: '建设中'})">
+			<view class="promotion-header u-flex u-row-between">
+				<view class="promotion-header-til">优惠活动</view>
+				<view class="promotion-header-con">去领取</view>
+			</view>
+			<view class="promotion-body">
+				<view class="promotion-body-til">八折停车</view>
+				<view class="promotion-body-con">从客户启用贵州银行行卡支付的第四个月开始，使用我行卡支付永久享受八折优惠（单日不限次数)...</view>
+			</view>
+		</view>
 		
 		<u-modal 
 			v-model="bindCarShow" 
@@ -101,12 +121,18 @@
 			content="首次使用请先绑定您的车牌"
 			@confirm="$u.route({url:'pages/myCars/myCars'})"></u-modal>
 			
-		<!-- 订单细节 -->
-		<u-modal v-model="showOrderDetails" title="停车场信息" confirm-text="知道了" :title-style="{color: '#008CFF'}">
-			<view class="slot-content">
-				<rich-text class="orderDetails" :nodes="content"></rich-text>
+		<u-popup class="popup-order-details" v-model="showOrderDetails" mode="center" width="90%" border-radius="20">
+			<view class="popup-order-details-til">停车场信息</view>
+			<view class="popup-order-details-con">
+				<dl><dt>路段名称：</dt> <dd>{{popupOrderDetails.roadName}}</dd></dl>
+				<dl><dt>路段编码：</dt><dd>{{popupOrderDetails.roadNo}}</dd></dl>
+				<dl><dt>联系人：</dt><dd>{{popupOrderDetails.manager}} </dd></dl>
+				<dl><dt>联系电话：</dt><dd  @click="phoneCall(popupOrderDetails.telephone)">{{popupOrderDetails.telephone}}</dd></dl>
+			</view>
+			<view class="popup-order-details-footer" @click="closeOrderDetails">
+				知道了
 			</view>
-		</u-modal>
+		</u-popup>
 		<u-toast ref="uToast" />
 	</view>
 </template>
@@ -131,16 +157,8 @@
 				orderNav:0,//手动,无感
 				bindCarShow:false,//绑定车询问弹窗
 				showOrderDetails:false,//是否线上订单细节
-				content:`
-				<dl>
-					<dt>车场名称：</dt>
-					<dd>贵阳云岩区甜蜜小镇D18组团停车场</dd>
-				</dl>
-				<dl>
-					<dt>免费时长：</dt>
-					<dd>15分钟</dd>
-				</dl>
-				`,
+				popupOrderDetails:[],
+				noticeList:[]
 				
 			}
 		},
@@ -195,35 +213,59 @@
 						this.bindCarShow = true;
 					}
 					this.orderList = res.data.orderList;
+					this.noticeList = res.data.news;
 				}).catch(err=>{
 					// alert(err.msg);
 					console.log('getIndexData err',err)
 				});
 			},
 			goPay(orderId){
-				this.$u.route({
-					url: 'pages/payPage/payPage',
-					params: {
-						orderId: orderId
-					}
+				let orderList=[];
+				orderList.push(orderId);
+				this.$u.api.payGzbank({orderList: orderList}).then(res=>{
+					let payUrl = res.data.url;
+					this.currentPayUrl=encodeURIComponent(res.data.url);
+					// return;
+					this.$u.route({
+						url: 'pages/payLists/pay',
+						params: {
+							currentPayUrl:this.currentPayUrl
+						}
+					});
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
 				});
+				
+				// this.$u.route({
+				// 	url: 'pages/payPage/payPage',
+				// 	params: {
+				// 		orderId: orderId
+				// 	}
+				// });
 			},			
 			//
 			onRoadInfo(item){
 				this.$u.api.roadInfoById({id:item.roadId})
 				.then(res=>{
-					this.content = `
-				   <dl><dt>路段名称：</dt> <dd>` + res.data.roadName + `</dd></dl>`
-				+ `<dl><dt>路段编码：</dt><dd>` + res.data.roadNo + `</dd></dl>`
-				+ `<dl><dt>联系人：</dt><dd>` + res.data.manager + `</dd></dl>`
-				+ `<dl><dt>联系电话：</dt><dd>` + res.data.telephone + `</dd></dl>`;
-				
+					this.popupOrderDetails=res.data;
 					this.showOrderDetails = true;
 				}).catch(err=>{
 					// alert(err.msg);
 					console.log('getIndexData err',err)
 				});
-			}
+			},
+			closeOrderDetails(){
+				this.showOrderDetails = false;
+			},
+			phoneCall(phone){
+				uni.makePhoneCall({
+				    phoneNumber: phone
+				});
+			},
+			
 
 		}
 	}

pages/message/message.scss

@@ -34,8 +34,7 @@
 				height: 50rpx;
 				line-height: 48rpx;
 				border-radius: 5rpx;
-				border: 1px solid #FA6400;
-				color: #FA6400;
+				position: relative;
 			}
 		}
 		.message-center{
@@ -48,6 +47,11 @@
 				color: #595959;
 				line-height: 37rpx;
 				letter-spacing: 1px;
+				overflow : hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				-webkit-box-orient: vertical;
 			}
 		}
 		.u-cell_title{

pages/message/message.vue

@@ -5,11 +5,14 @@
 			<scroll-view scroll-y style="height: 100%; width: 100%;" v-for="(messageItem, index) in  messageList" :key="messageItem.id">
 				<view class="time">{{messageItem.createTime}}</view>
 				<view class="page-box">
-					<view class="message" @click="goDetails(messageItem.id)" >
+					<view class="message" @click="goDetails(messageItem.content,messageItem.createTime,messageItem.title)" >
 						<view class="message-top u-flex">
 							<view class="message-top-left u-flex-1">
 								<view class="car">{{messageItem.title}}</view>
 							</view>
+							<view class="message-top-right u-flex-2">
+								<u-badge :is-dot="true" type="error" v-if="messageItem.readFlag=='0'"></u-badge>
+							</view>
 						</view>
 						<view class="message-center">
 							<view class="message-center-item">{{messageItem.content}}</view>
@@ -32,6 +35,7 @@
 		data() {
 			return {
 				messageList: [],
+				newId:''
 			};
 		},
 		computed: {
@@ -54,7 +58,7 @@
 			customBack(){
 				this.$u.route({
 					type:'switchTab',
-					url: 'pages/index/index'
+					url: 'pages/center/index'
 				});
 			},
 			/*下拉刷新的回调*/
@@ -70,6 +74,8 @@
 				this.$u.api.getMessageList({pageSize:pageSize ,pageNum: pageNum})
 				.then(res=>{
 					console.log(res)
+					this.newId = res.data.rows[0].id;
+					console.log(this.newId)
 					// 接口返回的当前页数据列表 (数组)
 					let curPageData = res.data.rows;
 					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
@@ -99,11 +105,19 @@
 				});
 				
 			},
-			goDetails(id){
+			goDetails(content,createTime,title){
+				this.$u.api.messageRead({newId:this.newId})
+				.then(res =>{
+					if(res.code == 200){
+						console.log(res)
+					}
+				});
 				this.$u.route({
-					url: 'pages/center/message/messageDetails/messageDetails',
+					url: 'pages/message/messageInfo',
 					params: {
-						messageId: id
+						content:JSON.stringify(content),
+						createTime:JSON.stringify(createTime),
+						title:JSON.stringify(title),
 					}
 				});
 			}

pages/message/messageInfo.vue

@@ -0,0 +1,71 @@
+<template>
+	<view class="info">
+		<u-navbar title-color="#fff" 
+		:custom-back="customBack" 
+		:border-bottom="false" back-icon-color="#CCE8FF" 
+		:background="{background: '#008CFF' }" title="消息详情"></u-navbar>
+	<view class="time">{{this.createTime}}</view>
+	<view class="box">
+	<view class="title">{{this.title}}</view>
+	<view class="content">{{this.content}}</view>
+	</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				content: '',
+				createTime:'',
+				title:''
+			};
+		},
+		onLoad(page) {
+			this.content = JSON.parse(page.content);
+			this.createTime = JSON.parse(page.createTime);
+			this.title = JSON.parse(page.title);
+			
+		},
+		methods: {
+			customBack(){
+				this.$u.route({
+					// type:'switchTab',
+					url: 'pages/message/message'
+				});
+			}
+		}
+		
+	}
+</script>
+
+<style>
+/* #ifndef H5 */
+page {
+	height: 100%;
+	background-color: #F6F6FF;
+}
+/* #endif */
+</style>
+
+<style lang="scss" scoped>
+	.info{
+		padding: 40rpx 40rpx;
+		
+	}
+	.box{
+		margin-top: 20rpx;
+		background-color: white;
+		border-radius: 15rpx;
+		.title{
+			padding-top: 20rpx;
+			text-align: center;
+			font-size: 40rpx;
+		}
+	}
+	.content{
+		text-indent:2em;
+		padding: 20rpx 40rpx;
+		line-height: 44rpx;
+	}
+</style>

pages/myCars/myCars.vue

@@ -1,5 +1,11 @@
 <template>
 	<view>
+		<u-navbar
+		 title-color="#fff" 
+		 :custom-back="customBack" 
+		 :border-bottom="false" 
+		 back-icon-color="#CCE8FF" 
+		 :background="{background: '#008CFF' }" title="车辆管理"></u-navbar>
 		<view class="header">
 			<view class="header-title">我的车辆</view>
 		</view>
@@ -13,7 +19,7 @@
 				<view class="message-input-wrap" @click="messageInputClick">
 					<u-message-input :maxlength="8" width="70" font-size="50" :disabled-keyboard="true" v-model="newPlateNumber"></u-message-input>
 				</view>				
-				<u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
+				<u-keyboard ref="uKeyboard" mode="car" @change="keyboardChange" @confirm="keyboardConfirm" @backspace="backspace" v-model="keyboardshow"></u-keyboard>
 			</view>
 			<view class="add-car-btn" @click="handleAddCar">添加车辆</view>
 			<view class="mycars">
@@ -30,6 +36,7 @@
 		
 		<u-toast ref="uToast" />
 		<u-modal v-model="delCarshow" :show-cancel-button="true" @confirm="confirmDelCar" :content="delCarContent"></u-modal>
+		<u-action-sheet :list="colorList" @click="confirmColor" v-model="colorShow"></u-action-sheet>
 	</view>
 </template>
 
@@ -41,10 +48,19 @@
 				delCarshow:false,
 				delCarId:null,
 				delCarContent:'',
-				newPlateNumber:'贵AF113Z',
+				newPlateNumber:'',
 				vehicleColor:0,
 				mycars:[],
 				mycarsTotal:0,
+				colorShow:false,
+				colorList:[
+					{text:'蓝色',colorCode:0}
+					,{text:'黄色',colorCode:1}
+					,{text:'黑色',colorCode:2}
+					,{text:'白色',colorCode:3}
+					,{text:'绿色',colorCode:4}
+					,{text:'其他',colorCode:99}
+				],
 				
 			}
 		},
@@ -53,6 +69,12 @@
 			
 		},
 		methods:{
+			customBack(){
+				this.$u.route({
+					type:'switchTab',
+					url: 'pages/index/index'
+				});
+			},
 			handlegetMycars(){
 				this.$u.api.getMycars()
 				.then(res=>{
@@ -64,6 +86,13 @@
 				});
 			},
 			handleAddCar(){
+				if(!this.$u.test.carNo(this.newPlateNumber)){
+					this.$refs.uToast.show({
+						title: '请正确填写车牌号',
+						type: 'error',
+					});
+					return
+				}
 				let param ={
 					vehicleNo: this.newPlateNumber,
 					vehicleColor: this.vehicleColor
@@ -123,6 +152,12 @@
 				if(this.newPlateNumber.length) this.newPlateNumber = this.newPlateNumber.substr(0, this.newPlateNumber.length - 1);
 				console.log(this.newPlateNumber);
 			},
+			keyboardConfirm(){
+				this.colorShow = true;
+			},
+			confirmColor(e){
+				this.vehicleColor = this.colorList[e].colorCode;
+			},
 			// 设置默认车辆
 			handlesetDefault(id){
 				this.$u.api.setDefaultCar({id:id})
@@ -143,17 +178,6 @@
 			}
 			
 		},
-		filters: {
-		  energyTpye(value) {
-			if (value === 1) {
-			  return '汽油车';
-			}else if (value === 2) {
-			  return '新能源';
-			} else {
-			  return '汽油车';
-			}
-		  },
-		},
 	}
 </script>
 

pages/parkingInformation/parkingInformation.scss

@@ -48,6 +48,7 @@
 				}
 			}
 			.pict-right {
+				text-align: center;
 				font-size: 18rpx;
 				color: #3A3A3A;
 				font-weight: 400;

pages/parkingInformation/parkingInformation.vue

@@ -6,33 +6,33 @@
 		<view class="parking-information-content">
 			<view class="parking-information-content-title">
 				<view class="pict-left">
-					<view class="title">甜蜜小镇D18组团停车场<text>地面</text></view>
-					<view class="subtitle">贵阳市云岩区中天未来方舟甜蜜小镇D18组团</view>
+					<view class="title">{{roadInfo.areaName}}</view>
+					<view class="subtitle">{{roadInfo.roadName}}</view>
 				</view>
-				<view class="pict-right">
+				<view class="pict-right" @click="navigation(roadInfo.latitude, roadInfo.longitude)">
 					<image src="../../static/img/distance-icon.png" mode=""></image>
-					<view class="m">238m</view>
+					<view class="m">{{roadInfo.distance|kmUnit}}</view>
 				</view>
 			</view>
 			<view class="parking-information-content-time">
-				<view>服务时间：<text>7:00-21:00</text></view>
-				<view>包月费用：<text>300</text>元</view>
+				<view>服务时间：<text>{{roadInfo.workBeginTime}}-{{roadInfo.workEndTime}}</text></view>
+				<view>包月费用：<text>{{roadInfo.monthAmount}}</text>元</view>
 			</view>
 			<view class="parking-information-content-cars">
 				<view class="picc-tag">
-					<view>120</view>
+					<view>{{roadInfo.spaceTotal}}</view>
 					<view>共有车位</view>
 				</view>
 				<view class="picc-tag">
-					<view>30</view>
+					<view>{{roadInfo.spaceIdle}}</view>
 					<view>空闲车位</view>
 				</view>
 			</view>
-			<view class="parking-information-content-price">
+			<view class="parking-information-content-price" @click="lookParkingRule(roadInfo)">
 				<text>点击查看停车规则</text>
 				<u-icon name="arrow-right"></u-icon>
 			</view>
-			<u-button class="parking-information-content-button">办理包月</u-button>
+			<u-button class="parking-information-content-button" @click="createMonth(roadInfo)">办理包月</u-button>
 		</view>
 	</view>
 </template>
@@ -41,10 +41,44 @@
 	export default {
 		data() {
 			return {
-				
+				roadInfo:[],
 			}
 		},
+		onLoad(page) {
+			this.roadInfo = JSON.parse(page.roadInfo);
+			console.log('this.roadInfo',this.roadInfo);
+		},
 		methods: {
+			/**
+			 * 跳转停车标准页面
+			 * {roadNo} 路段编码
+			  * */
+			lookParkingRule (item) {
+				this.$u.route({
+					url: 'pages/chargeStandard/chargeStandard',
+					params: {
+						roadNo: item.roadNo
+					}
+				})
+			},
+			createMonth(item){
+				this.$u.route({
+					url: 'pages/handleMonthly/handleMonthly',
+					params: {
+						roadNo:item.roadNo
+					}
+				});
+			},
+			/**
+			  * 导航 
+			  * */
+			navigation (lat, lon) {
+				uni.openLocation({
+					latitude: parseFloat(lat),
+					longitude: parseFloat(lon),
+					scale: 18
+				})
+			},
 			
 		}
 	}

pages/parkingLists/parkingLists.vue

@@ -6,9 +6,9 @@
 		</view>
 		<view class="parking-header">
 			<u-search placeholder="搜索停车场" v-model="searchContent" :show-action="false" @change="searchInputChange"></u-search>
-			<u-icon v-if="!searchContent" class="icon" name="list" size="44" color="#ffffff"
-			placeholder-color="#B5B5B5" search-icon-color="#B3B3B3"></u-icon>
-			<u-icon v-if="searchContent" class="icon" name="close" size="36" color="#ffffff"
+			<u-icon v-if="!searchContent&&isShowSearchParking==false" class="icon" name="list" size="44" color="#ffffff"
+			placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="listIconClick"></u-icon>
+			<u-icon v-if="searchContent||isShowSearchParking==true" class="icon" name="close" size="36" color="#ffffff"
 			placeholder-color="#B5B5B5" search-icon-color="#B3B3B3" @click="clearSearchInput"></u-icon>
 		</view>
 		<view class="parking-map">
@@ -29,7 +29,7 @@
 			<swiper class="swiper" :current="swiperCurrent" :indicator-dots="false" :autoplay="false" previous-margin="30rpx" next-margin="30rpx" @change="swiperChange">
 				<swiper-item v-for="(item, index) in nearParkingList" :key="index + 'n'">
 					<view class="swiper-item">
-						<view>{{item.roadName}}</view>
+						<view @click="clickSearchParking(item)">{{item.roadName}}</view>
 						<view>{{item.areaName}}</view>
 						<view class="swiper-item-font">
 							<view>
@@ -42,12 +42,12 @@
 							</view>
 							<view>
 								<text>距离</text>
-								<text>{{item.distance}}m</text>
+								<text>{{item.distance|kmUnit}}</text>
 							</view>
 						</view>
 						<view class="swiper-item-button">
 							<button type="default" @click="navigation(item.latitude, item.longitude)">导航</button>
-							<button type="default" :disabled="!item.monthAmount" :class="{'disabled': !item.monthAmount}" @click="$u.route({url: 'pages/handleMonthly/handleMonthly'})">办理包月</button>
+							<button type="default" :disabled="!item.monthAmount" :class="{'disabled': !item.monthAmount}" @click="createMonth(item)">办理包月</button>
 						</view>
 						<view @click="lookParkingRule(item)">
 							<text>点击查看停车规则</text>
@@ -143,7 +143,6 @@
 		onShow() {
 			this.isShowSearchParking = false
 			this.isShowParkingDetail = false
-			// this.getNearRoadsl()
 		},
 		methods:{
 			/* 
@@ -192,7 +191,8 @@
 				})
 			},
 			clearSearchInput () {
-				this.searchContent = ''
+				this.searchContent = '';
+				this.isShowSearchParking = false;
 				this.getNearRoadsl()
 			},
 			/**
@@ -235,9 +235,9 @@
 							this.covers.push(marker)
 						}
 					})
-					this.nearParkingList = nearParkingList
-					this.latitude = nearParkingList[0].latitude
-					this.longitude = nearParkingList[0].longitude
+					this.nearParkingList = nearParkingList;
+					this.latitude = nearParkingList[0]?.latitude||this.currentPosition.latitude;
+					this.longitude = nearParkingList[0]?.longitude||this.currentPosition.longitude;
 					this.nearParkingFlag = true
 					if (this.searchContent) {
 						this.searchParkingList = nearParkingList
@@ -282,7 +282,7 @@
 			  * item 为选中项参数
 			  * */
 			clickSearchParking (item) {
-				// console.log(item)
+				console.log('clickSearchParking',item)
 				// this.parkingDetailData = item
 				// this.isShowParkingDetail = true
 				// this.latitude = item.latitude
@@ -293,7 +293,10 @@
 				// }, 500)
 				// this.scale = 18
 				this.$u.route({
-					url: 'pages/parkingInformation/parkingInformation'
+					url: 'pages/parkingInformation/parkingInformation',
+					params:{
+						roadInfo:JSON.stringify(item) 
+					}
 				})
 			},
 			/**
@@ -307,6 +310,22 @@
 						roadNo: item.roadNo
 					}
 				})
+			},
+			/*搜索右侧按钮点击
+			*/
+		   listIconClick(){
+			   this.isShowSearchParking = true;
+			   this.nearParkingFlag = false;
+			   this.searchParkingList = this.nearParkingList;
+			   // this.getNearRoadsl();
+		   },
+			createMonth(item){
+				this.$u.route({
+					url: 'pages/handleMonthly/handleMonthly',
+					params: {
+						roadNo:item.roadNo
+					}
+				});
 			}
 		}
 	}

pages/payLists/pay.vue

@@ -0,0 +1,30 @@
+<template>
+	<view>
+		<!-- <web-view  :src="PayUrl"></web-view> -->
+		<a ref="payUrlRef" :href="PayUrl"></a>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				PayUrl: "",
+			};
+		},
+		onLoad(page) {
+			// console.log('page',page);
+			// console.log('page1',this.$u.queryParams(page).slice(0));
+			//15是因为传了‘currentPayUrl’，不要更改参数名
+			this.PayUrl = this.$u.queryParams(page).slice(15);
+		},
+		mounted() {
+			// console.log('this.PayUrl',this.PayUrl);
+			// console.log('this.$refs.payUrlRef',this.$refs.payUrlRef);
+			this.$refs.payUrlRef.click();
+		}
+	}
+</script>
+
+<style>
+</style>

pages/payLists/payLists.scss

@@ -56,9 +56,13 @@
 		}
 	}
 }
-.button{
-	position: fixed;
-	left: 20rpx;
-	bottom: 40rpx;
-	right: 20rpx;
-}
+.button-wrap{
+	height: 120rpx;
+	.button{
+		position: fixed;
+		left: 20rpx;
+		bottom: 40rpx;
+		right: 20rpx;
+		z-index: 999;
+	}
+}

pages/payLists/payLists.vue

@@ -4,13 +4,13 @@
 		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
 			<scroll-view scroll-y style="height: 100%; width: 100%;" >
 				<view class="page-box">
-					<view class="pay" @click="goDetails(payItem.id)" v-for="(payItem, index) in  payList" :key="payItem.id">
+					<view class="pay" v-for="(payItem, index) in  payList" :key="payItem.id">
 						<view class="pay-top u-flex">
 							<view class="pay-top-left u-flex-1">
 								<view class="car">{{payItem.vehicleNo}}</view>
 								<view class="addr">{{payItem.roadName}}</view>
 							</view>
-							<view class="pay-top-right">{{payItem.orderStatus | verifyStatusFilter}}</view>
+							<view class="pay-top-right">{{payItem.orderStatus | filterOrderStatus}}</view>
 						</view>
 						<view class="pay-center">
 							<view class="pay-center-item">停车泊位：{{payItem.spaceName}}</view>
@@ -20,16 +20,16 @@
 							<view class="pay-center-item">应付金额：<span class="pay-amount">{{payItem.payAmount}}</span></view>
 						</view>
 						<view class="pay-bottom">
-							<u-cell-item title="去支付" style="color: #008CFF;"></u-cell-item>
+							<u-cell-item title="去支付" @click="paythis(payItem.orderId)" style="color: #008CFF;"></u-cell-item>
 						</view>
 					</view>
 				</view>
 			</scroll-view>
 		</mescroll-body>
-		<view class="button">
-			<button type="primary" @click="all()">全部缴费</button>
+		<view class="button-wrap" v-if="payList.length&&payList.length>=1">
+			<button class="button" type="primary" @click="all()">全部缴费</button>
 		</view>
-			<u-toast ref="uToast" />
+		<u-toast ref="uToast" />
 	</view>
 </template>
 
@@ -39,11 +39,13 @@
 		mixins: [MescrollMixin], // 使用mixin
 		data() {
 			return {
+				currentPayUrl: "",
 				payList: [],
 				list: [
 					{index:0,name: '未缴费',orderStatu:3,pageNum:1,total:null}
 				],
-				orderList: []
+				orderList: [],
+				PayUrl: "",
 			};
 		},
 		computed: {
@@ -79,7 +81,7 @@
 				let pageNum = page.num; // 页码, 默认从1开始
 				let pageSize = page.size; // 页长, 默认每页10条
 				// this.getMessageList()
-				this.$u.api.getOrderList({pageSize:pageSize ,pageNum: pageNum, orderStatus: 2})
+				this.$u.api.getOrderList({pageSize:pageSize ,pageNum: pageNum, paying: true})
 				.then(res=>{
 					// 接口返回的当前页数据列表 (数组)
 					let curPageData = res.data.rows;
@@ -110,12 +112,24 @@
 				});
 				
 			},
-			goDetails(id){
-				this.$u.route({
-					url: 'pages/center/order/orderDetails/orderDetails',
-					params: {
-						orderId: id
-					}
+			paythis(orderId){
+				let orderList=[];
+				orderList.push(orderId);
+				this.$u.api.payGzbank({orderList: orderList}).then(res=>{
+					let payUrl = res.data.url;
+					this.currentPayUrl=encodeURIComponent(res.data.url);
+					// return;
+					this.$u.route({
+						url: 'pages/payLists/pay',
+						params: {
+							currentPayUrl:this.currentPayUrl
+						}
+					});
+				}).catch(err=>{
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
 				});
 			},
 			all(){
@@ -125,11 +139,18 @@
 						this.orderList.push(item.orderId)
 					}
 				});
-				console.log(this.orderList)
 				
 				this.$u.api.payGzbank({orderList: this.orderList}).then(res=>{
 					let payUrl = res.data.url;
-					window.open(payUrl);
+					this.currentPayUrl=encodeURIComponent(res.data.url);
+					// console.log('this.currentPayUrl',this.currentPayUrl);
+					// return;
+					this.$u.route({
+						url: 'pages/payLists/pay',
+						params: {
+							currentPayUrl:this.currentPayUrl
+						}
+					});
 				}).catch(err=>{
 					this.$refs.uToast.show({
 						title: err.msg,
@@ -137,15 +158,6 @@
 					});
 				});
 			}
-		},
-		filters:{
-			verifyStatusFilter(value) {
-				if (value === 2) {
-				  return '未缴费';
-				} else {
-				  return '';
-				}
-			},
 		}
 	};
 </script>

pages/searchparking/searchparking.scss

@@ -0,0 +1,36 @@
+page{
+	background-color: #F6F6FF;
+}
+.parkinglist{
+	margin: 56rpx 40rpx;
+	.parkinglist-item{
+		background-color: #fff;
+		border-radius: 15rpx;
+		margin-bottom: 20rpx;
+		padding: 26rpx 40rpx 46rpx;
+		.up{
+			padding-bottom: 29rpx;
+			margin-bottom: 29rpx;
+			border-bottom: 1px solid #CECECE;
+			.vehicle-no{
+				font-size: 32rpx;
+				font-weight: 600;
+				color: #3A3A3A;
+				line-height: 45rpx;
+			}
+			.space-name{
+				font-size: 30rpx;
+				font-weight: 500;
+				color: #444444;
+				line-height: 42rpx;
+			}
+		}
+		.road-name{
+			font-size: 24rpx;
+			font-weight: 400;
+			color: #787878;
+			line-height: 33rpx;
+			margin-left: 5rpx;
+		}
+	}
+}

pages/searchparking/searchparking.vue

@@ -0,0 +1,107 @@
+<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>
+		<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>
+			</view>
+		</view>
+		</mescroll-body>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default{
+		mixins: [MescrollMixin], // 使用mixin
+		data(){
+			return{
+				parkinglist:[],
+			}
+		},
+		onLoad(){
+			
+		},
+		onShow(){
+			
+		},
+		methods:{
+			customBack(){
+				this.$u.route({
+					type:'switchTab',
+					url: 'pages/index/index'
+				});
+			},
+			/**
+			  * 导航 
+			  * */
+			navigation (lat, lon) {
+				uni.openLocation({
+					latitude: parseFloat(lat),
+					longitude: parseFloat(lon),
+					scale: 18
+				})
+			},
+			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',
+					// });
+					//设置列表数据
+					let curPageData = res.data.rows; 
+					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
+					let curPageLen = curPageData.length; 
+					let totalPage = res.data.pages; 
+					
+					if(page.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();
+					this.$refs.uToast.show({
+						title: err.msg,
+						type: 'error',
+					});
+					console.log('vehicleList ',err)
+				});
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import  './searchparking.scss'
+</style>

utils/filter.js

@@ -48,4 +48,83 @@ Vue.filter("miniImg",function(img,quality){
 	return img+'?imageMogr2/quality/'+quality
 });
 
+//单位米m转换为单位千米km,提醒：传递参数不要带引号，如kmUnit('100')会返回0m。
+Vue.filter("kmUnit",function(m){
+	var v;
+	if(typeof m === 'number' && !isNaN(m)){
+		if (m >= 1000) {
+			v = (m / 1000).toFixed(2) + 'km'
+		} else {
+			v = m + 'm'
+		}
+	}else{
+		v = '0m'
+	}
+	return v;
+});
+
+// 订单状态
+Vue.filter("filterOrderStatus",function(status){
+	status = Number(status);
+	switch (status){
+		case 1:
+			return '停放中'
+			break;
+		case 2:
+			return '出场中'
+			break;
+		case 3:
+			return '欠费'
+			break;
+		case 4:
+			return '已完成'
+			break;
+		default:
+			return '未知'
+			break;
+	}
+	
+});
+
+// 支付状态
+Vue.filter("filterPayStatus",function(status){
+	status = Number(status);
+	switch (status){
+		case 0:
+			return '未支付'
+			break;
+		case 1:
+			return '已支付'
+			break;
+		case 2:
+			return '支付中'
+			break;
+		case 3:
+			return '支付失败'
+			break;
+		default:
+			return '未知'
+			break;
+	}
+	
+});
+
+// 汽车类型
+Vue.filter("energyTpye",function(value){
+	status = Number(value);
+	switch (value){
+		case 1:
+			return '汽油车'
+			break;
+		case 2:
+			return '新能源'
+			break;
+		default:
+			return '汽油车'
+			break;
+	}
+	
+});
+
+