You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

224 lines
4.9 KiB

<template>
<div class="choose-method tw-p-5 tw-mb-[20px] tw-bg-white 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") }}<span class="required t12 md:t14">*</span>
<span v-if="method==null || method==''" class="required md:tw-ml-[20px] t12 md:t14">{{ $t("Required.") }}</span>
</h3>
<Transition name="bounce">
<div v-show="show" class="tw-mt-[21px] md:tw-ml-[60px]">
<!-- <div class="element tw-w-max">
<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]" v-for="(item,index) in payTypes" :key="index">
<input
:id="'radio'+item.id"
type="radio"
:value="item.id"
v-model="method"
@change="selectRadio(item.id)"
/>
<label :for="'radio'+item.id" class="t16 tw-font-normal"
><span>{{ item.name }}</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,
},
payTypes:{
type: Array
},
chooseMethod: {
type: String,
}
},
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;
}
},
},
chooseMethod:{
handler: function () {
if (this.chooseMethod!="") {
this.method = this.chooseMethod;
this.$emit("paymentType", this.method);
}
},
}
},
// async created(){
// this.method = this.payTypes.length > 0 ? this.payTypes[0].id : null;
// },
methods: {
updateCardNumber(e) {
this.cardNumber = e.target.value.replace(/ /g, "");
},
selectRadio(id) {
this.method = id;
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>