parking-manage-mobile/pages/charge/charge.vue

<template>
	<view class="content">
		<u-navbar title="" :is-back="false"  class="top-navbar">
			<text style="position: absolute;z-index: 1;left:40rpx;">收费明细</text>	
			<u-dropdown ref="filterDropdown">
				<u-dropdown-item  title="筛选">
					<view class="slot-content dropdown-filter-con">
						<view class="filter-item">
							<text class="filter-label">查询日期</text>
							<view class="filter-date" @tap="selectDateRange">
								<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">
							<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>
								<view class="filter-con-item" data-val='1' :class="{'selected-filter-item':filter.chargeStat=='1'}">全部</view>
								<view class="filter-con-item" data-val='2' :class="{'selected-filter-item':filter.chargeStat=='2'}">全部</view>
								<view class="filter-con-item">全部</view>
								<view class="filter-con-item">全部</view>
								
							</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>
						</view>
						 -->
						<view class="filter-item">
							<text class="filter-label">停车场</text>
							<view class="filter-con">
								<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">
							<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>
						</view> -->
						
						<view class="filter-btn">
							<view class="filter-btn-reset" @tap="resetFilter">重置</view>
							<view class="filter-btn-sure" @tap="sureFilter">确定</view>
						</view>
						
					</view>
				</u-dropdown-item>
			</u-dropdown>
		</u-navbar>
		<u-calendar v-model="showCalendar" mode="range" @change="changeCalendar"></u-calendar>
		<view class="content-top">
			<view class="top-item">
				<view>实收金额(元)</view>
				<text>{{rptPay.todayPayAmount}}</text>
			</view>
			<view class="top-item">
				<view>收款笔数</view>
				<text>{{rptPay.todayPayCount}}</text>
			</view>
			<view class="top-item">
				<view>应收金额(元)</view>
				<text>{{rptPay.shouldPayAmount}}</text>
			</view>
		</view>
		
		<view class="charge-list">
			<block v-for="(item,index) in pagedPayLog" :key="index">
				<view class="charge-date">
					<view class="charge-date-left">{{item.dayDate}}</view>
					<view class="charge-date-right">当日收费 {{item.dayTotal}}元</view>
				</view>
				<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.parking_name}}</view>
								<view>进入时间：{{data.in_parking_time}}</view>
								<view>离开时间：{{data.out_parking_time}}</view>
								<view>停车时长：{{data.parking_time_txt}}</view>
								<view>支付方式：{{data.pay_mode}}</view>
							</view>
							<view class="charge-money" @tap="showChargeDtl(data.parking_log_id)">
								<text>{{data.pay_amount}}元</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</view>
				</block>
			</block>
			
			
			<view v-show="reachbtm">
				<u-loadmore :status="loadMoreStat" :load-text="loadMoreText"/>
			</view>
			
			<view v-show="pagedPayLog.length==0" style="margin:50rpx;text-align: center;">未找到相关数据</view>
			
		</view>
	</view>
</template>

<script>
	import * as api from '@/apis/charge.js'
	
	export default {
		data() {
			return {
				reachbtm:false,
				showCalendar:false,
				loadMoreStat:'loadmore',
				loadMoreText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				filter:{
					startDate:'',
					endDate:''
				},
				rptPay:{
					todayPayAmount:'0.00',
					todayPayCount:'0',
					shouldPayAmount:'0.00'
				},
				myParkSites:[],
				selectedParkVal:'all',
				allParkIds:'',
				pagedPayLog:[],
				loadParams:{}
				
			}
		},
		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());
			
		},
		onShow(){
			this.loadPageData(this.getLoadParams());
		},
		onReachBottom(){
			this.reachbtm=true;
			if(!this.checkHadMore()){  //没有更多数据
				return;
			}
			this.loadMoreStat = 'loading';
			this.loadMoreData(this.getLoadParams(true));
			
		},
		methods: {
			getLoadParams(loadMore){
				let crtParams={...this.loadParams};
				if(loadMore){
					if(crtParams.pageNum<crtParams.pageCount){
						crtParams.pageNum+=1;				 
					}
					/* else{ //更换日期,重置页码,其它参数不变
						crtParams.chargeDate=api.addDate(crtParams.chargeDate,-1);
						crtParams.pageNum=1;
						crtParams.pageCount=0;
					} */
				}
				else{//全新查询
					 crtParams.pageNum=1;
					 crtParams.pageCount=0;
					 let parkarg=this.selectedParkVal=="all"?this.allParkIds:this.selectedParkVal;
					 crtParams.parkingIds=parkarg;
					 crtParams.chargeStart=this.filter.startDate;
					 crtParams.chargeEnd=this.filter.endDate;
					 crtParams.pageSize=15;
				}
				
				return crtParams;
			},
			checkHadMore(){
				//let rst=this.loadParams.pageNum<this.loadParams.pageCount||this.loadParams.chargeDate>this.loadParams.chargeStart;
				let rst=this.loadParams.pageNum<this.loadParams.pageCount
				this.loadMoreStat=rst?'loadmore':'nomore';
				return rst;
			},
			selectDateRange(){
				this.showCalendar=true;
			},
			changeCalendar(e){
				//console.log(e);
				this.filter.startDate=e.startDate;
				this.filter.endDate=e.endDate;
			},
			selectFilter(filterSort,e){
				//console.log(filterSort);
				//console.log(e);
				if(e.target.dataset.val!=null){
					this.filter[filterSort]=e.target.dataset.val;
				}
				
			},
			resetFilter(){
				let resetObj={
					startDate:'',
					endDate:''
					
				};
				this.filter=resetObj;
				this.selectedParkVal='all';
			},
			sureFilter(){
				this.$refs.filterDropdown.close();
				this.loadPageData(this.getLoadParams());
				//console.log('query'+parkarg)
			},
			
			showChargeDtl(id){
				//console.log(id);
				uni.navigateTo({
					url:'chargedtl?parkingLogId='+id
				})
			},
			loadPageData(param){  //全新查询，按chargeStart-chargeEnd  先查chargeEnd的
				this.pagedPayLog=[] //新查先清空之前结果
				this.rptPay={}
				uni.showLoading({
					title:'加载中...'
				});
				this.reachbtm=false; //全新查询重置该值
				//console.log(param)
				api.loadPageData(param).then(resp => {
					//console.log(resp)
					uni.hideLoading();
					if(!resp.success){
						return;
					}
					if(resp.data){
						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(param,resp.data.payLogs.pagedData,resp.data.payLogs.dayGrp);
					this.loadParams=param; //更新查询参数
					
					/*
					if(!this.reachbtm&&this.checkHadMore()){  //未到底且还有数据，自动再加载一次
						this.loadMoreData(this.getLoadParams(true));
					}*/
					
				}).catch(error => {
					uni.hideLoading();
				});
			},
			parsePayLog(param,pagedObj,dayGrp){
				//console.log(pagedObj);
				let datas=pagedObj.records;
				param.pageNum=pagedObj.current;
				param.pageCount=pagedObj.pages;
				//let viewObj={pageNum:pagedObj.current,pageCount:pagedObj.pages,pageSize:pagedObj.size};
				if(datas==null||datas.length==0){
					return [];
				}
				else{
					
					let dayGrpMap={}
					let preListDatas=dayGrp.map( (grp,idx) =>{
						dayGrpMap[grp.pay_date]={dayDatas:[],dayDate:grp.pay_date,dayTotal:(grp.day_pay_amount||0).toFixed(2)}
						return dayGrpMap[grp.pay_date]
					})
					
					//在dayGrpMap中填充每日明细记录
					let tmp=null,pkh=null;
					datas.forEach((item,index)=>{
						
						item["pay_mode"]={"wechat":"微信","alipay":"支付宝"}[item.pay_name]||'其它';
						
						tmp=item.parking_time;
						pkh=Math.floor(tmp/60);
						item['parking_time_txt']=pkh>0?(pkh.toFixed(0)+"小时"+(tmp-pkh*60)+"分钟"):(tmp+"分钟");
						
						if(dayGrpMap[item['pay_date']]){
							dayGrpMap[item['pay_date']].dayDatas.push(item)
						}
						
						
					});
					
					return preListDatas;
				}
				
				
				
			},
			loadMoreData(param){   
				//console.log(param);
				api.queryChargeLog(param).then(resp => {
					//console.log(resp)
					if(!resp.success){
						return;
					}
					let newDatas=this.parsePayLog(param,resp.data.pagedData,resp.data.dayGrp);
					this.loadParams=param; //更新查询参数
					if(newDatas==null || newDatas.length==0){
						return
					}
					//新旧数据拼接（只会发生在旧尾新首间 同日期合并明细记录）
					let oldLastGrp=this.pagedPayLog.pop()
					let newFirstGrp=newDatas.shift()
					if(oldLastGrp['dayDate']==newFirstGrp['dayDate']){
						oldLastGrp['dayDatas']=oldLastGrp['dayDatas'].concat(newFirstGrp['dayDatas'])
					}
					
					this.pagedPayLog.push(oldLastGrp,...newFirstGrp)
					
					this.checkHadMore();
					
				}).catch(error =>{
					console.log('load more data error',error)
				});
			}
			
		}
	}
</script>

<style>
	page{
		
		background-color: #f4f4f4;
		
	}
	.top-navbar/deep/ .u-slot-content{
		justify-content: space-between;
		padding:0rpx;
		
	}
	
	.top-navbar/deep/ .u-dropdown__menu{
		justify-content: flex-end;
	}
	.top-navbar/deep/ .u-dropdown__menu .u-dropdown__menu__item{
		flex:none;
		margin-right: 40rpx;
		
	}
	/* .top-navbar/deep/ .u-dropdown__menu__item__text{
		color:#ffffff !important;
	} */
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.dropdown-filter-con{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding:20rpx 0rpx 0rpx;
		box-sizing: border-box;
		background-color: #fafafa;
		font-size: 26rpx;
	}
	
	.filter-item{
		width:100%;
		padding:0rpx 20rpx 30rpx;
	}
	.filter-item .filter-label{
		/* font-family: '楷体'; */
		
	}
	.filter-date{
		width:100%;
		height:55rpx;
		line-height: 55rpx;
		background-color: #f2f5fa;
		margin-top: 20rpx;
		display: flex;
		align-items:center;
		
	}
	.filter-date text{
		flex:1;
	}
	
	.filter-con{
		display: flex;
		flex-flow: row wrap;
		justify-content:flex-start;
		align-items: center;
		margin-top: 20rpx;
	}
	.filter-con .filter-con-item{
		padding:10rpx 10rpx;
		text-align: center;
		background-color: #f2f5fa;
		/* color:#ffffff; */
		/* height: 45rpx; */
		width:28vw;
		margin-right: 3vw;
		margin-bottom: 20rpx;
	}
	.filter-con .selected-filter{
		background-color: #185ac6;
		color:#ffffff;
	}
	
	.filter-btn{
		display: flex;
		flex-flow: row wrap;
		justify-content:flex-start;
		align-items: center;
		height: 80rpx;
		width:100vw;
		border-top:1px solid #f2f2f2;
	}
	.filter-btn-reset{
		flex:1;
		text-align: center;
		line-height: 80rpx;
		background-color: #f2f2f2;
	}
	.filter-btn-sure{
		flex:2;
		text-align: center;
		background-color: #185ac6;
		color:#ffffff;
		line-height: 80rpx;
	}
	
	.content-top{
		width:100vw;
		/* height:130rpx; */
		padding:20rpx 0rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content:space-around;
		align-items: center;
		background: linear-gradient(#0088ff,#1f58ff);
		color: #ffffff;
		/* position: fixed; */
		top:95rpx;
	}
	.content-top .top-item{
		text-align: center;
	}
	.content-top .top-item  view{
		font-size: 24rpx;
		color:#efefef;
		margin-bottom:10rpx;
	}
	
	.content-top .top-item  text{
		font-size: 36rpx;
		
		
	}
	
	.charge-list{
		width:100vw;
	}
	.charge-list .charge-date{
		padding:20rpx 30rpx;
		font-size: 26rpx;
		height: 80rpx;
	}
	.charge-list .charge-date .charge-date-left{
		float:left;
	}
	.charge-list .charge-date .charge-date-right{
		float:right;
	}
	.charge-list  .charge-item{
		background-color: #ffffff;
		padding:10rpx 30rpx;
		border-bottom: 1px solid #f2f2f2;
	}
	
	.charge-list  .charge-item .charge-item-title{
		font-size: 28rpx;
		font-weight: bold;
		padding:10rpx 0rpx;
	}
	.charge-list  .charge-item .charge-dtl{
		font-size: 26rpx;
		color:#888888;
		float:left;
		
	}
	.charge-list .charge-item .charge-item-body{
		display: flex;
		flex-flow: row nowrap;
		justify-content:space-between;
		align-items: center;
	}
	.charge-list  .charge-item .charge-dtl view{
		margin-bottom: 8rpx;
	}
	
	.charge-list  .charge-item .charge-money{
		margin-right: 0rpx;
		float:right;
		width:180rpx;
		text-align: right;
		
	}
	.charge-list  .charge-item .charge-money text{
		font-size:36rpx;
		font-weight: bold;
		margin-right: 10rpx;
		color:#1F58FF;
	}
</style>