update layout
This commit is contained in:
bagus-arie05
@@ -3,7 +3,7 @@
|
||||
<div class="logo-section-contact">
|
||||
<div class="logo-group-contact">
|
||||
<v-img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of-arms_of_East_Java.svg.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
@@ -44,12 +44,13 @@
|
||||
<div class="banner-carousel-container">
|
||||
<v-carousel
|
||||
v-model="currentSlide"
|
||||
ref="carousel"
|
||||
:show-arrows="true"
|
||||
:hide-delimiters="false"
|
||||
:cycle="false"
|
||||
:interval="0"
|
||||
:interval="5000"
|
||||
class="banner-carousel"
|
||||
height="300"
|
||||
height="400"
|
||||
:continuous="false"
|
||||
>
|
||||
<v-carousel-item
|
||||
@@ -85,7 +86,7 @@
|
||||
<div
|
||||
v-else
|
||||
class="video-thumbnail"
|
||||
@click="currentSlide = index"
|
||||
@click="playVideo(index)"
|
||||
>
|
||||
<img
|
||||
:src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
|
||||
@@ -110,6 +111,17 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta-section-contact">
|
||||
<v-btn
|
||||
@click="startDebugPayment"
|
||||
color="#808080"
|
||||
class="cta-button debug-button"
|
||||
x-large
|
||||
>
|
||||
<span class="button-text">SIMULASI PEMBAYARAN</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="orange-background-contact">
|
||||
@@ -144,13 +156,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, nextTick } from "vue";
|
||||
import { ref, watch, onMounted, onUnmounted } from "vue";
|
||||
import { usePaymentStore } from "~/stores/payment";
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
const currentSlide = ref(0);
|
||||
const videoLoaded = ref({});
|
||||
|
||||
const carouselInterval = ref(null);
|
||||
const carouselItems = ref([
|
||||
{
|
||||
src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
|
||||
@@ -162,10 +173,9 @@ const carouselItems = ref([
|
||||
{
|
||||
videoId: "KQZFfRtMHe0",
|
||||
isImage: false,
|
||||
loaded: false,
|
||||
},
|
||||
{
|
||||
src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
|
||||
src: "https://scontent.fcgk22-2.fna.fbcdn.net/v/t39.30808-6/481267190_3904366386504845_1409667601717073976_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=w6wAp5Df1lAQ7kNvwHL8Snq&_nc_oc=Adnq0LOV2vro6n7DGZu9GfUYGx3iBXzZ7LlUk7oWYi_lZ_OYDD7LVYe5zogYKxEEJdU&_nc_zt=23&_nc_ht=scontent.fcgk22-2.fna&_nc_gid=Dir3R7zaEbm2b0HPtrmGiQ&oh=00_AfaERSA1GyvNKkfajBF5yIv_JrijpizdmUqgy9528oAszQ&oe=68D12398",
|
||||
alt: "Medical Services",
|
||||
title: "Pelayanan Terbaik",
|
||||
description: "Tim medis profesional siap melayani 24 jam",
|
||||
@@ -198,19 +208,75 @@ const onVideoError = (error) => {
|
||||
console.error('Video iframe error:', error);
|
||||
};
|
||||
|
||||
const navigateToQrisPayment = () => {
|
||||
console.log("Navigating to QRIS Payment...");
|
||||
|
||||
// Fungsi untuk memulai carousel otomatis
|
||||
const startCarousel = () => {
|
||||
if (carouselInterval.value) {
|
||||
clearInterval(carouselInterval.value);
|
||||
}
|
||||
carouselInterval.value = setInterval(() => {
|
||||
const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
|
||||
currentSlide.value = nextSlide;
|
||||
}, 10000); // Ganti gambar setiap 10 detik
|
||||
};
|
||||
|
||||
const navigateToDebugPage = () => {
|
||||
console.log("Navigating to Debug Page...");
|
||||
|
||||
// Fungsi untuk menghentikan carousel otomatis
|
||||
const stopCarousel = () => {
|
||||
if (carouselInterval.value) {
|
||||
clearInterval(carouselInterval.value);
|
||||
carouselInterval.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
watch(currentSlide, (newSlide, oldSlide) => {
|
||||
// Fungsi untuk memutar video (menghentikan carousel)
|
||||
const playVideo = (index) => {
|
||||
currentSlide.value = index;
|
||||
stopCarousel(); // Hentikan carousel saat video diputar
|
||||
};
|
||||
|
||||
// Tonton perubahan slide
|
||||
watch(currentSlide, (newSlide) => {
|
||||
const currentItem = carouselItems.value[newSlide];
|
||||
if (currentItem && !currentItem.isImage) {
|
||||
// Jika slide adalah video, hentikan carousel
|
||||
console.log('Video detected, stopping carousel');
|
||||
stopCarousel();
|
||||
} else {
|
||||
// Jika slide adalah gambar, mulai kembali carousel
|
||||
console.log('Image detected, starting carousel');
|
||||
startCarousel();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// Mulai carousel saat komponen dimuat
|
||||
startCarousel();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// Hentikan carousel saat komponen dihancurkan
|
||||
stopCarousel();
|
||||
});
|
||||
|
||||
// Fungsi untuk simulasi pembayaran debug
|
||||
const startDebugPayment = () => {
|
||||
console.log("Simulasi Pembayaran (Debug) dimulai.");
|
||||
// Mengisi data dummy untuk simulasi
|
||||
const dummyData = {
|
||||
posdevice: "GRANDPAV",
|
||||
invoice_number: "000000000000012000615",
|
||||
updated_at: "2024-11-21T11:52:25.805965+07:00",
|
||||
created_at: "2024-11-21T11:52:25.805965+07:00",
|
||||
display_name: "KASIH",
|
||||
id: "1",
|
||||
status: "1", // Status awal untuk simulasi
|
||||
display_amount: "90",
|
||||
qrvalue: "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
|
||||
ip: "10.10.150.106",
|
||||
display_nobill: "24072579/10000675",
|
||||
};
|
||||
paymentStore.updatePayment({ data: [dummyData] });
|
||||
paymentStore.currentStep = 2; // Pindah ke QRISPayment
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -309,13 +375,13 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
.banner-carousel {
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
height: clamp(300px, 45vh, 400px);
|
||||
height: clamp(400px, 45vh, 400px);
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
@@ -443,9 +509,9 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
}
|
||||
|
||||
.contact-icon-contact {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 80%;
|
||||
width: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
|
||||
height: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
|
||||
border-radius: 50%; /* Changed to 50% for perfect circle */
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,23 +1,45 @@
|
||||
<template>
|
||||
<div class="payment-step">
|
||||
<v-card-text class="pa-8 text-center">
|
||||
<div class="payment-wrapper">
|
||||
<v-card-text class="payment-content 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">
|
||||
<div class="icon-container mb-6">
|
||||
<v-icon icon="mdi-close-circle" size="100" class="text-red animated-icon" />
|
||||
</div>
|
||||
|
||||
<h2 class="failure-title mb-6">Pembayaran Gagal</h2>
|
||||
|
||||
<p class="failure-message mb-8">
|
||||
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">
|
||||
|
||||
<!-- Uncomment jika butuh buttons -->
|
||||
<!-- <div class="button-group">
|
||||
<v-btn
|
||||
color="primary"
|
||||
size="large"
|
||||
variant="flat"
|
||||
rounded="xl"
|
||||
@click="retryPayment"
|
||||
class="action-btn mb-3"
|
||||
>
|
||||
Coba Lagi
|
||||
</v-btn>
|
||||
<v-btn color="grey-darken-1" size="large" variant="outlined" rounded="xl" @click="paymentStore.reset">
|
||||
<v-btn
|
||||
color="grey-darken-1"
|
||||
size="large"
|
||||
variant="outlined"
|
||||
rounded="xl"
|
||||
@click="paymentStore.reset"
|
||||
class="action-btn"
|
||||
>
|
||||
Kembali ke Awal
|
||||
</v-btn>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -25,27 +47,195 @@ 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;
|
||||
.payment-step {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.payment-wrapper {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.payment-content {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24px;
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.08),
|
||||
0 8px 32px rgba(0, 0, 0, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
padding: 3rem 2rem !important;
|
||||
}
|
||||
|
||||
.failure-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.animated-icon {
|
||||
animation: errorPulse 2s ease-in-out infinite;
|
||||
filter: drop-shadow(0 4px 20px rgba(244, 67, 54, 0.3));
|
||||
}
|
||||
|
||||
@keyframes errorPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #f44336 !important;
|
||||
}
|
||||
.text-dark {
|
||||
color: #424242 !important;
|
||||
|
||||
.failure-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.failure-message {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-weight: 600 !important;
|
||||
text-transform: none !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.payment-step {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.payment-wrapper {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.payment-content {
|
||||
padding: 2rem 1.5rem !important;
|
||||
}
|
||||
|
||||
.failure-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.failure-message {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.animated-icon {
|
||||
font-size: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.payment-content {
|
||||
padding: 2rem 1rem !important;
|
||||
}
|
||||
|
||||
.failure-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.failure-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape Tablet Optimization */
|
||||
@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
|
||||
.payment-step {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.payment-content {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.failure-title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.failure-message {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.animated-icon {
|
||||
font-size: 70px !important;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Tablet Landscape */
|
||||
@media (orientation: landscape) and (min-width: 1024px) {
|
||||
.payment-wrapper {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.failure-title {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.failure-message {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,38 +1,382 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<template>
|
||||
<div class="payment-step">
|
||||
<v-card-text class="pa-8 text-center">
|
||||
<div class="success-wrapper">
|
||||
<div class="success-container">
|
||||
<v-icon icon="mdi-check-circle" size="80" class="text-orange mb-4" />
|
||||
<h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Berhasil</h2>
|
||||
<p class="text-h6 text-grey-darken-1 mb-6">
|
||||
Silahkan Menunggu Bukti<br >Pembayaran
|
||||
</p>
|
||||
<v-btn color="primary" size="large" variant="flat" rounded="xl" @click="paymentStore.reset">
|
||||
<!-- Success Icon with Animation -->
|
||||
<div class="success-icon-container mb-6">
|
||||
<div class="success-icon-bg">
|
||||
<v-icon
|
||||
icon="mdi-check-circle"
|
||||
size="100"
|
||||
class="success-icon"
|
||||
/>
|
||||
</div>
|
||||
<div class="success-checkmark">
|
||||
<div class="check-icon">
|
||||
<span class="icon-line line-tip"></span>
|
||||
<span class="icon-line line-long"></span>
|
||||
<div class="icon-circle"></div>
|
||||
<div class="icon-fix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Content -->
|
||||
<div class="success-content">
|
||||
<h2 class="success-title mb-4">
|
||||
Pembayaran Berhasil
|
||||
</h2>
|
||||
|
||||
<div class="success-message mb-8">
|
||||
<p class="message-line">Silahkan Menunggu Bukti</p>
|
||||
<p class="message-line">Pembayaran</p>
|
||||
</div>
|
||||
|
||||
<!-- Payment Details Summary (Optional) -->
|
||||
<div class="payment-summary mb-8" v-if="paymentStore.patientInfo">
|
||||
<div class="summary-card">
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">Pasien:</span>
|
||||
<span class="summary-value">{{ paymentStore.patientInfo.name }}</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">Nominal:</span>
|
||||
<span class="summary-value amount">{{ formatCurrency(paymentStore.patientInfo.amount) }}</span>
|
||||
</div>
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">Status:</span>
|
||||
<v-chip color="success" variant="flat" size="small">
|
||||
<v-icon size="14" class="mr-1">mdi-check</v-icon>
|
||||
Berhasil
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div class="action-section">
|
||||
<v-btn
|
||||
color="primary"
|
||||
size="x-large"
|
||||
variant="flat"
|
||||
rounded="xl"
|
||||
class="success-btn"
|
||||
@click="paymentStore.reset"
|
||||
>
|
||||
<v-icon class="mr-2">mdi-home</v-icon>
|
||||
Kembali ke Awal
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePaymentStore } from '~/stores/payment';
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
return new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(amount);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.payment-step {
|
||||
background: rgb(233, 233, 233);
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
padding: 2rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.success-wrapper {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.success-container {
|
||||
padding: 40px 20px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 24px;
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.08),
|
||||
0 8px 32px rgba(0, 0, 0, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.text-orange {
|
||||
color: #ff9800 !important;
|
||||
|
||||
/* Success Icon Animation */
|
||||
.success-icon-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.success-icon-bg {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
animation: successPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
color: #4caf50 !important;
|
||||
filter: drop-shadow(0 4px 20px rgba(76, 175, 80, 0.3));
|
||||
}
|
||||
|
||||
@keyframes successPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animated Checkmark */
|
||||
.success-checkmark {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
border: 3px solid #4caf50;
|
||||
background: rgba(76, 175, 80, 0.1);
|
||||
}
|
||||
|
||||
.icon-line {
|
||||
height: 3px;
|
||||
background-color: #4caf50;
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.icon-line.line-tip {
|
||||
top: 23px;
|
||||
left: 8px;
|
||||
width: 15px;
|
||||
transform: rotate(45deg);
|
||||
animation: checkTip 0.75s ease-in-out 1s both;
|
||||
}
|
||||
|
||||
.icon-line.line-long {
|
||||
top: 18px;
|
||||
right: 8px;
|
||||
width: 25px;
|
||||
transform: rotate(-45deg);
|
||||
animation: checkLong 0.75s ease-in-out 1.2s both;
|
||||
}
|
||||
|
||||
@keyframes checkTip {
|
||||
0% { width: 0; left: 1px; top: 19px; }
|
||||
54% { width: 0; left: 1px; top: 19px; }
|
||||
70% { width: 15px; left: -2px; top: 37px; }
|
||||
84% { width: 17px; left: 8px; top: 23px; }
|
||||
100% { width: 15px; left: 8px; top: 23px; }
|
||||
}
|
||||
|
||||
@keyframes checkLong {
|
||||
0% { width: 0; right: 46px; top: 54px; }
|
||||
65% { width: 0; right: 46px; top: 54px; }
|
||||
84% { width: 25px; right: 0px; top: 17px; }
|
||||
100% { width: 25px; right: 8px; top: 18px; }
|
||||
}
|
||||
|
||||
/* Success Content */
|
||||
.success-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.message-line {
|
||||
margin: 0;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
/* Payment Summary */
|
||||
.payment-summary {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: rgba(76, 175, 80, 0.06);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.summary-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
color: #1a1a1a;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.summary-value.amount {
|
||||
color: #4caf50;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Action Button */
|
||||
.action-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
background: linear-gradient(135deg, #ff9248 0%, #ff7043 100%) !important;
|
||||
color: white !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 1.1rem !important;
|
||||
text-transform: none !important;
|
||||
padding: 0 3rem !important;
|
||||
min-width: 200px;
|
||||
box-shadow:
|
||||
0 8px 25px rgba(255, 146, 72, 0.3),
|
||||
0 4px 15px rgba(255, 146, 72, 0.2) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.success-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 12px 35px rgba(255, 146, 72, 0.4),
|
||||
0 8px 25px rgba(255, 146, 72, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.payment-step {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.success-wrapper {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.success-container {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.success-container {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
min-width: 100%;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape Tablet */
|
||||
@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
|
||||
.payment-step {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.success-container {
|
||||
padding: 2rem;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.payment-summary {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 70px !important;
|
||||
}
|
||||
.text-dark {
|
||||
color: #424242 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,94 +1,211 @@
|
||||
<template>
|
||||
<div class="payment-step">
|
||||
<v-card-text class="pa-0 text-center">
|
||||
<div class="mb-0">
|
||||
<v-card-text class="pa-6">
|
||||
<!-- Header Section -->
|
||||
<div class="header-section text-center mb-8">
|
||||
<h2 class="payment-title">Pindai Kode QR untuk Pembayaran</h2>
|
||||
<p class="payment-subtitle">
|
||||
Gunakan aplikasi mobile banking atau e-wallet Anda
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Section - QR & Details Side by Side -->
|
||||
<div class="main-content-section mb-8">
|
||||
<div class="content-grid">
|
||||
<!-- QR Code Section -->
|
||||
<div class="qr-section">
|
||||
<div class="qr-container">
|
||||
<div class="qris-logo-container mb-0">
|
||||
<v-img
|
||||
src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
|
||||
height="80"
|
||||
class="mb-1"
|
||||
height="60"
|
||||
class="qris-logo"
|
||||
contain
|
||||
/>
|
||||
</div>
|
||||
<div class="qr-wrapper">
|
||||
<div class="qr-code-bg">
|
||||
<img
|
||||
ref="qrCodeImage"
|
||||
alt="QR Code"
|
||||
class="qr-image"
|
||||
:class="{ 'qr-loaded': qrLoaded }"
|
||||
/>
|
||||
<div class="qr-overlay" v-if="!qrLoaded">
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
size="40"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qr-brand-label">
|
||||
<span>QRIS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2> -->
|
||||
<!-- Scanning Animation -->
|
||||
<div class="scan-line" v-if="qrLoaded"></div>
|
||||
</div>
|
||||
|
||||
<div class="qr-container mb-6">
|
||||
<v-card
|
||||
class="qr-code mx-auto d-flex align-center justify-center"
|
||||
width="280"
|
||||
height="280"
|
||||
elevation="0"
|
||||
<!-- QR Instructions -->
|
||||
<div class="qr-instructions text-center mt-4">
|
||||
<v-icon size="20" color="primary" class="mb-2"
|
||||
>mdi-qrcode-scan</v-icon
|
||||
>
|
||||
<img ref="qrCodeImage" alt="QR Code" width="280" height="280" />
|
||||
</v-card>
|
||||
<p class="instruction-text">Arahkan kamera ke QR code</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="payment-details">
|
||||
<v-row dense class="mb-1">
|
||||
<v-col cols="5" class="text-left">
|
||||
<strong>NAMA PASIEN:</strong>
|
||||
</v-col>
|
||||
<v-col cols="7" class="text-left">
|
||||
<!-- Payment Details Section -->
|
||||
<div class="details-section">
|
||||
<div class="payment-details-card">
|
||||
<div class="details-header">
|
||||
<v-icon color="primary" class="mr-2"
|
||||
>mdi-receipt-text-outline</v-icon
|
||||
>
|
||||
<span class="details-title">Detail Pembayaran</span>
|
||||
</div>
|
||||
|
||||
<div class="details-content">
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">
|
||||
<v-icon size="18" class="mr-2" color="primary"
|
||||
>mdi-account-outline</v-icon
|
||||
>
|
||||
Nama Pasien
|
||||
</div>
|
||||
<div class="detail-value patient-name">
|
||||
{{ paymentStore.patientInfo.name }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row dense class="mb-1">
|
||||
<v-col cols="5" class="text-left">
|
||||
<strong>NOMINAL:</strong>
|
||||
</v-col>
|
||||
<v-col cols="7" class="text-left">
|
||||
{{ paymentStore.patientInfo.amount }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row dense class="mb-1">
|
||||
<v-col cols="5" class="text-left">
|
||||
<strong>NOMOR TAGIHAN:</strong>
|
||||
</v-col>
|
||||
<v-col cols="7" class="text-left">
|
||||
{{ paymentStore.qrData.display_nobill }}
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row dense class="mb-4">
|
||||
<v-col cols="5" class="text-left">
|
||||
<strong>BERLAKU SAMPAI:</strong>
|
||||
</v-col>
|
||||
<v-col cols="7" class="text-left text-red"> N/A </v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-4 justify-center">
|
||||
<!-- <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep">
|
||||
<div class="detail-row highlight-row">
|
||||
<div class="detail-label">
|
||||
<v-icon size="18" class="mr-2" color="success"
|
||||
>mdi-cash</v-icon
|
||||
>
|
||||
Nominal
|
||||
</div>
|
||||
<div class="detail-value amount">
|
||||
{{ formatCurrency(paymentStore.patientInfo.amount) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">
|
||||
<v-icon size="18" class="mr-2" color="primary"
|
||||
>mdi-file-document-outline</v-icon
|
||||
>
|
||||
Nomor Tagihan
|
||||
</div>
|
||||
<div class="detail-value">
|
||||
{{ paymentStore.qrData.display_nobill }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">
|
||||
<v-icon size="18" class="mr-2" color="warning"
|
||||
>mdi-clock-outline</v-icon
|
||||
>
|
||||
Berlaku Sampai
|
||||
</div>
|
||||
<div class="detail-value expired">Tidak terbatas</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status in Details Card -->
|
||||
<div class="payment-status mt-4">
|
||||
<div class="status-row">
|
||||
<div class="status-indicator-inline">
|
||||
<div class="status-dot pulsing"></div>
|
||||
<span class="status-text">Menunggu pembayaran...</span>
|
||||
</div>
|
||||
<v-chip color="warning" variant="tonal" size="small">
|
||||
<v-icon size="14" class="mr-1">mdi-clock-fast</v-icon>
|
||||
Pending
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="action-buttons">
|
||||
<v-btn
|
||||
color="grey-lighten-1"
|
||||
variant="outlined"
|
||||
size="large"
|
||||
class="action-btn back-btn"
|
||||
@click="paymentStore.prevStep"
|
||||
>
|
||||
<v-icon class="mr-2">mdi-arrow-left</v-icon>
|
||||
Kembali
|
||||
</v-btn> -->
|
||||
<v-btn color="primary" variant="flat" @click="paymentStore.nextStep">
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
color="success"
|
||||
variant="flat"
|
||||
size="large"
|
||||
class="action-btn simulate-btn"
|
||||
@click="paymentStore.nextStep"
|
||||
>
|
||||
<v-icon class="mr-2">mdi-play-circle-outline</v-icon>
|
||||
Simulasi Pembayaran
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- Help Text -->
|
||||
<div class="help-text text-center mt-6">
|
||||
<v-icon size="16" class="mr-1">mdi-information-outline</v-icon>
|
||||
<span>Scan QR code menggunakan aplikasi pembayaran digital Anda</span>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePaymentStore } from "~/stores/payment";
|
||||
import QRCode from 'qrcode';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import QRCode from "qrcode";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
const qrCodeImage = ref(null);
|
||||
const qrLoaded = ref(false);
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
return new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
minimumFractionDigits: 0,
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const generateQRCode = async () => {
|
||||
const qrValue = paymentStore.qrData.qrvalue;
|
||||
if (qrValue) {
|
||||
try {
|
||||
const dataUrl = await QRCode.toDataURL(qrValue);
|
||||
qrLoaded.value = false;
|
||||
const dataUrl = await QRCode.toDataURL(qrValue, {
|
||||
width: 240,
|
||||
margin: 1,
|
||||
color: {
|
||||
dark: "#000000",
|
||||
light: "#FFFFFF",
|
||||
},
|
||||
errorCorrectionLevel: "M",
|
||||
});
|
||||
if (qrCodeImage.value) {
|
||||
qrCodeImage.value.src = dataUrl;
|
||||
qrCodeImage.value.onload = () => {
|
||||
qrLoaded.value = true;
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to generate QR Code:', error);
|
||||
console.error("Failed to generate QR Code:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -97,46 +214,482 @@ onMounted(() => {
|
||||
generateQRCode();
|
||||
});
|
||||
|
||||
watch(() => paymentStore.qrData, () => {
|
||||
watch(
|
||||
() => paymentStore.qrData,
|
||||
() => {
|
||||
generateQRCode();
|
||||
});
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.payment-content {
|
||||
padding-top: 40px !important; /* Sesuaikan jarak atas */
|
||||
padding-bottom: 40px !important; /* Sesuaikan jarak bawah */
|
||||
}
|
||||
.payment-step {
|
||||
background: rgb(233, 233, 233);
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.qr-container {
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
display: inline-block;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Header Section */
|
||||
.header-section {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.qr-code {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
|
||||
.qris-logo-container {
|
||||
position: center;
|
||||
/* display: inline-block; */
|
||||
}
|
||||
.qr-label {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 10px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
|
||||
.qris-logo {
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.payment-details {
|
||||
max-width: 350px;
|
||||
|
||||
.qris-logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.payment-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.payment-subtitle {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Main Content Grid Layout */
|
||||
.main-content-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
align-items: start;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (orientation: landscape) and (min-width: 768px) {
|
||||
.qr-code {
|
||||
width: 240px !important;
|
||||
height: 240px !important;
|
||||
|
||||
/* QR Code Section */
|
||||
.qr-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.details-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
position: relative;
|
||||
background: linear-gradient(145deg, #ffffff, #f0f4f8);
|
||||
border-radius: 24px;
|
||||
padding: 2rem;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.08),
|
||||
0 8px 16px rgba(0, 0, 0, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.qr-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.qr-code-bg {
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 8px;
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
transform 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.qr-image.qr-loaded {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.qr-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(248, 250, 252, 0.9);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.qr-brand-label {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
right: -8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
/* Scanning Animation */
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
right: 2rem;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #667eea, transparent);
|
||||
animation: scanning 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes scanning {
|
||||
0% {
|
||||
top: 2rem;
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: calc(100% - 2rem);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* QR Instructions */
|
||||
.qr-instructions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.instruction-text {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Payment Details Card */
|
||||
.payment-details-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.06),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.details-title {
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.details-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 12px;
|
||||
background: rgba(248, 250, 252, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.detail-row:hover {
|
||||
background: rgba(248, 250, 252, 0.9);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.highlight-row {
|
||||
background: rgba(46, 204, 113, 0.08) !important;
|
||||
border: 1px solid rgba(46, 204, 113, 0.2) !important;
|
||||
}
|
||||
|
||||
.highlight-row:hover {
|
||||
background: rgba(46, 204, 113, 0.12) !important;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #1a1a1a;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-value.patient-name {
|
||||
color: #2c3e50;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.detail-value.amount {
|
||||
color: #27ae60;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.detail-value.expired {
|
||||
color: #e67e22;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Payment Status */
|
||||
.payment-status {
|
||||
padding: 1rem;
|
||||
background: rgba(255, 193, 7, 0.08);
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 193, 7, 0.2);
|
||||
}
|
||||
|
||||
.status-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-indicator-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Status Indicator */
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #f39c12;
|
||||
}
|
||||
|
||||
.status-dot.pulsing {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: none !important;
|
||||
padding: 0 2rem !important;
|
||||
min-width: 140px;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.simulate-btn {
|
||||
background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
|
||||
box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
|
||||
}
|
||||
|
||||
.simulate-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(46, 204, 113, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Help Text */
|
||||
.help-text {
|
||||
color: #888;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 900px) {
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.payment-details-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.qr-container {
|
||||
padding: 1.5rem;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.payment-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.payment-details-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Landscape Optimization */
|
||||
@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
|
||||
.header-section {
|
||||
padding-top: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.payment-title {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.payment-subtitle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.payment-details-card {
|
||||
padding: 1.5rem;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Tablet Landscape */
|
||||
@media (orientation: landscape) and (min-width: 1024px) {
|
||||
.content-grid {
|
||||
max-width: 1200px;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.payment-details-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="medical-payment-app">
|
||||
<v-container fluid class="pa-0">
|
||||
<v-row justify="center" no-gutters>
|
||||
<v-col cols="12">
|
||||
<v-container fluid class="pa-0 full-height">
|
||||
<v-row justify="center" no-gutters class="full-height">
|
||||
<v-col cols="12" class="full-height">
|
||||
<v-card
|
||||
class="payment-card mx-auto"
|
||||
elevation="0"
|
||||
@@ -37,7 +37,7 @@ const localIpAddress = ref(null);
|
||||
const pollingInterval = ref(null);
|
||||
|
||||
const hasIpAddress = computed(() => !!localIpAddress.value);
|
||||
const apiURL = 'http://10.10.150.68:8084/api/v1/qris/allstatus';
|
||||
const apiURL = 'http://10.10.150.67:8084/api/v1/qris/allstatus';
|
||||
|
||||
const paymentSteps = {
|
||||
1: Home,
|
||||
@@ -114,7 +114,7 @@ const startPolling = () => {
|
||||
console.log(`📊 Found ${samePatientRecords.length} records for same patient:`,
|
||||
samePatientRecords.map(r => `status: ${r.status}`));
|
||||
|
||||
// Now look for final status (success or fail) among same patient records
|
||||
|
||||
const successRecord = samePatientRecords.find(record => record.status === "2");
|
||||
const failRecord = samePatientRecords.find(record => record.status === "0");
|
||||
|
||||
@@ -124,12 +124,12 @@ const startPolling = () => {
|
||||
paymentStore.currentStep = 3;
|
||||
clearInterval(pollingInterval.value);
|
||||
|
||||
// Auto return to home after 5 seconds
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('🏠 Auto return to home');
|
||||
paymentStore.reset();
|
||||
startPolling();
|
||||
}, 10000);
|
||||
}, 20000);
|
||||
|
||||
} else if (failRecord) {
|
||||
console.log('❌ FAIL STATUS FOUND!', failRecord);
|
||||
@@ -137,12 +137,12 @@ const startPolling = () => {
|
||||
paymentStore.currentStep = 4;
|
||||
clearInterval(pollingInterval.value);
|
||||
|
||||
// Auto return to home after 5 seconds
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('🏠 Auto return to home');
|
||||
paymentStore.reset();
|
||||
startPolling();
|
||||
}, 10000);
|
||||
}, 20000);
|
||||
|
||||
} else {
|
||||
console.log('⏳ Still waiting for final status...');
|
||||
@@ -156,7 +156,7 @@ const startPolling = () => {
|
||||
} catch (error) {
|
||||
console.error("❌ Polling error:", error);
|
||||
}
|
||||
}, 10000);
|
||||
}, 20000);
|
||||
|
||||
console.log(`🚀 Polling started - IP-based patient detection`);
|
||||
};
|
||||
@@ -165,7 +165,7 @@ const checkAndRedirect = () => {
|
||||
const savedIp = localStorage.getItem('loketIp');
|
||||
if (!savedIp) {
|
||||
console.warn('IP Address belum diatur. Mengarahkan ke halaman setup.');
|
||||
router.push('/setup-ip');
|
||||
router.push('/setupip');
|
||||
} else {
|
||||
localIpAddress.value = savedIp;
|
||||
console.log('IP Address ditemukan:', savedIp);
|
||||
@@ -189,19 +189,62 @@ onUnmounted(() => {
|
||||
<style scoped>
|
||||
.medical-payment-app {
|
||||
background: linear-gradient(135deg, #ff9248 20%, #ff9248 100%);
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.contact-fullscreen {
|
||||
max-width: none !important;
|
||||
border-radius: 0 !important;
|
||||
height: auto !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.payment-centered {
|
||||
max-width: 500px !important;
|
||||
margin-top: 2rem !important;
|
||||
margin-bottom: 2rem !important;
|
||||
max-width: 1200px !important;
|
||||
width: 100% !important;
|
||||
margin: 1rem auto !important;
|
||||
border-radius: 16px !important;
|
||||
height: auto !important;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
.payment-card {
|
||||
background: rgb(224, 224, 224);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||||
height: auto !important;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 900px) {
|
||||
.payment-centered {
|
||||
max-width: 500px !important;
|
||||
margin: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (min-width: 768px) {
|
||||
.payment-centered {
|
||||
max-width: 1400px !important;
|
||||
margin: 0.5rem auto !important;
|
||||
min-height: calc(100vh - 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-height: 600px) {
|
||||
.medical-payment-app {
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.contact-fullscreen,
|
||||
.payment-centered {
|
||||
min-height: 600px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user