|
|
<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" > <div class="section section-one"> <h2 class="t18 title-icon-left tw-text-black tw-mb-[21px] md:tw-mb-[31px] xl:tw-mb-[31px]" > {{ $t("Booking info") }} </h2> <BookingInfo class="tw-mb-[20px]" :BookingOrder="BookingOrder" @contact-us="activeContactUs" @view-details="activeViewDetails" @cancellation-policy="activeCancellationPolicy" @cancel-booking="activeCancelBooking" ></BookingInfo> <ContactUs :ContactUs="ContactUs"></ContactUs> <ViewDetails :TotalPrice="BookingOrder.TotalPrice" :CurrencyID="BookingOrder.CurrencyID"></ViewDetails> <CancellationPolicy :Policy="BookingOrder.CancellationPolicy"></CancellationPolicy> <CancelBooking :BookingOrder="BookingOrder"></CancelBooking> <ContactInfo class="tw-mb-[20px]" :ContactInfo="ContactInfo" ></ContactInfo> <Cancellation :Policy="BookingOrder.CancellationPolicy"></Cancellation> <!-- <BookingInfoItem :info="BookingOrder" ></BookingInfoItem> --> <!-- <BookingInfoItem :info="BookingOrder" v-bind:NoticeDetails="NoticeDetails" v-bind:Supplier="Supplier" v-bind:Img="content.preview_image" ></BookingInfoItem> --> <!-- <PaymentDetails class="tw-mb-[20px]" v-bind:PaymentDetails="PaymentDetails" v-bind:Currency="currency" ></PaymentDetails> <OtherDetails v-bind:OtherDetail="OtherDetail"></OtherDetails> <NoticeDetails v-bind:NoticeDetails="NoticeDetails"></NoticeDetails> <BankingDetails v-bind:BankingDetails="BankingDetails"></BankingDetails> <UploadRemittanceSlip></UploadRemittanceSlip> --> </div> </div></template><script>import ContactInfo from "@/components/booking/ContactInfo";import Cancellation from "@/components/booking/Cancellation";import PaymentDetails from "@/components/booking/PaymentDetails";import BookingInfoItem from "@/components/booking/BookingInfoItem";import BookingInfo from "@/components/booking/BookingInfo";import ViewDetails from "@/components/booking/Modal/ViewDetailsModal.vue";import OtherDetails from "@/components/booking/Modal/OtherDetailsModal.vue";import NoticeDetails from "@/components/booking/Modal/NoticeDetailsModal.vue";import ContactUs from "@/components/booking/Modal/ContactUsModal.vue";import CancelBooking from "@/components/booking/Modal/CancelBookingModal.vue";import CancellationPolicy from "@/components/booking/Modal/CancellationPolicyModal.vue";import BankingDetails from "@/components/booking/Modal/BankingDetailsModal.vue";import UploadRemittanceSlip from "@/components/booking/Modal/UploadRemittanceSlipModal.vue";
export default { layout: "service", auth: true, components: { ContactInfo, Cancellation, PaymentDetails, BookingInfoItem, BookingInfo, ViewDetails, OtherDetails, NoticeDetails, ContactUs, CancelBooking, CancellationPolicy, BankingDetails, UploadRemittanceSlip,
},
data() { return { apiUrl: process.env.SERVICE_CONSOLE, 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: [], booking_questions: [], }, Supplier:{ }, BookingOrder: {}, PaymentDetails: [], ContactInfo: { //type: Object,
// UserName: "Zack Yang",
// UserMail: "zackyang@gmail.com",
// UserPhone: "+8869-38-234-424",
}, BankingDetails: { type: Object, BankName: "E.SUN COMMERCIAL BANK,LTD.,TAIPEI,TAIWAN", SwiftCode: "ESUNTWTP", BankAddress: "No.66-1,Sanching Rd.,Nangang Dist.,Taipei City 115602,Taiwan", AccountNumber: "1182-879-079298", AccountName: "SHOWEASY CO.,LTD", }, NoticeDetails: { type: Object, PickUpAddress: "3rd Floor,No 457,Chongyang Road,Nangang District,Taipei City,Taiwan,11560", DropOffAddress: "3rd Floor,No 457,Chongyang Road,Nangang District,Taipei City,Taiwan,11560", DriverName: "Zack Yang", DriverMail: "zackyang@gmail.com", DriverPhone: "+8869-38-234-424", }, OtherDetail: [], ViewDetails: { type: Object, Deposit: "30.000", FirstPayment: "20.000", SecondPayment: "50.000", ThirdPayment: "60.000", FinalPayment: "40.000", TotalAmount: "200.000", }, ContactUs: { type: Object, Phone: "+886-2-2725-5000", Mail: "info@showeasy.com", }, }; }, async created() { await this.getOrder(); if (this.$auth.authtoken != null) { // await this.getServiceData();
// await this.getPackages();
// await this.getAdditionalServices();
// await this.getNotice();
} }, methods: { async getOrder() { await this.$axios .get(`/trending/api/Booking/Booking?BookingID&BookingNo=${this.$route.params.id}&Lang=${this.$i18n.localeProperties["langQuery"]}`) .then((response) => { console.log("我的訂單:" + JSON.stringify(response)); if(response && response.data && response.data.DATA && response.data.DATA.rel){ let data = response.data.DATA.rel if(data){ this.BookingOrder = data;
this.ContactInfo = this.BookingOrder.BookingContact; this.PaymentDetails = this.BookingOrder.map((item) => { return { amount: item.TotalPrice, currency: item.CurrencyID, }; }); console.log("PaymentDetails:" + this.PaymentDetails); this.serviceId = this.BookingOrder.OnSiteService.ServiceID; this.currency = this.BookingOrder.Payment.Currency.CurrencyCode;
} } }) .catch((error) => { console.log(error); }); }, 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; this.content.booking_questions = res.data.booking_questions; this.Supplier = res.data.supplier; }) .catch((error) => console.log(error)); }, async getPackages() { let orderPackageId = this.BookingOrder.order_item[0].package_id ? this.BookingOrder.order_item[0].package_id : ""; 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; let packageObject = this.content.packages[this.content.packages.findIndex(item => item.package_id === orderPackageId)] for (let i in packageObject.questions) { packageObject.questions[i].required = packageObject.questions[i].required_ans; this.content.booking_questions.push(packageObject.questions[i]) } }) .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; if(this.BookingOrder.order_as.length > 0 ) { for (let i in this.content.additionalServices[0].questions) { this.content.additionalServices[0].questions[i].required = this.content.additionalServices[0].questions[i].required_ans; this.content.booking_questions.push(this.content.additionalServices[0].questions[i]); } } }) .catch((error) => console.log(error)); }, async getNotice(){ await this.$axios .get( `https://lambda.showeasy.com/order-message/ticket?order_no=${this.BookingOrder.order_display_id}&message_title=message` ) .then((res) => { if(res.data.items.length > 0 ) { this.NoticeDetails = res.data.items[res.data.items.length-1]; } else { this.NoticeDetails.message_content = ""; }
}) .catch((error) => console.log(error)); }, activeContactUs() { this.$modal.show("ContactUs"); }, activeViewDetails() { this.$modal.show("ViewDetails"); }, activeCancellationPolicy() { this.$modal.show("CancellationPolicy"); }, activeCancelBooking() { this.$modal.show("CancelBooking"); }, },};</script><style lang="scss" scoped></style>
|
