ShowEasyFrontEnd/FrontEnd/pages/service/rePay/_id.vue

<template>
  <div
    class="tw-px-[15px] tw-my-[60px] md:tw-px-[60px] xl:tw-max-w-screen-xl xl:tw-mx-auto xl:tw-grid xl:tw-grid-cols-1">
    <section class="section section-one"></section>
    <section class="section section-two tw-w-full xl:tw-max-w-[822px] xl:tw-mx-auto xl:tw-mt-[40px]">
      <PaymentStatus :status="status"></PaymentStatus>
      <DoneTotalPrice :subTotal="totalPrice" :orderStatus="orderStatus"></DoneTotalPrice>
    </section>
    <section class="section section-three tw-w-full tw-mt-[60px] xl:tw-max-w-[822px] xl:tw-mx-auto">
      <h2 class="t18 title-icon-left tw-text-black tw-mb-[15px]">
        {{ $t("Complete payment") }}
      </h2>
      <div class="notice tw-body-3 tw-text-black tw-mb-[20px] tw-hidden xl:tw-block">
        {{
        $t(
        "Please enter your info carefully. Once submitted it cannot be changed."
        )
        }}
      </div>
      <ChooseMethod></ChooseMethod>
      <div class="element tw-flex tw-justify-center tw-items-center xl:tw-justify-end tw-mt-[30px]">
        <a class="tw-transition tw-btn-md tw-no-underline tw-text-neutrals-0 tw-bg-primary-1 tw-px-[30px] tw-py-[9.5px] tw-rounded-2xl hover:tw-bg-primary-2"
          href="#">
          {{ $t("Repay") }}
        </a>
      </div>
    </section>
  </div>
</template>
<script>
import StepInfo from "@/components/service/StepInfo";
import BookingInfoItem from "@/components/service/BookingInfoItem";
import PurchaserInfo from "@/components/service/PurchaserInfo";
import ChooseMethod from "@/components/service/ChooseMethod";
import PriceInfo from "@/components/service/PriceInfo";
import TotalPrice from "@/components/service/TotalPrice";
import DoneTotalPrice from "@/components/service/DoneTotalPrice";
import PaymentStatus from "@/components/service/PaymentStatus";
import WireTransferInfo from "@/components/service/WireTransferInfo";
import DoneBookingDetails from "@/components/service/DoneBookingDetails";
export default {
  name: "service",
  layout: "service",
  auth: false,
  components: {
    StepInfo,
    BookingInfoItem,
    PurchaserInfo,
    ChooseMethod,
    PriceInfo,
    TotalPrice,
    DoneTotalPrice,
    PaymentStatus,
    WireTransferInfo,
    DoneBookingDetails,
  },
  data() {
    return {
      step: "3",
      subTotal: 5510,
      methoodType: "Credit Card",
      //Credit Card,Remittance
      status: "failed",
      serviceId: "",
      orderStatus: {},
      totalPrice: 0,
      demo: [
        {
          title:
            "Taipei Popular Sightseeing Private Car Charter: Jiufen, Pingxi, and North Coast (Chinese/English/Korean)",
          detail:
            "[Pick Up Service, Taipei City, Standard Car for 4 people] x 1",
          date: "2022.09.20-2022.09.24 (Local time)",
          quantity: 1,
          total: 3500,
        },
      ],
      bankAccountInfo: {
        bankName: "E. SUN COMMERCIAL BANK, LTD., TAIPEI, TAIWAN",
        SWIFTCode: "ESUNTWTP",
        BankAddress:
          "No. 66-1,Sanchong Rd.,Nangang Dist., Taipei City 115602 , Taiwan",
        AccountNumber: "1182-879-079298",
        AccountName: "SHOWEASY  CO., LTD",
      },
    };
  },
  async created() {
    await this.getStatus();
  },
  mounted() { },
  methods: {
    async getStatus() {
      await this.$axios
        .get(
          `/order/${this.$route.params.id}?jwt=${this.$auth.$storage.getUniversal("jwt").token
          }`
        )
        .then((result) => {
          console.log(result)
          this.serviceId = result.data[0].service_id;
          this.orderStatus = result.data[0];
          this.methoodType = result.data[0].order_payment[0].payment_type;
          this.orderStatus.order_item.forEach((item) => {
            this.totalPrice += Math.round(item.price * item.quantity * 100) / 100;
          })
          return result.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.print {
  &::before {
    content: "";
    display: inline-block;
    position: relative;
    background-image: url("~/assets/svg/print.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 20px;
    height: 20px;
    margin-right: 14px;
  }
}
</style>