|
|
@@ -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;
|
