ShowEasyFrontEnd/FrontEnd/components/service/ChooseMethod.vue

<template>
  <div class="choose-method 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"
    >
      {{ $t("Choose payment method") }}
    </h3>
    <Transition name="bounce">
      <div v-show="show" class="tw-mt-[21px] md:tw-ml-[60px]">
        <div class="element tw-w-max tw-flex tw-items-center">
          <input
            id="CreditCard"
            type="radio"
            value="Credit Card"
            v-model="method"
            @change="selectRadio()"
          />
          <label for="CreditCard" class="t16 tw-font-normal"
            ><span>{{ $t("Credit card") }}</span></label
          >
        </div>
        <Transition name="bounce">
          <div v-show="method == 'Credit Card'">
            <ecpay
              ref="ecpay"
              :orderNo="orderNo"
              :method="method"
              @updateToken="updateToken($event)"
            ></ecpay>
          </div>
        </Transition>
        <div class="element tw-mt-[15px]">
          <input
            id="Remittance"
            type="radio"
            value="Remittance"
            v-model="method"
            @change="selectRadio()"
          />
          <label for="Remittance" class="t16 tw-font-normal"
            ><span>{{ $t("Remittance") }}</span></label
          >
        </div>
      </div>
    </Transition>
  </div>
</template>
<script>
import ecpay from "@/components/service/ecpay.vue";

export default {
  name: "ChooseMethod",
  components: {
    ecpay,
  },
  props: {
    orderNo: {
      type: String,
    },
    purchaserInfo_Validation: {
      type: Boolean,
    },
  },
  data() {
    return {
      show: false,
      disabled: false,
      completed: false,
      method: null,
      cardNumber: "",
      expirationDate: "",
      cvc: "",
      validation: {
        cardNumber: true,
        expirationDate: true,
        cvc: true,
      },
    };
  },
  filters: {
    formatCardNumber(value) {
      return value ? value.match(/.{1,4}/g).join(" ") : "";
    },
  },
  watch: {
    purchaserInfo_Validation: {
      handler: function () {
        if (this.purchaserInfo_Validation) {
          this.show = true;
        } else {
          this.show = false;
        }
      },
    },
  },
  methods: {
    updateCardNumber(e) {
      this.cardNumber = e.target.value.replace(/ /g, "");
    },
    selectRadio() {
      this.$emit("paymentType", this.method);
      if (this.method == "Credit Card") {
        this.$refs.ecpay.init();
      }
    },
    updateToken(item) {
      this.$emit("update", item);
    },
  },
};
</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>