ShowEasyFrontEnd/FrontEnd/components/service/Invoice.vue

<template>
  <div class="invoice tw-p-5 tw-mb-[20px] tw-bg-neutrals-0 tw-rounded-xl">
    <h3
      :class="[
        'collapse',
        't16',
        'tw-relative',
        'tw-cursor-pointer',
        'xl:tw-text-[18px]',
        show ? 'show' : 'hide',disabled
         ? 'disabled' : '',
        disabled ? 'tw-text-neutrals-300' : 'tw-text-black',
      ]"
      @click="show = !show"
    >
      {{ "電子發票/收據" }}
    </h3>
    <Transition name="bounce">
      <div v-show="show" class="tw-mt-[32px] md:tw-ml-[60px]">
        <div class="element tw-mb-[20px]">
          <div class="t16">{{ "是否開立統編？" }}</div>
        </div>
        <div class="element tw-w-max tw-flex tw-items-center">
          <input id="true" type="radio" value="true" v-model="method" />
          <label for="true" class="t16 tw-font-normal"
            ><span>{{ "是" }}</span></label
          >
        </div>
        <Transition name="bounce">
          <div v-show="method == 'true'">
            <div
              class="card-info tw-grid tw-grid-cols-1 tw-gap-x-[20px] tw-gap-y-[20px] tw-ml-[40px] tw-mt-[20px] tw-max-w-[630px] md:tw-grid-cols-2"
            >
              <div class="element tw-flex tw-flex-col">
                <label class="tw-mb-[10px]"
                  ><span
                    >買受人（公司抬頭）<span class="required">*</span></span
                  ></label
                >
                <input id="Buyer" type="text" />
              </div>
              <div class="element tw-flex tw-flex-col">
                <label class="tw-mb-[10px]"
                  ><span>統一編號<span class="required">*</span></span></label
                >
                <input
                  id="UniformNumbers"
                  type="text"
                  value=""
                  class="tw-text-center"
                />
              </div>
              <div class="element tw-flex tw-flex-col">
                <label class="tw-mb-[10px]"
                  ><span>電子郵件<span class="required">*</span></span></label
                >
                <input
                  id="InvoiceEmail"
                  type="text"
                  value=""
                  class="tw-text-center"
                />
              </div>
            </div>
          </div>
        </Transition>
        <div class="element tw-mt-[20px]">
          <input id="false" type="radio" value="fasle" v-model="method" />
          <label for="false" class="t16 tw-font-normal"
            ><span>{{ "否" }}</span></label
          >
        </div>
      </div></Transition
    >
  </div>
</template>
<script>
  export default {
    name: "Invoice",
    data() {
      return {
        show: false,
        disabled: false,
        completed: false,
        method: null,
      };
    },
  };
</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;
      }
    }
  }
  .card-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
  .icon {
    &--visa {
      background-image: url("~/assets/img/credit-card/Visa.png");
    }
    &--union-pay {
      background-image: url("~/assets/img/credit-card/UnionPay.png");
    }
    &--mastercard {
      background-image: url("~/assets/img/credit-card/Mastercard.png");
    }
    &--jcb {
      background-image: url("~/assets/img/credit-card/JCB.png");
    }
  }
  .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);
    }
  }
</style>