ShowEasyFrontEnd/FrontEnd/components/service/DoneTotalPrice.vue

<template>
  <div class="done-total-price tw-grid tw-grid-col-1 tw-gap-y-[30px] xl:tw-mt-[60px]">
    <div class="tw-p-5 tw-bg-neutrals-0 tw-rounded-xl xl:tw-p-[30px]">
      <div class="element tw-flex tw-justify-between tw-items-center tw-flex-nowrap tw-mb-[12px]">
        <div class="label tw-body-4 tw-text-black tw-font-bold">
          {{ $t("Subtotal") }}
        </div>
        <div class="content tw-body-4 tw-text-black tw-font-bold">
          ${{ subTotal.toLocaleString() }} {{ orderStatus.currency }}
        </div>
      </div>
      <div
        class="element total tw-flex tw-justify-between tw-items-center tw-flex-nowrap tw-pt-[12px] tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200">
        <div class="label tw-body-2 tw-text-black tw-font-bold">
          {{ $t("Total Amount") }}
        </div>
        <div class="content tw-body-2 tw-text-primary-1 tw-font-bold">
          ${{ total }} {{ orderStatus.currency }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TotalPrice",
  props: {
    subTotal: {
      type: Number,
    },
    orderStatus: {
      type: Object
    }
  },
  data() {
    return {};
  },
  computed: {
    total() {
      return (parseFloat(this.subTotal * 110 / 100)).toLocaleString();
    },
  },
};
</script>
<style lang="scss" scoped>

</style>