fix 會員My Booking相關頁面

1. Payment 判斷顯示不同樣式和功能
2. ViewRemittanceSlip Modal 開發

FrontEnd/components/booking/Modal/ViewRemittanceImg.vue

@@ -0,0 +1,99 @@
+<template>
+  <modal name="ViewRemittanceImgModal" :clickToClose="false">
+    <div class="tw-text-base-primary">
+      <div class="modal-header tw-flex tw-w-full tw-justify-between tw-mb-[15px] lg:tw-mb-[30px]">
+        <div class="t18 tw-mr-[120px] md:tw-text-[20px]">看水單</div>
+        <button class="close tw-transition tw-btn-md" @click="$modal.hide('ViewRemittanceImgModal')"></button>
+      </div>
+      <div class="modal-content tw-body-5 md:tw-mr-[200px] md:tw-body-4">
+        <img :src = remittanceImg />
+      </div>
+    </div>
+  </modal>
+</template>
+<script>
+export default {
+  name: "ViewRemittanceImgModal",
+
+  data() {
+    return {};
+  },
+
+  props: {
+    remittanceImg: {
+      type: String,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.close {
+  position: absolute;
+  right: 25px;
+  top: 25px;
+  background-image: url("~/assets/svg/close.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 14px;
+  height: 14px;
+
+  @media (min-width: 1366px) {
+    position: relative;
+    right: initial;
+    top: initial;
+  }
+}
+
+:deep() {
+  .v--modal {
+    background-color: #f8f8f8 !important;
+    text-align: left;
+    border-radius: 16px;
+    box-shadow: 0 20px 60px -2px rgb(27 33 58 / 40%);
+    padding: 20px;
+    max-width: max-content;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    margin: 0 auto;
+    height: auto !important;
+    vertical-align: middle;
+  }
+
+  .v--modal-overlay {
+    position: fixed;
+    box-sizing: border-box;
+    left: 0;
+    top: 0;
+    width: max-content;
+    height: auto;
+    background: rgba(0, 0, 0, 0.2);
+    z-index: 999;
+    opacity: 1;
+  }
+
+  .v--modal-top-right {
+    display: block;
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
+
+  .v--modal-background-click {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .v--modal-box {
+    margin-left: 60px;
+    margin-right: 60px;
+
+    @media (min-width: 768px) {
+      margin-left: 67px;
+      margin-right: 67px;
+    }
+  }
+}
+</style>

FrontEnd/components/booking/PaymentDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="PaymentDetails tw-bg-neutrals-0 tw-rounded-[20px] tw-text-base-primary tw-p-5 tw-h-auto"
-    v-if="BookingOrder.Payment"
+    v-if="BookingOrder.Payment && BookingOrder.OnSiteService.Provider"
   >
     <div class="tw-body-3 tw-font-bold tw-mb-[11.5px]">{{ $t('Payment Details') }}</div>
     <div class="tw-mb-[10px]">
@@ -30,14 +30,14 @@
       <img src="~/assets/img/icons/Icon.png" class="tw-w-[20px] tw-h-[20px] tw-mr-[5px]" />
       <div class="tw-text-[#ffb70a]">{{ $t('This Booking is Unpaid') }}</div>
     </div>
-    <div v-if="BookingOrder.PaymentStatus == '01' && BookingOrder.PaymentType == '2'" class="tw-flex">
+    <div v-if="BookingOrder.PaymentStatus == '01' && BookingOrder.PaymentType == '2' && BookingOrder.OnSiteService.Provider.ProviderStatus == null" class="tw-flex">
       <img src="~/assets/img/icons/Icon.png" class="tw-w-[20px] tw-h-[20px] tw-mr-[5px]" />
       <div class="tw-text-[#ffb70a]">等待供應商確認後提供匯款訊息</div>
     </div>
     <div
       class="tw-grid tw-grid-rows-[40px_40px_auto] tw-gap-[10px_12px] md:tw-grid-cols-[129px_175px_auto] md:tw-grid-rows-none md:tw-items-center md:tw-gap-[24px]"
     >
-      <button v-if="BookingOrder.BookingStatus == '02' && BookingOrder.PaymentType == '2'"
+      <button v-if="BookingOrder.BookingStatus == '02' && BookingOrder.PaymentType == '2' && BookingOrder.OnSiteService.Provider.ProviderStatus != '04'"
         class="t14 tw-text-complementary-1 tw-p-[11px] tw-font-bold tw-bg-[#EFF3FF] tw-max-w-[129px] tw-rounded-[10px] hover:tw-text-[#A0B5FF] no-print"
         @click="$emit('banking-details')"
       >
@@ -59,10 +59,10 @@
         {{ $t('Please upload your remittance slip as soon as the bill has been transferred.') }}
       </div>
       <button v-if="BookingOrder.BookingStatus == '02' && BookingOrder.PaymentStatus == '02' && BookingOrder.PaymentType == '2' && BookingOrder.Payment.Remittance != null"
-        class="t14 tw-text-complementary-1 tw-font-bold tw-border tw-border-solid tw-rounded-[10px] tw-border-primary-1 tw-max-w-[175px] hover:tw-bg-primary-3 no-print"
-        @click="$emit('open-remittanceSlip')"
+        class="t14 tw-text-complementary-1 tw-underline tw-underline-complementary-1 tw-max-w-[110px] no-print"
+        @click="$emit('open-remittanceSlip', BookingOrder.Payment.Remittance)"
       >
-        {{ $t('Remittance Image') }}
+        {{ BookingOrder.Payment.RemittanceFileName }}
       </button>
     </div>
   </div>

FrontEnd/pages/user/booking/_id.vue

@@ -27,6 +27,7 @@
         class="tw-mb-[20px]"
         @banking-details = "activeBankingDetails"
         @upload-remittanceSlip = "activeUpload"
+        @open-remittanceSlip = "viewRemittanceImg"
         :BookingOrder="BookingOrder"
       ></PaymentDetails>
       <BankingDetails :BankingDetails="BankingDetails"></BankingDetails>
@@ -42,6 +43,7 @@
         class="tw-mb-[20px]"
           :ContactInfo="ContactInfo"
       ></ContactInfo> -->
+      <ViewRemittanceImgModal :remittanceImg="remittanceImg"></ViewRemittanceImgModal>
     </div>
   </div>
 </template>
@@ -59,7 +61,7 @@ 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",
@@ -78,6 +80,7 @@ export default {
     CancellationPolicy,
     BankingDetails,
     UploadRemittanceSlip,
+    ViewRemittanceImgModal
 
   },
 
@@ -153,6 +156,7 @@ export default {
       onsiteService: {},
       payment: {},
       bookingID: "",
+      remittanceImg: ""
     };
   },
   async created() {
@@ -306,6 +310,11 @@ export default {
     reloadBookingContent(){
       this.getOrder();
       this.$nuxt.refresh();
+    },
+    viewRemittanceImg(img){
+      this.remittanceImg = img;
+      console.log("去你的圖片:" + this.remittanceImg);
+      this.$modal.show("ViewRemittanceImgModal");
     }
   },
 };