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.
340 lines
12 KiB
340 lines
12 KiB
<template>
|
|
<div id="print" ref="print"
|
|
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-[20px] 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>
|
|
<CancellationPolicy :Policy="BookingOrder.CancellationPolicy"></CancellationPolicy>
|
|
<ViewDetails :BookingOrder="BookingOrder"></ViewDetails>
|
|
<CancelBooking :BookingOrder="BookingOrder"></CancelBooking>
|
|
<BookingInfoItem :info="BookingOrder" @other-details="activeOtherDetails" @notice-details="activeNoticeDetails"></BookingInfoItem>
|
|
<OtherDetails :BookingOrder="BookingOrder"></OtherDetails>
|
|
<NoticeDetails :BookingOrder="BookingOrder"></NoticeDetails>
|
|
<PaymentDetails
|
|
class="tw-mb-[20px]"
|
|
@banking-details = "activeBankingDetails"
|
|
@upload-remittanceSlip = "activeUpload"
|
|
@open-remittanceSlip = "viewRemittanceImg"
|
|
:BookingOrder="BookingOrder"
|
|
></PaymentDetails>
|
|
<BankingDetails :BankingDetails="BankingDetails"></BankingDetails>
|
|
<UploadRemittanceSlip @reload-BookingContent="reloadBookingContent" :uploadBookingID="BookingOrder.BookingID"></UploadRemittanceSlip>
|
|
<Cancellation :Policy="BookingOrder.CancellationPolicy" class="tw-mb-[20px]"></Cancellation>
|
|
<div class="element tw-hidden xl:tw-flex xl:tw-justify-center xl:tw-items-center xl:tw-mt-[12px] no-print">
|
|
<button @click="onPrint()"
|
|
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>
|
|
<!-- <ContactInfo
|
|
class="tw-mb-[20px]"
|
|
:ContactInfo="ContactInfo"
|
|
></ContactInfo> -->
|
|
<ViewRemittanceImgModal :remittanceImg="remittanceImg"></ViewRemittanceImgModal>
|
|
</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";
|
|
import ViewRemittanceImgModal from "@/components/booking/Modal/ViewRemittanceImg.vue";
|
|
|
|
export default {
|
|
layout: "service",
|
|
auth: true,
|
|
components: {
|
|
ContactInfo,
|
|
Cancellation,
|
|
PaymentDetails,
|
|
BookingInfoItem,
|
|
BookingInfo,
|
|
ViewDetails,
|
|
OtherDetails,
|
|
NoticeDetails,
|
|
ContactUs,
|
|
CancelBooking,
|
|
CancellationPolicy,
|
|
BankingDetails,
|
|
UploadRemittanceSlip,
|
|
ViewRemittanceImgModal
|
|
|
|
},
|
|
|
|
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",
|
|
},
|
|
onsiteService: {},
|
|
payment: {},
|
|
bookingID: "",
|
|
remittanceImg: ""
|
|
};
|
|
},
|
|
async created() {
|
|
await this.getBookingID();
|
|
await this.getOrder();
|
|
if (this.$auth.authtoken != null) {
|
|
|
|
// await this.getServiceData();
|
|
// await this.getPackages();
|
|
// await this.getAdditionalServices();
|
|
// await this.getNotice();
|
|
}
|
|
},
|
|
methods: {
|
|
print() {
|
|
if (process.browser) {
|
|
this.$nextTick(()=>{
|
|
window.print();
|
|
});
|
|
}
|
|
},
|
|
onPrint() {
|
|
this.$print(this.$refs.print)
|
|
this.$nextTick(()=>{
|
|
let arr=document.getElementsByClassName('isNeedRemove')
|
|
if(arr.length) arr[0].remove();
|
|
})
|
|
},
|
|
async getBookingID(){
|
|
await this.$axios
|
|
.get(`/trending/api/BookingOnline/FindBookingID?BookingNo=${this.$route.params.id}&Lang=${this.$i18n.localeProperties["langQuery"]}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
const data = response.data.DATA.rel;
|
|
this.bookingID = data;
|
|
console.log("ID:" + this.bookingID);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
},
|
|
async getOrder() {
|
|
await this.$axios
|
|
.get(`/trending/api/BookingOnline/Booking?BookingID=${this.bookingID}&BookingNo=${this.$route.params.id}&Lang=${this.$i18n.localeProperties["langQuery"]}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
const data = response.data.DATA.rel;
|
|
this.BookingOrder = data;
|
|
}
|
|
})
|
|
.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");
|
|
},
|
|
activeBankingDetails(){
|
|
this.$modal.show("BankingDetails");
|
|
},
|
|
activeUpload(){
|
|
this.$modal.show("UploadRemittanceSlip");
|
|
},
|
|
activeOtherDetails() {
|
|
this.$modal.show("OtherDetails");
|
|
},
|
|
activeNoticeDetails() {
|
|
this.$modal.show("NoticeDetails");
|
|
},
|
|
reloadBookingContent(){
|
|
this.getOrder();
|
|
this.$nuxt.refresh();
|
|
},
|
|
viewRemittanceImg(img){
|
|
this.remittanceImg = img;
|
|
console.log("去你的圖片:" + this.remittanceImg);
|
|
this.$modal.show("ViewRemittanceImgModal");
|
|
}
|
|
},
|
|
};
|
|
</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>
|