primevue-mirror/pages/steps/Confirmation.vue

70 lines
2.7 KiB
Vue
Executable File

<template>
<div class="stepsdemo-content">
<ClientOnly>
<Card>
<template v-slot:title> Confirmation </template>
<template v-slot:content>
<div class="field col-12">
<label for="class">Name</label>
<b>{{ formData.firstname ? formData.firstname : '-' }} {{ formData.lastname ? formData.lastname : '-' }}</b>
</div>
<div class="field col-12">
<label for="Age">Age</label>
<b>{{ formData.age ? formData.age : '-' }}</b>
</div>
<div class="field col-12">
<label for="Age">Seat Class</label>
<b>{{ formData.class ? formData.class : '-' }}</b>
</div>
<div class="field col-12">
<label for="Age">Wagon Number</label>
<b>{{ formData.vagon ? formData.vagon : '-' }}</b>
</div>
<div class="field col-12">
<label for="Age">Seat</label>
<b>{{ formData.seat ? formData.seat : '-' }}</b>
</div>
<div class="field col-12">
<label for="Age">Cardholder Name</label>
<b>{{ formData.cardholderName ? formData.cardholderName : '-' }}</b>
</div>
<div class="field col-12">
<label for="Age">Card Number</label>
<b>{{ formData.cardholderNumber ? formData.cardholderNumber : '-' }}</b>
</div>
<div class="field col-12">
<label for="Age">Date</label>
<b>{{ formData.date ? formData.date : '-' }}</b>
</div>
<div class="field col-12">
<label for="Age">CVV</label>
<b>{{ formData.cvv && formData.cvv.length === 3 ? '**' + formData.cvv[2] : '-' }}</b>
</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="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success" />
</div>
</template>
</Card>
</ClientOnly>
</div>
</template>
<script>
export default {
props: {
formData: Object
},
methods: {
prevPage() {
this.$emit('prev-page', { pageIndex: 3 });
},
complete() {
this.$emit('complete');
}
}
};
</script>