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 screenLine1" @click="ckShopAppFn">
				  <!-- <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> -->
				 
				 	 <span class="screenLineSpan">{{shopName?shopName:'救援门店'}}</span>
				<!-- 	<span class="screenLineSpan">连锁一号测试门店测试</span> -->
				 	<img src="../../static/img/arrow_down.png" alt="" class="screenLineImg">
				
			  </view>
			  <view class="screenLine screenLine2" @click="cktimeFn">
				 <!-- <span class="screenLineSpan">下单时间</span> -->
				 <span class="screenLineSpan">{{date1}}-{{date2}}</span>
				  <img src="../../static/img/arrow_down.png" alt="" class="screenLineImg">
			  </view>
			  <view class="screenLine screenLine3" @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="orderTimesxBoxTitle">下单时间</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="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>{{androidE}}</view> -->
			<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 {
				ms:'',
				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:'',
				olddate1:'',
				olddate2:'',
				androidE:'',
				iosE:'',
			}
		},
		onLoad(opt) {
			this.date1=this.time(new Date())
			this.date2=this.time(new Date())
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			//this.getData();
			this.getShopinfo();
			//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) {
				  window.shopAppCallbackios=this.shopAppCallbackios;
			} else if (android) {
				 window.shopAppCallback=this.shopAppCallback;
			}
			
			
		},
		 onShow() {
			const onshow = uni.getStorageSync('onshow');
			if(onshow==1){
				  uni.removeStorageSync('onshow');
				 // this.getShopinfo();
				 this.getData()
			}else{
				
			}
          
			//this.getData();
			

		}, 
		
		methods: {
			cktimeFn(){
				this.orderTimesxSHow=true
				this.olddate1=this.date1
				this.olddate2=this.date2
			},
			
			ckShopAppFn(){
				//this.shopAppCallback()
				var obj={
					value:this.mrshopId,
					key:this.mrshopName
				}
				console.log(obj)
				//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
					 if(this.iosE){
						   window.webkit.messageHandlers.shopApp.postMessage(this.iosE)
					 }else{
						   window.webkit.messageHandlers.shopApp.postMessage(JSON.stringify(obj))
					 }
					 
					 }
				} else if (android) {
					if(this.androidE){
						window.android.shopApp(JSON.stringify(this.androidE))
					}else{
						var arr =[]
						arr.push(obj)
						window.android.shopApp(JSON.stringify(arr))
					}
					
					
				}
			},
			shopAppCallback(e){
				//e=[{"isDefault":false,"isLogin":false,"isSelected":false,"isShow":false,"key":"连锁一号测试店铺","value":"1B43BADD-B670-4B27-B6C1-604523287EAF"},{"isDefault":false,"isLogin":false,"isSelected":true,"isShow":false,"key":"JM-乌海市昱盛汽贸有限公司Q","suggest":"JM-乌海市昱盛汽贸有限公司Q|JM-wuhaishizuoshengqimaoyouxiangongsiQ|jm-whs昱sqmyxgsq|JM-WHS昱SQMYXGSQ","value":"95FC6989-644F-491F-B5B3-F9F0995C1694"}]
				//this.ms=e.key
				//this.ms=JSON.parse(e).key
				this.androidE=e
				var obj=e;
			 //	var obj=JSON.parse(e);
			    var length= obj.length
				console.log(obj)
				if(length==1){
					this.shopName=obj[0].key
					this.shopId=obj[0].value
				}else{
					var idarr=[]
					obj.forEach(item=>{
						idarr.push(item.value)
					})
					//var num = length -1
				//	this.shopName=obj[0].key+"+"+ num
				    this.shopName='已选（'+length+'）个门店'
					this.shopId=idarr.join(',')
				}
				
			
				this.page=1
				this.getData();
			},
			shopAppCallbackios(e){
				this.iosE=e
				var obj=JSON.parse(e);
				var names=obj.key.split(',')
				var length= names.length
				if(length==1){
					this.shopName=obj.key
				}else{
					 this.shopName='已选（'+length+'）个门店'
				}
				//this.shopName=obj.key
				this.shopId=obj.value
				this.page=1
				this.getData();
			},
			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.date1=this.olddate1
			    this.date2 =this.olddate2
				/* 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.time(new Date())
				this.date2=this.time(new Date())
				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.setStorageSync('onshow', '1');
				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,
					shopIds: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)
					}

				})
			},
           time(time) {
				 let month = time.getMonth() + 1;  // 月
				 let date = time.getDate();  // 日
				 let hh = time.getHours();  // 时
				 let mm = time.getMinutes();  // 分
				 let ss = time.getSeconds();  // 秒
				 if (hh >=0 && hh<10){hh= '0' + hh;}
				 if (mm >=0 && mm<10){mm= '0' + mm;}
				 if (ss >=0 && ss<10){ss= '0' + ss;}
				 if (month < 10){month= '0' + month;}
				 if (date < 10){date= '0' + date;}
				 return time.getFullYear().toString()+'-' + month.toString()+'-' + date.toString()// + hh.toString() + mm.toString() + ss.toString();
           },
		},
		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: 305rpx;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;
	}
	.screenLine3{
		width: 100rpx;
	}
	.screenLine1{
		max-width: 260rpx;
	}
	.orderTimesxBoxTitle{
		padding-left: 24rpx;
		color: #666;
		font-size: 24rpx;
		padding-top: 16rpx;
	}
</style>