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

<template>
  <view class="body" v-if="list">
    <shadow-card :list="list">
      <view class="flex-column flex-center pb-48">
        <view class="fw-500 color-000">
          <text class="fs-40 mr-8">¥</text>
          <text class="fs-60 lh-60">{{ price }}</text>
        </view>
        <view class="fs-26 mt-8" style="color: rgba(0, 0, 0, 0.4)"
          >实付金额</view
        >
      </view>
    </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[]>();
const price = ref();
onLoad((options: any) => {
  fetchOrder(options.id)
    .then((res) => {
      const totalMoney = (res.totalMoney / 100).toFixed(2);
      const discountAmount = (res.discountAmount / 100).toFixed(2);
      const discountAmountText = "TODO";
      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: `${totalMoney.replace(reg, ",")}元`,
        },
        {
          label: "优惠金额",
          value: `${
            Number(discountAmount) <= 0 ? "" : "-"
          }${discountAmount}元${discountAmountText}`,
          color: "#F43636",
        },
        {
          label: "开始时间",
          value: res.startTime,
        },
        {
          label: "结束时间",
          value: res.endTime,
        },
        {
          label: "充电用时",
          value: time,
        },
      ];
      price.value = (res.payAmount / 100).toFixed(2);
    })
    .catch(() => {
      uni.showModal({
        content: "出现错误，请退出重进",
        success() {
          uni.navigateBack();
        },
      });
    });
});
</script>

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