ShowEasyFrontEnd/FrontEnd/pages/user/booking/_id.vue

<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"]}&currency=${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"]}&currency=${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"]}&currency=${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>