ShowEasyFrontEnd/FrontEnd/pages/service/done/_id.vue

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