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

<template>
	<view  class="content">
		<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 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>
							<view class="filter-date" @tap="showCalendar=true">
								<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">
								<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 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>
						
						<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 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> -->
		
		
		<u-tabs :list="tablist" :is-scroll="false" :current="currentTab" @change="changeTab"></u-tabs>
		<!--已离场列表 start-->
		<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>
			<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>
		</view>
		<!--已离场列表 end-->
		
		<!--未离场列表 start-->
		<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>
					
					
					
					<!-- <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>
			<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>
		</view>
		<!--已标记列表 end-->
	</view>
</template>

<script>
	import * as api from '@/apis/parkinglog.js'
	import app from '@/utils/app.js'
	
	export default {
		data() {
			return {
				showCalendar:false,
				tablist:[
					{
						name:'今日已离场'
					},
					{
						name:'未离场'
					},
					{
						name:'已标记'
					}
				],
				currentTab:0,
				loadMoreStat:'loadmore',
				showMoreTip:false,
				loadMoreText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				filter:{
					startDate:'',
					endDate:'',
					carNum:''
				},
				myParkSites:[],
				selectedParkVal:'all',
				allParkIds:'',
				selectedParkIdx:null,
				filterInputCss:{
					'background-color':'#f2f5fa',
					
					'padding-left':'10rpx',
					'phstyle':'font-size:24rpx;'
				},
				pagedData:{},
				offPageData:{loadMoreStat:'loadmore',showMoreTip:false},  //已离场
				inPageData:{loadMoreStat:'loadmore',showMoreTip:false}  ,//未离场
				markedPageData:{loadMoreStat:'loadmore',showMoreTip:false}  //已标记
			}
		},
		onLoad(){
			this.loadMyParkSites()
			this.changePark()
		},
		onShow(){
			//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 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 {parkId:selParkId,status,carNum,queryStart,queryEnd,pageNum:pnum,pageSize:10};
			},
			checkHadMore(offType){
				let rst=null
				if(offType=="off"){
					rst=this.offPageData.pageNum<this.offPageData.pageCount;
					this.offPageData.showMoreTip=true;
					this.offPageData.loadMoreStat=rst?'loadmore':'nomore';
				}
				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;
				
			},
			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;
			},
			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)
				}
			},
			changeCalendar(e){
				this.filter.startDate=e.startDate;
				this.filter.endDate=e.endDate;
				//日期查询目前只用于已离场
				this.loadPageData(this.getLoadParams(1),false,"off");
			},
			scrollbtm(offType){
				console.log('scroll btm')
				if(!this.checkHadMore(offType)){
					return;
				}
				let pnum=1;
				if(offType=="off"){
					this.offPageData.loadMoreStat='loading';
					pnum=this.offPageData.pageNum+1;
					this.loadPageData(this.getLoadParams(pnum),true,offType)
				}
				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)
				}
				
				
			},
			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({
					title:'加载中...'
				});
				param.status=offType
				api.loadPageData(param).then(resp => {
					//console.log(resp)
					uni.hideLoading();
					if(!resp.success){
						uni.showToast({
							title:resp.msg||'加载数据失败',
							icon:'none'
						})
						return;
					}
					
					let pagedData=resp.data.pagedData;
					this.parseDatas(pagedData);
					if(offType=="off"){ //查询已离场数据结果
						if(moreLoad){
							pagedData.records=pagedData.records?this.offPageData.records.concat(pagedData.records):this.offPageData.records;
						}
						pagedData.showMoreTip=this.offPageData.showMoreTip
						pagedData.loadMoreStat=this.offPageData.loadMoreStat
						this.offPageData=pagedData
					}
					else{ //未离场
					    if(moreLoad){
							pagedData.records=pagedData.records?this.inPageData.records.concat(pagedData.records):this.inPageData.records;
						}
						pagedData.showMoreTip=this.inPageData.showMoreTip
						pagedData.loadMoreStat=this.inPageData.loadMoreStat
						this.inPageData=pagedData
					}
					
					this.renderSortTab(pagedData,offType);
					
					this.checkHadMore(offType);
					
				}).catch(error => {
					console.log(error)
					uni.hideLoading();
				});
			},
			
			
			renderSortTab(pageMode,offType){  //rptData
				
			   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 if(offType=="in"){
				   tab2={name:`未离场(${pageMode.total!=null?pageMode.total:0})`}
			   }
			   else if(offType=="marked"){
				   tab3={name:`已标记(${pageMode.total!=null?pageMode.total:0})`}
			   }
			   this.tablist=[tab1,tab2,tab3]
				
			},
			parseDatas(respData){
				
				respData['pageNum']=respData.current;
				respData['pageCount']=respData.pages;
				respData['pageSize']=respData.size;
				
				let outTypeOpt={'1':'手动抬杆','2':'手动移出','3':'缴费离场','4':'VIP会员'}
				
				let datas=respData.records;
				let tmp=null,pkh=null;
				datas.forEach((item) => {
					tmp=item.release_status=='0'?item.cal_parking_time:item.parking_time;
					tmp=!tmp?0:tmp;
					pkh=Math.floor(tmp/60);
					item['parking_time_txt']=pkh>0?(pkh.toFixed(0)+"小时"+(tmp-pkh*60)+"分钟"):(tmp+"分钟");
					
					item['car_img']=item.release_status=='0'?item.in_image:item.out_image;
					if(!item['car_img']){
						item['car_img']='../../static/img/def_car.png';
					}
					
					item['out_type_name']=outTypeOpt[item['out_type']] || '';
					item['pay_amount']=item['pay_amount']?item['pay_amount'].toFixed(2):null;
					//item['out_type']=='3' && 
				});
			},
			
			previewCarPhoto(img){
				let array = [];
				array.push(img);
				uni.previewImage({
					urls: array,
					current: array[0]
				});
			},
			manualOut(record){
				let con=`确定要对车辆【${record.car_num}](停车${record.parking_time_txt})进行手动出场吗？`;
				uni.showModal({
					title:'手动出场确认',
					content:con,
					success:(res)=>{
						if (res.confirm) {
							this.manualOutSubmit(record.id)		
						} else if (res.cancel) {
							console.log('用户取消手动出场');
						}
					}
				})
			},
			manualOutSubmit(recordId){
				api.manualOut(recordId,app.takeSetting('user_id')).then(resp=>{
					if(!resp.success){
						uni.showToast({
							title:resp.msg||'手动出场失败',
							icon:'none'
						})
						return;
					}
					
					uni.showToast({
						title:'操作成功',
						icon:'success'
					})
					
					//避免成功提示跳过
					setTimeout(()=>{
						//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'
					})
				})
			},
			
			markCarIn(recordId){
				api.markCarIn(recordId,app.takeSetting('user_id')).then(resp=>{
					if(!resp.success){
						uni.showToast({
							title:resp.msg||'标记车辆失败',
							icon:'none'
						})
						return;
					}
					
					uni.showToast({
						title:'标记成功',
						icon:'success'
					})
					
					setTimeout(()=>{
						//let pn=this.inPageData.pageNum
						this.loadPageData(this.getLoadParams(1),false,'in')
						this.loadMarked(this.getLoadParams(1),false)
					},1000)
					
				}).catch(err=>{
					uni.showToast({
						title:'标记车辆出错',
						icon:'none'
					})
				})
			},
			
			cancelMarkCarIn(recordId){
				api.cancelMarkCarIn(recordId,app.takeSetting('user_id')).then(resp=>{
					if(!resp.success){
						uni.showToast({
							title:resp.msg||'取消标记失败',
							icon:'none'
						})
						return;
					}
					
					uni.showToast({
						title:'取消标记成功',
						icon:'success'
					})
					
					setTimeout(()=>{
						//let pn=this.inPageData.pageNum
						this.loadPageData(this.getLoadParams(1),false,'in')
						this.loadMarked(this.getLoadParams(1),false)
					},1000)
					
				}).catch(err=>{
					uni.showToast({
						title:'取消标记出错',
						icon:'none'
					})
				})
			},
			
			batchOff(){
				if(!this.selectedParkVal || this.selectedParkVal=='all' || this.selectedParkVal==''){
					uni.showModal({
						title:'操作提示',
						content:'请先选择1个停车场（不可多选），再继续',
						showCancel:false
					})
					
					return
				}
				else{
					let parkObj=this.myParkSites.find(itm=>itm.park_id==this.selectedParkVal)
					uni.showModal({
						title:'操作提示',
						content:`提交前请确认选择的停车场【${parkObj.parking_name}】，且已完成该停车场的标记`,
						showCancel:true,
						success:(res)=>{
							if (res.confirm) {
								this.batchOffSubmit();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
			},
			
			batchOffSubmit(){
				
			}
			
			
		}
	}
</script>

<style>
	page{
		background-color: #f4f4f4;
		overflow: hidden;
	}
	
	
	.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:#0055ff !important;
	} 
	
	
	.top-navbar{
		font-size:28rpx;
	}
	
	
	uni-scroll-view{
		box-sizing: border-box;
	}
	
	.tab-con-item{
		background-color: #ffffff;
		border-radius: 10rpx;
		padding:20rpx;
		margin-bottom: 20rpx;
	}
	
	.tab-con-item .item-top{
		padding:0rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content:flex-start;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.tab-con-item .item-top-right{
		display: flex;
		flex-flow: column nowrap;
		justify-content:space-between;
		margin-left:20rpx;
	}
	
	.tab-con-item .item-top-right>text{
		color:#000000;
		margin-bottom:20rpx;
	}
	
	.tab-con-item .item-top-right .top-right-con{
		font-size:24rpx;
	}
	
	.tab-con-item .item-top-right .top-right-con>view{
		margin-bottom:10rpx;
	}
	
	.tab-con-item .item-footer{
		display: flex;
		flex-flow: row nowrap;
		justify-content:space-between;
		align-items: center;
		font-size:24rpx;
	}
	
	.tab-con-item .item-footer .car-num{
		font-size:28rpx;
		font-weight: bold;
	}
	
	.tab-con-item .item-footer .item-footer-btn{
		padding:10rpx 15rpx;
		color:#ffffff;
		background-color: #185AC6;
		border-radius: 6rpx;
		
	}
	
	
	.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-item .uni-input-wrapper{
		background-color: #f2f5fa;
	}
	.filter-date{
		width:100%;
		height:72rpx;
		line-height: 55rpx;
		background-color: #f2f5fa;
		margin-top: 20rpx;
		display: flex;
		align-items:center;
		padding-left:10rpx;
		
	}
	.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;
	}
</style>