停车记录页面重构，增加已标记分类列表

apis/parkinglog.js

@@ -10,7 +10,14 @@ export function loadPageData(param){
 	})
 }
 
-
+export function loadMarked(param){
+	
+	return request({
+		method: 'post',
+		data:param,
+		url: '/mobileApi/parkingLog/queryMarked'
+	})
+}
 
 
 export function getMyParkSites(){

pages/parking/parkinglog.vue

@@ -3,7 +3,8 @@
 		<u-navbar title="" :is-back="false" :background="{backgroundColor: '#ffffff'}" class="top-navbar">
 			<text style="position: absolute;z-index: 1;left:40rpx;">停车记录</text>
 			<u-dropdown ref="filterDropdown">
-				<u-dropdown-item  title="筛选">
+				<u-dropdown-item v-model="selectedParkIdx"  :title="selectedParkName" :options="myParkSites" @change="changePark">
+					<!--
 					<view class="slot-content dropdown-filter-con">
 						<view class="filter-item">
 							<text class="filter-label">出场日期</text>
@@ -25,7 +26,6 @@
 						</view>
 						<view class="filter-item">
 							<text class="filter-label">车牌号</text>
-							<!-- <u-field v-model="mobile" label="" placeholder="请填写手机号"></u-field> -->
 							<view style="background-color:#f2f5fa;height:72rpx;margin-top:15rpx;"><u-input  type="text" v-model="filter.carNum" :border="false" placeholder="请输入车牌号" :custom-style="filterInputCss" :placeholder-style="filterInputCss.phstyle"/></view>
 						</view>
 						
@@ -34,93 +34,149 @@
 							<view class="filter-btn-sure" @tap="sureFilter">确定</view>
 						</view>
 						
-					</view>
+					</view>-->
 				</u-dropdown-item>
 			</u-dropdown>
 			
 		</u-navbar>
 		<u-calendar v-model="showCalendar" mode="range" @change="changeCalendar"></u-calendar>
-		<view style="display: flex;align-items: center;">
+		<!-- <view style="display: flex;align-items: center;">
 			<u-search placeholder="输入车牌号模糊查找" v-model="filter.carNum" @search="sureFilter" @custom="sureFilter"></u-search>
 			<u-button type="primary" size="mini" style="margin-left:50rpx;" @tap="batchOff" v-show="false">批量出场</u-button>
-		</view>
+		</view> -->
 		
 		
 		<u-tabs :list="tablist" :is-scroll="false" :current="currentTab" @change="changeTab"></u-tabs>
 		<!--已离场列表 start-->
-		<scroll-view style="padding:20rpx;height:calc(100vh - 170px)" scroll-y="true"  @scrolltolower="scrollbtm('off')" v-show="currentTab==0">
-			
-			<view class="tab-con-item"  v-for="(item,index) in offPageData.records" :key="index">
-				<view class="item-top">
-					<u-image width="200rpx" height="160rpx" :src="item.car_img" border-radius="5rpx" @click="previewCarPhoto(item.car_img)"></u-image>
-					<view class="item-top-right">
-						<view  style="margin-bottom: 10rpx;"><text>{{item.parking_name}}</text></view>
-						<view class="top-right-con">
-							<view>进场时间：{{item.in_parking_time}}</view>
-							<view v-if="item.release_status=='1'">离场时间：{{item.out_parking_time}}</view>
-							<view>停车时长：{{item.parking_time_txt}}</view>
-							<view>离场方式：{{item.out_type_name}}</view>
-							<view>缴费金额：{{item.pay_amount?(item.pay_amount+'元'):''}}</view>
-						</view>
-					</view>
-				</view>
-				<view class="item-footer">
-					<text class="car-num">{{item.car_num}}</text>
+		<view class="tab-con-wrap" v-show="currentTab==0">
+			<view class="tab-con-header">
+				<view style="display: flex;align-items: center;padding:10rpx 0rpx;">
+					<u-icon name="calendar" size="48" color="#5555ff" style="margin:0rpx 40rpx;" @tap="showCalendar=true"></u-icon>
+					<u-search shape="round" border-color="#72b2ff" placeholder="输入车牌号模糊查找" v-model="filter.carNum" @search="searchHandler('off')" @custom="searchHandler('off')"></u-search>
 				</view>
 				
 			</view>
-			
-			
-			
-			<!-- <u-loadmore :status="loadMoreStat"/> -->
-			<view v-show="offPageData.showMoreTip">
-				<u-loadmore :status="offPageData.loadMoreStat" :load-text="loadMoreText"/>
+			<view class="tab-con-body">
+				<scroll-view style="padding:20rpx;height:calc(100vh - 170px)" scroll-y="true"  @scrolltolower="scrollbtm('off')" v-show="currentTab==0">
+					
+					<view class="tab-con-item"  v-for="(item,index) in offPageData.records" :key="index">
+						<view class="item-top">
+							<u-image width="200rpx" height="160rpx" :src="item.car_img" border-radius="5rpx" @click="previewCarPhoto(item.car_img)"></u-image>
+							<view class="item-top-right">
+								<view  style="margin-bottom: 10rpx;"><text>{{item.parking_name}}</text></view>
+								<view class="top-right-con">
+									<view>进场时间：{{item.in_parking_time}}</view>
+									<view v-if="item.release_status=='1'">离场时间：{{item.out_parking_time}}</view>
+									<view>停车时长：{{item.parking_time_txt}}</view>
+									<view>离场方式：{{item.out_type_name}}</view>
+									<view>缴费金额：{{item.pay_amount?(item.pay_amount+'元'):''}}</view>
+								</view>
+							</view>
+						</view>
+						<view class="item-footer">
+							<text class="car-num">{{item.car_num}}</text>
+						</view>
+						
+					</view>
+					
+					
+					
+					<!-- <u-loadmore :status="loadMoreStat"/> -->
+					<view v-show="offPageData.showMoreTip">
+						<u-loadmore :status="offPageData.loadMoreStat" :load-text="loadMoreText"/>
+					</view>
+				</scroll-view>
 			</view>
-		</scroll-view>
+		</view>
 		<!--已离场列表 end-->
 		
 		<!--未离场列表 start-->
-		<scroll-view style="padding:20rpx;height:calc(100vh - 170px)" scroll-y="true"  @scrolltolower="scrollbtm('in')"  v-show="currentTab==1">
-			
-			<view class="tab-con-item"  v-for="(item,index) in inPageData.records" :key="index">
-				<view class="item-top">
-					<u-image width="200rpx" height="160rpx" :src="item.car_img" border-radius="5rpx" @click="previewCarPhoto(item.car_img)"></u-image>
-					<view class="item-top-right">
-						<view style="margin-bottom: 10rpx;"><text>{{item.parking_name}}</text></view>
-						<view class="top-right-con">
-							<view>进场时间：{{item.in_parking_time}}</view>
-							<view v-if="item.release_status=='1'">离场时间：{{item.out_parking_time}}</view>
-							<view>停车时长：{{item.parking_time_txt}}</view>
+		<view class="tab-con-wrap" v-show="currentTab==1">
+			<view class="tab-con-header">
+				<view style="display: flex;align-items: center;padding:10rpx 30rpx;">
+					<u-search shape="round" border-color="#72b2ff" placeholder="输入车牌号模糊查找" v-model="filter.carNum" @search="searchHandler('in')" @custom="searchHandler('in')"></u-search>
+				</view>
+			</view>
+			<view class="tab-con-body">
+				<scroll-view style="padding:20rpx;height:calc(100vh - 340rpx)" scroll-y="true"  @scrolltolower="scrollbtm('in')">
+					
+					<view class="tab-con-item"  v-for="(item,index) in inPageData.records" :key="index">
+						<view class="item-top">
+							<u-image width="200rpx" height="160rpx" :src="item.car_img" border-radius="5rpx" @click="previewCarPhoto(item.car_img)"></u-image>
+							<view class="item-top-right">
+								<view style="margin-bottom: 10rpx;"><text>{{item.parking_name}}</text></view>
+								<view class="top-right-con">
+									<view>进场时间：{{item.in_parking_time}}</view>
+									<view v-if="item.release_status=='1'">离场时间：{{item.out_parking_time}}</view>
+									<view>停车时长：{{item.parking_time_txt}}</view>
+								</view>
+							</view>
 						</view>
+						<view class="item-footer">
+							<text class="car-num">{{item.car_num}}</text>
+							<template v-if="item.mark_in">
+								<u-tag text="已标记在场" type="success" />
+								<u-button type="warning" size="mini" style="margin:0rpx;" @tap="cancelMarkCarIn(item.id)">取消标记</u-button>
+							</template>
+							<template v-else>
+								<u-button type="primary" size="mini" style="margin:0rpx;" @tap="manualOut(item)">手动出场</u-button>
+								<u-button type="warning" size="mini" style="margin:0rpx;" @tap="markCarIn(item.id)">标记在场</u-button>
+							</template>
+							
+						</view>
+						
 					</view>
-				</view>
-				<view class="item-footer">
-					<text class="car-num">{{item.car_num}}</text>
-					<!-- <u-tag text="已标记在场" type="success" />
-					<u-button type="warning" size="mini" style="margin:0rpx;">取消标记</u-button> -->
-					<!-- <view class="item-footer-btn" v-if="item.release_status=='0'" @tap="manualOut(item)">手动出场</view>-->
-					<template v-if="item.mark_in">
-						<u-tag text="已标记在场" type="success" />
-						<u-button type="warning" size="mini" style="margin:0rpx;" @tap="cancelMarkCarIn(item.id)">取消标记</u-button>
-					</template>
-					<template v-else>
-						<u-button type="primary" size="mini" style="margin:0rpx;" @tap="manualOut(item)">手动出场</u-button>
-						<u-button type="warning" size="mini" style="margin:0rpx;" @tap="markCarIn(item.id)">标记在场</u-button>
-					</template>
 					
+					
+					
+					<!-- <u-loadmore :status="loadMoreStat"/> -->
+					<view v-show="inPageData.showMoreTip">
+						<u-loadmore :status="inPageData.loadMoreStat" :load-text="loadMoreText"/>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+		
+		<!--未离场列表 end-->
+		
+		<!--已标记列表 start-->
+		<view class="tab-con-wrap" v-show="currentTab==2">
+			<view class="tab-con-header">
+				<view style="display: flex;align-items: center;padding:10rpx 0rpx;">
+					<u-button type="primary" size="medium" style="margin:0rpx 10rpx;" @tap="batchOff" v-show="true">批量出场</u-button>
+					<u-search shape="round" border-color="#72b2ff" placeholder="输入车牌号模糊查找" v-model="filter.carNum" @search="searchHandler('marked')" @custom="searchHandler('marked')"></u-search>
 				</view>
 				
 			</view>
-			
-			
-			
-			<!-- <u-loadmore :status="loadMoreStat"/> -->
-			<view v-show="inPageData.showMoreTip">
-				<u-loadmore :status="inPageData.loadMoreStat" :load-text="loadMoreText"/>
+			<view class="tab-con-body">
+				<scroll-view style="padding:20rpx;height:calc(100vh - 340rpx);" scroll-y="true"  @scrolltolower="scrollbtm('marked')">
+					<view class="tab-con-item"  v-for="(item,index) in markedPageData.records" :key="index">
+						<view class="item-top">
+							<u-image width="200rpx" height="160rpx" :src="item.car_img" border-radius="5rpx" @click="previewCarPhoto(item.car_img)"></u-image>
+							<view class="item-top-right">
+								<view style="margin-bottom: 10rpx;"><text>{{item.parking_name}}</text></view>
+								<view class="top-right-con">
+									<view>进场时间：{{item.in_parking_time}}</view>
+									<view>停车时长：{{item.parking_time_txt}}</view>
+								</view>
+							</view>
+						</view>
+						<view class="item-footer">
+							<text class="car-num">{{item.car_num}}</text>
+							<u-tag text="已标记在场" type="success" />
+							<u-button type="warning" size="mini" style="margin:0rpx;" @tap="cancelMarkCarIn(item.id)">取消标记</u-button>
+							
+						</view>
+						
+					</view>
+					
+					<view v-show="markedPageData.showMoreTip">
+						<u-loadmore :status="markedPageData.loadMoreStat" :load-text="loadMoreText"/>
+					</view>
+				</scroll-view>
 			</view>
-		</scroll-view>
-		<!--未离场列表 end-->
-		
+		</view>
+		<!--已标记列表 end-->
 	</view>
 </template>
 
@@ -138,6 +194,9 @@
 					},
 					{
 						name:'未离场'
+					},
+					{
+						name:'已标记'
 					}
 				],
 				currentTab:0,
@@ -156,6 +215,7 @@
 				myParkSites:[],
 				selectedParkVal:'all',
 				allParkIds:'',
+				selectedParkIdx:null,
 				filterInputCss:{
 					'background-color':'#f2f5fa',
 					
@@ -164,32 +224,35 @@
 				},
 				pagedData:{},
 				offPageData:{loadMoreStat:'loadmore',showMoreTip:false},  //已离场
-				inPageData:{loadMoreStat:'loadmore',showMoreTip:false}  //未离场
+				inPageData:{loadMoreStat:'loadmore',showMoreTip:false}  ,//未离场
+				markedPageData:{loadMoreStat:'loadmore',showMoreTip:false}  //已标记
 			}
 		},
 		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(1));
+			this.loadMyParkSites()
+			this.changePark()
 		},
 		onShow(){
-			this.loadPageData(this.getLoadParams(1),false,"in");
-			this.loadPageData(this.getLoadParams(1),false,"off");
+			//this.loadPageData(this.getLoadParams(1),false,"in");
+			//this.loadPageData(this.getLoadParams(1),false,"off");
+		},
+		computed:{
+			selectedParkName(){
+				let chk=this.myParkSites && this.selectedParkIdx!=null
+				return chk ? this.myParkSites[this.selectedParkIdx].label:'选择停车场'
+			}
 		},
 		methods: {
 			getLoadParams(pnum){
-				let parkarg=this.selectedParkVal=="all"?this.allParkIds:this.selectedParkVal;
+				let selParkId=this.myParkSites[this.selectedParkIdx].park_id
+				let status=this.currentTab==0?"off":"in"
+				let {carNum,startDate:queryStart,endDate:queryEnd}=this.filter
+				//let parkarg=this.selectedParkVal=="all"?this.allParkIds:this.selectedParkVal;
 				/*
 				if(!pnum){
 					pnum=this.pagedData.pageNum!=null?(this.pagedData.pageNum+1):1;
 				}*/
-				return {parkingIds:parkarg,status:(this.currentTab==0?"off":"in"),carNum:this.filter.carNum,queryStart:this.filter.startDate,queryEnd:this.filter.endDate,pageNum:pnum,pageSize:10};
+				return {parkId:selParkId,status,carNum,queryStart,queryEnd,pageNum:pnum,pageSize:10};
 			},
 			checkHadMore(offType){
 				let rst=null
@@ -198,36 +261,44 @@
 					this.offPageData.showMoreTip=true;
 					this.offPageData.loadMoreStat=rst?'loadmore':'nomore';
 				}
-				else{
+				else if(offType=="in"){
 					rst=this.inPageData.pageNum<this.inPageData.pageCount;
 					this.inPageData.showMoreTip=true;
 					this.inPageData.loadMoreStat=rst?'loadmore':'nomore';
 				}
+				else if(offType=="marked"){
+					rst=this.markedPageData.pageNum<this.markedPageData.pageCount;
+					this.markedPageData.showMoreTip=true;
+					this.markedPageData.loadMoreStat=rst?'loadmore':'nomore';
+				}
 				return rst;
 				
 			},
-			
-			changeCalendar(e){
-				this.filter.startDate=e.startDate;
-				this.filter.endDate=e.endDate;
+			changePark(val){
+				//console.log(val)
+				this.loadPageData(this.getLoadParams(1),false,"in");
+				this.loadPageData(this.getLoadParams(1),false,"off");
+				this.loadMarked(this.getLoadParams(1),false)
 			},
 			changeTab(idx){
 				this.currentTab=idx;
-				//this.loadPageData(this.getLoadParams(1),false,(idx==0?"off":"in"));
 			},
-			resetFilter(){
-				let resetObj={
-					startDate:'',
-					endDate:'',
-					carNum:''
-					
-				};
-				this.filter=resetObj;
-				this.selectedParkVal='all';
+			searchHandler(type){
+				//3个搜索框的搜索处理
+				if(type=="off"){  //已离场
+					this.loadPageData(this.getLoadParams(1),false,"off")
+				}
+				else if(type=="in"){
+					this.loadPageData(this.getLoadParams(1),false,"in")
+				}
+				else if(type=="marked"){
+					this.loadMarked(this.getLoadParams(1),false)
+				}
 			},
-			sureFilter(){
-				this.$refs.filterDropdown.close();
-				this.loadPageData(this.getLoadParams(1),false,"in");
+			changeCalendar(e){
+				this.filter.startDate=e.startDate;
+				this.filter.endDate=e.endDate;
+				//日期查询目前只用于已离场
 				this.loadPageData(this.getLoadParams(1),false,"off");
 			},
 			scrollbtm(offType){
@@ -239,13 +310,75 @@
 				if(offType=="off"){
 					this.offPageData.loadMoreStat='loading';
 					pnum=this.offPageData.pageNum+1;
+					this.loadPageData(this.getLoadParams(pnum),true,offType)
 				}
-				else{
+				else if(offType=="in"){
 					this.inPageData.loadMoreStat='loading';
 					pnum=this.inPageData.pageNum+1;
+					this.loadPageData(this.getLoadParams(pnum),true,offType)
+				}
+				else if(offType=="marked"){
+					this.markedPageData.loadMoreStat='loading';
+					pnum=this.markedPageData.pageNum+1;
+					this.loadMarked(this.getLoadParams(pnum),true)
 				}
-				this.loadPageData(this.getLoadParams(pnum),true,offType)
+				
 				
+			},
+			loadMyParkSites(){
+				//本地缓存中获取停车场,需刷新首页才能更新
+				let pks=api.getMyParkSites();
+				if(!pks){
+					return;
+				}
+				let ids=[]; 
+				pks.forEach(function(item,index){
+					ids.push(item.park_id);
+					item['value']=index;
+					item['label']=item.parking_name;
+				});
+				this.allParkIds=ids.join(",");
+				this.myParkSites=pks;
+				this.selectedParkIdx=0;
+				
+			},
+			loadMarked(param,moreLoad){
+				//加载已标记记录
+				let offType='marked'
+				uni.showLoading({
+					title:'加载中...'
+				});
+				api.loadMarked(param).then(resp=>{
+					uni.hideLoading()
+					//console.log(resp)
+					if(!resp.success){
+						uni.showToast({
+							title:resp.msg||'加载已标记数据失败',
+							icon:'none'
+						})
+						return;
+					}
+					let pagedData=resp.data.pagedData
+					this.parseDatas(pagedData);
+					if(moreLoad && this.markedPageData && this.markedPageData.records){
+						pagedData.records=this.markedPageData.records.concat(pagedData.records)
+					}
+					pagedData.showMoreTip=this.markedPageData.showMoreTip
+					pagedData.loadMoreStat=this.markedPageData.loadMoreStat
+					this.markedPageData=pagedData
+					
+					this.renderSortTab(pagedData,offType);
+					
+					this.checkHadMore(offType);
+					
+				}).catch(err=>{
+					console.log(err)
+					uni.hideLoading()
+					uni.showToast({
+						title:'加载已标记数据出错',
+						icon:'none'
+					})
+				})
 			},
 			loadPageData(param,moreLoad,offType){
 				uni.showLoading({
@@ -253,7 +386,7 @@
 				});
 				param.status=offType
 				api.loadPageData(param).then(resp => {
-					console.log(resp)
+					//console.log(resp)
 					uni.hideLoading();
 					if(!resp.success){
 						uni.showToast({
@@ -282,27 +415,31 @@
 						this.inPageData=pagedData
 					}
 					
-					this.renderRptData(pagedData,offType);
+					this.renderSortTab(pagedData,offType);
 					
 					this.checkHadMore(offType);
 					
 				}).catch(error => {
+					console.log(error)
 					uni.hideLoading();
 				});
 			},
 			
 			
-			renderRptData(pageMode,offType){  //rptData
+			renderSortTab(pageMode,offType){  //rptData
 				
-			   let [tab1,tab2]=this.tablist
+			   let [tab1,tab2,tab3]=this.tablist
 			   if(offType=="off"){
 				   let tmpname=this.filter.startDate && this.filter.startDate!=''?'已离场':'今日已离场';
 				   tab1={name:`${tmpname}(${pageMode.total!=null?pageMode.total:0})`}
 			   }
-			   else{
+			   else if(offType=="in"){
 				   tab2={name:`未离场(${pageMode.total!=null?pageMode.total:0})`}
 			   }
-			   this.tablist=[tab1,tab2]
+			   else if(offType=="marked"){
+				   tab3={name:`已标记(${pageMode.total!=null?pageMode.total:0})`}
+			   }
+			   this.tablist=[tab1,tab2,tab3]
 				
 			},
 			parseDatas(respData){
@@ -331,11 +468,7 @@
 					//item['out_type']=='3' && 
 				});
 			},
-			chargingAndPass(id){
-				uni.navigateTo({
-					url:'charging?parkingLogId='+id
-				})
-			},
+			
 			previewCarPhoto(img){
 				let array = [];
 				array.push(img);
@@ -373,15 +506,17 @@
 						icon:'success'
 					})
 					
-					//避免成功提示跳过(加载第1页才更新统计数据)
+					//避免成功提示跳过
 					setTimeout(()=>{
-						this.loadPageData(this.getLoadParams(1),false,'in');
-						this.loadPageData(this.getLoadParams(1),false,'off');
+						//let pn=this.inPageData.pageNum
+						this.loadPageData(this.getLoadParams(1),false,'in')  //刷新当前页
+						this.loadPageData(this.getLoadParams(1),false,'off')
 					},1000)
 					
 					
 					
 				}).catch(err=>{
+					console.log(err)
 					uni.showToast({
 						title:'手动出场出错',
 						icon:'none'
@@ -405,7 +540,9 @@
 					})
 					
 					setTimeout(()=>{
-						this.loadPageData(this.getLoadParams(1),false,'in');
+						//let pn=this.inPageData.pageNum
+						this.loadPageData(this.getLoadParams(1),false,'in')
+						this.loadMarked(this.getLoadParams(1),false)
 					},1000)
 					
 				}).catch(err=>{
@@ -432,7 +569,9 @@
 					})
 					
 					setTimeout(()=>{
-						this.loadPageData(this.getLoadParams(1),false,'in');
+						//let pn=this.inPageData.pageNum
+						this.loadPageData(this.getLoadParams(1),false,'in')
+						this.loadMarked(this.getLoadParams(1),false)
 					},1000)
 					
 				}).catch(err=>{
@@ -484,6 +623,8 @@
 		background-color: #f4f4f4;
 		overflow: hidden;
 	}
+	
+	
 	.top-navbar/deep/ .u-slot-content{
 		justify-content: space-between;
 		padding:0rpx;
@@ -499,6 +640,10 @@
 		
 	}
 	
+	.top-navbar/deep/ .u-dropdown__menu__item__text{
+		color:#0055ff !important;
+	} 
+	
 	
 	.top-navbar{
 		font-size:28rpx;