69 lines
2.7 KiB
Vue
69 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="stepsdemo-content">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
emits: ['prev-page', 'complete'],
|
||
|
|
props: {
|
||
|
|
formData: Object
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
prevPage() {
|
||
|
|
this.$emit('prev-page', { pageIndex: 3 });
|
||
|
|
},
|
||
|
|
complete() {
|
||
|
|
this.$emit('complete');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|