You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.9 KiB
94 lines
2.9 KiB
<template>
|
|
<div class="total-info tw-p-5 tw-mb-[20px] tw-bg-white tw-rounded-xl">
|
|
<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() + currency }}
|
|
</div> -->
|
|
<div class="label tw-body-4 tw-text-black tw-font-bold">
|
|
{{ $t("Subtotal")}}
|
|
<!-- <span class="tw-text-neutrals-400 tw-font-medium tw-ml-[4px]">{{
|
|
$t("(Tax included)")
|
|
}}</span> -->
|
|
</div>
|
|
<div class="content tw-body-4 tw-font-bold">
|
|
${{ subTotal.toLocaleString() + currency}}
|
|
</div>
|
|
</div>
|
|
<!-- <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("Discount")}}
|
|
</div>
|
|
<div class="content tw-body-4 tw-font-bold">
|
|
${{ 0 + currency}}
|
|
</div>
|
|
</div> -->
|
|
<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() + currency }}
|
|
</div> -->
|
|
<div class="label tw-body-4 tw-text-black tw-font-bold">
|
|
{{ $t("Taxes")}}
|
|
<!-- <span class="tw-text-neutrals-400 tw-font-medium tw-ml-[4px]">{{
|
|
$t("(Tax included)")
|
|
}}</span> -->
|
|
</div>
|
|
<div class="content tw-body-4 tw-font-bold">
|
|
${{ taxes + 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.toLocaleString() + currency }}
|
|
</div>
|
|
</div>
|
|
<div class="element tw-flex tw-justify-center tw-items-center tw-mt-[30px] xl:tw-hidden xl:tw-mt-0">
|
|
<button
|
|
class="btnPay tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[9.5px] tw-rounded-2xl hover:tw-bg-primary-2"
|
|
@click="payNow">
|
|
{{ $t("Pay now") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "TotalPrice",
|
|
props: {
|
|
subTotal: {
|
|
type: Number,
|
|
},
|
|
total:{
|
|
type: Number,
|
|
},
|
|
currency: {
|
|
type: String,
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
taxes() {
|
|
return (Math.ceil(this.subTotal*0.05)).toLocaleString();
|
|
},
|
|
},
|
|
methods: {
|
|
payNow() {
|
|
this.$emit('payNowClick');
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
|
|
</style>
|