txCar/pages/module/confirmOrder.vue

<template>
	<view class="box">
		<view class="topBox">
			<view class="top">
				<view class="topLine borderB" v-if="iphoneData">
					<view class="toplineLeft">
						<view class="topTitle">联系人:</view>
						<view class="topTxt">{{iphoneData.name}}  {{iphoneData.phone}}</view>
					</view>
					<view class="topLineRight" @click="gophone">修改></view>
				</view>
				<view class="topLine borderB" v-if="!iphoneData">
					<view class="toplineLeft">
						<view class="topTitle">联系人:</view>
						<view class="topTxt"></view>
					</view>
					<view class="topLineRight" @click="gophone">添加></view>
				</view>
				<view class="topLine borderB" @click="timeCk">
					<view class="toplineLeft">
						<view class="topTitle">预约时间:</view>
						<view class="topTxt" v-show="orderTime==''">请选择</view>
						<view class="topTxt" v-show="orderTime!=''">{{orderTime}}</view>
					</view>
					<view class="topLineRight">修改></view>
				</view>
				<view class="topLine">
					<view class="toplineLeft">
						<view class="topTitle">预约门店:</view>
						<view class="topTxt">{{shopData.shopName}}</view>
					</view>
				</view>
			</view>
		</view>
	<!-- 保养信息 -->
	<view class="main">
		<view class="mainLine" v-for="(item,index) in orderData">
			<view class="mainTitle">{{item.name}}</view>
			<view class="goodsItem" v-for="(v,i) in item.listGoodsAll">
				<view>
					<image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
					<image src="../../static/img/noimg.png" mode="" class="goodsImg" v-else></image>
				</view>
				<view class="goodsItemRight" >
					<view class="goodsItemName">{{v.goodsName}}</view>
					<view class="goodsItemBottom">
						<view class="goodssalePrice">￥{{v.salePrice}}</view>
						<view class="goodsNum">x{{v.qty}}</view>
					</view>
				</view>
			</view>
			<view class="goodsItem" v-for="(v,i) in item.listItem">
				<view>
					<image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
					<image src="../../static/img/noimg.png" mode="" class="goodsImg" v-else></image>
				</view>
				<view class="goodsItemRight" >
					<view class="goodsItemName">{{v.itemName}}</view>
					<view class="goodsItemBottom">
						<view class="goodssalePrice">￥{{v.salePrice}}</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
	
	<!-- 订单备注-->
	<view class="remarksBox">
		 <view class="remarksLeft">订单备注</view>
		 <view>
			 <textarea value="" placeholder="点击添加备注信息" class="textarea" v-model="remark"/>
		 </view>
	</view>
	
	<!-- 支付方式 -->
	<view class="payBox">
		<view class="payLIne borderB">
			<view class="payTitle">支付方式</view>
			<view class="payTxt">在线支付</view>
		</view>
		<view class="payLIne borderB">
			<view class="payTitle">商品费</view>
			<view class="payTxt">￥{{goodsMoney.toFixed(2)}}</view>
		</view>
		<view class="payLIne borderB">
			<view class="payTitle">项目费</view>
			<view class="payTxt">￥{{itemMoney.toFixed(2)}}</view>
		</view>
		<view class="payLIne" @click="gocoupon">
			<view class="payTitle">优惠券</view>
			<view class="payTxt2" v-if="!couponMoney">{{yhTotalSize}}张可用></view>
			<view class="payTxt2" v-if="couponMoney">-￥{{couponMoney}}</view>
		</view>
	</view>
	<view style="height: 150rpx;"></view>
	<!-- 底部 -->
	<view class="bottom">
		<view class="bottomLeft">
			<view>
				<view class="heji"> <span class="heji1">合计</span> <span class="hejiNum">￥{{(goodsMoney+itemMoney-couponMoney).toFixed(2)}}</span> </view>
				<view class="hejiMs">共{{goodsCount}}件商品，{{itemCount}}项服务</view>
			</view>
		</view>
		<view class="settlement" @click="settlement">提交订单</view>
	</view>
	<!-- 预约时间 -->
	<view class="timeBox" v-show="timeShow&&OrderTimes" @click="timeShow=false">
		<view class="timeMain">
			<view class="timeTop">
				<view class="timeTopTitle">选择预约时间</view>
				<view class="close" @click="timeShow=false">X</view>
			</view>
			<view class="timeCont">
				<view class="timeLeft">
					<scroll-view scroll-y="true" class="timeSv">
						<view class="timeleftLine" v-for="(item,index) in OrderTimes" 
						:class="{timeLeftActive:index==orderTimeIndex1}"
						@click.stop="orderTimeIndex1=index,orderTimeIndex2=-1"
						>{{item.date.substring(5,10)}}</view>
					</scroll-view>
				</view>
				<view class="timeRight">
					<scroll-view scroll-y="true" class="timeSv">
						<view class="timerightBox">
							<view class="timesf" v-for="(item,index) in OrderTimes[orderTimeIndex1].timeList"
							:class="{timesfNo:item.type!=1,timesfActive:index==orderTimeIndex2}"
							@click.stop="timeSfCk(item,index)"
							>
								<view class="timeSfNum">{{item.time}}</view>
								<view class="timeyy" v-if="item.type==1">可预约</view>
								<view class="timeyy" v-if="item.type==2">已约满</view>
								<view class="timeyy" v-if="item.type==3">已过期</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="timeBottom">
				<view class="timecomplete" @click="timeShow=false">完成</view>
			</view>
		</view>
	</view> 
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			remark:'',
			iphoneData:'',
			orderTime:'',
			OrderTimes:'',
			orderTimeIndex1:0,
			orderTimeIndex2:-1,
			timeShow:false,
			orderData:'',
			itemMoney:0,//项目总价
			goodsMoney:0,//商品总价
			goodsCount:0,//商品数
			itemCount:0,//项目数
			packJsonArr:[],
			shopData:'',
			maintainCarData:'',
			currentMileage:'',
			payMoney:'',
			couponID:'',
			couponMoney:'',
			yhTotalSize:0,
			
		}
	},
	onLoad(opt) {
	   if(opt.type==2){
		    this.shopData=uni.getStorageSync("cfshopInfo");
	   }else{
		    this.shopData=uni.getStorageSync("shopData");
	   }
	  
	   this.maintainCarData=uni.getStorageSync("maintainCarData");
       this.getIphoneData();
	   this.getOrderTimes();
	   console.log(opt.orderData)
	   this.orderData=JSON.parse(opt.orderData);
	   this.currentMileage=opt.currentMileage;
	   console.log(this.orderData)
	   this.orderData.forEach(item=>{
		   var obj={
			   'packageID':item.id,
			   'itemJsonArr':[],
			   'goodsJsonArr':[],
		   }
		   if( item.listGoodsAll.length>0){
			   item.listGoodsAll.forEach(v=>{
				   this.goodsMoney+=v.salePrice*v.qty
				   this.goodsCount+=v.qty
				   var goodsObj={
					   'id':v.goodsID,
					   //'mItemID':v.mItemID,
					   'mGoodsID':v.mGoodsID,
					   'salePrice':v.salePrice,
					   'saleQty':v.qty,
					   'amountMoney':v.salePrice*v.qty,
				   }
				   if(v.mItemID){
					   goodsObj.mItemID=v.mItemID
				   }
				   obj.goodsJsonArr.push(goodsObj)
			   })
		   }
		  if(item.listItem.length>0){
			  item.listItem.forEach(v=>{
				   this.itemMoney+=v.salePrice
				   this.itemCount++;
				   var itemObj={
					   'id':v.itemID,
					   'mItemID':v.mItemID,
					   'salePrice':v.salePrice,
				   }
				   obj.itemJsonArr.push(itemObj)
			  })
		  }
		  
		   this.packJsonArr.push(obj)
	   })
	   this.myOrderCoupon()
	   console.log( this.packJsonArr)
	},
	onShow() {
		var iphoneData=uni.getStorageSync("phoneData");
		if(iphoneData){
			this.iphoneData=iphoneData
		}
		var couponData=uni.getStorageSync("couponData")
		if(couponData){
			this.couponID=couponData.ID;
			var ActMoney=couponData.ActMoney;
			var payMoney=this.goodsMoney+this.itemMoney;
			if(payMoney<ActMoney){
					this.couponMoney=payMoney
			}else{
				this.couponMoney=ActMoney
			}
		
		}
	},
	methods: {
		myOrderCoupon(){
			
			var payMoney=this.goodsMoney+this.itemMoney;
			this.$http('miniApp/maintainOrder/myOrderCoupon', {
			  money:payMoney,
			  page:1,
			  limit:2,
			 },'GET').then(res => {
				this.yhTotalSize=res.data.TotalSize
			})
		},
		gocoupon(){
			var payMoney=this.goodsMoney+this.itemMoney;
			uni.navigateTo({
				url:'../me/discountCard?payMoney='+payMoney
			})
		},
		settlement(){
			if(this.couponMoney){
				this.payMoney=this.goodsMoney+this.itemMoney-this.couponMoney;
			}else{
				this.payMoney=this.goodsMoney+this.itemMoney;
			}
			
			//this.payMoney=3;
			if(!this.maintainCarData.plateNumber){
				uni.showToast({
				     title: '您的车未填写车牌号不能下单',
				 	 icon:'none',
				     duration: 3000
				 });
				return false;
			}
			if(this.iphoneData){
				if(this.iphoneData.name==''){
					uni.showToast({
					     title: '请选择联系人',
					 	 icon:'none',
					     duration: 2000
					 });
					return false;
				}
			}else{
				uni.showToast({
				     title: '请选择联系人',
				 	 icon:'none',
				     duration: 2000
				 });
				return false;
			}
			if(this.orderTime==''){
				uni.showToast({
				     title: '请选择预约时间',
				 	 icon:'none',
				     duration: 2000
				 });
				return false;
			}
	
			
			uni.showLoading({ });
			this.$http('miniApp/maintainOrder/submitOrder', {
			  shopName:this.shopData.shopName,
			  contactName:this.iphoneData.name,
			  contactPhone:this.iphoneData.phone,
			  carID:this.maintainCarData.id,
			  plateNumber:this.maintainCarData.plateNumber,
			  carModel:this.maintainCarData.carModel,
			  orderTime:this.orderTime,
			  currentMileage:this.currentMileage,
			  comment:this.remark,
			  itemMoney:this.itemMoney,
			  goodsMoney:this.goodsMoney,
			  goodsCount:this.goodsCount,
			  itemCount:this.itemCount,
			  couponMoney:this.couponMoney,
			  couponID:this.couponID,
			  payMoney:this.payMoney,
			  //payMoney:0.01,
			  packJsonArr:JSON.stringify(this.packJsonArr) ,
			 },'POST').then(res => {
				 
				  if(res.code==0){
					   if(this.payMoney==0){
						    uni.hideLoading();
						   /* uni.navigateTo({
						   	url:'../order/orderDetail?id='+res.data.id+'&type=2'
							 
						   }) */
						   this.orderPayzero(res.data.id)
					   }else{
						   this.orderPay(res.data.id) 
					   }
					   
				  }else{
					   uni.hideLoading();
					 uni.showToast({
					      title: res.msg,
					  	 icon:'none',
					      duration: 4000
					  });
				  }
				 	
			})
		},
		orderPayzero(id){
			this.$http('miniApp/maintainOrder/orderPay', {
			  sheetID:id
			 },'POST').then(res => {
				  uni.hideLoading();
				  if(res.code==0){
				  			 
				  					   
				  }else{
				  	 uni.hideLoading();
				  	 uni.showToast({
				  		  title: res.msg,
				  		 icon:'none',
				  		  duration: 4000
				  	  });
				  }
				  if(res.isPay==0){
					  uni.navigateTo({
					  	url:'../order/orderDetail?id='+id+'&type=2'
					  })	
				  }
				 
				
			})
		},
		orderPay(id){
			//uni.showLoading({ });
			this.$http('miniApp/maintainOrder/orderPay', {
			  sheetID:id
			 },'POST').then(res => {
				  uni.hideLoading();
				  if(res.code==0){
				  			 
				  					   
				  }else{
				  	uni.hideLoading();
				  	 uni.showToast({
				  		  title: res.msg,
				  		 icon:'none',
				  		  duration: 4000
				  	  });
				  }
				  var payInfo=JSON.parse(res.data.payInfo)
				  if(res.isPay==0){
				  					  uni.navigateTo({
				  					  	url:'../order/orderDetail?id='+id+'&type=2'
				  					  })	
				  }else{
					  
				 
				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'
								}) */
											uni.navigateTo({
												url:'../order/orderDetail?id='+id+'&type=2'
											})			 
											   
						
						
				    },
				    fail: function (err) {
				        console.log('取消支付fail:' + JSON.stringify(err));
						uni.navigateTo({
							url:'../order/orderDetail?id='+id+'&type=2'
						})					 
				    }
				}); 
				 }
			})
		},
		timeSfCk(item,index){
			if(item.type==1){
				this.orderTimeIndex2=index;
				var orderTime=this.OrderTimes[this.orderTimeIndex1].date +' '+ item.time
				this.orderTime=orderTime
			}
			
		},
		timeCk(){
			 this.getOrderTimes();
			this.timeShow=true
		},
       getIphoneData(){
		   uni.showLoading({ });
		   this.$http('miniAppMyBMemberCar/queryBMemberContactIsDefault', {
		     
		    },'GET').then(res => {
		   	  uni.hideLoading();
		   	  this.iphoneData=res.data;	
		   })
	   },
	   gophone(){
		   uni.removeStorageSync('phoneData');
		   uni.navigateTo({
		   	url:'../iPhone/phoneList'
		   })
	   },
	   getOrderTimes(){
		   this.$http('miniApp/maintainOrder/getOrderTimes', {
		     
		    },'GET').then(res => {
		   	  if(res.code==0){
				 
				    this.OrderTimes=res.data;	
			  }else{
				uni.showToast({
					 title: res.msg,
					icon:'none',
					 duration: 2000
				 });  
			  }
		   	 
		   })
	   }
	}
}
</script>

<style scoped>
	.box{
		min-height: 100vh;
		background:#F4F5F7 ;
	}
	.timeBox{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 111;
	}
	.timeLeftActive{
		background: #FFFFFF;
	}
	.timeMain{
		width: 100vw;
		height: 70vh;
		margin-top: 30vh;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0px 0px;
	}
	.timesfNo{
		background: #F5F5F5;
	}
	.timesfActive{
		background: #FF4F00;
		
	}
	.timesfActive .timeSfNum{
		color: #FFFFFF;
	}
	.timesfActive .timeyy{
		color: #FFFFFF;
	}
	.topBox{
		padding: 20rpx 24rpx;
	}
	.timeTop{
		display: flex;
		line-height: 90rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		justify-content: space-between;
	}
	.timeTopTitle{
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #3C3C3C;
	}
	.close{
		color: #999999;font-size: 30rpx;
		padding-left: 30rpx;
	}
	.timeCont{
		height: calc(70vh - 210rpx);
	}
	.timeSv{
		height: calc(70vh - 210rpx);
	}
	.timeLeft{
		width: 162rpx;
		background: #F4F5F7;
		border-top: 1px soid #F4F5F7;
		border-right:1px soid #F4F5F7 ;
	}
	.timeRight{
		width: 588rpx;
	}
	.timesf{
		width: 165rpx;
		height: 98rpx;
		border-radius: 7rpx;
		border: 2rpx solid #EEEEEE;
		text-align: center;
		margin-left: 20rpx;
		margin-bottom: 24rpx;
	}
	.timeBottom{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
		display: flex;
		align-items: center;
		
	}
	.timerightBox{
		display: flex;
		flex-wrap: wrap;
	}
	.timeCont{
		display: flex;
	}
	.timeSfNum{
		color: #666666;
		font-size: 28rpx;
		padding-top: 15rpx;
	}
	.timeyy{
		font-size: 24rpx;
		color: #999999;
	}
	.timecomplete{
		width: 690rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		line-height: 74rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}
	.timeleftLine{
		font-size: 30rpx;
		color: #999999;
		text-align: center;
		padding: 28rpx 10rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.top{
		background: #FFFFFF;
		border-radius: 10px;
		padding: 0 20rpx;
	}
	.topLine{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
	}
	.toplineLeft{
		display: flex;font-size: 28rpx;
	}
	.topTitle{
		width: 150rpx;font-weight: 400;
        color: #3C3C3C;
	}
	.topLineRight{
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF4F00;
	}
	.topTxt{
		color: #3C3C3C;
	}
	.borderB{
		border-bottom: 1px solid #EEEEEE;
	}
	.goodsImg{
		width: 120rpx;height: 120rpx;
	}
	.main{
		padding: 0 24rpx;
		
	}
	.mainLine{
		background: #FFFFFF;
		padding: 24rpx 20rpx;
		border-radius: 10rpx;
	}
	.mainTitle{
		font-size: 28rpx;
		font-weight: 600;
		color: #3C3C3C;
	}
	.goodsItem{
		display: flex;
		padding: 15rpx 0;
	}
	.goodsItemRight{
		width: 520rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction:column;
		justify-content: space-between;
	}
	.goodsItemBottom{
		display: flex;
		justify-content: space-between;
	}
	.goodsItemName{
		font-size: 26rpx;
		color: #3C3C3C;
	}
	.goodssalePrice{
		font-size: 32rpx;font-weight: 500;color: #FF4F00;
	}
	.goodsNum{
		font-size: 24rpx;font-weight: 400;color: #999999;
	}
	.remarksBox{
		display: flex;
		padding: 24rpx;
		border-radius: 16rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		width: 654rpx;
		margin-left: 24rpx;
	}
	.remarksLeft{
		color: #333333;font-size: 28rpx;
		width: 160rpx;
	}
	.textarea{
		width: 500rpx;
		font-size: 26rpx;
		height: 100rpx;
		padding: 0;
		padding-left: 30rpx;
	}
	.payBox{
		background: #FFFFFF;
		margin-top: 20rpx;
		margin-left: 24rpx;
		width: 702rpx;
		border-radius: 16rpx;
	}
	.payLIne{
		display: flex;
		justify-content: space-between;
		color: #3C3C3C;
		font-size: 28rpx;
		padding: 29rpx 20rpx;
	}
	.payTxt2{
		color: #FF4F00;
	}
	.bottom{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
		display: flex;
		justify-content: space-between;
	}
	.bottomLeft{
		display: flex;
		padding-left: 20rpx;
	}
	.heji1{
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}
	.hejiNum{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF4F00;
	}
	.hejiMs{
		font-size: 24rpx;
	    padding-top: 5rpx;
		color: #999999;
	}
	.heji{
		padding-top: 23rpx;
	}
	.settlement{
		width: 203rpx;
		height: 74rpx;
		background: #FF4F00;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FEFFFE;
		margin-top: 23rpx;
		margin-right: 32rpx;
	}
</style>