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.
196 lines
6.9 KiB
196 lines
6.9 KiB
<template>
|
|
<div
|
|
class="tw-px-[15px] tw-mb-[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 tw-my-[40px]">
|
|
<StepInfo :step_active="step"></StepInfo>
|
|
</section>
|
|
<section class="section section-two tw-w-full xl:tw-max-w-[822px] xl:tw-mx-auto xl:tw-mt-[40px]">
|
|
<PaymentStatus v-if="methoodType == 'Credit Card'" :status="status"></PaymentStatus>
|
|
<WireTransferInfo v-if="methoodType == 'Remittance'"></WireTransferInfo>
|
|
<DoneTotalPrice v-if="(methoodType == 'Remittance' || status == 'success') && orderStatus.length > 0"
|
|
:subTotal="finalPrice" :orderStatus="orderStatus"></DoneTotalPrice>
|
|
<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("Booking Details") }}
|
|
</a>
|
|
</div>
|
|
<div class="element tw-hidden xl:tw-flex xl:tw-justify-center xl:tw-items-center xl:tw-mt-[12px]">
|
|
<button v-if="status == 'success'" @click="print()"
|
|
class="print tw-transition tw-flex tw-justify-center tw-items-center tw-btn-md tw-text-primary-1 tw-bg-neutrals-0 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[13.5px] tw-rounded-xl hover:tw-bg-primary-3">
|
|
{{ $t("Print this page") }}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<section class="section section-three tw-w-full tw-mt-[60px] xl:tw-max-w-[822px] xl:tw-mx-auto">
|
|
<DoneBookingDetails v-if="status == 'success'" :info="content" :orderStatus="orderStatus"
|
|
:totalPrice="finalPrice"></DoneBookingDetails>
|
|
</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 {
|
|
apiUrl: process.env.SERVICE_CONSOLE,
|
|
step: "3",
|
|
subTotal: 5510,
|
|
//Credit Card,Remittance
|
|
methoodType: "",
|
|
serviceId: "",
|
|
status: "success",
|
|
content: {
|
|
preview_image: "",
|
|
country: null,
|
|
city: null,
|
|
name: "",
|
|
highlights: "",
|
|
details: "",
|
|
cancellation_policy: "",
|
|
saved: false,
|
|
confirmation_time: 24,
|
|
supplier: null,
|
|
available_sections: null,
|
|
timeStatus: '',
|
|
dateStatus: '',
|
|
times: [],
|
|
start: '',
|
|
end: '',
|
|
faq: null,
|
|
packages: [],
|
|
additionalServices: [],
|
|
},
|
|
orderStatus: {},
|
|
totalPrice: 0,
|
|
};
|
|
},
|
|
async created() {
|
|
// await this.getStatus();
|
|
// await this.getServiceData();
|
|
// await this.getPackages();
|
|
// await this.getAdditionalServices();
|
|
},
|
|
mounted() { },
|
|
computed: {
|
|
currency() {
|
|
return this.orderStatus.currency;
|
|
},
|
|
finalPrice() {
|
|
return Number(this.totalPrice.toFixed(2));
|
|
},
|
|
},
|
|
methods: {
|
|
async getStatus() {
|
|
await this.$axios
|
|
.get(
|
|
`/order/${this.$route.params.id}?jwt=${this.$auth.$storage.getUniversal("jwt").token
|
|
}`
|
|
)
|
|
.then((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);
|
|
});
|
|
},
|
|
async getServiceData() {
|
|
await this.$axios
|
|
.get(
|
|
`${this.apiUrl}/user-services/content?service_id=${this.serviceId}&lang_code=${this.$i18n.localeProperties["langQuery"]}¤cy=${this.currency}`
|
|
)
|
|
.then((res) => {
|
|
this.content.preview_image = res.data.preview_image;
|
|
this.content.name = res.data.name;
|
|
this.content.country = res.data.country;
|
|
this.content.city = res.data.city;
|
|
this.content.highlights = res.data.highlights;
|
|
this.content.details = res.data.details;
|
|
this.content.cancellation_policy = res.data.cancellation_policy;
|
|
this.content.supplier = res.data.supplier;
|
|
this.content.available_sections = res.data.available_sections;
|
|
this.content.times = res.data.available_sections.times;
|
|
this.content.timeStatus = res.data.available_sections.time_status;
|
|
this.content.dateStatus = res.data.available_sections.date_status;
|
|
this.content.start = res.data.available_sections.start;
|
|
this.content.end = res.data.available_sections.end;
|
|
this.content.payment_currency = res.data.payment_currency;
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
async getPackages() {
|
|
await this.$axios
|
|
.get(
|
|
`${this.apiUrl}/user-services/packages?service_id=${this.serviceId}&lang_code=${this.$i18n.localeProperties["langQuery"]}¤cy=${this.currency}`
|
|
)
|
|
.then((res) => {
|
|
this.content.packages = res.data;
|
|
this.packageId = res.data[0].package_id ? res.data[0].package_id : "";
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
async getAdditionalServices() {
|
|
await this.$axios
|
|
.get(
|
|
`${this.apiUrl}/user-services/additional?service_id=${this.serviceId}&lang_code=${this.$i18n.localeProperties["langQuery"]}¤cy=${this.currency}`
|
|
)
|
|
.then((res) => {
|
|
this.content.additionalServices =
|
|
res.data.services == [] ? null : res.data;
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
print() {
|
|
if (process.browser) {
|
|
// window.print();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</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>
|