51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<div class="payment-step">
|
|
<v-card-text class="pa-8 text-center">
|
|
<div class="failure-container">
|
|
<v-icon icon="mdi-close-circle" size="80" class="text-red mb-4" />
|
|
<h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Gagal</h2>
|
|
<p class="text-h6 text-grey-darken-1 mb-6">
|
|
Terjadi kesalahan saat memproses<br />pembayaran Anda.
|
|
</p>
|
|
<div class="button-group">
|
|
<v-btn color="primary" size="large" variant="flat" rounded="xl" @click="retryPayment" class="mb-3">
|
|
Coba Lagi
|
|
</v-btn>
|
|
<v-btn color="grey-darken-1" size="large" variant="outlined" rounded="xl" @click="paymentStore.reset">
|
|
Kembali ke Awal
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</v-card-text>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { usePaymentStore } from '~/stores/payment';
|
|
const paymentStore = usePaymentStore();
|
|
|
|
const retryPayment = () => {
|
|
// Logika untuk mencoba lagi pembayaran
|
|
// Misalnya, memanggil API backend untuk mendapatkan tagihan baru
|
|
// Untuk saat ini, kita bisa mensimulasikannya
|
|
console.log("Mencoba pembayaran lagi...");
|
|
paymentStore.setPaymentStatus('aktif');
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.failure-container {
|
|
padding: 40px 20px;
|
|
}
|
|
.text-red {
|
|
color: #f44336 !important;
|
|
}
|
|
.text-dark {
|
|
color: #424242 !important;
|
|
}
|
|
.button-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
</style> |