ebike-ui/ebike-user/pages/user/views/OrderDetailsPage.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>