CargoOwner_WxApp/miniprogram/pages/voyages/detail/detail.js

// pages/voyages/detail/detail.js
import { postApi } from "../../../apis/api";
Page({
  data: {
    id: "",
    tab: 1,
    shipDischargeCurrentPage: 1,
    truckLoadCurrentPage: 1,
    coordinates: [],
    medias: [],
    policys: [],
    voyage: [],
    waybills: [],
    infoType: "ship",
    shipDischargeList: [],
    truckLoadList: [],
    shipDischargeTotal: 0,
    truckLoadTotal: 0,
    polyline: [
      {
        points: [],
        width: 2,
        dottedLine: true,
        color: "#eb2f06",
      },
    ],
    markers: [],
    points: [],
    pageSize: 20,
    latitude: 31.891992,
    longitude: 120.551369,
    currentPortId: 0,
  },
  changeTab(e) {
    let { tab } = e.currentTarget.dataset;
    this.setData({
      tab,
    });
  },

  async getVoyageDetail() {
    let res = await postApi("/voyage/wx/detail", {
      voyageId: this.data.id,
      isClient: wx.getStorageSync("isClient"),
      loginAccountId: wx.getStorageSync("loginAccountId"),
    });

    let { coordinates, medias, policys, voyage, waybills } = res.data.result;
    if (coordinates.length) {
      let points = [];
      for (let i of coordinates) {
        points.push({
          latitude: i.latitude,
          longitude: i.longitude,
        });
      }
      let { latitude, longitude } = points[points.length - 1];
      this.data.latitude = latitude;
      this.data.longitude = longitude;
      this.data.polyline[0].points = points;
      let id = 1;
      for (let i of points) {
        this.data.markers.push({
          id: id + 1,
          latitude: i.latitude,
          longitude: i.longitude,
          iconPath:
            "https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/miniapp-static/red-circle.png?sign=6d208881376358fb4111aa6d7f1a7846&t=1647934972",
          height: 20,
          width: 20,
        });
      }

      this.setData({
        polyline: this.data.polyline,
        markers: this.data.markers,
        // latitude: this.data.latitude,
        // longitude: this.data.lo fngitude,
        points,
      });
    }
    voyage.arrivalLoadPortTime = this.subTimeStr(voyage.arrivalLoadPortTime);
    voyage.loadStartTime = this.subTimeStr(voyage.loadStartTime);
    voyage.loadEndTime = this.subTimeStr(voyage.loadEndTime);
    voyage.setSailTime = this.subTimeStr(voyage.setSailTime);
    voyage.expectedArrivalTime = this.subTimeStr(voyage.expectedArrivalTime);

    for (let item of voyage.voyageDetails) {
      item.setSailTime = this.subTimeStr(item.setSailTime);
      item.expectedArrivalTime = this.subTimeStr(item.expectedArrivalTime);
      item.actualArrivalTime = this.subTimeStr(item.actualArrivalTime);
      item.dischargeStartTime = this.subTimeStr(item.dischargeStartTime);
      item.dischargeEndTime = this.subTimeStr(item.dischargeEndTime);
    }
    this.setData({
      coordinates,
      medias,
      policys,
      voyage,
      waybills,
      currentPortId: voyage?.voyageDetails[0].portId,
    });
    this.getCarLoadRecordList();
    this.getDischargeList();
  },
  subTimeStr(str) {
    if (!str || typeof str != "string") return;
    let index = str.indexOf(" ");
    return str.substring(0, index);
  },

  async getCarLoadRecordList(isScroll) {
    if (
      this.data.truckLoadTotal != 0 &&
      this.data.truckLoadTotal <
        this.data.pageSize * this.data.truckLoadCurrentPage
    )
      return;
    if (isScroll) {
      this.data.truckLoadCurrentPage += 1;
    } else {
      this.data.truckLoadCurrentPage = 1;
    }
    let res = await postApi("/voyage/getCarLoadRecordList", {
      portId: this.data.currentPortId,
      voyageId: this.data.id,
      size: this.data.pageSize,
      currentPage: this.data.truckLoadCurrentPage,
      isClient: wx.getStorageSync("isClient"),
      loginAccountId: wx.getStorageSync("loginAccountId"),
    });
    this.setData({
      truckLoadCurrentPage: this.data.truckLoadCurrentPage,
    });

    if (0 == res.data.status) {
      if (isScroll) {
        let truckLoadList = [...this.data.truckLoadList, ...res.data.result];
        for (let i of truckLoadList) {
          i.weighTime = this.cutTimeString(i.weighTime);
        }
        this.setData({
          truckLoadList,
          truckLoadTotal: res.data.total,
        });
      } else {
        let truckLoadList = res.data.result;

        for (let i of truckLoadList) {
          i.weighTime = this.cutTimeString(i.weighTime);
        }
        this.setData({
          truckLoadList,
          truckLoadTotal: res.data.total,
        });
      }
    } else {
      // wx.showToast({
      //   icon: 'none',
      //   title: res.data.msg,
      // })
    }
  },

  async getDischargeList(isScroll) {
    if (isScroll) {
      this.data.shipDischargeCurrentPage += 1;
    } else {
      this.data.shipDischargeCurrentPage = 1;
    }
    let res = await postApi("/voyage/getDischargeList", {
      portId: this.data.currentPortId,
      voyageId: this.data.id,
      size: this.data.pageSize,
      currentPage: this.data.shipDischargeCurrentPage,
      isClient: wx.getStorageSync("isClient"),
      loginAccountId: wx.getStorageSync("loginAccountId"),
    });
    this.setData({
      shipDischargeCurrentPage: this.data.shipDischargeCurrentPage,
    });
    if (0 == res.data.status) {
      if (isScroll) {
        let shipDischargeList = [
          ...this.data.shipDischargeList,
          ...res.data.result,
        ];
        for (let i of shipDischargeList) {
          i.dischargeTime = this.cutTimeString(i.dischargeTime);
        }
        this.setData({
          shipDischargeList,
          shipDischargeTotal: res.data.total,
        });
      } else {
        let shipDischargeList = res.data.result;
        for (let i of shipDischargeList) {
          i.dischargeTime = this.cutTimeString(i.dischargeTime);
        }
        this.setData({
          shipDischargeList,
          shipDischargeTotal: res.data.total,
        });
      }
    } else {
      // wx.showToast({
      //   icon: "none",
      //   title: res.data.msg,
      // })
    }
  },

  previewImage(e) {
    let { src } = e.currentTarget.dataset;
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: [src], // 需要预览的图片http链接列表
    });
  },

  changeInfoType(e) {
    let { type } = e.currentTarget.dataset;
    this.setData({
      infoType: type,
      truckLoadCurrentPage: 1,
      shipDischargeCurrentPage: 1,
      shipDischargeList: [],
      truckLoadList: [],
      shipDischargeTotal: 0,
      truckLoadTotal: 0,
    });
    if (type == "ship") {
      this.getDischargeList();
    } else {
      this.getCarLoadRecordList();
    }
  },

  cutTimeString(str) {
    let index = str.indexOf(" ");
    return index == -1 ? str : str.substring(0, index);
  },

  changeBottomPage() {
    if (this.data.infoType == "ship") {
      this.getDischargeList(true);
    } else {
      this.getCarLoadRecordList(true);
    }
  },

  scrollShip() {
    if (
      this.data.shipDischargeTotal == 0 ||
      this.data.shipDischargeTotal <=
        this.data.pageSize * this.data.shipDischargeCurrentPage
    )
      return;
    this.getDischargeList(true);
  },
  scrollTruck() {
    if (
      this.data.truckLoadTotal == 0 ||
      this.data.truckLoadTotal <=
        this.data.pageSize * this.data.truckLoadCurrentPage
    )
      return;
    this.getCarLoadRecordList(true);
  },

  changePort(e) {
    let currentPortId = e.target.dataset.id;
    this.setData({
      currentPortId,
      shipDischargeList: [],
      truckLoadList: [],
    });
    if (this.data.infoType == "ship") {
      this.getDischargeList();
    } else {
      this.getCarLoadRecordList();
    }
  },

  onShareAppMessage() {
    let id = wx.getStorageSync("voyageDetailId");
    return {
      title: "真实 实时 精准",
      path: `/pages/sharePage/sharePage?id=${id}`,
    };
  },

  onLoad(options) {
    let { id } = options;
    wx.setStorageSync("voyageDetailId", id);
    this.setData({
      id,
    });
    this.getVoyageDetail();
  },
});