收费主页接口完善、显示完善

apis/charge.js

@@ -0,0 +1,25 @@
+import request from '../utils/request.js';
+import app from '../utils/app.js'
+
+export function loadPageData(param){
+	
+	return request({
+		method: 'post',
+		data:param,
+		url: '/mobileApi/charge/loadPageData'
+	})
+}
+
+
+export function queryChargeLog(param){
+	return request({
+		method: 'post',
+		data:param,
+		url: '/mobileApi/charge/query'
+	})
+}
+
+
+export function getMyParkSites(){
+	return app.takeSetting("myParks");
+}

pages/charge/charge.vue

@@ -8,12 +8,12 @@
 						<view class="filter-item">
 							<text class="filter-label">查询日期</text>
 							<view class="filter-date" @tap="selectDateRange">
-								<text>{{filter.startDate+'至'+filter.endDate}}</text>
+								<text>{{filter.endDate.length>0?(filter.startDate+' 至 '+filter.endDate):'请选择'}}</text>
 								<u-icon name="search" style="margin:0rpx 20rpx;"></u-icon>
 							</view>
 						</view>
 						
-						<view class="filter-item">
+						<!-- <view class="filter-item">
 							<text class="filter-label">收费状态</text>
 							<view class="filter-con" @tap="selectFilter('chargeStat',$event)">
 								<view class="filter-con-item" data-val='0' :class="{'selected-filter-item':filter.chargeStat=='0'}">全部</view>
@@ -23,9 +23,9 @@
 								<view class="filter-con-item">全部</view>
 								
 							</view>
-						</view>
+						</view> -->
 						
-						<view class="filter-item">
+						<!-- <view class="filter-item">
 							<text class="filter-label">车牌类型</text>
 							<view class="filter-con">
 								<view class="filter-con-item">全部</view>
@@ -34,18 +34,19 @@
 								
 							</view>
 						</view>
-						
+						 -->
 						<view class="filter-item">
 							<text class="filter-label">停车场</text>
 							<view class="filter-con">
-								<view class="filter-con-item">全部</view>
-								<view class="filter-con-item">全部</view>
-								<view class="filter-con-item">全部</view>
+								<view @tap="selectedParkVal='all'" class="filter-con-item" :class="{'selected-filter':selectedParkVal=='all'}" data-val="all">全部</view>
+								<block v-for="(item,index) in myParkSites" :key="item.park_id">
+									<view @tap="selectedParkVal=item.park_id" class="filter-con-item"  :class="{'selected-filter':selectedParkVal==item.park_id}" :data-val="item.park_id">{{item.parking_name.length>7?(item.parking_name.substr(0,7)+'...'):item.parking_name}}</view>
+								</block>
 								
 							</view>
 						</view>
 						
-						<view class="filter-item">
+						<!-- <view class="filter-item">
 							<text class="filter-label">闸口</text>
 							<view class="filter-con">
 								<view class="filter-con-item">全部</view>
@@ -53,7 +54,7 @@
 								<view class="filter-con-item">全部</view>
 								
 							</view>
-						</view>
+						</view> -->
 						
 						<view class="filter-btn">
 							<view class="filter-btn-reset" @tap="resetFilter">重置</view>
@@ -67,71 +68,47 @@
 		<u-calendar v-model="showCalendar" mode="range" @change="changeCalendar"></u-calendar>
 		<view class="content-top">
 			<view class="top-item">
-				<view>今日实收(元)</view>
-				<text>720.00</text>
+				<view>实收金额(元)</view>
+				<text>{{rptPay.todayPayAmount}}</text>
 			</view>
 			<view class="top-item">
 				<view>收款笔数</view>
-				<text>12</text>
+				<text>{{rptPay.todayPayCount}}</text>
 			</view>
 			<view class="top-item">
 				<view>应收金额(元)</view>
-				<text>820.00</text>
+				<text>{{rptPay.shouldPayAmount}}</text>
 			</view>
 		</view>
+		
 		<view class="charge-list">
-			<view class="charge-date">
-				<view class="charge-date-left">2022年6月20日</view>
-				<view class="charge-date-right">今日收费 186</view>
-			</view>
-			
-			<view class="charge-item">
-				<view class="charge-item-title">鄂D12345</view>
-				<view class="charge-item-body">
-					<view class="charge-dtl">
-						<view>进入时间：2022-06-23 10:00:00</view>
-						<view>离开时间：2022-06-23 10:00:00</view>
-						<view>支付方式：微信</view>
-					</view>
-					<view class="charge-money" @tap="showChargeDtl">
-						<text>4元</text>
-						<u-icon name="arrow-right"></u-icon>
-					</view>
+			<block v-for="(item,index) in pagedPayLog.datas" :key="item.dayDate">
+				<view class="charge-date">
+					<view class="charge-date-left">{{item.dayDate}}</view>
+					<view class="charge-date-right">当日收费 {{item.dayTotal.toFixed(2)}}</view>
 				</view>
-			</view>
-			
-			<view class="charge-item">
-				<view class="charge-item-title">鄂D12345</view>
-				<view class="charge-item-body">
-					<view class="charge-dtl">
-						<view>进入时间：2022-06-23 10:00:00</view>
-						<view>离开时间：2022-06-23 10:00:00</view>
-						<view>支付方式：微信</view>
-					</view>
-					<view class="charge-money">
-						<text>4元</text>
-						<u-icon name="arrow-right"></u-icon>
+				<block v-for="(data,didx) in item.dayDatas">
+					<view class="charge-item">
+						<view class="charge-item-title">{{data.car_num}}</view>
+						<view class="charge-item-body">
+							<view class="charge-dtl">
+								<view>进入时间：{{data.in_parking_time}}</view>
+								<view>离开时间：{{data.out_parking_time}}</view>
+								<view>支付方式：{{data.pay_mode}}</view>
+							</view>
+							<view class="charge-money" @tap="showChargeDtl">
+								<text>{{data.pay_amount}}</text>
+								<u-icon name="arrow-right"></u-icon>
+							</view>
+						</view>
 					</view>
-				</view>
-			</view>
+				</block>
+			</block>
+			
 			
 			
-			<view class="charge-item">
-				<view class="charge-item-title">鄂D12345</view>
-				<view class="charge-item-body">
-					<view class="charge-dtl">
-						<view>进入时间：2022-06-23 10:00:00</view>
-						<view>离开时间：2022-06-23 10:00:00</view>
-						<view>支付方式：微信</view>
-					</view>
-					<view class="charge-money">
-						<text>4元</text>
-						<u-icon name="arrow-right"></u-icon>
-					</view>
-				</view>
-			</view>
 			
-			<view class="charge-item">
+			<!-- <view class="charge-item">
 				<view class="charge-item-title">鄂D12345</view>
 				<view class="charge-item-body">
 					<view class="charge-dtl">
@@ -140,55 +117,94 @@
 						<view>支付方式：微信</view>
 					</view>
 					<view class="charge-money">
-						<text>4元</text>
+						<text>400.00</text>
 						<u-icon name="arrow-right"></u-icon>
 					</view>
 				</view>
-			</view>
+			</view> -->
 			
-			<view class="charge-item">
-				<view class="charge-item-title">鄂D12345</view>
-				<view class="charge-item-body">
-					<view class="charge-dtl">
-						<view>进入时间：2022-06-23 10:00:00</view>
-						<view>离开时间：2022-06-23 10:00:00</view>
-						<view>支付方式：微信</view>
-					</view>
-					<view class="charge-money" @tap="showChargeDtl">
-						<text>4元</text>
-						<u-icon name="arrow-right" ></u-icon>
-					</view>
-				</view>
+			
+			
+			
+			
+			
+			
+			<view v-show="showMoreTip">
+				<u-loadmore :status="loadMoreStat" :load-text="loadMoreText"/>
 			</view>
 			
-			<u-loadmore :status="loadMoreStat"  @loadmore="onReachBottom"/>
 		</view>
 	</view>
 </template>
 
 <script>
+	import * as api from '@/apis/charge.js'
+	
 	export default {
 		data() {
 			return {
 				showCalendar:false,
 				loadMoreStat:'loadmore',
+				showMoreTip:false,
+				loadMoreText: {
+					loadmore: '轻轻上拉',
+					loading: '努力加载中',
+					nomore: '实在没有了'
+				},
 				filter:{
 					startDate:'',
-					endDate:'',
-					chargeStat:'',
-					carType:'',
-					parking:'',
-					gate:''
+					endDate:''
+				},
+				rptPay:{
+					todayPayAmount:'0.00',
+					todayPayCount:'0',
+					shouldPayAmount:'0.00'
+				},
+				myParkSites:[],
+				selectedParkVal:'all',
+				allParkIds:'',
+				pagedPayLog:{
+					datas:[]
 				}
 				
 			}
 		},
+		onLoad(){
+			this.myParkSites=api.getMyParkSites();
+			
+			let ids=[];
+			this.myParkSites.forEach(function(item){
+				ids.push(item.park_id);
+			});
+			this.allParkIds=ids.join(",");
+			this.loadPageData(this.getLoadParams());
+			
+		},
+		onReachBottom(){
+			if(!this.checkHadMore()){  //没有更多数据
+				return;
+			}
+			this.loadMoreStat = 'loading';
+			this.loadMoreData(this.getLoadParams());
+		},
 		methods: {
+			getLoadParams(){
+				let parkarg=this.selectedParkVal=="all"?this.allParkIds:this.selectedParkVal;
+				let pnum=this.pagedPayLog.pageNum!=null?(this.pagedPayLog.pageNum+1):1;
+				
+				return {parkingIds:parkarg,chargeStart:this.filter.startDate,chargeEnd:this.filter.endDate,pageNum:pnum,pageSize:10};
+			},
+			checkHadMore(){
+				let rst=this.pagedPayLog.pageNum<this.pagedPayLog.pageCount;
+				this.showMoreTip=true;
+				this.loadMoreStat=rst?'loadmore':'nomore';
+				return rst;
+			},
 			selectDateRange(){
 				this.showCalendar=true;
 			},
 			changeCalendar(e){
-				console.log(e);
+				//console.log(e);
 				this.filter.startDate=e.startDate;
 				this.filter.endDate=e.endDate;
 			},
@@ -202,19 +218,19 @@
 			},
 			resetFilter(){
 				let resetObj={
-					startDate:'2000-11-1',
-					endDate:'',
-					chargeStat:'',
-					carType:'',
-					parking:'',
-					gate:''
+					startDate:'',
+					endDate:''
+					
 				};
 				this.filter=resetObj;
+				this.selectedParkVal='all';
 			},
 			sureFilter(){
 				this.$refs.filterDropdown.close();
+				this.loadPageData(this.getLoadParams());
+				//console.log('query'+parkarg)
 			},
-			onReachBottom() {
+			onReachBottom2() {
 				this.loadMoreStat = 'loading';
 				setTimeout(() => {
 					this.loadMoreStat = 'nomore';
@@ -225,7 +241,88 @@
 				uni.navigateTo({
 					url:'chargedtl'
 				})
+			},
+			loadPageData(param){
+				uni.showLoading({
+					title:'加载中...'
+				});
+				api.loadPageData(param).then(resp => {
+					console.log(resp)
+					uni.hideLoading();
+					if(!resp.success){
+						return;
+					}
+					if(resp.data&&resp.data.rptPay){
+						let rptData=resp.data.rptPay;
+						let tmp={};
+						tmp.todayPayAmount=rptData.today_pay_amount?rptData.today_pay_amount.toFixed(2):'0.00';
+						tmp.todayPayCount=rptData.today_pay_count?rptData.today_pay_count.toFixed(0):'0';
+						tmp.shouldPayAmount=rptData.should_pay_amount?rptData.should_pay_amount.toFixed(2):'0.00';
+						this.rptPay=tmp;
+					}
+					this.pagedPayLog=this.parsePayLog(resp.data.payLogs);
+					
+					this.checkHadMore();
+					
+				}).catch(error => {
+					uni.hideLoading();
+				});
+			},
+			parsePayLog(pagedObj){
+				let datas=pagedObj.records;
+				let viewObj={pageNum:pagedObj.current,pageCount:pagedObj.pages,pageSize:pagedObj.size};
+				if(datas==null||datas.length==0){
+					viewObj['datas']=[];
+				}
+				else{
+					let dateMap={},mapItem=null;
+					let listDatas=[];
+					datas.forEach(function(item,index){
+						if(!dateMap[item.pay_date]){
+							listDatas.push({dayDate:item.pay_date,dayTotal:0,dayDatas:[]});
+							dateMap[item.pay_date]=listDatas.length-1;
+						}
+						item["pay_mode"]={"wechat":"微信","alipay":"支付宝"}[item.pay_name]||'其它';
+						mapItem=listDatas[dateMap[item.pay_date]];
+						mapItem.dayTotal+=parseFloat((item.pay_amount||0).toFixed(2));
+						mapItem.dayDatas.push(item);
+						
+					});
+					
+					viewObj['datas']=listDatas;
+				}
+				
+				return viewObj;
+				
+			},
+			loadMoreData(param){
+				api.queryChargeLog(param).then(resp => {
+					console.log(resp)
+					if(!resp.success){
+						return;
+					}
+					let newDatas=this.parsePayLog(resp.data);
+					
+					this.pagedPayLog.pageNum=newDatas.pageNum;
+					this.pagedPayLog.pageCount=newDatas.pageCount;
+					
+					if(newDatas.datas&&newDatas.datas.length>0){
+						let preLastItm=this.pagedPayLog.datas[this.pagedPayLog.datas.length-1];
+						let newFirstItm=newDatas.datas[0];  
+						if(preLastItm.dayDate==newFirstItm.dayDate){  //新旧数据有同日期的先合并再附加新数据
+							preLastItm.dayTotal+=newFirstItm.dayTotal;
+							preLastItm.dayDatas=preLastItm.dayDatas.concat(newFirstItm.dayDatas);
+							newDatas.datas.shift(); //合并后删除避免重复
+						}
+						this.pagedPayLog.datas=this.pagedPayLog.datas.concat(newDatas.datas);
+					}
+					
+					this.checkHadMore();
+					
+				}).catch(error =>{
+				});
 			}
+			
 		}
 	}
 </script>
@@ -266,7 +363,7 @@
 		flex-direction: column;
 		align-items: flex-start;
 		justify-content: center;
-		padding:20rpx 20rpx 0rpx;
+		padding:20rpx 0rpx 0rpx;
 		box-sizing: border-box;
 		background-color: #fafafa;
 		font-size: 26rpx;
@@ -274,7 +371,7 @@
 	
 	.filter-item{
 		width:100%;
-		margin-bottom: 30rpx;
+		padding:0rpx 20rpx 30rpx;
 	}
 	.filter-item .filter-label{
 		/* font-family: '楷体'; */
@@ -302,7 +399,7 @@
 		margin-top: 20rpx;
 	}
 	.filter-con .filter-con-item{
-		padding:10rpx 20rpx;
+		padding:10rpx 10rpx;
 		text-align: center;
 		background-color: #f2f5fa;
 		/* color:#ffffff; */
@@ -311,7 +408,7 @@
 		margin-right: 3vw;
 		margin-bottom: 20rpx;
 	}
-	.filter-con .selected-filter-item{
+	.filter-con .selected-filter{
 		background-color: #185ac6;
 		color:#ffffff;
 	}
@@ -329,9 +426,10 @@
 		flex:1;
 		text-align: center;
 		line-height: 80rpx;
+		background-color: #f2f2f2;
 	}
 	.filter-btn-sure{
-		flex:3;
+		flex:2;
 		text-align: center;
 		background-color: #185ac6;
 		color:#ffffff;
@@ -340,6 +438,7 @@
 	
 	.content-top{
 		width:100vw;
+		/* height:130rpx; */
 		padding:20rpx 0rpx;
 		display: flex;
 		flex-flow: row nowrap;
@@ -347,6 +446,8 @@
 		align-items: center;
 		background: linear-gradient(#0088ff,#1f58ff);
 		color: #ffffff;
+		/* position: fixed; */
+		top:95rpx;
 	}
 	.content-top .top-item{
 		text-align: center;
@@ -362,6 +463,7 @@
 		
 		
 	}
+	
 	.charge-list{
 		width:100vw;
 	}
@@ -404,15 +506,16 @@
 	}
 	
 	.charge-list  .charge-item .charge-money{
+		margin-right: 0rpx;
 		float:right;
-		margin-right: 10rpx;
-		float:right;
-		width:100rpx;
+		width:180rpx;
+		text-align: right;
+		
 	}
 	.charge-list  .charge-item .charge-money text{
 		font-size:36rpx;
 		font-weight: bold;
 		margin-right: 10rpx;
-		color:#858a95;
+		color:#1F58FF;
 	}
 </style>

pages/index/index.vue

@@ -146,13 +146,15 @@
 			},
 			parseForFilterMenu(dataObj){
 				if(dataObj&&dataObj.parkBase){
-					let parkIds=[];
+					let parkIds=[],parkAry=[];
 					dataObj.parkBase.forEach(function(item){
 						parkIds.push(item.park_id);
+						parkAry.push({park_id:item.park_id,parking_name:item.parking_name});
 					});
 					dataObj.parkBase.unshift({label:'全部停车场',value:'all'});  //因为引用关系 unshift 可能时vue内的改造过的方法
 					this.parkingMenuItems=dataObj.parkBase;
 					this.allParkIds=parkIds.join(",");
+					app.putSetting('myParks',parkAry);
 				}
 				
 				this.parseAndUpdateData(dataObj.parkRunWrap);