ShowEasyFrontEnd/FrontEnd/components/service/PcTotalPrice.vue

<template>
  <div
    class="total-info tw-hidden tw-justify-between tw-items-center tw-p-5 tw-mb-[20px] tw-bg-white tw-rounded-xl xl:tw-flex">
    <div class="element total tw-flex tw-felx-start tw-items-center tw-flex-nowrap">
      <div class="label tw-body-2 tw-text-black tw-mr-[20px]">
        {{ $t("Total:") }}
      </div>
      <div class="content tw-body-2 tw-text-primary-1 tw-font-bold">
        ${{ total.toLocaleString() + currency }}
      </div>
    </div>
    <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>
</template>
<script>
export default {
  name: "PcTotalInfo",
  props: {
    subTotal: {
      type: Number,
    },
    currency: {
      type: String,
    },
  },
  data() {
    return {};
  },
  computed: {
    total() {
      return this.subTotal.toLocaleString();
    },
  },
  methods: {
    payNow() {
      this.$emit('payNowClick');
    },
  },
};
</script>
<style lang="scss" scoped>

</style>