62 lines
2.4 KiB
Vue
Executable File
62 lines
2.4 KiB
Vue
Executable File
<template>
|
|
<div class="stepsdemo-content">
|
|
<Card>
|
|
<template v-slot:title> Payment Information </template>
|
|
<template v-slot:subtitle> Enter your card details </template>
|
|
<template v-slot:content>
|
|
<div class="p-fluid formgrid grid">
|
|
<div class="field col-12">
|
|
<label for="class">Card Holder Name</label>
|
|
<InputText v-model="cardholderName" type="text" />
|
|
</div>
|
|
<div class="field col-8">
|
|
<label id="number" for="lastname">Number</label>
|
|
<InputMask id="number" v-model="cardholderNumber" mask="9999-9999-9999-9999" />
|
|
</div>
|
|
<div class="field col-2">
|
|
<label id="date" for="date">Date</label>
|
|
<InputMask id="date" v-model="date" mask="99/99" />
|
|
</div>
|
|
<div class="field col-2">
|
|
<label for="cvv">CVV</label>
|
|
<InputMask id="cvv" v-model="cvv" mask="999" />
|
|
</div>
|
|
<div class="field-checkbox col-12">
|
|
<Checkbox id="remember" v-model="remember" :binary="true" />
|
|
<label for="remember" class="p-checkbox-label">Save credit card information for future</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-slot:footer>
|
|
<div class="grid grid-nogutter justify-content-between">
|
|
<Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
|
|
<Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
|
|
</div>
|
|
</template>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ['next-page', 'prev-page'],
|
|
data() {
|
|
return {
|
|
cardholderName: '',
|
|
cardholderNumber: '',
|
|
date: '',
|
|
cvv: '',
|
|
remember: false
|
|
};
|
|
},
|
|
methods: {
|
|
nextPage() {
|
|
this.$emit('next-page', { formData: { cardholderName: this.cardholderName, cardholderNumber: this.cardholderNumber, date: this.date, cvv: this.cvv }, pageIndex: 2 });
|
|
},
|
|
prevPage() {
|
|
this.$emit('prev-page', { pageIndex: 2 });
|
|
}
|
|
}
|
|
};
|
|
</script>
|