168 lines
3.4 KiB
Vue
168 lines
3.4 KiB
Vue
<template>
|
|
|
|
<view >
|
|
<view style="height:60vh">
|
|
<map id="mapRef" ref="mapRef" style="width: 100%;height: 60vh;" show-location
|
|
:longitude="location.longitude" :latitude="location.latitude" :markers="markers" :scale="scale"
|
|
:polyline="polylines" />
|
|
|
|
</view>
|
|
<view v-if="showOrderPay" style="height:30vh">
|
|
<bike-pay :orderId="orderData.orderId" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
getCurrentInstance
|
|
} from 'vue';
|
|
import {
|
|
showModelMessage,
|
|
getUrlParams,
|
|
jkcBaseDecode
|
|
} from "@/utils/tools.js";
|
|
import {
|
|
callOrdereApi,
|
|
callOperateApi
|
|
} from "@/utils/api.js";
|
|
|
|
import {
|
|
findIndex
|
|
} from 'lodash';
|
|
import config from '@/utils/config';
|
|
import {
|
|
onShow,
|
|
onUnload,
|
|
onLoad
|
|
} from "@dcloudio/uni-app";
|
|
import * as map from "@/utils/usermap.js";
|
|
|
|
const location = ref({
|
|
longitude: "",
|
|
latitude: ""
|
|
});
|
|
const scale = ref(15);
|
|
const markers = ref([]);
|
|
const polylines = ref([]); //线
|
|
const pointStart = 100000000000;
|
|
const pointEnd = 100000000001;
|
|
|
|
let oMap = null;
|
|
let oUser = null;
|
|
const showOrder = ref(false);
|
|
const order = ref({});
|
|
onLoad((options) => {
|
|
if (options.orderId) {
|
|
orderData.orderId = options.orderId;
|
|
}
|
|
|
|
})
|
|
//订单信息
|
|
let orderData = {
|
|
bikeCode: null,
|
|
status: null,
|
|
createdAt: null,
|
|
orderId: null
|
|
};
|
|
const showOrderPay = ref(false);
|
|
//车辆
|
|
let arrBikeData = [];
|
|
const bikeData = ref({});
|
|
const getInfoOrderData = () => {
|
|
callOrdereApi("userOrders/orderDetailsInfo?orderId=" + orderData.orderId, {}, "get").then(res => {
|
|
if (res.code == 200) {
|
|
orderData = res.data;
|
|
getTracking();
|
|
}
|
|
})
|
|
}
|
|
|
|
//显示订单
|
|
function openOrderPay() {
|
|
showOrderPay.value = true;
|
|
}
|
|
|
|
//轨迹
|
|
function getTracking() {
|
|
const {
|
|
bikeCode,
|
|
createdAt,
|
|
ridePoint,
|
|
returnPoint,
|
|
endTime
|
|
} = orderData;
|
|
let params = {
|
|
ebikeCode: bikeCode,
|
|
startTime: createdAt
|
|
}
|
|
if (endTime) params = {
|
|
...params,
|
|
endTime
|
|
}
|
|
callOperateApi("ebikeTracking/query", params, "post").then(res => {
|
|
const {
|
|
code,
|
|
data,
|
|
message
|
|
} = res;
|
|
if (code != 200) {
|
|
return;
|
|
}
|
|
|
|
const arrPoints = (!data || data.length == 0) ? [] : data.map(item => {
|
|
const {
|
|
lngGCJ02,
|
|
latGCJ02
|
|
} = item;
|
|
return {
|
|
longitude: lngGCJ02,
|
|
latitude: latGCJ02
|
|
}
|
|
});
|
|
|
|
const startPoint = ridePoint.split(",");
|
|
const lng = startPoint[0];
|
|
const lat = startPoint[1];
|
|
const start = {
|
|
longitude: lng,
|
|
latitude: lat
|
|
}
|
|
location.value.latitude = lat;
|
|
location.value.longitude = lng;
|
|
const arrMakers = markers.value || [];
|
|
arrPoints.splice(0, 0, start);
|
|
let indexStart = findIndex(arrMakers, {
|
|
pointStart
|
|
});
|
|
indexStart = indexStart == -1 ? arrMakers.length : indexStart;
|
|
arrMakers[indexStart] = map.addMarker(pointStart, lng, lat, "start.png");
|
|
if (data && data.length > 0) {
|
|
let {
|
|
lngGCJ02: endlng,
|
|
latGCJ02: endlat
|
|
} = data[data.length - 1];
|
|
arrMakers[indexStart + 1] = map.addMarker(pointEnd, endlng, endlat, "end.png");
|
|
}
|
|
markers.value = arrMakers;
|
|
if (arrPoints.length > 1) {
|
|
polylines.value = [map.addLine("#168DED", arrPoints)];
|
|
}
|
|
})
|
|
}
|
|
onMounted(() => {
|
|
const instance = getCurrentInstance();
|
|
oMap = uni.createMapContext("mapRef", {
|
|
this: instance.proxy
|
|
});
|
|
getInfoOrderData();
|
|
openOrderPay();
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
|
|
</style> |