159 lines
3.6 KiB
Vue
159 lines
3.6 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";
|
|
import AMapWX from "@/utils/amap-wx.130.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,
|
|
};
|
|
|
|
console.log(params, "params");
|
|
|
|
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>
|