From 6483982ce6ab1261d3ef5cc2f7eec4dc4b74c74a Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUS91B7\\Showeasy" <fred870421@gmail.com>
Date: Mon, 20 Mar 2023 16:29:01 +0800
Subject: [PATCH] =?UTF-8?q?=E7=84=A1=E7=99=BB=E5=85=A5=E7=8B=80=E6=85=8B?=
 =?UTF-8?q?=E4=B8=8B=E5=96=AE=E5=8A=9F=E8=83=BD(=E6=9C=AA=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/service/OrderingPersonInfo.vue | 219 +++++++++++++-----
 FrontEnd/pages/service/_id.vue                |   4 +
 FrontEnd/pages/service/checkout/_id.vue       |  71 +++++-
 3 files changed, 231 insertions(+), 63 deletions(-)

diff --git a/FrontEnd/components/service/OrderingPersonInfo.vue b/FrontEnd/components/service/OrderingPersonInfo.vue
index a8a1cd1..056134a 100644
--- a/FrontEnd/components/service/OrderingPersonInfo.vue
+++ b/FrontEnd/components/service/OrderingPersonInfo.vue
@@ -17,11 +17,11 @@
           ]"
           @click="show = !show"
         >
-          {{ $t("Purchaser Info") }}
+          {{ $t("Ordering person") }}
         </h3>
         <div class="element content-status xl:tw-ml-[20px]">
           <span
-            v-if="purchaserValidation == true"
+            v-if="orderingPersonValidation == true"
             class="status-check-icon tw-inline-block tw-w-[30px] tw-h-[30px]"
           ></span>
         </div>
@@ -31,47 +31,12 @@
         <div v-show="show">
           <div class="tw-mt-[32px] md:tw-ml-[60px]">
             <div class="element element-tabs tw-mb-[20px]">
-              <button
-                :class="[
-                  'tw-transition',
-                  'tw-btn-md',
-                  'tw-border',
-                  'tw-border-solid',
-                  'tw-border-neutrals-300',
-                  'tw-px-[30px]',
-                  ' tw-py-[9.5px]',
-                  ' tw-rounded-2xl',
-                  infoType == 'Company'
-                    ? 'tw-bg-neutrals-800 tw-text-neutrals-0'
-                    : 'tw-bg-neutrals-0 tw-text-neutrals-300',
-                ]"
-                @click="$emit('type', 'Company')"
-              >
-                {{ $t('Company')}}
-              </button>
-              <button
-                :class="[
-                  'tw-transition',
-                  'tw-btn-md',
-                  'tw-border',
-                  'tw-border-solid',
-                  'tw-border-neutrals-300',
-                  'tw-px-[30px]',
-                  ' tw-py-[9.5px]',
-                  ' tw-rounded-2xl',
-                  infoType == 'Individual'
-                    ? 'tw-bg-neutrals-800 tw-text-neutrals-0'
-                    : 'tw-bg-neutrals-0 tw-text-neutrals-300',
-                ]"
-                @click="$emit('type', 'Individual')"
-              >
-              {{ $t('Individual')}}
-              </button>
-            </div>
-            <div v-show="infoType == 'Individual'">
+              
               <div
-                class="element element-form tw-grid tw-grid-cols-1 tw-gap-[10px] md:tw-grid-cols-2 md:tw-gap-x-[60px] md:tw-gap-y-[20px] md:tw-max-w-[580px]"
+              class="element element-form tw-grid tw-grid-cols-1 tw-gap-[10px] md:tw-grid-cols-2 md:tw-gap-x-[60px] md:tw-gap-y-[20px] md:tw-max-w-[580px]"
               >
+
+                <!-- first name -->
                 <div class="element">
                   <elementInput
                     :input="{
@@ -85,6 +50,8 @@
                     @change="userData.first_name = $event"
                   ></elementInput>
                 </div>
+
+                <!-- last name -->
                 <div class="element">
                   <elementInput
                     :input="{
@@ -98,6 +65,8 @@
                     @change="userData.last_name = $event"
                   ></elementInput>
                 </div>
+
+                <!-- Email -->
                 <div class="element">
                   <elementInput
                     :input="{
@@ -112,22 +81,29 @@
                   >
                   </elementInput>
                 </div>
+
+                <!-- phoneNumber -->
                 <div class="element">
                   <label class="tw-block tw-mb-[10px]"
                     ><span
                       >{{ $t("Phone") }}<span class="required">*</span></span
                     ></label
-                  >
+                >
                   <div class="tw-grid tw-grid-cols-[120px_auto] tw-gap-[5px]">
-                  <elementCountryCodeSelect :select="{
-                    required: true,
-                  }" :userCodeSelect="userData.phone_code" :validation="validation.phone_code" @returnCode = "getReturnCode"></elementCountryCodeSelect>
-                  <vue-phone-number-input v-model="userData.phone_number" :validation="validation.phone_number" color="#E5e5e5" error-color="#ef5a5a"
-                    valid-color="#e5e5e5"
-                    :error="error" :border-radius="5"
-                  no-flags :no-country-selector="true" no-example @update="getPhoneData" :translations="translateOption">
-                </vue-phone-number-input></div>
+                    <elementCountryCodeSelect :select="{
+                      required: true,
+                      }" :userCodeSelect="userData.phone_code" :validation="validation.phone_code" @returnCode = "getReturnCode"
+                    >
+                    </elementCountryCodeSelect>
+                    <vue-phone-number-input v-model="userData.phone_number" :validation="validation.phone_number" color="#E5e5e5" error-color="#ef5a5a"
+                      valid-color="#e5e5e5"
+                      :error="error" :border-radius="5"
+                      no-flags :no-country-selector="true" no-example @update="getPhoneData" :translations="translateOption">
+                    </vue-phone-number-input>
+                  </div>
                 </div>
+
+                <!-- country -->
                 <div class="element">
                   <elementSelect
                     :select="{
@@ -141,15 +117,9 @@
                     @change="userData.country = $event"
                   ></elementSelect>
                 </div>
+
               </div>
-            </div>
-            <div class="element tw-mt-[40px] tw-text-right">
-              <button
-                class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[9.5px] tw-rounded-2xl hover:tw-bg-primary-2"
-                @click="updatePurchaserInfo(false)"
-              >
-                {{ $t("Next") }}
-              </button>
+
             </div>
           </div>
         </div>
@@ -167,6 +137,11 @@ import is from "is_js";
 
 export default {
   name: "OrderingPersonInfo",
+  props: {
+    countryOptions: {
+      type: Array,
+    },
+  },
   components: {
     elementInput,
     elementSelect,
@@ -176,6 +151,18 @@ export default {
   },
   data() {
     return {
+      show: false,
+      disabled: false,
+      orderingPersonValidation: false,
+      userData: {
+        first_name: "",
+        last_name: "",
+        email: "",
+        phone_number: "",
+        country: "0",
+        phone_code: "",
+        UserCompany: [],
+      },
       validation: {
         first_name: true,
         last_name: true,
@@ -186,12 +173,124 @@ export default {
       },
     }
   },
-  created() {},
+  created() {
+    this.getUser()
+  },
   watch: {},
-  methods: {}
+  methods: {
+    async getUser() {
+      await this.$axios
+      .get(`/trending/api/Onsite/MemberInfo`)
+      .then((res) => {
+
+        if(res && res.data && res.data.DATA && res.data.DATA.rel){
+          const data = res.data.DATA.rel
+          if(data){
+            this.userData.first_name = data.FirstName;
+            this.userData.last_name = data.LastName;
+            this.userData.email = data.Email;
+            this.userData.phone_number = data.Phone;
+            this.userData.country = data.CountryID;
+            this.userData.phone_code = data.PhoneCode;
+          }
+        }
+
+      })
+    },
+    getReturnCode(code){
+      this.userData.phone_code = code;
+    },
+    getPhoneData(phoneData) {
+      this.validation.phone_number = phoneData.isValid;
+    },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.collapse {
+  &::before {
+    content: "";
+    display: inline-block;
+    position: relative;
+    left: 0;
+    top: 0;
+    background-image: url("~/assets/svg/down-arrow.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+    width: 16px;
+    height: 10px;
+    margin-right: 40px;
+    transform: rotate(-90deg);
+    transition: all 0.2s linear;
+  }
+
+  &.disabled {
+    pointer-events: none;
+
+    &::before {
+      background-image: url("~/assets/svg/down-arrow-disabled.svg");
+    }
+  }
+
+  &.show {
+    &::before {
+      transform: rotate(0);
+      transition: all 0.2s linear;
+    }
+  }
+}
+
+.btn-add-icon {
+  background-image: url("~/assets/svg/plus-blue.svg");
+  background-repeat: no-repeat;
+  background-position: left 12px center;
+  background-size: 16px 16px;
+}
+
+.btn-edit-icon {
+  background-image: url("~/assets/svg/edit-info.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+}
+
+.bounce-enter-active {
+  animation: bounce-in 0.3s ease-out;
+}
+
+.bounce-leave-active {
+  animation: bounce-in 0.3s cubic-bezier(1, 0.5, 0.8, 1) reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: translateY(-5px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.status-check-icon {
+  background-image: url("~/assets/svg/status-check.svg");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+:deep(.input-tel__input) {
+    height: 44px !important;
+    padding-left: 13px !important; 
+}
 
 </style>
diff --git a/FrontEnd/pages/service/_id.vue b/FrontEnd/pages/service/_id.vue
index 3bdde9d..fa6cead 100644
--- a/FrontEnd/pages/service/_id.vue
+++ b/FrontEnd/pages/service/_id.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+  style="border: 1px solid red;"
     class="service-content tw-mb-[60px] tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-mb-[100px] xl:tw-px-[60px] xl:tw-max-w-screen-xl xl:tw-mx-auto xl:tw-grid-cols-[auto_364px]">
     <mobileFixTopBar ref="stickySwiper" :fixBar="fixBar" :currStep="currStep" :list="fixBarList"></mobileFixTopBar>
     <section class="step sercion-1 tw-w-full md:tw-px-[30px] xl:tw-px-0 xl:tw-col-span-2">
@@ -842,6 +843,9 @@ export default {
     },
     bookNow() {
       let validators = this.$refs.ref_selectExhibition.validators();
+
+      console.log(validators);
+      
       if(validators==false){
         return false;
       }
diff --git a/FrontEnd/pages/service/checkout/_id.vue b/FrontEnd/pages/service/checkout/_id.vue
index c948614..36e0657 100644
--- a/FrontEnd/pages/service/checkout/_id.vue
+++ b/FrontEnd/pages/service/checkout/_id.vue
@@ -30,6 +30,41 @@
           }}
         </div>
 
+        <!-- 登入 or 加入會員 -->
+        <div
+          class="tw-flex tw-justify-between  purchaser-info tw-p-8 tw-mb-[20px] tw-bg-white tw-rounded-xl"
+        >
+          <div style="width: 25%;">
+            <div style="margin-bottom: 15px;">
+              <button
+                class="btn_login tw-transition"
+              >
+              登入
+                <!-- {{ $t("Next") }} -->
+              </button>
+            </div>
+            <div>
+              <button
+                class="btn_add"
+                >
+                加入會員
+                  <!-- {{ $t("Next") }} -->
+              </button>
+            </div>
+          </div>
+          <div style="border-left: 1px solid #e5e5e5; width: 75%; padding-left: 30px;">
+            <p class="tw-body-3 tw-text-primary-1 tw-font-bold">加入會員的好處 : </p>
+            <ul>
+              <li class="tw-body-3 tw-text-black tw-font-bold">訂單進行到哪？加入會員即時掌握進度！</li>
+              <li class="tw-body-3 tw-text-black tw-font-bold">輕鬆管理訂單！所有資料保留雲端，紀錄隨手查。</li>
+              <li class="tw-body-3 tw-text-black tw-font-bold">您關注的展覽全蒐藏！蒐集自己的展覽資料庫，為展覽盡早做準備。</li>
+              <li class="tw-body-3 tw-text-black tw-font-bold">精準提供您需要的展覽資訊及服務優惠。</li>
+            </ul>
+          </div>
+        </div>
+
+        <OrderPersonInfo></OrderPersonInfo>
+
         <!-- 訂購資訊 -->
         <h2
           class="t18 title-icon-left tw-text-black tw-mb-[15px] xl:tw-mb-[10px] xl:tw-text-[24px]"
@@ -142,6 +177,7 @@
 import StepInfo from "@/components/service/StepInfo";
 import BookingInfoItem from "@/components/service/BookingInfoItem";
 import PurchaserInfo from "@/components/service/PurchaserInfo";
+import OrderPersonInfo from "@/components/service/OrderingPersonInfo";
 import ChooseMethod from "@/components/service/ChooseMethod";
 import PriceInfo from "@/components/service/PriceInfo";
 import TotalPrice from "@/components/service/TotalPrice";
@@ -158,11 +194,13 @@ import loading from "@/components/newComponent/loading/loading.vue";
 export default {
   name: "checkout",
   layout: "service",
-  auth: true,
+  // auth: true,
+  auth: false,
   components: {
     StepInfo,
     BookingInfoItem,
     PurchaserInfo,
+    OrderPersonInfo,
     ChooseMethod,
     PriceInfo,
     TotalPrice,
@@ -287,7 +325,13 @@ export default {
   },
   async created() {
     this.isLoading = true;
-    if (this.$auth.loggedIn) {
+    // this.$nextTick(()=>{
+    //   this.isLoading = false;
+    // });
+
+      console.log(this.$auth.loggedIn)
+
+    // if (this.$auth.loggedIn) {
       let data = this.$route.query;
       this.serviceID = this.$route.params.id;
       let selectExhibitionData = JSON.parse(decodeURIComponent(data.selectExhibitionData));
@@ -361,7 +405,7 @@ export default {
         this.isLoading = false;
       });
       
-    }
+    // }
   },
   mounted() {},
   methods: {
@@ -782,4 +826,25 @@ export default {
   pointer-events: none;
   filter: opacity(50%);
 }
+
+.btn_login, .btn_add {
+  padding: 9px 16px;
+  border-radius: 12px;
+  border: solid 1px #696969;
+  background-color: #fefefe;
+  font-family: NotoSansTC;
+  font-size: 16px;
+  font-weight: bold;
+  font-style: normal;
+  color: #696969;
+}
+
+.btn_login:hover, .btn_add:hover {
+  background-color: #696969;
+  color: #fefefe;
+}
+
+p {
+  margin: 0;
+}
 </style>