wxThird/pages/index/confirmRescue.vue

<template>
<view class="box">
  <view class="top-box" :style="{background:'#'+themeColor}">
	  <view class="topTis"><!-- 需提前2小时取消订单，不足2小时需联系门 --></view>
  </view>
  <view class="topTime">
	  <img src="../../static/timg/icon_shijian.png" alt="" class="topTimeImg">
	  <view class="topTimeNum">{{opt.time}}</view>
  </view>
  <!-- 救援拖车框 -->
  <view class="tcBox" v-if="opt.type==2">
	  <view class="tcLeft">
		  <view class="tcStart"> 
		    <view class="tcStartYq"></view>	
			<view class="tcStartTitle">起点</view>
			<view class="tcStartTxt">{{opt.currentAddress}}</view>
		  </view>
		  <view class="tcEnd">
			  <view class="tcEndYq"></view>
			  <view class="tcStartTitle">终点</view>
			  <view class="tcStartTxt">{{opt.endAddress}}</view>
		  </view>
	  </view>
	  <view class="tcRight">约{{distance}}km</view>
  </view>
  <view class="tcBox" v-else>
  	  <view class="tcLeft2">
  		  <view class="tcStart"> 
  		    <view class="tcStartYq"></view>	
  			<view class="tcStartTitle">位置</view>
  			<view class="tcStartTxt2">{{opt.currentAddress}}</view>
  		  </view>
  	  </view>
  </view>
   <!-- 救援拖车框 -->
  <view class="contBox">
	  <view class="kkline">
		  <view class="kklineLeft">
			<span>服务门店</span>
		  </view>
		  <view class="kklineRight">{{shopName}}</view>
	  </view>
	  <view class="kkline">
		  <view class="kklineLeft">
			<span>救援项目</span>
		  </view>
		  <view class="kklineRight" v-if="opt.type==1">搭电</view>
		  <view class="kklineRight" v-if="opt.type==2">拖车</view>
		  <view class="kklineRight" v-if="opt.type==3">换胎</view>
		  <view class="kklineRight" v-if="opt.type==4">未知原因</view>
	  </view>
	  <view class="kkline">
		  <view class="kklineLeft2">
			<span class="stars">*</span> <span>救援场景</span>
		  </view>
		  <view class="kklineRight2">
			  <view class="jyKK " :class="{jyKKActive:jykkNum==1}" @click="jykk(1)">地面</view>
			  <view class="jyKK" :class="{jyKKActive:jykkNum==2}" @click="jykk(2)">车库</view>
			  <view class="jyKK" :class="{jyKKActive:jykkNum==3}" @click="jykk(3)">其他</view>
		  </view>
	  </view>
<!-- 	  <view class="kkline" >
		  <view class="kklineLeft">
			<span class="stars">*</span> <span>车牌号</span>
		  </view>
		  <view class="kklineRight3" @click="goCarlist">
			  <span>{{carInfo.plateNumber?carInfo.plateNumber:'请选择'}}</span>
			  <img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
		  </view>
	  </view>
	  <view class="kkline" >
	  		  <view class="kklineLeft">
	  			<span class="stars">*</span> <span>车型</span>
	  		  </view>
	  		  <view class="kklineRight3" @click="goCarlist">
	  			  <span>{{carInfo.carModel?carInfo.carModel:'请选择'}}</span>
	  			  <img src="../../static/img/big_rightArrow.png" alt="" class="rightJt">
	  		  </view>
	  </view>
	  <view class="kkline" >
	  		  <view class="kklineLeft">
	  			<span class="stars">*</span><span>救援联系人</span>
	  		  </view>
	  		  <view class="kklineRight">
				  <input type="text" placeholder="请输入" v-model="customerName">
			  </view>
	  </view> -->
	  <view class="kkline">
	  		  <view class="kklineLeft">
	  			<span class="stars">*</span><span>手机号</span>
	  		  </view>
	  		  <view class="kklineRight"><input type="text" placeholder="请输入" v-model="mobilePhone"></view>
	  </view>
  </view>
  
	<view style="height: 120rpx;"></view>
	<view class="bottom-container">
		<view class="heji">
		  <!-- <span>合计</span> <span  style="font-size: 22rpx;color: #FF0000;">￥</span> <span style="font-size: 32rpx;color: #FF0000;" >759</span> -->
		</view>
	  <view  class="newyyBotbutton" :style="{background:'#'+themeColor}" @click="submitOrder">提交订单</view>
	  <!-- yuyue 老预约-->
	</view>
	
</view>
</template>

<script>
	import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
	export default {
		components: {
			
		},
		
		data() {
			return {
				comment:'',
				totalPrice:99,
				userInfo:'',
				timedata:'',
				billDate:'',
				yuyueData:'',
				carInfo:'',
				yyshopInfo:'',
				themeColor:'',
				shopName:'',
				opt:'',
				distance:'',
				jykkNum:1,
				customerName:'',
				mobilePhone:'',
				isGoing:false,
				orderId:'',
				ext:'',
			}
		},
		onLoad(opt) {
			this.themeColor = uni.getStorageSync("themeColor");
			//this.userInfo = uni.getStorageSync("userInfo");
			
		
			this.ext=this.$common.getExtStoreId();
			this.shopName=opt.shopName;
			this.opt=opt;
			if(this.opt.type==2){
				this.calculateDistance()
			}
			
			this.userInfo = this.$store.state.userInfo;
			console.log("this.userInfo")
			console.log(this.userInfo)
			if(this.userInfo){
				var customerInfo=uni.getStorageSync("wxOpenData").loginInfo.customerInfo;
				this.customerName=customerInfo.customerName;
				this.mobilePhone=customerInfo.mobilePhone;
			}
			
		},
		onShow() {
			this.carInfo=this.$store.state.carInfo;
			console.log(this.carInfo)
		},
		methods: {
			jykk(num){
				this.jykkNum=num;
			},
			goCarlist(){
				uni.navigateTo({
					url:'../user/addCar/cailist'
				})
			},
			submitOrder(){
				if(this.isGoing){
					return false;
				}
				/* if(!this.carInfo.carModel){
					uni.showToast({
						title: '请输选择车型',
						icon: 'none',
						duration: 3000
					});
					return false;
				} */
				/* if(!this.customerName){
					uni.showToast({
						title: '请输入救援联系人',
						icon: 'none',
						duration: 3000
					});
					return false;
				} */
				var reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
				if(reg.test(this.mobilePhone) == false ){
				    console.log("手机号码格式不正确");
				     uni.showToast({
				     	title: '请输入正确的手机号',
				     	icon: 'none',
				     	duration: 3000
				     });
				     return false;   
				}
				if(!this.mobilePhone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				this.isGoing=true;
				this.$http('openShopHelpSheetOrder/submitOrder', {
				  helpType:this.opt.type,
				  customerName: this.customerName,
				  mobilePhone: this.mobilePhone,
				  //orderItem: this.yuyueData.map(item => item.ID).join(),
				  shopID: this.opt.shopId,
				  //plateNumber: this.carInfo ? this.carInfo.plateNumber :'',
				 // carModel:this.carInfo?.carModel||'',
				  hEndAddress:this.opt.endAddress,
				  hStartAddress:this.opt.currentAddress,
				  orderType:this.opt.orderType,
				  hTime:this.opt.time,
				  hscene:this.jykkNum,
				  startLng:this.opt.lng,
				  startLat:this.opt.lat,
				  endLng:this.opt.endLng,
				  endLat:this.opt.endLat,
				 },'POST').then(res => {
					console.log(res)
					var id=res.data
					console.log(id)
					 if(res.code==0){
						 if(this.userInfo){
							 uni.showModal({
							     title: '提示',
							     content: '救援信息提交成功',
							 	confirmText:'返回首页',
							 	cancelText:'查看订单',
							     success: function (res) {
							 								  this.isGoing=false;
							 								
							         if (res.confirm) {
							            // console.log('用户点击确定');
							 		   uni.switchTab({
							 		   	url:'index'
							 		   })
							         } else if (res.cancel) {
							 									// uni.hideLoading();
							           uni.redirectTo({
							           		url:'../subPack/rescueOrderOrderDetail?id='+id
							           }) 
							 		   
							         }
							     }
							 });
						 }else{
							 uni.showModal({
							     title: '提示',
							     content: '救援信息提交成功',
							 	confirmText:'返回首页',
							 	showCancel:false,
							     success: function (res) {
							 		 this.isGoing=false;
							 								
							         if (res.confirm) {
							            // console.log('用户点击确定');
							 		   uni.switchTab({
							 		   	url:'index'
							 		   })
							         } else if (res.cancel) {
							 									// uni.hideLoading();
							           uni.redirectTo({
							           		url:'../subPack/rescueOrderOrderDetail?id='+id
							           }) 
							 		   
							         }
							     }
							 });
						 }
						
					 }else{
						 this.isGoing=false;
					 }
				 })
			},
			yuyue(){
				var that=this;
				if(!this.billDate){
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				if(!this.isGoing){
					return false;
				}
				this.isGoing=true;
				this.$http('openreservation/saveOrderSheet', {
				  billDate: this.billDate,
				  comment: this.comment,
				  carID: this.carInfo.id,
				  orderItem: this.yuyueData.map(item => item.ID).join(),
				  shopId: this.yyshopInfo.id,
				  unionId: this.userInfo.unionId
				 },'POST').then(res => {
					    console.log(res)
						console.log(res.data)
					    that.orderId=res.data
						this.isGoing=false;
						if(res.code==0){
							if(this.userInfo){
								uni.showModal({
								    title: '提示',
								    content: '预约成功',
									confirmText:'返回首页',
									
								    success: function (res) {
								        if (res.confirm) {
								           // console.log('用户点击确定');
										   uni.switchTab({
										   	url:'index'
										   })
								        } else if (res.cancel) {
								           // console.log('用户点击取消');
										   // uni.reLaunch({
											  //  url:'../user/bespeakDetail?id='+id
										   // })
										   uni.redirectTo({
										   		url:'../subPack/rescueOrderOrderDetail?id='+that.orderId
										   })
										   
								        }
								    }
								});
							}else{
								uni.showModal({
								    title: '提示',
								    content: '预约成功',
									confirmText:'返回首页',
									showCancel:false,
								    success: function (res) {
								        if (res.confirm) {
								           // console.log('用户点击确定');
										   uni.switchTab({
										   	url:'index'
										   })
								        } else if (res.cancel) {
								           // console.log('用户点击取消');
										   // uni.reLaunch({
											  //  url:'../user/bespeakDetail?id='+id
										   // })
										   uni.redirectTo({
										   		url:'../subPack/rescueOrderOrderDetail?id='+that.orderId
										   })
										   
								        }
								    }
								});
							}
						

						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							});
						}		
				 })
			},
			changeTime(data){
				console.log(data)
				this.billDate=data
			},
			cktime(){
				 this.$refs.timeSelect.open();
			},
			//计算距离
			calculateDistance(){
			//调用距离计算接口
				var that=this;
				const tMap = new QQMapWX({
					key: 'L2GBZ-CIS6J-HRFFV-K5LO6-QROT7-BQFXZ' //开发者密钥 //这里要换成自己的key
				});
				
				tMap.calculateDistance({
					mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
					//from参数不填默认当前地址
					//获取表单提交的经纬度并设置from和to参数（示例为string格式）
					from: {
						latitude:  that.opt.lat,
						longitude: that.opt.lng,
					}, //若起点有数据则采用起点坐标，若为空默认当前地址
					to:[
					{
						latitude: that.opt.endLat,
						longitude: that.opt.endLng
					}	
					] , //终点坐标
					success: function(res) {//成功后的回调
					  console.log(res);
					  that.distance=res.result.elements[0].distance/1000;
                      //that.distance=that.distance.tofixed(2)
					},

				});

		},
			
		}
	}
</script>

<style scoped lang="less">
	.topTis{
		font-weight: 400;
		color: #FFFFFF;
		font-size: 26rpx;
		text-align: center;
		padding-top: 24rpx;
	}
.tcBox{
	width: 702rpx;
    margin-top: 20rpx;
	margin-left: 24rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	display: flex;
	
}
.heji{
	font-weight: 500;
	color: #666666;
	padding-left: 30rpx;
	line-height: 120rpx;
}
.rightJt{
	width: 30rpx;
	height: 30rpx;
	margin-top: 4rpx;
}
.kklineRight3{
  display: flex;
  color: #3c3c3c;
  font-size: 28rpx;
  
}
.kklineRight2{
	display: flex;
}
.jyKK{
	width: 108rpx;
	height: 56rpx;
	border-radius: 6rpx;
	border: 2rpx solid #CCCCCC;
	color: #666666;
	font-size: 24rpx;
	text-align: center;
	line-height: 56rpx;
	margin-left: 20rpx;
}
.jyKKActive{
	background: #FF0000;
	border: none;
	height: 60rpx;
	color: #FFFFFF;
}
.kklineLeft2{
	line-height: 60rpx;
}
.contBox{
	width: 662rpx;
	margin-top: 20rpx;
	margin-left: 24rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 0 20rpx;
}
.stars{
	color: #FF2400;
}
.tcLeft{
   width: 524rpx;padding-left: 20rpx;
}
.tcStartTxt2{
	width: 550rpx;
}
.tcLeft2{
	padding-left: 13rpx;
}
.tcStart{
	border-bottom: 1px solid #EEEEEE;
	display: flex;
	padding: 29rpx 0;
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
}
.tcEnd{
	display: flex;
	padding: 29rpx 0;
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
}
.tcStartYq{
	width: 14rpx;
	height: 14rpx;
	background: #3F90F7;
	margin-top: 13rpx;
	border-radius: 50%;
}
.tcStartTxt{
	width: 396rpx;
}
.tcEndYq{
	width: 14rpx;
	height: 14rpx;
	background: #FF0000;
	margin-top: 13rpx;
	border-radius: 50%;
}
.tcStartTitle{
	color: #666666;
	padding: 0 30rpx 0 20rpx;
}
.tcRight{
	color: #FF0000;
	line-height: 33rpx;
	font-size: 24rpx;
	padding-top: 30rpx;
	padding-left: 10rpx;
	display: flex;
	align-items: center;
}
.kkline{
	display: flex;
	padding: 30rpx 0;
	border-bottom: 1px solid #EEEEEE;
	color: #666666;
	font-size: 28rpx;
	justify-content: space-between;
}
.kkline2{
	display: flex;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1px solid #EEEEEE;
	color: #666666;
	font-size: 28rpx;
}
.kklineRight{
	color: #3c3c3c;
	font-size: 28rpx;
	
	width: 450rpx;
	text-align: right;
}
.kklineLeft {
	width: 200rpx;
}
.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.topTime{
	width: 702rpx;
    margin-left: 24rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	display: flex;
	justify-content: center;
	padding: 37rpx 0;
	margin-top: -70rpx;
	
}
.topTimeImg{
	width: 36rpx;
	height: 36rpx;
}
.topTimeNum{
	font-weight: 500;
	font-size: 32rpx;
	line-height: 36rpx;
	color: #333333;
	padding-left: 18rpx;
}
.top-box{
	width: 750rpx;
	height: 164rpx;
	background: #FF0000;
	border-radius: 0 0 10% 10%;
}
.bottom-container{
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.1000);
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
}
.newyyBotbutton{
	width: 204rpx;
	height: 74rpx;
	background: #D53533;
	border-radius: 37rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 74rpx;
	text-align: center;
	margin-right: 30rpx;
	margin-top: 23rpx;
}
.bottom-container-price{
	color: #FF0000;
	padding-top: 30rpx;
	padding-left: 30rpx;
	font-size: 32rpx;
}
.qianhaospan{
	font-size: 22rpx;
}
.ckj{
	color: #999999;font-size: 24rpx;
	padding-left: 30rpx;
}
</style>