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

<template>
  <div id="print" ref="print"
    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]">
      <PaymentStatusOther :status="status"></PaymentStatusOther>
      <WireTransferInfoOther :confirmDays="confirmDays"></WireTransferInfoOther>
      <div v-if="payType == '2'" class="tw-mb-[30px] tw-grid tw-grid-cols-1 tw-gap-[6px] tw-p-[20px] tw-text-[16px] tw-bg-[#fefefe] tw-border tw-border-solid tw-border-primary-1 tw-rounded-[20px] xl:tw-mx-[90px]">
        <div class="tw-text-primary-1">
          銀行帳戶資訊
        </div>
        <div class="tw-text-black">
          銀行名稱：玉山銀行 (808) 南港分行
        </div>
        <div>
          帳戶號碼：1182-940-020288
        </div>
        <div>
          戶名：簡單平台股份有限公司
        </div>
      </div>
      <DoneTotalPrice
        :subTotal="subTotal" :total="totalPrice" :orderStatus="orderStatus"></DoneTotalPrice>
      <div class="element tw-flex tw-justify-center tw-items-center xl:tw-justify-end tw-mt-[30px] no-print">
        <a class="tw-transition no-print 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="localePath('/user/booking/' + orderStatus.bookingNo)">
          {{ $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] no-print">
        <button v-if="status == 'success'" @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>
    </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="totalPrice"></DoneBookingDetails>
    </section>
    <loading :isLoading="isLoading"></loading>
  </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 PaymentStatusOther from "@/components/service/PaymentStatusOther";
import WireTransferInfoOther from "@/components/service/WireTransferInfoOther";
import DoneBookingDetails from "@/components/service/DoneBookingDetails";
import loading from "@/components/newComponent/loading/loading.vue";
export default {
  name: "done",
  layout: "service",
  auth: false,
  components: {
    StepInfo,
    // BookingInfoItem,
    // PurchaserInfo,
    // ChooseMethod,
    // PriceInfo,
    // TotalPrice,
    DoneTotalPrice,
    PaymentStatusOther,
    WireTransferInfoOther,
    DoneBookingDetails,
    loading,
  },
  data() {
    return {
      step: "3",
      subTotal: 0,
      methoodType: "",
      serviceId: "",
      status: "success",
      content: {
        preview_image: "",
        name: "",
        bookingItems: []
      },
      orderStatus: {
        bookingNo: '',
        service_date: '',
        service_date: '',
        currency: '',
        created_at: ''
      },
      totalPrice: 0,
      subTotal: 0,
      isLoading: false,
      confirmDays: "",
      payType: "",
    };
  },
  async created() {
    this.isLoading = true;
    let data = this.$route.query;
    if(data){
      console.log(data);
      let ret = JSON.parse(decodeURIComponent(data.data));
      console.log("ret:" + JSON.stringify(ret));
      this.status = data.status;
      if(ret && ret.TotalPrice!=undefined){
        this.totalPrice = (ret.TotalPrice!=null && ret.TotalPrice!="") ? Number(ret.TotalPrice): 0;
        this.subTotal = (ret.SubTotal!=null && ret.SubTotal!="") ? Number(ret.SubTotal): 0;
        this.content = {
          preview_image: ret.ServicePictrue,
          name: ret.ServiceName,
          exhibitionName: ret.ExhibitionName,
          bookingItems: JSON.parse(ret.BookingItem),
          bookingStatus: ret.BookingStatus,
        };
        this.orderStatus = {
          bookingNo: ret.BookingNo,
          service_date: ret.ServiceDateSFormat,
          created_at: ret.BookingDateFormat,
          currency: ret.CurrencyName,
        };
        this.confirmDays = ret.ConfirmDays;
        this.payType = ret.PayType;
      }
    }
    this.$nextTick(()=>{
      this.isLoading = false;
    });
  },
  mounted() { },
  computed: {
    currency() {
      return this.orderStatus.currency;
    },
  },
  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();
      })
    },
  }
};
</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>