ShowEasyFrontEnd/FrontEnd/components/service/content/selectExhibitionBooth.vue

<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 v-if="validation.length == false" style="font-size: 16px; color: #ef5a5a; margin-top: 10px; margin-left: 90px;">{{ $t("Required.") }}</div>
  </div>
</template>
<script>
export default {
  name: 'selectExhibitionBooth',
  components: {

  },
  props: {

  },
  data() {
    return {
      value: 0,
      validation:{
        length: true
      },
      errors: null,
    };
  },
  watch: {
    value: {
      handler: function () {

        this.$emit('booth-select', this.value);

      },
    },
  },
  methods: {
    add() {
      this.value += 1;
    },
    reduce() {
      if (this.value !== 0) {
        this.value -= 1;
      }
    },
    validators() {
      if(this.value == 0) {

        this.validation.length = false;

      } else{

        this.validation.length = true;

      }
      this.errors = Object.entries(this.validation).filter(
        (e) => e[1] == false
      );
      if (this.errors.length > 0) {
        return false;
      } else {
        return true;
      }
    }
  },
};
</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>