twt 2 年之前
父节点
当前提交
a33b466e75
共有 3 个文件被更改,包括 122 次插入33 次删除
  1. 1 1
      manifest.json
  2. 119 30
      pages/index/rescue.vue
  3. 2 2
      utils/request.js

+ 1 - 1
manifest.json

@@ -60,7 +60,7 @@
                 "desc" : "获取商家距离"
             }
         },
-        "requiredPrivateInfos" : [ "getLocation","chooseLocation" ]
+        "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
     },
     "mp-alipay" : {
         "usingComponents" : true

+ 119 - 30
pages/index/rescue.vue

@@ -11,22 +11,22 @@
 				<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">预约</view>
 			</view>
 
-			<view class="timeBox">
+			<view class="timeBox" v-if="tabIndex==1">
 				<view class="time">预约救援时间</view>
 				<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
 			</view>
 
 
 			<view class="typeBox">
-				<view class="box2">
+				<view class="box2" @click="typeClick(1)" :class="{typeActive:typeIndex==1}">
 					<image src="../../static/img/icon_dadian_N.png" mode="" class="typeImg"></image>
 					<view class="title">搭电</view>
 				</view>
-				<view class="box2">
+				<view class="box2" @click="typeClick(2)" :class="{typeActive:typeIndex==2}">
 					<image src="../../static/img/icon_tuoche_N.png" mode="" class="typeImg"></image>
 					<view class="title">拖车</view>
 				</view>
-				<view class="box2">
+				<view class="box2"  @click="typeClick(3)" :class="{typeActive:typeIndex==3}">
 					<image src="../../static/img/icon_luntai_N.png" mode="" class="typeImg"></image>
 					<view class="title">换胎</view>
 				</view>
@@ -44,7 +44,7 @@
 
 			</view>
 
-			<view class="shopBox">
+			<view class="shopBox" @click="startBtn">
 				<view class="left">
 					<view class="graypoint"></view>
 					<view class="leftTitle">位置</view>
@@ -54,7 +54,7 @@
 			
 			</view>
 			
-			<view class="shopBox" @click="endBtn">
+			<view class="shopBox" @click="endBtn" v-if="typeIndex==2">
 				<view class="left">
 					<view class="graypoint"></view>
 					<view class="leftTitle">终点</view>
@@ -96,11 +96,17 @@
 				mapHeight:200,
 				currentAddress:'',
 				endAddress:'',
-				points: [],  
+				points: [],
+				endLat:'',
+				endLng:'',
+				distance:'',
+				time:'',
+				typeIndex:1,
 			}
 		},
 		onLoad() {
-			var that = this
+			var that = this;
+			//return false;
 			const tMap = new QQMapWX({
 				key: 'L2GBZ-CIS6J-HRFFV-K5LO6-QROT7-BQFXZ' //开发者密钥 //这里要换成自己的key
 			});
@@ -109,8 +115,9 @@
 			// 	success: (res) => {
 			// 		this.mapHeight = res.windowHeight  *2 - 664 - 120
 			// 	}
-			// })
-			uni.getLocation({
+			// })
+			
+			 uni.getLocation({
 				type: 'gcj02',
 				success: function (res) {
 					console.log('当前位置的经度:' + res.longitude);
@@ -143,11 +150,44 @@
 						},
 					})
 				}
-			});
+			}); 
 			
 		},
 		
 		methods: {
+			startBtn(){
+				var that=this;
+				uni.chooseLocation({
+					success: function (res) {
+						console.log(res);
+						that.currentAddress=res.name
+						// console.log('位置名称:' + res.name);
+						// console.log('详细地址:' + res.address);
+						// console.log('纬度:' + res.latitude);
+						// console.log('经度:' + res.longitude);
+						that.longitude=res.longitude
+						that.latitude=res.latitude
+						var obj={
+							 latitude: that.latitude,
+							 longitude: that.longitude,
+							 iconPath: '../../static/img/icon_qidian.png',
+							 width:36,
+							 height:56
+						}
+						var obj2 = {
+							longitude: that.longitude,  
+							latitude:that.latitude 
+						}
+						that.covers[0]=obj;
+						that.points[0]=obj2;
+						that.calculateDistance()
+						console.log(that.covers)
+					},
+					fail(err){
+						console.log(err)
+					}
+				})
+			},
 			endBtn(){
 				
 				var that=this;
@@ -205,6 +245,8 @@
 							longitude: longitude,
 							latitude:latitude 
 						}
+						that.endLat=latitude;
+						that.endLng=longitude
 						if(that.covers.length>1){
 							that.covers[1]=obj;
 							that.points[1]=obj2;
@@ -212,13 +254,67 @@
 							that.covers.push(obj);
 							that.points.push(obj2)
 						}
-						console.log(that.covers)
+						//console.log(that.covers)
+						that.calculateDistance()
 					},
 					fail(err){
 						console.log(err)
 					}
 				})
 			},
+			//计算距离
+			calculateDistance(){
+				//调用距离计算接口
+				    var that=this;
+				    this.tMap.calculateDistance({
+				        mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填
+				        //from参数不填默认当前地址
+				        //获取表单提交的经纬度并设置from和to参数(示例为string格式)
+				        from: {
+							latitude: that.latitude,
+							longitude: that.longitude
+						}, //若起点有数据则采用起点坐标,若为空默认当前地址
+				        to:[
+						{
+							latitude: that.endLat,
+							longitude: that.endLng
+						}	
+						] , //终点坐标
+				        success: function(res) {//成功后的回调
+				          console.log(res);
+				          that.distance=res.result.elements[0].distance;
+						  that.time = res.result.elements[0].duration/60;
+						  that.time=Math.ceil(that.time)
+						  that.setTime()
+				        },
+				        fail: function(error) {
+				          console.error(error);
+				        },
+				        complete: function(res) {
+				          console.log(res);
+				        }
+				    });
+			},
+			setTime(){
+				var obj={
+					 latitude: this.latitude,
+					 longitude: this.longitude,
+					 iconPath: '../../static/img/icon_qidian.png',
+					 width:36,
+					 height:56,
+					 callout: { //自定义标记点上方的气泡窗口 点击有效
+					 	content: '约'+this.time+'分钟到达', //文本
+					 	color: '#ffffff', //文字颜色
+					 	fontSize: 15, //文本大小
+					 	borderRadius: 15, //边框圆角
+					 	padding: '10',
+					 	bgColor: '#3F90F7', //背景颜色
+					 	display: 'ALWAYS', //常显
+					 }
+				}
+				
+				this.covers[0]=obj;
+			},
 			regionchangefn(e){
 			 console.log(e)
 			 var that=this;
@@ -239,6 +335,7 @@
 			},
 			tapfn(e){
 				//点击获取位置
+				 return false;
 				 console.log(e);
 				 var that=this;
 				 var latitude=e.detail.latitude;
@@ -271,10 +368,10 @@
 			},
 			tabClick(num) {
 				this.tabIndex = num;
-				
-
-
 			},
+			typeClick(num){
+				this.typeIndex=num
+			}
 		}
 	}
 </script>
@@ -420,21 +517,13 @@
 		background: #FF0000;
 		border-radius: 7rpx;
 	}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+  .typeActive{
+	
+	  background: #FF0000;
+  }
+.typeActive .title{
+	    color: #FFFFFF !important;
+  }
 
 	.bottomView {
 		border-top: 1rpx solid #EEEEEE;

+ 2 - 2
utils/request.js

@@ -1,5 +1,5 @@
 //测试地址
-//const baseUrl = 'http://api.dms.66km.com.cn/'
+const baseUrl = 'http://api.dms.66km.com.cn/'
 //const baseUrl = 'http://192.168.0.121:20187/'
 //const baseUrl = 'http://192.168.0.183:20187/'
 //正式
@@ -8,7 +8,7 @@
 import $store from '../store'
 const extConfig = uni.getExtConfigSync();		
 console.log(extConfig)
-const baseUrl=extConfig.url+'/'
+//const baseUrl=extConfig.url+'/'
 //wx2c6f04c0dcd15984正式  wx33053a645546ec31
 const http = (url = '', date = {}, type = 'POST', header = {
 }) => {