wxThird/pages/index/confirmRescue.vue

<template>
<view class="box">
  <view class="top-box" :style="{background:'#'+themeColor}"> </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>
	  <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" >
	  			  <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="kklineRight">
				  <input type="text" placeholder="请输入">
			  </view>
	  </view>
	  <view class="kkline">
	  		  <view class="kklineLeft">
	  			<span class="stars">*</span><span>手机号</span>
	  		  </view>
	  		  <view class="kklineRight">15588753378</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="yuyue">提交订单</view>
	</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,
			}
		},
		onLoad(opt) {
			this.themeColor = uni.getStorageSync("themeColor");
			this.userInfo = uni.getStorageSync("userInfo");
			this.shopName=opt.shopName;
			this.opt=opt;
			if(this.opt.type==2){
				this.calculateDistance()
			}
			console.log(opt)
		},
		onShow() {
			this.carInfo=this.$store.state.carInfo;
		},
		methods: {
			jykk(num){
				this.jykkNum=num;
			},
			goCarlist(){
				uni.navigateTo({
					url:'../user/addCar/cailist'
				})
			},
			yuyue(){
				if(!this.billDate){
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				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 => {
					    var id=res.data
						if(res.code==0){
							uni.showModal({
							    title: '提示',
							    content: '预约成功',
								confirmText:'返回首页',
								cancelText:'查看订单',
							    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:'../user/bespeakDetail?id='+id
									   })
									   
							        }
							    }
							});

						}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">
.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: 13rpx;
}
.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: 82rpx;
	padding-left: 10rpx;
}
.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>