<template>
<view class="box">
<map :latitude="latitude"
:longitude="longitude" :markers="covers"
@poitap="tapfn" class="mapbox"
:include-points="points" ></map><!-- @regionchange="regionchangefn" :style="{height:mapHeight + 'px'}" -->
<view class="contBox" >
<view class="tab">
<view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">现在</view>
<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">预约</view>
</view>
<view class="timeBox" v-if="tabIndex==1" @click="openDatetimePicker">
<view class="time">{{yytime?yytime:'预约救援时间'}}</view>
<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
</view>
<view class="typeBox">
<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" @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" @click="typeClick(3)" :class="{typeActive:typeIndex==3}">
<image src="../../static/img/icon_luntai_N.png" mode="" class="typeImg"></image>
<view class="title">换胎</view>
</view>
</view>
<view class="price">服务费用 199元/次</view>
<view class="shopBox">
<view class="left">
<view class="graypoint"></view>
<view class="leftTitle">门店</view>
<view class="content">{{shopInfo.shopName}}</view>
</view>
<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
</view>
<view class="shopBox" @click="startBtn">
<view class="left">
<view class="graypoint"></view>
<view class="leftTitle">位置</view>
<view class="content">{{currentAddress}}</view>
</view>
<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
</view>
<view class="shopBox" @click="endBtn" v-if="typeIndex==2">
<view class="left">
<view class="graypoint"></view>
<view class="leftTitle">终点</view>
<view class="content" v-if="endAddress">{{endAddress}}</view>
<view class="Nocontent" v-else>请选择</view>
</view>
<image src="../../static/img/little_rightArrow.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
</view>
</view>
<view class="bottomView">
<view class="sure" @click="sure">确定</view>
</view>
<w-picker
:visible.sync="visible"
mode="date"
startYear="2022"
endYear="2029"
value="2020-04-08 13:18"
:current="true"
fields="minute"
@confirm="onConfirm($event,'date')"
@cancel="onCancel"
:disabled-after="false"
ref="picker"
></w-picker>
</view>
</template>
<script>
import wPicker from "@/components/w-picker/w-picker.vue";
import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
export default {
components: {
wPicker
},
data() {
return {
latitude: '',
longitude: '',
covers: [
// {
// latitude: 39.909,
// longitude: 116.39742,
// iconPath: '../../static/img/icon_qidian.png'
// }, {
// latitude: 39.90,
// longitude: 116.39,
// iconPath: '../../static/img/icon_zhongdian.png'
// },
],
tabIndex: 0,
tMap:'',
mapHeight:200,
currentAddress:'',
endAddress:'',
points: [],
endLat:'',
endLng:'',
distance:'',
time:'',
typeIndex:1,
shopInfo:{
lat: "36.671541",
lng: "117.138777",
shopName: "连锁一号测试店铺",
id: "1B43BADD-B670-4B27-B6C1-604523287EAF"
},
shopList:'',
visible:false,
yytime:'',
}
},
onLoad() {
var that = this;
//this.queryRescue()
//return false;
const tMap = new QQMapWX({
key: 'L2GBZ-CIS6J-HRFFV-K5LO6-QROT7-BQFXZ' //开发者密钥 //这里要换成自己的key
});
this.tMap=tMap
// uni.getSystemInfo({
// success: (res) => {
// this.mapHeight = res.windowHeight *2 - 664 - 120
// }
// })
uni.getLocation({
type: 'gcj02',
success: function (res) {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
that.latitude=res.latitude;
that.longitude=res.longitude;
var obj={
latitude: that.latitude,
longitude: that.longitude,
iconPath: '../../static/img/icon_qidian.png',
width:25,
height:39
}
that.covers.push(obj);
that.points.push({
longitude: that.longitude,
latitude:that.latitude
})
that.calculateDistance()
//that.queryhelpshopList()
that.tMap.reverseGeocoder({
location: {
latitude: that.latitude,
longitude: that.longitude
},
success: function(res) {
console.log(res)
that.currentAddress=res.result.formatted_addresses.recommend
},
fail: function(res) {
console.log(res);
},
})
}
});
},
methods: {
onConfirm(e){
console.log(e)
this.yytime=e.result
},
openDatetimePicker() {
this.$refs.picker.show()
},
// 关闭picker
onCancel() {
this.$refs.picker.hide()
},
queryRescue(){
uni.showLoading({
title: '加载中'
})
this.$http('openEmergencyRescue/queryRescue', {}, 'GET').then(res => {
uni.hideLoading();
//this.shopList = res.data
})
},
queryhelpshopList(){
uni.showLoading({
title: '加载中'
})
this.$http('openEmergencyRescue/queryhelpshopList', {}, 'GET').then(res => {
uni.hideLoading();
this.shopList = res.data
})
},
sure(){
if(this.tabIndex==0){
const yy = new Date().getFullYear()
const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
//const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
var time= yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm //+ ':' + ss
console.log(time)
//return false;
}else{
if(this.yytime==''){
uni.showToast({
title: '请选择预约时间',
icon:'none',
duration: 3000
});
return false;
}
var time=this.yytime
}
if(this.typeIndex==2){
if(this.endAddress==''){
uni.showToast({
title: '请选择终点',
icon:'none',
duration: 3000
});
return false;
}
}
uni.navigateTo({
url:'confirmRescue?lat='+this.latitude+"&lng="+this.longitude+"&shopId="+this.shopInfo.id+'&shopName='+this.shopInfo.shopName+'&type='+this.typeIndex+'&time='+time+'¤tAddress='+this.currentAddress+'&endAddress='+this.endAddress+'&endLat='+this.endLat+'&endLng='+this.endLng
})
},
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:25,
height:39
}
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;
uni.getSetting({
success(res) {
if (!res.authSetting['scope.userLocation']) {
uni.authorize({
scope: 'scope.userLocation',
success() {
that.chooseLocation()
return;
}
})
}else{
that.chooseLocation()
return;
}
}
})
},
chooseLocation(){
var that=this;
uni.chooseLocation({
success: function (res) {
console.log(res);
that.endAddress=res.name
// console.log('位置名称：' + res.name);
// console.log('详细地址：' + res.address);
// console.log('纬度：' + res.latitude);
// console.log('经度：' + res.longitude);
var longitude=res.longitude
var latitude=res.latitude
var obj={
latitude: latitude,
longitude: longitude,
iconPath: '../../static/img/icon_zhongdian.png',
width:25,
height:39,
// label:{
// content:'文本'
// },
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '拖到这里', //文本
color: '#ffffff', //文字颜色
fontSize: 15, //文本大小
borderRadius: 15, //边框圆角
padding: '10',
bgColor: '#FF0000', //背景颜色
display: 'ALWAYS', //常显
}
}
var obj2={
longitude: longitude,
latitude:latitude
}
that.endLat=latitude;
that.endLng=longitude
if(that.covers.length>1){
that.covers[1]=obj;
that.points[1]=obj2;
}else{
that.covers.push(obj);
that.points.push(obj2)
}
//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.shopInfo.lat,
longitude: that.shopInfo.lng,
}, //若起点有数据则采用起点坐标，若为空默认当前地址
to:[
{
latitude: that.latitude,
longitude: that.longitude
}
] , //终点坐标
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:25,
height:39,
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;
if(e.detail.centerLocation){
var latitude=e.detail.centerLocation.latitude;
var longitude=e.detail.centerLocation.longitude;
var obj={
latitude: latitude,
longitude: longitude,
iconPath: '../../static/img/icon_qidian.png',
width:25,
height:39
}
this.covers=[];
this.covers.push(obj)
}
},
tapfn(e){
//点击获取位置
return false;
console.log(e);
var that=this;
var latitude=e.detail.latitude;
var longitude=e.detail.longitude;
var obj={
latitude: latitude,
longitude: longitude,
iconPath: '../../static/img/icon_qidian.png',
width:25,
height:39
}
this.covers=[];
this.covers.push(obj)
this.tMap.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function(res) {
//console.log(res)
that.currentAddress=res.result.formatted_addresses.recommend;
//console.log(this.currentAddress)
//this.$set(this, 'currentAddress', this.currentAddress)
},
fail: function(res) {
console.log(res);
},
})
},
tabClick(num) {
this.tabIndex = num;
},
typeClick(num){
this.typeIndex=num;
if(num!=2){
this.endLat='';
this.endLng='';
this.endAddress='';
this.covers.splice(1,1);
}
}
}
}
</script>
<style>
.box {
width: 100vw;
min-height: 100vh;
background-color: #FFFFFF;
}
map {
width: 750rpx;
height: calc(100vh - 664rpx - 120rpx);
}
.contBox {
width: 100%;
height: 664rpx;
}
.tab {
background: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 230rpx;
padding-right: 230rpx;
height: 92rpx;
line-height: 60rpx;
}
.tabLine {
font-size: 30rpx;
color: #333333;
text-align: center;
padding: 0 10rpx;
}
.tabActive {
color: #FF0000;
font-weight: bold;
border-bottom: 4rpx solid #FF0000;
}
.timeBox {
padding-top: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.time {
color: #959595;
font-size: 24rpx;
}
.typeBox {
padding: 30rpx 115rpx;
display: flex;
justify-content: space-between;
}
.box2 {
display: flex;
align-items: center;
padding: 20rpx;
background: #FFFFFF;
height: 32rpx;
border-radius: 10rpx;
border: 2rpx solid #CCCCCC;
}
.typeImg {
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
}
.title {
height: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: #666666;
line-height: 40rpx;
}
.price {
padding-bottom: 30rpx;
font-size: 24rpx;
font-weight: 400;
color: #D53533;
text-align: center;
}
.shopBox {
padding: 30rpx 24rpx;
border-top: 1rpx solid #EEEEEE;
display: flex;
justify-content: space-between;
align-items: center;
}
.left {
display: flex;
align-items: center;
}
.leftTitle{
width: 56rpx;
font-size: 28rpx;
font-weight: 400;
color: #666666;
line-height: 40rpx;
margin-left: 16rpx;
margin-right: 30rpx;
}
.graypoint {
width: 14rpx;
height: 14rpx;
background: #DDDDDD;
border-radius: 7rpx;
}
.bluepoint {
width: 14rpx;
height: 14rpx;
background: #3F90F7;
border-radius: 7rpx;
}
.redpoint {
width: 14rpx;
height: 14rpx;
background: #FF0000;
border-radius: 7rpx;
}
.typeActive{
background: #FF0000;
}
.typeActive .title{
color: #FFFFFF !important;
}
.bottomView {
border-top: 1rpx solid #EEEEEE;
background-color: #FFFFFF;
width: 100%;
height: 120rpx;
position: fixed;
bottom: 0rpx;
/* padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); */
}
.content{
width: 540rpx;
font-size: 30rpx;
word-wrap: break-word; /*强制换行*/
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis;/*隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
}
.Nocontent{
font-size: 30rpx;
color: #999999;
}
.sure {
background-color: #D53533;
margin: 23rpx 30rpx;
height: 74rpx;
border-radius: 37rpx;
color: #FFFFFF;
font-size: 30rpx;
font-weight: bold;
text-align: center;
line-height: 74rpx;
}
</style>