jikeH5/pages/rescue/rescueOrder.vue

<template>
	<view class="box">
		
		<!-- 自定义导航 -->
		<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<view class="zdyNavLeft">
					<image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback">
					</image>
		
				</view>
				<view class="zdyNavTitle">救援订单</view>
				<view style="width: 50px;"></view>
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>
		<!-- 搜索框 -->
		<view class="newtop">
			<view class="searchBox">
			  <view class="searchInputBox">
				  <image src="../../static/img/icon_search.png" mode="" class="iconSimg"></image>
				  <input type="text" v-model="name" placeholder="订单号、手机号、联系人、车牌号" class="searchInput" @confirm="searchCf">
			       <image v-if="name" @click="ssql" src="../../static/img/chahao.png" mode="" class="sschahao"></image>
			  </view>
			<!--  <image @click="screenSHowBtn" src="../../static/img/icon_shai.png" mode="" class="iconShai"></image> -->
			</view>
			<!-- 筛选框 -->
			<view class="screen">
			  <view class="screenLine">
				  <!-- <span class="screenLineSpan">救援门店</span> -->
				  <view class="">
					   <picker @change="bindPickerChange" :value="pickerindex" :range-key="'shopName'" :range="pickerarray">
							<view class="screenLine"> 
								<span class="screenLineSpan">救援门店</span>	
								<img src="../../static/img/arrow_down.png" alt="" class="screenLineImg">
							</view>
					   </picker>
				  </view>
				 
			  </view>
			  <view class="screenLine" @click="orderTimesxSHow=true">
				  <span class="screenLineSpan">下单时间</span>
				  <img src="../../static/img/arrow_down.png" alt="" class="screenLineImg">
			  </view>
			  <view class="screenLine" @click="typeSHow=true">
				  <span class="screenLineSpan">更多</span>
				  <img src="../../static/img/arrow_down.png" alt="" class="screenLineImg">
			  </view>
			  <view class="orderTimesxBox" v-if="orderTimesxSHow">
				  <view class="sdTimeBox">
				   <picker mode="date" :value="date1"  @change="bindDateChange1">
				  		<view class="dateinput">{{date1?date1:'选择日期'}}</view>
					</picker>
					<view class="timeHx">-</view>
					<picker mode="date" :value="date2"  @change="bindDateChange2">
						<view class="dateinput">{{date2?date2:'选择日期'}}</view>
					</picker>
				  </view>
				  <view class="screenBottom">
				  	<view class="screenCz" @click="closeTime">取消</view>
				  	<view class="screenY" @click="orderTimesx">确认</view>
				  </view>
			  </view>
			  <view class="orderTimesxBox" v-if="typeSHow">
				 <view class="screenBt">救援类型</view>
				 <view class="typelineBox">
				 	  <view class="typeLine " v-for="(item,index) in tabList" 
				 				  :class="{typeactive:index==typeLineIndex}" @click="typeLineCk(index)">{{item.name}}
				 		</view>
				 	 
				   </view>
				 
				  <view class="screenBottom">
					   <view class="screenCz" @click="resetting">重置</view>
					   <view class="screenY" @click="subhelpType">确定</view>
				  </view>
			  </view>
			  
			  
			  
			</view>
			<view class="tab">
				<view class="tabLine" :class="{tabActive:tabIndex==-1}" @click="tabClick(-1)">全部</view>
				<view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">待确认</view>
				<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">已接单</view>
				<view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">已出发</view>
				<view class="tabLine" :class="{tabActive:tabIndex==3}" @click="tabClick(3)">已完成</view>
			</view>
		</view>
		
		
		<view class="main">
			<view class="itemBg" v-for="(item,index) in items" @click="goDetail(item)">
				<view class="itemTop">
					<view class="itemType" >
					 <span v-if="item.HelpType==1">搭电</span>
					 <span v-if="item.HelpType==2">拖车</span>
					 <span v-if="item.HelpType==3">换胎</span>
					 <span v-if="item.HelpType==4">未知原因</span>
					 -
					 <span v-if="item.Hscene==1">地面</span>
					 <span v-if="item.Hscene==2">车库</span>
					 <span v-if="item.Hscene==3">其他</span>
					</view>
					<view class="itemSheetState redColor" v-if="item.SheetState==0">待确认</view>
					<view class="itemSheetState redColor" v-if="item.SheetState==1">已接单</view>
					<view class="itemSheetState orangeColor" v-if="item.SheetState==2">已出发</view>
					<view class="itemSheetState greenColor" v-if="item.SheetState==3">已完成</view>
					<view class="itemSheetState" v-if="item.SheetState==4">已取消</view>
					<view class="itemSheetState greenColor" v-if="item.SheetState==5">已评价</view>

				</view>
				<view class="itemaddress">
				  <div class="addressDD"></div>   {{item.HStartAddress}}
				</view>
				<view class="itemName" v-if="item.orderType==1">救援时间：立刻</view>
				<view class="itemName" v-else>救援时间：{{item.HTime}}</view>
				<view v-if="item.PlateNumber">
					<view class="itemName" >{{item.PlateNumber}}</view>
				</view>
				<view style="display: flex;justify-content: space-between;">
					<view class="itemName" style="padding-bottom: 0;">{{item.ShopName}}</view>
					<view class="itemName" >{{item.CustomerName}}</view>
				</view>
				

			</view>
			
			<nodata v-show="items==''&&isload"></nodata>
		</view>
		<!-- 筛选弹框 -->
		<view class="screenBox" v-if="screenSHow" @click="screenHide">
		  <view class="screenCont" @click.stop="">
			  <view class="screenTitle">筛选</view>
			  <view class="screenBt">门店</view>
			  <view class="">
			  	   <picker @change="bindPickerChange" :value="pickerindex" :range-key="'shopName'" :range="pickerarray">
			  	 		<view class="uniPicker"> 
			  							<view class="uniPickerName">
			  							  {{shopName}}
			  							</view>
			  						   <image src="../../static/img/jt.png" mode=" " class="jtShopImg"></image>
			  						</view>
			  	   </picker>
			  </view>
			  <view class="screenBt">救援时间</view>
			  <view class="sdTimeBox">
			   <picker mode="date" :value="date1"  @change="bindDateChange1">
						<view class="dateinput">{{date1?date1:'选择日期'}}</view>
				</picker>
				<view class="timeHx">-</view>
				<picker mode="date" :value="date2"  @change="bindDateChange2">
							<view class="dateinput">{{date2?date2:'选择日期'}}</view>
					</picker>
			  </view>
			  <view class="screenBt">救援类型</view>
			  <view class="typelineBox">
			  	  <view class="typeLine " v-for="(item,index) in tabList" 
				    :class="{typeactive:index==typeLineIndex}" @click="typeLineCk(index)">{{item.name}}
				  </view>
			  	 <!--  :class="{typeactive:item.ck}"-->
			    </view>
			  
			   
			   <view class="screenBottom">
				   <view class="screenCz" @click="resetting">重置</view>
				   <view class="screenY" @click="sub">确定</view>
			   </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata/nodata.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				page: 1,
				tabIndex: -1,
				items: [],
				isload: false,
				name:'',
				pickerindex:0,
				pickerarray: [],
				screenSHow:false,
				shopName:'',
				date1:'',
				date2:'',
				typeLineIndex:0,
				sheetTypeList:'',
				shopId:'',
				mrshopId:'',
				mrshopName:'',
				tabList:[
					{
					  name:'全部',ck:true,sheetType:'',
					},
					{
					  name:'搭电',ck:false,sheetType:'1',
					},
					{
					  name:'拖车',ck:false,sheetType:'2',
					},
					{
					  name:'换胎',ck:false,sheetType:'3',
					},
					{
					  name:'未知原因',ck:false,sheetType:'4',
					}
				],
				orderTimesxSHow:false,
				typeSHow:false,
				iStatusBarHeight:'',
			}
		},
		onLoad(opt) {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//this.getData();
			this.getShopinfo();
			
		},
		onShow() {
			console.log(this.tabIndex)
            this.getShopinfo();
			//this.getData();
			

		},
		
		methods: {
			orderTimesx(){
				this.items=[]
				this.orderTimesxSHow=false;
				this.getData();
			},
			subhelpType(){
				this.typeSHow=false;
				/* var arr=[]
				this.items=[]
				this.tabList.forEach(item=>{
					if(item.ck){
						arr.push(item.sheetType)
					}
				})
				this.sheetTypeList=arr.join(','); */
				this.getData();
			},
			ssql(){
				this.name='';
				this.getData();
			},
			closeTime(){
				this.orderTimesxSHow=false
				this.date2=''
				this.date1=''
				this.getData();
			},
			sub(){
				this.screenSHow=false;
				/* var arr=[]
				this.items=[]
				this.tabList.forEach(item=>{
					if(item.ck){
						arr.push(item.sheetType)
					}
				})
				this.sheetTypeList=arr.join(',');*/
				//console.log(this.sheetTypeList) 
				
				this.getData();
			},
			resetting(){
				this.date1='';
				this.date2='';
				this.typeLineIndex='';
				this.shopName=this.mrshopName;
				this.shopId=this.mrshopId;
				this.sheetTypeList=''
				this.tabList[0].ck=true
				this.tabList[1].ck=false
				this.tabList[2].ck=false
				this.tabList[3].ck=false
				this.tabList[4].ck=false
				this.items=[]
				this.getData();
				this.typeSHow=false;
			},
			typeLineCk(num){
				this.typeLineIndex=num;
				console.log(this.typeLineIndex)
				if(num){
					this.sheetTypeList=num
				}
				if(num==0){
					this.sheetTypeList=''
				}
				console.log(this.sheetTypeList)
			
			},
			typeLineCk2(item){
				/* if(item.name=='全部'){
					item.ck=true;
					this.tabList[1].ck=false
					this.tabList[2].ck=false
					this.tabList[3].ck=false
					this.tabList[4].ck=false
				}else{
					this.tabList[0].ck=false
					item.ck=!item.ck;
				} */
				
			},
			screenSHowBtn(){
				this.screenSHow=true;
			},
			screenHide(){
				this.screenSHow=false;
			},
			bindDateChange1(e){
				console.log(e)
				this.date1=e.detail.value
			},
			bindDateChange2(e){
				this.date2=e.detail.value
			},
			bindPickerChange(e){
				console.log(e)
				this.page=1
				this.shopName=this.pickerarray[e.detail.value].shopName
				this.shopId=this.pickerarray[e.detail.value].id;
				this.getData();
			},
			getShopinfo(){
				this.$http('openH5SetTheGuest/getShopInfo',{},'GET').then(res => {
						this.shopName=res.data.shopName;
						this.mrshopId=res.data.id;
						this.mrshopName=res.data.shopName;
						this.shopId=this.mrshopId
						this.getShopList();
						this.getData()
				 })
			},
			getShopList(){
						 
				   this.$http('openH5SetTheGuest/getShopList', {
					 
					},'GET').then(res => {
						
						this.pickerarray=res.data;
						/* this.pickerarray.forEach((item,index)=>{
							
							if(this.mrshopId==item.id){
								this.pickerindex=index;
								
							}
						}) */
						//console.log(this.pickerarray[this.pickerindex])
					})
			},
			goback(){
				
					//app交互
					var standalone = window.navigator.standalone
					var userAgent = window.navigator.userAgent.toLowerCase()
					var safari = /safari/.test(userAgent)
					var ios = /iphone|ipod|ipad|mac/.test(userAgent)
					var android = /android/.test(userAgent)
					if (ios) {
									 if ( true) {//!standalone&& !safari
									   window.webkit.messageHandlers.goMyNav.postMessage(null)
									 }
					} else if (android) {
									 window.android.postMessage()
					}
				
			   
			},
			tabClick(num) {
				this.tabIndex = num;
				this.page = 1;
				this.getData()
			},
			goDetail(item) {
				uni.navigateTo({
					url: "rescueOrderDetail?id=" + item.ID+'&back=1'
				})
			},
			searchCf(){
				this.items=[]
				this.getData()
			},
			getData() {
				console.log(this.sheetTypeList)
				uni.showLoading({
					title: '加载中'
				});
				this.isload = false;
				var createTimeStart='';
				var createTimeEnd='';
				if(this.date1){
					createTimeStart=this.date1+ ' 00:00:00'
				}
				if(this.date1){
					createTimeEnd=this.date2+ ' 23:59:59'
				}
				var padata = {
					page: this.page,
					limit: 10,
					sheetState: this.tabIndex > -1 ? this.tabIndex : '',
					search:this.name,
					createTimeStart:createTimeStart,
					createTimeEnd:createTimeEnd,
					helpType:this.sheetTypeList,
					shopID:this.shopId,
				}

				this.$http('openH5ShopHelpSheetOrder/getOpenShopHelpSheetOrderList', padata, 'GET').then(res => {
					uni.hideLoading();
					this.isload = true;
					var list = res.data.Items;

					if (this.page == 1) {
						this.items = list
					} else {
						this.items = this.items.concat(list)
					}

				})
			},

		},
		onReachBottom() {
			this.page++;

			this.getData()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped>
.screen{
	display: flex;justify-content: space-around;
	background: #FFFFFF;position: relative;
}
.tuiBtns {
		display: flex;justify-content: space-around;
		padding: 40rpx 20rpx ;
	
	}
	
	.btn {
		width: 288rpx;
		height: 70rpx;
		background: #F4F5F7;
		border-radius: 10rpx;
		margin-right: 22rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #3C3C3C;
		line-height: 70rpx;
		text-align: center;
	}
	
	.btn2 {
		width: 288rpx;
		height: 70rpx;
		background: #3F90F7;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
	}
.orderTimesxBox{
	position: absolute;
	left: 0;
	top: 70rpx;
	background: #fff;
	width: 750rpx;
	
}
.screenLineSpan{
	color: #3C3C3C;font-size: 26rpx;line-height: 70rpx;
}
.screenLine{
	display: flex;
}
.screenLineImg{
	width: 24rpx;height: 24rpx;margin-top: 23rpx;margin-left: 10rpx;
}
	.screenBox{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0 ,0,0,0.5);
		z-index: 999;
	}
	.screenBottom{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
	}
	.screenCz{
		width: 291rpx;text-align: center;margin-top: 22rpx;
		height: 74rpx;line-height: 74rpx;
		background: #F4F5F7;color: #000000;
		border-radius: 37rpx;font-size: 28rpx;
	}
	.screenY{
		width: 291rpx;text-align: center;margin-top: 22rpx;
		height: 74rpx;line-height: 74rpx;
		background: #D53533;color: #FFFFFF;
		border-radius: 37rpx;font-size: 28rpx;
	}
	.screenCont{
		width: 650rpx;
		height: 100%;
		background: #FFFFFF;
		margin-left: 100rpx;
	}
	.screenTitle{
		font-weight: 400;font-size: 24rpx;padding-top: 70rpx;padding-left: 20rpx;
		color: #333333;
	}
	.screenBt{
		font-weight: 400;font-size: 24rpx;
		color: #333333;padding-left: 20rpx;padding-top: 30rpx;
	}
	.iconShai{
		width: 36rpx;height: 39rpx;margin-top: 17rpx;
		margin-left: 30rpx;
	}
	.iconSimg{
		width: 40rpx;height: 40rpx;margin-top: 16rpx;margin-left: 20rpx;
	}
	.searchBox{
		display: flex;background: #FFFFFF;padding: 24rpx;   
		left: 0;padding-bottom: 0rpx;
	}
	.typeLine{
		width: 178rpx;color: #3C3C3C;
		height: 64rpx;font-size: 24rpx;
		background: #F4F5F7;margin-top: 20rpx;
		border-radius: 36rpx;margin-right: 30rpx;
		text-align: center;
		line-height: 64rpx;
	}
	.typeactive{
		border: 2rpx solid #D53533;height: 60rpx;color: #D53533;background: #FFFFFF;width: 174rpx;
	}
	.typelineBox{
		display: flex;flex-wrap: wrap;padding-left: 20rpx;
	}
	.uniPicker{
		width: 606rpx;
		height: 64rpx;
		background: #F4F5F7;font-size: 24rpx;
		border-radius: 36rpx;color: #3C3C3C;
		display: flex;justify-content: space-between;
		margin-top: 20rpx;margin-left: 20rpx;
	}
	.jtShopImg{
		width: 24rpx;height: 24rpx;margin-top: 20rpx;margin-right: 26rpx;
		}
	.uniPickerName{
		padding-left: 20rpx;line-height: 64rpx;
		overflow:hidden;
		  white-space: nowrap;
		  text-overflow: ellipsis;
		  -o-text-overflow:ellipsis;
		  width: 500rpx;
	}
	.dateinput{
		width: 270rpx;color: #999999;
		height: 64rpx;font-size: 24rpx;line-height: 64rpx;
		background: #F4F5F7;padding-left: 20rpx;
		border-radius: 36rpx;
	}
	.sdTimeBox{
		display: flex;justify-content: center;
		padding-top: 20rpx;
	}
	.timeHx{
		font-weight: 400;line-height: 64rpx;padding: 0 4rpx;
		color: #DDDDDD;font-size: 24rpx;
	}
	.newtop{
		 position: fixed;z-index: 11;
	}
	.searchInputBox{
		width: 702rpx;
		height: 72rpx;
		background: #F4F5F7;
		border-radius: 36rpx;
		display: flex;
	}
	.searchInput{
		font-size: 28rpx;padding-left: 16rpx;height: 72rpx;line-height: 72rpx;
		width: 550rpx;
	}
	.box {
		min-height: 100vh;
		background: #F4F5F7;
	}
	
	.zdyNavBox {
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	
	
	}
	
	.zdyNav {
		height: 44px;
		display: flex;
		justify-content: space-between;
	
		align-items: center;
	
	}
	
	.backImg {
		width: 44rpx;
		height: 44rpx;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	
	.homeImg {
		width: 44rpx;
		height: 44rpx;
	
	}
	
	.zdyNavLeft {
		display: flex;
		align-items: center;
	}
	
	.zdyNavTitle {
	
		height: 44px;
		background: #FFFFFF;
		text-align: center;
		font-size: 34rpx;
		line-height: 44px;
	}
	
	

	.tab {
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		line-height: 92rpx;
		/* position: fixed; */
		width: calc(100vw - 100rpx);
		padding-left: 50rpx;
		padding-right: 50rpx;
		height: 92rpx;
		z-index: 11;
		border-top: 1px solid #EEEEEE;
	}

	.tabLine {

		font-size: 28rpx;
		color: #333333;
		text-align: center;
	}

	.tabActive {
		/* color: #FF0000; */
		color: #3F90F7;
		font-weight: bold;
		border-bottom: 4rpx solid #3F90F7;

	}

	.main {
		padding-top: 260rpx;
		padding-bottom: 20rpx;
		background-color: #F4F5F7;
	}

	.itemBg {
		margin: 20rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.itemTop {
		display: flex;
		justify-content: space-between;
	}

	.itemType {
		color: #999999;
		font-size: 24rpx;
	}

	.itemSheetState {
		font-size: 24rpx;
		color: #999999
	}
	.redColor {
		color: #FF0000;
	}
	.orangeColor {
		color: #F19D01;
	}
	.greenColor {
		color: #00A040;
	}
	

	.itemShopBg {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.shopName {
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.price {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.itemName {
		color: #666666;
		font-size: 24rpx;
		padding-top: 16rpx;
		height: 30rpx;
		/* overflow: hidden; */
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.plateBg {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.plateNumber {
		color: #666666;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		display: flex;

	}

	.itemLineBottom {
		display: flex;
		justify-content: flex-end;

	}

	.itemBtn1 {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #3C3C3C;
		margin-left: 40rpx;
	}

	.itemBtn2 {
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 2rpx solid #FF4F00;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		color: #FF4F00;
		margin-left: 40rpx;
	}

	.orderState {
		color: #F19D01;
		font-size: 24rpx;
		padding-left: 20rpx;
	}
	.renBox{
		   color: #1A1A1A;
		   background: #F7F7F7;
		   border-radius: 10rpx;
		   display: flex;
		   padding: 20rpx;font-size: 24rpx;
		   line-height: 30rpx;
		   margin-top: 16rpx;
	}
	.renimg{
		   width: 30rpx;height: 30rpx;
	}
	.renMobilePhone{
		   padding-left: 13rpx;
	}
	.itemaddress{
		font-size: 24rpx;display: flex;
		color: #3C3C3C;padding-top: 16rpx;
		line-height: 33rpx;
	}
	.addressDD{
		width: 10rpx;
		height: 10rpx;
		background: #FF0000;
		border-radius: 50%;
		margin-top: 10rpx;
		margin-right: 5rpx;
	}
	.sschahao{
		width: 40rpx;
		height: 40rpx;
		padding-top: 16rpx;
	}
</style>