service/id 增加輸入攤位數量樣式

FrontEnd/components/service/content/selectExhibitionBooth.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="group">
+    <div class="tw-text-[16px] tw-text-[#9c9c9c] tw-mb-[20px]">
+      大大會提供每實收攤位(贈攤不計列)單件 7 噸內，至多 3 件免費服務，請詳實填寫逾期申請或現場追加，恕不受理。
+    </div>
+    <div class="tw-grid tw-grid-cols-[199px_auto] tw-gap-[15px]">
+      <div class="tw-text-[16px] tw-text-black">
+        實收攤位數 <span class="tw-text-[12px]">(9平方米/攤位)</span><span class="tw-text-[#ef5a5a]">*</span>：
+      </div>
+      <div class="tw-flex tw-justify-between tw-items-center tw-max-w-[165px]">
+        <!-- <div class="t12 tw-mr-[35px] tw-text-neutrals-900 tw-hidden md:tw-block md:t16 md:tw-font-normal">
+          ${{ price.toLocaleString() }} {{ currency }}
+        </div> -->
+        <button :class="[
+          'custom-button button-reduce tw-text-transparent tw-p-[6px] tw-rounded-[8px] tw-max-w-[24px] tw-max-h-[24px] tw-mr-[16px] md:tw-max-w-[30px] md:tw-max-h-[30px] md:tw-mr-[42px]',
+          value == 0 ? 'tw-bg-neutrals-200' : 'tw-bg-primary-default',
+        ]" @click="reduce()">
+          reduce
+        </button>
+        <div class="tw-min-w-[24px] tw-text-center md:t18 md:tw-font-normal">
+          {{ value }}
+        </div>
+        <button :class="[
+          'custom-button button-add tw-text-transparent tw-p-[6px] tw-rounded-[8px] tw-max-w-[24px] tw-max-h-[24px] tw-ml-[16px] md:tw-max-w-[30px] md:tw-max-h-[30px] md:tw-text-medium md:tw-ml-[42px]',
+        ]" @click="add()">
+          add
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'selectExhibitionBooth',
+  components: {
+
+  },
+  props: {
+
+  },
+  data() {
+    return {
+      value: 0,
+    };
+  },
+  watch: {
+    value: {
+      handler: function () {
+        if (this.value) {
+          console.log(this.value);
+          this.$emit('booth-select', this.value);
+        }
+      },
+    },
+  },
+  methods: {
+    add() {
+      this.value += 1;
+    },
+    reduce() {
+      if (this.value !== 0) {
+        this.value -= 1;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.custom-button {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px;
+}
+
+.button {
+  &-reduce {
+    background-image: url("~/assets/svg/reduce.svg");
+    background-color: #e5e5e5;
+  }
+
+  &-add {
+    background-image: url("~/assets/svg/add.svg");
+    background-color: #f48800;
+  }
+}
+
+.bounce-enter-active {
+  animation: bounce-in 0.3s ease-out;
+}
+
+.bounce-leave-active {
+  animation: bounce-in 0.3s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+</style>
+  

FrontEnd/pages/service/_id.vue

@@ -32,6 +32,12 @@
         </div>
         <div class="tw-w-full tw-bg-neutrals-100 tw-px-[20px] tw-py-[30px] md:tw-p-[30px] tw-rounded-[20px]">
           <div class="">
+            <div class="group tw-mb-[40px] tw-px-[20px] tw-py-[30px] tw-rounded-[20px] tw-bg-white">
+              <h3 class="t14 tw-font-bold tw-mb-[30px] md:t16 tw-block">
+                輸入攤位數量
+              </h3>
+              <selectExhibitionBooth @booth-select="getBoothSelect"></selectExhibitionBooth>
+            </div>
             <div class="group tw-mb-[40px] tw-px-[20px] tw-py-[30px] tw-rounded-[20px] tw-bg-white">
               <h3 class="t14 tw-font-bold tw-mb-[30px] md:t16 tw-block">
                 {{ $t("Select Exhibition") }}
@@ -284,6 +290,7 @@ import slideshow from "@/components/swiper/serviceContent.vue";
 import detailsModal from "@/components/service/contentModal/DetailsModal.vue";
 import cancellationPolicyModal from "@/components/service/contentModal/cancellationPolicyModal.vue";
 import selectExhibition from "@/components/service/content/selectExhibition.vue";
+import selectExhibitionBooth from "@/components/service/content/selectExhibitionBooth.vue";
 import selectExhibitionService from "@/components/service/content/selectExhibitionService.vue";
 import quantitySelectGroup from "@/components/service/content/quantitySelectGroup.vue";
 import pickupInformation from "@/components/service/content/pickupInformation.vue";
@@ -308,6 +315,7 @@ export default {
     detailsModal,
     cancellationPolicyModal,
     selectExhibition,
+    selectExhibitionBooth,
     selectExhibitionService,
     quantitySelectGroup,
     pickupInformation,
@@ -431,6 +439,7 @@ export default {
       previewFile: '',
       countdown: 15,
       rulesShow: false,
+      boothSelect: 0,
     };
   },
   async created() {
@@ -689,7 +698,6 @@ export default {
         })
         .catch((error) => console.log(error));
     },
-
     // async getFaq() {
     //   await this.$axios
     //     .get(
@@ -797,6 +805,11 @@ export default {
         })
         .catch((error) => console.log(error));
     },
+    //攤位數量
+    getBoothSelect(value){
+      this.boothSelect = value;
+      console.log("攤位數:" + this.boothSelect);
+    },
     //抓卡車相關數據
     async getInfoItem() {
       await this.$axios
@@ -805,7 +818,7 @@ export default {
           if(response && response.data && response.data.DATA && response.data.DATA.rel){
             let data = response.data.DATA.rel
 
-            console.log(data)
+            console.log(data);
 
             if(data.length>0){
               this.expenseRules = data;
@@ -847,7 +860,7 @@ export default {
     bookNow() {
       let validators = this.$refs.ref_selectExhibition.validators();
 
-      console.log(this.$refs.ref_selectExhibition);
+      console.log("this.$refs.ref_selectExhibition:" + this.$refs.ref_selectExhibition);
       
       if(validators==false){
         return false;
@@ -941,7 +954,9 @@ export default {
         this.$refs.ref_quantitySelectGroup.clearAll();
       }
     },
+    //展館服務(包裝、尺寸、數量、服務類型)
     ChangeCosts(data){
+      console.log("展館服務數量:" + JSON.stringify(data.value.quantity));
       let totalPrice = 0;
       this.totalPrice = 0;
       this.rulesShow = false;
@@ -994,7 +1009,17 @@ export default {
     // 堆高機
     stackerCostRules(data1,data2){
 
-      console.log(this.expenseRules)
+      //這邊這邊是這個
+      console.log(this.expenseRules);
+
+      console.log(data1);
+      console.log(data2);
+
+      if(this.expenseRules.ItemType == "01"){
+        
+      }
+
+
 
 
       let price = 0;