jikeH5/pages/europeOrder/europeOrder.vue

<template>
	<view class="box">
		<view class="zdyNavBox">
			
			<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 style="height: 44px;"></view>
		<view class="tab">
			<view class="tabLine" :class="{tabActive:tabIndex==5}" @click="tabClick(5)">全部</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 class="topss">
			<view class="inputBox">
				<img src="../../static/img/icon_search.png" alt="" class="searchImg">
				<input v-model="code" type="text" placeholder="订单单号、联系人姓名、手机号、车牌号" class="topInput" @confirm="inputconfirm">
			
			</view>
		</view>
		<view class="main">
		  <view class="itemLine" v-for="(item,index) in items" @click="goDetail(item.ID)">
			  <view class="flex2 itemlineTOp">
				  <view class="itemCode">{{item.Code}}</view>
				  <view class="itemSheetState" v-if="item.SheetState==1">待付款</view>
				  <view class="itemSheetState" v-if="item.SheetState==2">待服务</view>
				  <view class="itemSheetState" v-if="item.SheetState==3||item.SheetState==5">已完成</view>
				  <view class="itemSheetState" v-if="item.SheetState==4">已完成</view>
				  <view class="itemSheetState" v-if="item.SheetState==0">已取消</view>
			  </view>
			  <view class="itemLineImgBox">
				  <view class="itemGoddsImgBox" v-if="item.goodsUrl">
					  <view v-for="(v,i) in item.goodsUrl.split(',')" v-if="i<4">
						<image  :src="v" mode="" class="goodsImg" v-if="i<4&&v"></image>
						<image src="../../static/img/noimg.png" mode="" class="goodsImg" v-else></image>
					  </view>
					 
				  </view>
				  <view class="itemGoddsImgBox" v-else> 
					  <view >
					  	  <image src="../../static/img/noimg.png" mode="" class="goodsImg" ></image>
					  </view>
				  </view>
				  
				 <view v-if="item.goodsUrl&&item.goodsUrl.split(',').length>3">
				  		 <image src="../../static/img/diandian.png" mode="widthFix" class="diandianImg"></image>
				  </view>
			  </view>
			  <view class="raleMoneyBox">
				  <span>实付款</span>  <span class="raleMoneySpan">￥{{item.PayMoney}}</span>
			  </view>
			  <!-- 待服务的-->
			  <view class="daifuwuBOxDiv" v-if="item.SheetState==2">
				  <view class="daifuwuBOx">
					  <view class="daifuwuBOxTop">
						  <image src="../../static/img/orderyytime.png" mode="" class="orderyytimeImg"></image>
						  <view class="daifuwuBOxTitle">预约信息</view>
					  </view>
					  <view class="daifuwuBOxLIne">门店名称:{{item.ShopName}}</view>
					  <view class="daifuwuBOxLIne">预约到店信息:{{item.OrderTime}}</view>
				  </view>
			  </view>
			  <!-- <view class="itemLineBottom" v-if="item.SheetState==1||item.SheetState==3||item.SheetState==4||item.SheetState==2">
				  <view class="itemBtn1" v-if="item.SheetState==1||item.SheetState==2" @click.stop="cancelOrder(item)">取消订单</view>
				  <view class="itemBtn2" v-if="item.SheetState==1" @click.stop="orderPay(item)">立即支付</view>
				  <view class="itemBtn2" v-if="item.EvaluateState==0&&item.EState==1" @click.stop="goEvaluate(item)">立即评价</view>
				  <view class="itemBtn1" v-if="item.EvaluateState==1" @click.stop="gopingjia(item)">查看评价</view>
			  </view> -->
		  </view>
		  
		  <nodata v-show="items==''&&isload"></nodata>
		</view>
	</view>
</template>

<script>
import nodata from '@/components/nodata/nodata.vue'	
export default {
	components: {
		   nodata
	},
	data() {
		return {
			page:1,
			state:'',
			num:'',
			tabIndex:5,
			items:[],
			isload:false,
			iOSInfo:'',
			code:'',
		}
	},
	onLoad(opt) {
  //       var num=opt.num;
		// this.tabIndex=num;
		// this.items=[]
  //      if(num==5){
		//    this.state=''
	 //   }else{
		//    this.state=num
	 //   }
		//this.getData()
		var qxnum = uni.getStorageSync("quanxian");
		if (qxnum == 1) {
			this.iOSInfo = JSON.parse(JSON.stringify(window.iOSInfo));
		}else if(qxnum==2){
			 window.getAndroid=this.getAndroid;
		 }
	},
	onShow() {
		console.log(this.tabIndex)
		// var evaluate = uni.getStorageSync("evaluate")
		//  if(evaluate){
		// 	 this.items=[]
		// 	 this.getData()
		// 	  uni.removeStorageSync('evaluate');
		// } 
		this.items=[]
	    this.getData()
	},
	methods: {
		inputconfirm(){
			this.items=[]
			this.getData()
		},
		getAndroid(e){
			this.iOSInfo=e		
		},
		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()
				}
			
		   
		},
		goEvaluate(item){
			uni.navigateTo({
				url:'evaluate?shopID=' + item.ShopID + '&sheetID=' + item.ID
			})
		},
		gopingjia(item){
			 uni.navigateTo({
				url:'../me/myAppraiseDetail?id='+item.ID
			}) 
		},
		cancelOrder(item){
			var that=this;
			uni.showModal({
			    title: '提示',
			    content: '确定要取消订单吗',
			    success: function (res) {
			        if (res.confirm) {
			          uni.showLoading({ title: '加载中'});
			          that.$http('miniAppMyBMemberCar/updateBMSheetState', {
			            id:item.ID
			           },'POST').then(res => {
			          	uni.hideLoading();
						that.page=1;
						
			            if(item.SheetState==1){
							uni.showModal({
							    title: '提示',
							    content: '订单取消成功',
								showCancel:false,
							    success: function (res) {
									that.items=[]
							       that.getData()
							    }
							});
						}else{
							that.items=[]
							 that.getData()
							uni.showModal({
							    title: '订单取消成功，请耐心等待银行处理',
							    content: '金额将原路退还至您的账户。若您使用了优惠券，将退至您的账户',
								showCancel:false,
							    success: function (res) {
							         
							    }
							});
						}
						
			          })
			        } else if (res.cancel) {
			           
			        }
			    }
			});
		},
	
		tabClick(num){
			this.tabIndex=num;
			if(num==5){
				 this.state=''
			}else{
				this.state=num
			}
			this.items=[];
			this.page=1;
			this.getData()
		},
		goDetail(id){
			uni.navigateTo({
				url:'eorderDetail?id='+id+'&type=2'
			})
		},
		getData(){
			uni.showLoading({ title: '加载中'});
			this.isload=false;
			if(this.state==4){
				var padata={
					page:this.page,
					limit:10,
					evaluateState:1,
					
				}
			}else{
				var padata={
					page:this.page,
					limit:10,
					sheetState:this.state,
					code:this.code,
				}
			}
		
			this.$http('h5BmSheet/listH5BMSheetPage', padata,'GET').then(res => {
				  uni.hideLoading();
				  this.isload=true;
				  //this.list=res.data;	
				  var a=res.data.Items;
				
				  this.items=this.items.concat(a)
				    console.log( this.items)
			})
		},
       orderPay(item){
       	uni.showLoading({ title: '加载中'});
       	this.$http('miniApp/maintainOrder/orderPay', {
       	  sheetID:item.ID
       	 },'POST').then(res => {
       		  uni.hideLoading();
       		  var payInfo=JSON.parse(res.data.payInfo)
       		uni.requestPayment({
       		    provider: 'wxpay',
       		   // timeStamp: String(Date.now()),
       			timeStamp:payInfo.timeStamp,
       		    nonceStr: payInfo.nonceStr,
       		    package: payInfo.package,
       		    signType: payInfo.signType,
       		    paySign: payInfo.paySign,
       		    success: function (res) {
       		        console.log('success:' + JSON.stringify(res));
       				 uni.showToast({
       					 title: '支付成功',
       					icon:'none',
       					 duration: 2000
       				 });
       				uni.switchTab({
       					url:'../index/index'
       				})			
       		    },
       		    fail: function (err) {
       		        console.log('fail:' + JSON.stringify(err));
       									 
       		    }
       		}); 
       	})
       },
	},
	onReachBottom(){
		this.page++;
		/* if(this.tabindex==2){
			this.getbMemberShopList()
		}else if(this.tabindex==3){
			this.getShopFootprint()
		} */
		this.getData()
	},
	onPullDownRefresh() {
	       this.page=1;
		  this.items=[];
	      this.getData() 
	       setTimeout(function () {
	           uni.stopPullDownRefresh();
	       }, 1000);
	  }
}
</script>

<style scoped>
	.topss{
		position: fixed;
		left: 0;
		top: calc(44px + 89rpx);
		width: 750rpx;
		z-index: 11;
		height: 90rpx;
		background-color: #FFFFFF;
		padding-top: 10rpx;
	}
	.searchImg{
		width: 40rpx;
		height: 40rpx;
		margin-top: 16rpx;
		margin-left: 20rpx;
	}
	.inputBox{
		width: 702rpx;
		height: 72rpx;
		background: #F4F5F7;
		border-radius: 36rpx;
		margin-left: 24rpx;
		display:flex;
		position: relative;
	}
	.topInput{
		font-size: 28rpx;
		height: 72rpx;
		line-height: 72rpx;
		padding-left: 16rpx;
		width: 500rpx;
	}
	.zdyNavBox {
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
	
	
	}
	
	.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;
	}
	.box{
		min-height: 100vh;
		background: #F4F5F7;
	}
	.tab{
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 0 15rpx;
		line-height: 84rpx;
		position: fixed;
		left: 0;
		top: 44px;
		width: 720rpx;
		z-index: 11;
	}
	.main{
		padding-top:188rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}
	/*  #ifdef MP-WEIXIN  */
	.tab{
		position: fixed;
		left: 0;
		top: 0;
	}
	.main{
		padding-top: 88rpx ;
	}
	/*  #endif  */
	.tabLine{
		width: 180rpx;
		text-align: center;
	}
	.tabActive{
		color: #3F90F7;
		border-bottom: 4rpx solid #3F90F7;
	}
	.flex2{
		display: flex;
		justify-content: space-between;
	}
	.itemLine{
		background: #FFFFFF;
		margin-top: 20rpx;
	}
	.itemCode{
		font-size: 28rpx;
		color: #999999;
	}
	.itemlineTOp{
		padding: 25rpx 20rpx;
	}
	.itemSheetState{
		font-size: 30rpx;
		color: #FF4F00
	}
	.goodsImg{
		width: 126rpx;
		height: 126rpx;
		margin-left: 18rpx;
		border-radius: 5rpx;
	}
	.itemLineImgBox{
		display: flex;
	}
	.itemGoddsImgBox{
		display: flex;
		width:558rpx;
	
	}
	.diandianImg{
		width: 50rpx;
		margin-left: 50rpx;
		margin-top: 50rpx;
	}
	.raleMoneyBox{
		text-align: right;
		color: #666666;
		font-size: 24rpx;
		line-height: 50rpx;
		padding-bottom: 20rpx;
		/* border-bottom:  1px solid #EEEEEE; */
	}
	.raleMoneySpan{
		color: #3C3C3C;
		font-size: 32rpx;
		padding-right: 24rpx;
		padding-left: 10rpx;
	}
	.itemLineBottom{
		display: flex;
		justify-content: flex-end;
		padding-top: 20rpx;padding-bottom: 20rpx;padding-right: 20rpx;
		border-top: 1px solid #EEEEEE; ;
	}
	.daifuwuBOxDiv{
		padding: 20rpx;
		padding-top: 0;
	}
	.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;
	}
	.daifuwuBOx{
		width: 662rpx;
		height: 175rpx;
		background: rgba(255, 79, 0, 0.04);
		border-radius: 6rpx;
	}
	.orderyytimeImg{
		width: 32rpx;
		height: 32rpx;
	}
	.daifuwuBOxTop{
		display: flex;
		padding: 20rpx 0 20rpx 20rpx;
		color: #FF4F00;
		font-size: 28rpx;
	}
	.daifuwuBOxTitle{
		line-height: 32rpx;padding-left: 10rpx;
	}
	.daifuwuBOxLIne{
		color: #666666;
		font-size: 26rpx;
		line-height: 40rpx;
		padding-left: 20rpx;
	}
</style>