charge-front/src/pages-charge/order/order.vue

<template>
  <view class="body" v-if="list">
    <shadow-card :list="list"></shadow-card>
  </view>
</template>

<script setup lang="ts">
import { fetchOrder } from "../../api/user";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const list = ref<any[]>();
onLoad((options: any) => {
  fetchOrder(options.id)
    .then((res) => {
      const total_money = (res.totalMoney / 100).toFixed(2);
      const reg = new RegExp("\B(?=(\d{3})+(?!\d))", "g");
      const start = new Date(res.startTime.replace(/-/g, "/"));
      const end = new Date(res.endTime.replace(/-/g, "/"));
      const diff = parseInt(`${(end.getTime() - start.getTime()) / 1000}`);
      const min = parseInt(`${diff / 60}`);
      const time =
        min >= 60
          ? `${parseInt(`${min / 60}`)}小时${parseInt(
              `${min - parseInt(`${min / 60}`) * 60}`
            )}分钟`
          : `${parseInt(`${diff / 60}`)}分钟`;
      list.value = [
        {
          label: "累计充电量",
          value: `${res.totalPower}度`,
        },
        {
          label: "累计费用",
          value: `${total_money.replace(reg, ",")}元`,
        },
        {
          label: "开始时间",
          value: res.startTime,
        },
        {
          label: "结束时间",
          value: res.endTime,
        },
        {
          label: "累计用时",
          value: time,
        },
      ];
    })
    .catch(() => {
      uni.showModal({
        content: "出现错误，请退出重进",
        success() {
          uni.navigateBack();
        },
      });
    });
});
</script>

<style lang="scss">
.body {
  padding: 30rpx 60rpx;
}
</style>