txCar/pages/module/confirmOrder.vue

<template>
	<view class="box">
		<view class="topTIs">请支付后，请选择预约时间</view>
		<view class="topShop">
			<view class="topShopName">{{orderShop.shopName}}</view>
			<view class="topShopAdress">
				<image src="../../static/img/topshopicon.png" mode="" class="topShopAdressIcon"></image>
			    <view class="topShopjl" v-if="orderShop.distance">{{orderShop.distance}}km</view>
				<view class="topShopAdressTxt" v-if="orderShop.address">{{orderShop.address}}</view>
			</view>
		</view>
		
		<view class="topBox">
			<view class="top">
				<view class="topLine borderB" >
					<view class="toplineLeft">
						<view class="topTitle">车牌号:</view>
						<view class="topTxt">{{maintainCarData.plateNumber}}</view>
					</view>
					
				</view>
				<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" @click="gophone">
					<view class="toplineLeft">
						<view class="topTitle">联系人:</view>
						<view style="color: #999999; font-size: 28rpx;" >请选择</view>
					</view>
					<view style="width: 14rpx; height: 23rpx; color: #999999;">></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.showName}}</view>
					<view class="goodsItemBottom">
						<view class="goodssalePrice">￥{{v.salePrice?v.salePrice:'0.00'}}</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/icon_xiangmu.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?v.salePrice:'0.00'}}</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="$noMultipleClicks(settlement)">去支付</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,
			orderShop:'',
			brands:'',
			noClick:true,
			couponstate:'',
			 
		}
	},
	onLoad(opt) {
	  /* if(opt.type==2){
		    this.shopData=uni.getStorageSync("cfshopInfo");
	   }else{
		    this.shopData=uni.getStorageSync("shopData");
	   } */
	  this.orderShop=uni.getStorageSync("orderShop")
	   this.maintainCarData=uni.getStorageSync("maintainCarData");
       this.getIphoneData(); //获取默认手机号
	 
	   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;
			console.log('money',this.goodsMoney, this.itemMoney, payMoney);
			if(payMoney<ActMoney){
					this.couponMoney=payMoney.toFixed(2)

			}else{
				this.couponMoney=ActMoney.toFixed(2)

			}
		
		}
		var cardata = uni.getStorageSync("maintainCarData")
		this.maintainCarData=cardata
	},
	methods: {
		myOrderCoupon(){
			
			var payMoney=this.goodsMoney+this.itemMoney;
			//payMoney=40
			
			this.$http('worldKeepCar/maintainOrder/myOrderCoupon', {
			  money:payMoney,
			  shopId:this.orderShop.shopId,
			  /* page:1,
			  limit:2, */
			 },'GET').then(res => {
				this.yhTotalSize=res.data.length
				if(this.yhTotalSize>0){
					this.$store.commit('mutationscouponstate',false)
				}
				
			})
		},
		gocoupon(){
			var payMoney=this.goodsMoney+this.itemMoney;
			//payMoney=40
			uni.navigateTo({
				url:'usableDiscountCard?payMoney='+payMoney+'&shopId='+this.orderShop.shopId
			})
		},
		settlement(){
			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;
			}
			var that=this;
			this.couponstate=this.$store.state.couponstate;
			console.log(this.couponstate)
			if(this.yhTotalSize>0){
				if(this.couponID==''&&!this.couponstate){
					uni.showModal({
					    title: '提示',
					    content: '当前有可用优惠券未使用',
						cancelText:'放弃使用',
						confirmText:'去使用',
					    success: function (res) {
					        if (res.confirm) {
					            //console.log('用户点击确定');
								var payMoney=that.goodsMoney+that.itemMoney;
								uni.navigateTo({
									url:'usableDiscountCard?payMoney='+payMoney+'&shopId='+that.orderShop.shopId
								})
					        } else if (res.cancel) {
					           that.tosettlement()
					        }
					    }
					});
				}else{
					that.tosettlement()
				}
			}else {
				that.tosettlement()
			}
			
		},
		tosettlement(){
			if(this.couponMoney){
				this.payMoney=this.goodsMoney+this.itemMoney-this.couponMoney;
			}else{
				this.payMoney=this.goodsMoney+this.itemMoney;
			}	
			this.payMoney=this.payMoney.toFixed(2)
						//this.payMoney=3;	
							console.log(this.payMoney)
							//return false
			
						 
			   /* var cardata={
							 annualmoney: "2017",
							 brand: "大众",
							 brandLogo: "http://img.db.66km.cn/carbrandlogo/D - 大众.png",
							 buyDate: "",
							 carModel: "2018 双离合变速器(DSG) 7档 前置前驱 CC",
							 carName: "",
							 carNumber: "",
							 createTime: "2021-10-27 09:20:29",
							 dayMilage: 661,
							 displacement: "1.4T",
							 engineCode: "",
							 engineType: "1111",
							 id: "07EB4B07-5302-4574-9709-0EC0D1668155",
							 insuranceCompany: "",
							 insuranceExpireDate: "1900-01-01 00:00:00",
							 insuredCity: "",
							 isDefault: 0,
							 istransfer: "",
							 memberID: "E4416E30-C82A-4136-81B7-6B424DDE4847",
							 milage: 7788,
							 model: "C-TREK(蔚领)",
							 nLevelID: "CFV0718D0038",
							 plateNumber: "鲁A22333",
							 saleName: "",
							 series: "C-TREK(蔚领)",
							 transmissionType: "自动",
							 traveltime: "",
							 vIN: "",
							 currentMileage:'1111',
						 } */
						
						uni.showLoading({
							title: '保存中'
						})
						this.$http('worldKeepCar/maintainOrder/submitOrder', {
						  shopName:this.orderShop.shopName,
						  contactName:this.iphoneData.name,
						  contactPhone:this.iphoneData.phone,
						  carID:this.maintainCarData.id,
						  plateNumber:this.maintainCarData.plateNumber,
						  carModel:this.maintainCarData.carModel,
						  currentMileage:this.maintainCarData.milage,//this.currentMileage,
						  brand:this.maintainCarData.brand,
						  series:this.maintainCarData.series,
						  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) ,
						  shopID:this.orderShop.shopId,
						 // unionID:this.orderShop.unionId,
						 },'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('worldKeepCar/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('worldKeepCar/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'
						})					 
				    }
				}); 
				 }
			})
		},
		
       getIphoneData(){
		   uni.showLoading({
		   	title: '加载中'
		   })
		   this.$http('worldKeepCar/keepCarMy/queryTMemberContactIsDefault', {
		     
		    },'GET').then(res => {
		   	  uni.hideLoading();
		   	  this.iphoneData=res.data;	
		   })
	   },
	   gophone(){
		   uni.removeStorageSync('phoneData');
		   uni.navigateTo({
		   	url:'../iPhone/phoneList'
		   })
	   },
	
	}
}
</script>

<style scoped>
	.topTIs{
		font-size: 26rpx;
		padding-left: 24rpx;
		color: #C8841C;
		height: 72rpx;
		background: #FFF7EB;
		line-height: 72rpx;
		margin-bottom: 20rpx;
	}
	.topShopAdressIcon{
		width: 22rpx;
		height: 29rpx;
	}
	.topShop{
		width: 702rpx;
		min-height: 148rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
	}
	.topShopName{
		font-size: 28rpx;
		padding-top: 30rpx;
		padding-left: 20rpx;
		color: #3C3C3C;
	}
	.topShopAdress{
		display: flex;
		padding: 20rpx;
	}
	.topShopjl{
		font-size: 24rpx;
		line-height: 30rpx;
		color: #999999;
		padding-left: 16rpx;
	}
	.topShopAdressTxt{
		font-size: 24rpx;
		line-height: 30rpx;
		color: #999999;
		padding-left: 16rpx;
	}
	.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 0;
		
	}
	.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;
		margin-top: 20rpx;
	}
	.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>