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.
131 lines
4.2 KiB
131 lines
4.2 KiB
<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>
|