update komponen, stores, desain
This commit is contained in:
bagus-arie05
@@ -0,0 +1,570 @@
|
||||
<template>
|
||||
<div class="contact-page-container">
|
||||
<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"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section-contact">
|
||||
<div class="title-section-contact">
|
||||
<h1 class="main-title-contact">With Love We Serve</h1>
|
||||
<p class="subtitle-contact">
|
||||
Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="banner-carousel-container">
|
||||
<v-carousel
|
||||
v-model="currentSlide"
|
||||
ref="carousel"
|
||||
:show-arrows="true"
|
||||
:hide-delimiters="false"
|
||||
:cycle="false"
|
||||
:interval="5000"
|
||||
class="banner-carousel"
|
||||
height="400"
|
||||
:continuous="false"
|
||||
>
|
||||
<v-carousel-item
|
||||
v-for="(item, index) in carouselItems"
|
||||
:key="index"
|
||||
class="carousel-item"
|
||||
>
|
||||
<template v-if="item.isImage">
|
||||
<v-img :src="item.src" :alt="item.alt" cover class="fill-height">
|
||||
<div class="carousel-overlay">
|
||||
<div class="overlay-content">
|
||||
<h3 class="overlay-title">{{ item.title }}</h3>
|
||||
<p class="overlay-description">{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-img>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="video-container">
|
||||
<iframe
|
||||
v-if="currentSlide === index"
|
||||
:src="getYouTubeEmbedUrl(item.videoId)"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowfullscreen
|
||||
class="youtube-iframe"
|
||||
@load="onVideoLoad"
|
||||
@error="onVideoError"
|
||||
></iframe>
|
||||
|
||||
<div v-else class="video-thumbnail" @click="playVideo(index)">
|
||||
<img
|
||||
:src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
|
||||
alt="Video thumbnail"
|
||||
class="thumbnail-img"
|
||||
/>
|
||||
<div class="play-button-overlay">
|
||||
<v-icon color="white" size="48">mdi-play-circle</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
|
||||
<div class="custom-indicators">
|
||||
<span
|
||||
v-for="(item, index) in carouselItems"
|
||||
:key="index"
|
||||
:class="['indicator-dot', { active: currentSlide === index }]"
|
||||
@click="currentSlide = index"
|
||||
/>
|
||||
</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">
|
||||
<div class="contact-info-section-contact">
|
||||
<div class="contact-item-contact">
|
||||
<div class="contact-icon-contact whatsapp-icon">
|
||||
<v-icon color="#25D366" size="24">mdi-whatsapp</v-icon>
|
||||
</div>
|
||||
<div class="contact-text-contact">+62 815-5560-6668</div>
|
||||
</div>
|
||||
<div class="contact-item-contact">
|
||||
<div class="contact-icon-contact instagram-icon">
|
||||
<v-icon color="#E1306C" size="24">mdi-instagram</v-icon>
|
||||
</div>
|
||||
<div class="contact-text-contact">rssasaifulanwar</div>
|
||||
</div>
|
||||
<div class="contact-item-contact">
|
||||
<div class="contact-icon-contact phone-icon">
|
||||
<v-icon color="#FF9248" size="24">mdi-phone</v-icon>
|
||||
</div>
|
||||
<div class="contact-text-contact">0341-362101</div>
|
||||
</div>
|
||||
<div class="contact-item-contact">
|
||||
<div class="contact-icon-contact web-icon">
|
||||
<v-icon color="#2196F3" size="24">mdi-web</v-icon>
|
||||
</div>
|
||||
<div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onUnmounted } from "vue";
|
||||
import { usePaymentStore } from "~/stores/payment";
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
const currentSlide = ref(0);
|
||||
const carouselInterval = ref(null);
|
||||
const carouselItems = ref([
|
||||
{
|
||||
src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
|
||||
alt: "RSUD Dr. Saiful Anwar Main Building",
|
||||
title: "Fasilitas Modern",
|
||||
description: "Rumah sakit dengan teknologi medis terdepan",
|
||||
isImage: true,
|
||||
},
|
||||
{
|
||||
videoId: "KQZFfRtMHe0",
|
||||
isImage: false,
|
||||
},
|
||||
{
|
||||
src: "https://rsusaifulanwar.jatimprov.go.id/wp-content/uploads/2023/08/siam-2-scaled.jpg",
|
||||
alt: "Medical Services",
|
||||
title: "Pelayanan Terbaik",
|
||||
description: "Tim medis profesional siap melayani 24 jam",
|
||||
isImage: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const getYouTubeEmbedUrl = (videoId) => {
|
||||
const baseUrl = "https://www.youtube.com/embed/";
|
||||
const params = new URLSearchParams({
|
||||
autoplay: "1",
|
||||
mute: "0",
|
||||
controls: "1",
|
||||
modestbranding: "1",
|
||||
rel: "0",
|
||||
showinfo: "0",
|
||||
fs: "1",
|
||||
cc_load_policy: "0",
|
||||
iv_load_policy: "3",
|
||||
autohide: "0",
|
||||
});
|
||||
return `${baseUrl}${videoId}?${params.toString()}`;
|
||||
};
|
||||
|
||||
const onVideoLoad = () => {
|
||||
console.log("Video iframe loaded successfully");
|
||||
};
|
||||
|
||||
const onVideoError = (error) => {
|
||||
console.error("Video iframe error:", error);
|
||||
};
|
||||
|
||||
const startCarousel = () => {
|
||||
if (carouselInterval.value) {
|
||||
clearInterval(carouselInterval.value);
|
||||
}
|
||||
carouselInterval.value = setInterval(() => {
|
||||
const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
|
||||
currentSlide.value = nextSlide;
|
||||
}, 10000);
|
||||
};
|
||||
|
||||
const stopCarousel = () => {
|
||||
if (carouselInterval.value) {
|
||||
clearInterval(carouselInterval.value);
|
||||
carouselInterval.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const playVideo = (index) => {
|
||||
currentSlide.value = index;
|
||||
stopCarousel();
|
||||
};
|
||||
|
||||
watch(currentSlide, (newSlide) => {
|
||||
const currentItem = carouselItems.value[newSlide];
|
||||
if (currentItem && !currentItem.isImage) {
|
||||
console.log("Video detected, stopping carousel");
|
||||
stopCarousel();
|
||||
} else {
|
||||
console.log("Image detected, starting carousel");
|
||||
startCarousel();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
startCarousel();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopCarousel();
|
||||
});
|
||||
|
||||
const startDebugPayment = () => {
|
||||
console.log("Simulasi Pembayaran (Debug) dimulai.");
|
||||
|
||||
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",
|
||||
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;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contact-page-container {
|
||||
min-height: auto;
|
||||
width: 100%;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.orange-background-contact {
|
||||
width: 100%;
|
||||
height: clamp(80px, 12vh, 180px);
|
||||
background: #ff9248;
|
||||
border-top-left-radius: 40px;
|
||||
border-top-right-radius: 40px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 10px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.logo-section-contact {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-group-contact {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-img-contact {
|
||||
transition: transform 0.3s ease;
|
||||
width: clamp(20px, 5vw, 50px) !important;
|
||||
height: clamp(20px, 5vw, 50px) !important;
|
||||
}
|
||||
|
||||
.logo-img-contact:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.content-section-contact {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.title-section-contact {
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.main-title-contact {
|
||||
color: #ff9248;
|
||||
font-size: clamp(2rem, 2vw, 1.5rem);
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 800;
|
||||
margin-bottom: 8px;
|
||||
line-height: 0.8;
|
||||
}
|
||||
|
||||
.subtitle-contact {
|
||||
color: black;
|
||||
font-size: clamp(0.8rem, 1.8vw, 1rem);
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.banner-carousel-container {
|
||||
width: 95%;
|
||||
max-width: 800px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.banner-carousel {
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
height: clamp(400px, 45vh, 400px);
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* PASTIKAN INI ADA untuk membatasi iframe */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.youtube-iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.thumbnail-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
object-fit: cover;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.video-thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.thumbnail-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.play-button-overlay {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 50%;
|
||||
padding: 15px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.play-button-overlay:hover {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
|
||||
.carousel-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||
color: white;
|
||||
padding: 30px 20px 20px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.overlay-title {
|
||||
font-size: clamp(1.2rem, 1.8vw, 1.6rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.overlay-description {
|
||||
font-size: clamp(0.8rem, 1.3vw, 1rem);
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.custom-indicators {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.indicator-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.indicator-dot.active {
|
||||
background: #ff9248;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.indicator-dot:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.contact-info-section-contact {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-item-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.contact-icon-contact {
|
||||
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;
|
||||
justify-content: center;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-icon-contact:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.contact-text-contact {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cta-section-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.debug-button {
|
||||
background: #808080 !important;
|
||||
}
|
||||
|
||||
:deep(.v-carousel__controls) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.v-carousel__controls--bottom) {
|
||||
bottom: 40px !important;
|
||||
}
|
||||
</style>
|
||||
+883
-261
File diff suppressed because it is too large
Load Diff
+187
-105
@@ -1,31 +1,54 @@
|
||||
<template>
|
||||
<div class="payment-step">
|
||||
<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"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="payment-wrapper">
|
||||
<v-card-text class="payment-content text-center">
|
||||
<div class="failure-container">
|
||||
<div class="icon-container mb-6">
|
||||
<v-icon icon="mdi-close-circle" size="100" class="text-red animated-icon" />
|
||||
<div class="icon-container">
|
||||
<v-icon
|
||||
icon="mdi-account-clock-outline"
|
||||
size="100"
|
||||
class="text-grey 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.
|
||||
|
||||
<h2 class="failure-title">Pembayaran Pending</h2>
|
||||
|
||||
<p class="failure-message">
|
||||
Pembayaran Anda ditunda.
|
||||
</p>
|
||||
<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>
|
||||
|
||||
|
||||
<!-- Uncomment jika butuh buttons -->
|
||||
<!-- <div class="button-group">
|
||||
<v-btn
|
||||
@@ -34,7 +57,7 @@
|
||||
variant="flat"
|
||||
rounded="xl"
|
||||
@click="retryPayment"
|
||||
class="action-btn mb-3"
|
||||
class="action-btn"
|
||||
>
|
||||
Coba Lagi
|
||||
</v-btn>
|
||||
@@ -56,31 +79,49 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePaymentStore } from '~/stores/payment';
|
||||
import { usePaymentStore } from "~/stores/payment";
|
||||
const paymentStore = usePaymentStore();
|
||||
|
||||
const retryPayment = () => {
|
||||
console.log("Mencoba pembayaran lagi...");
|
||||
paymentStore.setPaymentStatus('aktif');
|
||||
paymentStore.setPaymentStatus("aktif");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.payment-step {
|
||||
background: #ff9248;
|
||||
background: #ff9248;
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.logo-section-contact {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 24px;
|
||||
padding: 1rem 1rem;
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo-group-contact {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.payment-wrapper {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.payment-content {
|
||||
@@ -88,10 +129,7 @@ const retryPayment = () => {
|
||||
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); */
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
padding: 3rem 2rem !important;
|
||||
}
|
||||
|
||||
@@ -103,7 +141,7 @@ const retryPayment = () => {
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.animated-icon {
|
||||
@@ -112,36 +150,38 @@ const retryPayment = () => {
|
||||
}
|
||||
|
||||
@keyframes errorPulse {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #f44336 !important;
|
||||
.text-grey {
|
||||
color: #817f7e !important;
|
||||
}
|
||||
|
||||
.failure-title {
|
||||
font-size: 2.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
|
||||
background:#777676 ;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1.2;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.failure-message {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
@@ -150,10 +190,7 @@ const retryPayment = () => {
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.action-section {
|
||||
margin-top: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@@ -167,92 +204,137 @@ const retryPayment = () => {
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
/* Portrait Phone - Small */
|
||||
@media (max-width: 480px) and (orientation: portrait) {
|
||||
.payment-step {
|
||||
padding: 1rem 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.payment-wrapper {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.payment-content {
|
||||
padding: 2rem 1.5rem !important;
|
||||
padding: 2rem 1.25rem !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;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
|
||||
.failure-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.icon-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape Tablet Optimization */
|
||||
@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
|
||||
.payment-step {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
/* Portrait Phone - Medium */
|
||||
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
|
||||
.payment-content {
|
||||
padding: 2rem !important;
|
||||
padding: 2.5rem 1.5rem !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;
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Tablet Landscape */
|
||||
@media (orientation: landscape) and (min-width: 1024px) {
|
||||
/* Portrait Tablet */
|
||||
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
|
||||
.payment-step {
|
||||
padding: 2rem;
|
||||
}
|
||||
.logo-section-contact {
|
||||
padding: 20px 12px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.logo-img-contact {
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
}
|
||||
|
||||
.payment-wrapper {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.failure-title {
|
||||
font-size: 2.2rem;
|
||||
|
||||
.payment-content {
|
||||
padding: 3.5rem 2.5rem !important;
|
||||
}
|
||||
|
||||
|
||||
.animated-icon {
|
||||
font-size: 120px !important;
|
||||
}
|
||||
|
||||
.failure-title {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.failure-message {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
/* Landscape Mode - Compact */
|
||||
@media (max-height: 600px) and (orientation: landscape) {
|
||||
.payment-step {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.payment-content {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.animated-icon {
|
||||
font-size: 70px !important;
|
||||
}
|
||||
|
||||
.failure-title {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.failure-message {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape Tablet */
|
||||
@media (min-width: 768px) and (orientation: landscape) {
|
||||
.payment-wrapper {
|
||||
max-width: 650px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very Small Screens */
|
||||
@media (max-width: 360px) {
|
||||
.payment-content {
|
||||
padding: 1.5rem 1rem !important;
|
||||
}
|
||||
|
||||
.animated-icon {
|
||||
font-size: 70px !important;
|
||||
}
|
||||
|
||||
.failure-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.failure-message {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+169
-254
@@ -1,131 +1,167 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<template>
|
||||
<div class="success-wrapper">
|
||||
<div class="success-container">
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div class="success-wrapper">
|
||||
<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"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="success-container">
|
||||
<div class="success-icon-container">
|
||||
<div class="success-icon-bg">
|
||||
<v-icon icon="mdi-check-circle" size="100" class="success-icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="success-content">
|
||||
<h2 class="success-title">Pembayaran Berhasil</h2>
|
||||
|
||||
<div class="success-message">
|
||||
<p class="message-line">Silahkan Menunggu Bukti Pembayaran</p>
|
||||
</div>
|
||||
|
||||
<!-- Payment Details Summary -->
|
||||
<div class="payment-summary" v-if="paymentStore.patientInfo">
|
||||
<div class="summary-card">
|
||||
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">Nomor RM:</span>
|
||||
<span class="summary-value">{{
|
||||
paymentStore.qrData.display_norm || '-'
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="summary-row">
|
||||
<span class="summary-label">No. Billing:</span>
|
||||
<span class="summary-value">{{
|
||||
paymentStore.qrData.display_nobill || '-'
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { usePaymentStore } from '~/stores/payment';
|
||||
import { usePaymentStore } from "~/stores/payment";
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
return new Intl.NumberFormat('id-ID', {
|
||||
style: 'currency',
|
||||
currency: 'IDR',
|
||||
minimumFractionDigits: 0
|
||||
const formatCurrency = (amountString) => {
|
||||
const cleanString = amountString.replace(/\./g, "").replace(",", ".");
|
||||
const amount = parseFloat(cleanString);
|
||||
|
||||
if (isNaN(amount)) {
|
||||
return "Invalid Amount";
|
||||
}
|
||||
|
||||
return new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
minimumFractionDigits: 0,
|
||||
}).format(amount);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.payment-step {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
|
||||
.success-wrapper {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
margin: 80px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.logo-section-contact {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 24px;
|
||||
padding: 1rem 1rem;
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.success-wrapper {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0;
|
||||
padding: 0rem;
|
||||
.logo-group-contact {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.success-container {
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 24px;
|
||||
padding: 0.5rem 0.5rem;
|
||||
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); */
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* Success Icon Animation */
|
||||
.success-icon-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.success-icon-bg {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
animation: successPulse 2s ease-in-out infinite;
|
||||
}
|
||||
@@ -136,83 +172,24 @@ const formatCurrency = (amount) => {
|
||||
}
|
||||
|
||||
@keyframes successPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.9;
|
||||
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-size: 2rem;
|
||||
font-weight: 800;
|
||||
color: #1a1a1a;
|
||||
background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
|
||||
@@ -220,30 +197,30 @@ const formatCurrency = (amount) => {
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
line-height: 2;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.message-line {
|
||||
margin: 0;
|
||||
padding: 0.25rem 0;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
/* Payment Summary */
|
||||
.payment-summary {
|
||||
margin: 1rem 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: rgba(76, 175, 80, 0.06);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
@@ -269,6 +246,7 @@ const formatCurrency = (amount) => {
|
||||
color: #1a1a1a;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.summary-value.amount {
|
||||
@@ -276,106 +254,43 @@ const formatCurrency = (amount) => {
|
||||
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;
|
||||
}
|
||||
|
||||
/* Portrait Tablet */
|
||||
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
|
||||
.success-wrapper {
|
||||
padding: 0 0.5rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.success-container {
|
||||
padding: 2rem 1.5rem;
|
||||
.logo-section-contact {
|
||||
padding: 20px 12px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 80px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo-img-contact {
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
}
|
||||
.success-container {
|
||||
padding: 2rem 1rem;
|
||||
max-width: 700px;
|
||||
padding: 3.5rem 2.5rem;
|
||||
}
|
||||
|
||||
|
||||
.success-icon {
|
||||
font-size: 120px !important;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 1.8rem;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
|
||||
.success-message {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
min-width: 100%;
|
||||
margin-top: 1rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape Tablet */
|
||||
@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
|
||||
.payment-step {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (orientation: landscape) {
|
||||
.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;
|
||||
max-width: 650px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -0,0 +1,901 @@
|
||||
<template>
|
||||
<div class="payment-step">
|
||||
<v-card-text class="main-content pa-4">
|
||||
<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>
|
||||
|
||||
<div class="main-content-section mb-8">
|
||||
<div class="content-grid">
|
||||
<div class="qr-section">
|
||||
<div class="qr-container">
|
||||
<div class="qris-logo-container mb-0">
|
||||
<v-img
|
||||
src="/rssalogo.png"
|
||||
height="60"
|
||||
class="RSSA-logo"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="/bankjatimlogo.png"
|
||||
height="30"
|
||||
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>
|
||||
|
||||
<div class="scan-line" v-if="qrLoaded"></div>
|
||||
<div>
|
||||
<v-img
|
||||
src="/qrislogo.png"
|
||||
height="50"
|
||||
class="qris-logo mb-n4 mt-n2"
|
||||
contain
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="qr-instructions text-center mt-4">
|
||||
<v-icon size="20" color="primary" class="mb-2"
|
||||
>mdi-qrcode-scan</v-icon
|
||||
>
|
||||
<p class="instruction-text">Arahkan kamera ke QR code</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-split">
|
||||
<div class="detail-column">
|
||||
<div class="detail-label">
|
||||
<v-icon size="18" class="mr-2" color="primary"
|
||||
>mdi-card-account-details-outline</v-icon
|
||||
>
|
||||
No RM
|
||||
</div>
|
||||
<div class="detail-value">
|
||||
{{
|
||||
paymentStore.qrData.display_nobill?.split("/")[0] || "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-column">
|
||||
<div class="detail-label">
|
||||
<v-icon size="18" class="mr-2" color="primary"
|
||||
>mdi-file-document-outline</v-icon
|
||||
>
|
||||
No Billing
|
||||
</div>
|
||||
<div class="detail-value">
|
||||
{{
|
||||
paymentStore.qrData.display_nobill?.split("/")[1] || "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
{{ expiryDisplayTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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="success"
|
||||
variant="flat"
|
||||
size="large"
|
||||
class="action-btn"
|
||||
@click="simulateSuccess"
|
||||
>
|
||||
<v-icon class="mr-2">mdi-check-circle-outline</v-icon>
|
||||
Simulasi Sukses
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
color="error"
|
||||
variant="flat"
|
||||
size="large"
|
||||
class="action-btn"
|
||||
@click="simulateFailure"
|
||||
>
|
||||
<v-icon class="mr-2">mdi-close-circle-outline</v-icon>
|
||||
Simulasi Gagal
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- <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, onBeforeUnmount } from "vue";
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
const qrCodeImage = ref(null);
|
||||
const qrLoaded = ref(false);
|
||||
|
||||
const EXPIRY_MINUTES = 1440;
|
||||
const expiryDisplayTime = ref("Menghitung...");
|
||||
let countdownInterval = null;
|
||||
|
||||
const calculateExpiryDate = (createdAt) => {
|
||||
if (!createdAt) return null;
|
||||
|
||||
try {
|
||||
const createdDate = new Date(createdAt);
|
||||
if (isNaN(createdDate.getTime())) return null;
|
||||
|
||||
return new Date(createdDate.getTime() + EXPIRY_MINUTES * 60000);
|
||||
} catch (e) {
|
||||
console.error("Error calculating expiry time:", e);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const formatTimeLeft = (seconds) => {
|
||||
if (seconds <= 0) {
|
||||
clearInterval(countdownInterval);
|
||||
return "KEDALUWARSA";
|
||||
}
|
||||
|
||||
const h = String(Math.floor(seconds / 3600)).padStart(2, "0");
|
||||
const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, "0");
|
||||
const s = String(seconds % 60).padStart(2, "0");
|
||||
return `${h}:${m}:${s}`;
|
||||
};
|
||||
|
||||
// Memulai fungsi hitung mundur
|
||||
const startCountdown = (expiryDate) => {
|
||||
if (!expiryDate) {
|
||||
expiryDisplayTime.value = "Waktu tidak valid";
|
||||
return;
|
||||
}
|
||||
|
||||
// Hentikan interval sebelumnya jika ada
|
||||
if (countdownInterval) {
|
||||
clearInterval(countdownInterval);
|
||||
}
|
||||
|
||||
const updateCountdown = () => {
|
||||
const now = new Date().getTime();
|
||||
const timeRemainingMs = expiryDate.getTime() - now;
|
||||
const timeRemainingSeconds = Math.max(
|
||||
0,
|
||||
Math.floor(timeRemainingMs / 1000)
|
||||
);
|
||||
|
||||
expiryDisplayTime.value = formatTimeLeft(timeRemainingSeconds);
|
||||
};
|
||||
|
||||
updateCountdown();
|
||||
|
||||
countdownInterval = setInterval(updateCountdown, 1000);
|
||||
};
|
||||
|
||||
// Membersihkan interval saat komponen dihancurkan
|
||||
onBeforeUnmount(() => {
|
||||
if (countdownInterval) {
|
||||
clearInterval(countdownInterval);
|
||||
}
|
||||
});
|
||||
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const simulateSuccess = () => {
|
||||
console.log("--- DEBUG: SIMULASI SUKSES ---");
|
||||
const currentData = paymentStore.qrData;
|
||||
|
||||
// Simulasikan data status SUKSES (status "2")
|
||||
const successData = {
|
||||
data: [
|
||||
{
|
||||
...currentData,
|
||||
status: "2",
|
||||
transaction_id: `TRX-SIM-SUKSES-${Date.now()}`,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
paymentStore.updatePayment(successData);
|
||||
};
|
||||
|
||||
const simulateFailure = () => {
|
||||
console.log("--- DEBUG: SIMULASI GAGAL ---");
|
||||
const currentData = paymentStore.qrData;
|
||||
|
||||
// Simulasikan data status GAGAL (status "0")
|
||||
const failureData = {
|
||||
data: [
|
||||
{
|
||||
...currentData,
|
||||
status: "0",
|
||||
reason: "SIMULASI: Transaksi dibatalkan atau kedaluwarsa.",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
paymentStore.updatePayment(failureData);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
generateQRCode();
|
||||
|
||||
// Hitung tanggal kedaluwarsa awal dan mulai hitung mundur
|
||||
const createdAt = paymentStore.qrData.created_at;
|
||||
if (createdAt) {
|
||||
const expiryDate = calculateExpiryDate(createdAt);
|
||||
startCountdown(expiryDate);
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => paymentStore.qrData,
|
||||
(newQrData) => {
|
||||
generateQRCode();
|
||||
|
||||
const createdAt = newQrData.created_at;
|
||||
if (createdAt) {
|
||||
const expiryDate = calculateExpiryDate(createdAt);
|
||||
startCountdown(expiryDate); // Mulai hitung mundur setiap kali data QR berubah
|
||||
console.log(`[QRISPayment] Waktu kedaluwarsa diperbarui.`);
|
||||
} else {
|
||||
expiryDisplayTime.value = "Data Waktu Tidak Tersedia";
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
<style scoped>
|
||||
.payment-step {
|
||||
background: #ff9248;
|
||||
}
|
||||
.main-content {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
|
||||
/* min-height: 100vh; */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 16px;
|
||||
height: fit-content;
|
||||
}
|
||||
/* Header Section */
|
||||
.header-section {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.qris-logo-container {
|
||||
display: flex;
|
||||
gap: 0rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qris-logo {
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
|
||||
transition: transform 0.3s ease;
|
||||
align-items: baseline;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.RSSA-logo {
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
|
||||
transition: transform 0.3s ease;
|
||||
align-items: end;
|
||||
margin-right: -50px !important;
|
||||
}
|
||||
|
||||
.qris-logo:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.payment-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
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: 0.5rem;
|
||||
align-items: start;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 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: 1rem;
|
||||
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;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.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: 1.5rem;
|
||||
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: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
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.4rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.detail-row-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
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-split:hover {
|
||||
background: rgba(248, 250, 252, 0.9);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.detail-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.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>
|
||||
+327
-228
@@ -9,19 +9,20 @@
|
||||
</div>
|
||||
|
||||
<div class="main-content-section mb-8">
|
||||
<div class="content-grid">
|
||||
<div :class="isPortrait ? 'content-stack' : 'content-grid'">
|
||||
<!-- QR Section -->
|
||||
<div class="qr-section">
|
||||
<div class="qr-container">
|
||||
<div class="qris-logo-container mb-0">
|
||||
<div class="qris-logo-container mb-4">
|
||||
<v-img
|
||||
src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
|
||||
height="60"
|
||||
src="/rssalogo.png"
|
||||
:height="isPortrait ? 100 : 60"
|
||||
class="RSSA-logo"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://ottocash.id/wp-content/uploads/2022/08/qris.png"
|
||||
height="60"
|
||||
src="/bankjatimlogo.png"
|
||||
:height="isPortrait ? 50 : 30"
|
||||
class="qris-logo"
|
||||
contain
|
||||
/>
|
||||
@@ -42,22 +43,28 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qr-brand-label">
|
||||
<span>QRIS</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scan-line" v-if="qrLoaded"></div>
|
||||
<div>
|
||||
<v-img
|
||||
src="/qrislogo.png"
|
||||
:height="isPortrait ? 70 : 50"
|
||||
class="qris-logo mb-n3 mt-n2"
|
||||
contain
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="qr-instructions text-center mt-4">
|
||||
<v-icon size="20" color="primary" class="mb-2"
|
||||
>mdi-qrcode-scan</v-icon
|
||||
>
|
||||
<p class="instruction-text">Arahkan kamera ke QR code</p>
|
||||
<div class="instruction-text">Arahkan kamera ke QR code</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details Section -->
|
||||
<div class="details-section">
|
||||
<div class="payment-details-card">
|
||||
<div class="details-header">
|
||||
@@ -68,6 +75,31 @@
|
||||
</div>
|
||||
|
||||
<div class="details-content">
|
||||
<div class="detail-row-split">
|
||||
<div class="detail-column">
|
||||
<div class="detail-label">
|
||||
<v-icon size="18" class="mr-2" color="primary"
|
||||
>mdi-card-account-details-outline</v-icon
|
||||
>
|
||||
No RM
|
||||
</div>
|
||||
<div class="detail-value">
|
||||
{{ paymentStore.qrData.display_norm || "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-column">
|
||||
<div class="detail-label">
|
||||
<v-icon size="18" class="detail-icon mr-2" color="primary"
|
||||
>mdi-file-document-outline</v-icon
|
||||
>
|
||||
No Billing
|
||||
</div>
|
||||
<div class="detail-value">
|
||||
{{ paymentStore.qrData.display_nobill || "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">
|
||||
<v-icon size="18" class="mr-2" color="primary"
|
||||
@@ -76,7 +108,12 @@
|
||||
Nama Pasien
|
||||
</div>
|
||||
<div class="detail-value patient-name">
|
||||
{{ paymentStore.patientInfo.name }}
|
||||
{{
|
||||
paymentStore.patientInfo.name &&
|
||||
paymentStore.patientInfo.name.length > 28
|
||||
? paymentStore.patientInfo.name.substring(0, 25) + "..."
|
||||
: paymentStore.patientInfo.name
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -92,18 +129,6 @@
|
||||
</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"
|
||||
@@ -165,42 +190,33 @@
|
||||
@click="simulateFailure"
|
||||
>
|
||||
<v-icon class="mr-2">mdi-close-circle-outline</v-icon>
|
||||
Simulasi Gagal
|
||||
Simulasi Pending
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- <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, onBeforeUnmount } from "vue";
|
||||
import { ref, onMounted, watch, onBeforeUnmount, computed } from "vue";
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
const qrCodeImage = ref(null);
|
||||
const qrLoaded = ref(false);
|
||||
const windowWidth = ref(window.innerWidth);
|
||||
const windowHeight = ref(window.innerHeight);
|
||||
|
||||
const isPortrait = computed(() => windowHeight.value > windowWidth.value);
|
||||
const qrSize = computed(() => (isPortrait.value ? 280 : 240));
|
||||
|
||||
const EXPIRY_MINUTES = 1440;
|
||||
const expiryDisplayTime = ref("Menghitung...");
|
||||
let countdownInterval = null;
|
||||
|
||||
const calculateExpiryDate = (createdAt) => {
|
||||
if (!createdAt) return null;
|
||||
|
||||
try {
|
||||
const createdDate = new Date(createdAt);
|
||||
if (isNaN(createdDate.getTime())) return null;
|
||||
|
||||
return new Date(createdDate.getTime() + EXPIRY_MINUTES * 60000);
|
||||
} catch (e) {
|
||||
console.error("Error calculating expiry time:", e);
|
||||
return null;
|
||||
}
|
||||
const handleResize = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
windowHeight.value = window.innerHeight;
|
||||
};
|
||||
|
||||
const formatTimeLeft = (seconds) => {
|
||||
@@ -215,14 +231,21 @@ const formatTimeLeft = (seconds) => {
|
||||
return `${h}:${m}:${s}`;
|
||||
};
|
||||
|
||||
// Memulai fungsi hitung mundur
|
||||
const startCountdown = (expiryDate) => {
|
||||
if (!expiryDate) {
|
||||
/**
|
||||
* Memulai hitungan mundur berdasarkan string waktu kedaluwarsa (expired_at).
|
||||
* @param {string} expiryTimeString - String waktu kedaluwarsa, misal: "2025-10-29 13:10:49".
|
||||
*/
|
||||
const startCountdown = (expiryTimeString) => {
|
||||
const isoDateString = expiryTimeString
|
||||
? expiryTimeString.replace(" ", "T")
|
||||
: null;
|
||||
const expiryDate = isoDateString ? new Date(isoDateString) : null;
|
||||
|
||||
if (!expiryDate || isNaN(expiryDate.getTime())) {
|
||||
expiryDisplayTime.value = "Waktu tidak valid";
|
||||
return;
|
||||
}
|
||||
|
||||
// Hentikan interval sebelumnya jika ada
|
||||
if (countdownInterval) {
|
||||
clearInterval(countdownInterval);
|
||||
}
|
||||
@@ -230,6 +253,7 @@ const startCountdown = (expiryDate) => {
|
||||
const updateCountdown = () => {
|
||||
const now = new Date().getTime();
|
||||
const timeRemainingMs = expiryDate.getTime() - now;
|
||||
|
||||
const timeRemainingSeconds = Math.max(
|
||||
0,
|
||||
Math.floor(timeRemainingMs / 1000)
|
||||
@@ -243,14 +267,21 @@ const startCountdown = (expiryDate) => {
|
||||
countdownInterval = setInterval(updateCountdown, 1000);
|
||||
};
|
||||
|
||||
// Membersihkan interval saat komponen dihancurkan
|
||||
onBeforeUnmount(() => {
|
||||
if (countdownInterval) {
|
||||
clearInterval(countdownInterval);
|
||||
}
|
||||
window.removeEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
const formatCurrency = (amountString) => {
|
||||
const cleanString = amountString.replace(/\./g, "").replace(",", ".");
|
||||
const amount = parseFloat(cleanString);
|
||||
|
||||
if (isNaN(amount)) {
|
||||
return "Invalid Amount";
|
||||
}
|
||||
|
||||
return new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
@@ -264,7 +295,7 @@ const generateQRCode = async () => {
|
||||
try {
|
||||
qrLoaded.value = false;
|
||||
const dataUrl = await QRCode.toDataURL(qrValue, {
|
||||
width: 240,
|
||||
width: qrSize.value,
|
||||
margin: 1,
|
||||
color: {
|
||||
dark: "#000000",
|
||||
@@ -288,7 +319,6 @@ const simulateSuccess = () => {
|
||||
console.log("--- DEBUG: SIMULASI SUKSES ---");
|
||||
const currentData = paymentStore.qrData;
|
||||
|
||||
// Simulasikan data status SUKSES (status "2")
|
||||
const successData = {
|
||||
data: [
|
||||
{
|
||||
@@ -306,7 +336,6 @@ const simulateFailure = () => {
|
||||
console.log("--- DEBUG: SIMULASI GAGAL ---");
|
||||
const currentData = paymentStore.qrData;
|
||||
|
||||
// Simulasikan data status GAGAL (status "0")
|
||||
const failureData = {
|
||||
data: [
|
||||
{
|
||||
@@ -317,19 +346,16 @@ const simulateFailure = () => {
|
||||
],
|
||||
};
|
||||
|
||||
// Update store Pinia. Watcher di index.vue akan memicu transisi ke Step 4.
|
||||
paymentStore.updatePayment(failureData);
|
||||
};
|
||||
// ------------------------------------
|
||||
|
||||
onMounted(() => {
|
||||
generateQRCode();
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
// Hitung tanggal kedaluwarsa awal dan mulai hitung mundur
|
||||
const createdAt = paymentStore.qrData.created_at;
|
||||
if (createdAt) {
|
||||
const expiryDate = calculateExpiryDate(createdAt);
|
||||
startCountdown(expiryDate);
|
||||
const expiryTimeString = paymentStore.qrData.expired_at;
|
||||
if (expiryTimeString) {
|
||||
startCountdown(expiryTimeString);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -338,32 +364,37 @@ watch(
|
||||
(newQrData) => {
|
||||
generateQRCode();
|
||||
|
||||
// LOGIKA PERHITUNGAN WAKTU KEDALUWARSA
|
||||
const createdAt = newQrData.created_at;
|
||||
if (createdAt) {
|
||||
const expiryDate = calculateExpiryDate(createdAt);
|
||||
startCountdown(expiryDate); // Mulai hitung mundur setiap kali data QR berubah
|
||||
console.log(`[QRISPayment] Waktu kedaluwarsa diperbarui.`);
|
||||
const expiryTimeString = newQrData.expired_at;
|
||||
if (expiryTimeString) {
|
||||
startCountdown(expiryTimeString);
|
||||
console.log(
|
||||
`[QRISPayment] Waktu kedaluwarsa diperbarui: ${expiryTimeString}`
|
||||
);
|
||||
} else {
|
||||
expiryDisplayTime.value = "Data Waktu Tidak Tersedia";
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
watch(isPortrait, () => {
|
||||
generateQRCode();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.payment-step {
|
||||
background: #ff9248;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
|
||||
/* min-height: 100vh; */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 16px;
|
||||
height: fit-content;
|
||||
}
|
||||
/* Header Section */
|
||||
|
||||
.header-section {
|
||||
padding-top: 0px;
|
||||
}
|
||||
@@ -380,7 +411,7 @@ watch(
|
||||
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
|
||||
transition: transform 0.3s ease;
|
||||
align-items: baseline;
|
||||
margin-right: 25px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.RSSA-logo {
|
||||
@@ -390,10 +421,6 @@ watch(
|
||||
margin-right: -50px !important;
|
||||
}
|
||||
|
||||
.qris-logo:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.payment-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
@@ -412,21 +439,10 @@ watch(
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Main Content Grid Layout */
|
||||
.main-content-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: start;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* QR Code Section */
|
||||
.qr-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -439,10 +455,10 @@ watch(
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
position: relative;
|
||||
position: center;
|
||||
background: linear-gradient(145deg, #ffffff, #f0f4f8);
|
||||
border-radius: 24px;
|
||||
padding: 2rem;
|
||||
padding: 1rem;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.08),
|
||||
0 8px 16px rgba(0, 0, 0, 0.04),
|
||||
@@ -450,7 +466,7 @@ watch(
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.qr-wrapper {
|
||||
@@ -459,23 +475,20 @@ watch(
|
||||
}
|
||||
|
||||
.qr-code-bg {
|
||||
background: #ffffff;
|
||||
background: #00000000;
|
||||
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;
|
||||
transform 0.3s ease,
|
||||
width 0.3s ease,
|
||||
height 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
@@ -494,27 +507,12 @@ watch(
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(248, 250, 252, 0.9);
|
||||
background: rgba(48, 72, 97, 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;
|
||||
@@ -536,7 +534,6 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
/* QR Instructions */
|
||||
.qr-instructions {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
@@ -545,12 +542,11 @@ watch(
|
||||
|
||||
.instruction-text {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Payment Details Card */
|
||||
.payment-details-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 20px;
|
||||
@@ -600,6 +596,32 @@ watch(
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.detail-row-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
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-split:hover {
|
||||
background: rgba(248, 250, 252, 0.9);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.detail-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.highlight-row {
|
||||
background: rgba(46, 204, 113, 0.08) !important;
|
||||
border: 1px solid rgba(46, 204, 113, 0.2) !important;
|
||||
@@ -622,7 +644,7 @@ watch(
|
||||
.detail-value {
|
||||
color: #1a1a1a;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -631,6 +653,10 @@ watch(
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.details-icon {
|
||||
size: 18;
|
||||
}
|
||||
|
||||
.detail-value.amount {
|
||||
color: #27ae60;
|
||||
font-size: 1.4rem;
|
||||
@@ -642,7 +668,6 @@ watch(
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Payment Status */
|
||||
.payment-status {
|
||||
padding: 1rem;
|
||||
background: rgba(255, 193, 7, 0.08);
|
||||
@@ -662,14 +687,6 @@ watch(
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Status Indicator */
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@@ -699,11 +716,11 @@ watch(
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
transition: flex-direction 0.3s ease;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@@ -720,123 +737,205 @@ watch(
|
||||
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 {
|
||||
.action-btn:not(.back-btn):hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(46, 204, 113, 0.4) !important;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !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%;
|
||||
}
|
||||
|
||||
/* PORTRAIT MODE */
|
||||
@media (orientation: portrait) {
|
||||
.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;
|
||||
font-size: 2.5rem;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.payment-subtitle {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
padding: 1.5rem;
|
||||
.content-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.qr-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
max-width: fit-content;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.qr-code-bg {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.RSSA-logo {
|
||||
margin-right: -40px !important;
|
||||
}
|
||||
|
||||
.qris-logo {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.scan-line {
|
||||
top: 2.5rem;
|
||||
}
|
||||
|
||||
.qr-instructions {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.qr-instructions .v-icon {
|
||||
font-size: 40px !important;
|
||||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
}
|
||||
.instruction-text {
|
||||
color: #666;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.details-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.details-icon {
|
||||
size: 20 !important;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.detail-label .v-icon {
|
||||
font-size: 25px !important;
|
||||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 1.8rem;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.detail-value.patient-name {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.detail-value.amount {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.detail-value.expired {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #f39c12;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 100%;
|
||||
padding: 0 1.5rem !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* LANDSCAPE MODE */
|
||||
@media (orientation: landscape) {
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: start;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.qr-container {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.scan-line {
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small portrait */
|
||||
/* @media (max-width: 480px) and (orientation: portrait) {
|
||||
.qr-container {
|
||||
padding: 1rem;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.qr-code-bg {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.payment-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.payment-details-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.details-title {
|
||||
font-size: rem;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.detail-value.amount {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
import localforage from "localforage"
|
||||
import type { FileInfo } from '~/types/serverFiles'
|
||||
|
||||
export function useFileSync() {
|
||||
const fileServer = ref<FileInfo[]>([])
|
||||
const fileLocal = ref<{ name: string; blob: Blob; type: string; url: string }[]>([])
|
||||
const errorMsg = ref<string | null>(null)
|
||||
const isSyncing = ref(false)
|
||||
|
||||
// buat instance localforage langsung di sini
|
||||
const localStore = localforage.createInstance({
|
||||
name: 'nuxt-offline',
|
||||
storeName: 'file-store',
|
||||
})
|
||||
|
||||
|
||||
// cek file server
|
||||
const fetchServerFiles = async () => {
|
||||
try {
|
||||
const { data, error } = await useFetch<FileInfo[]>('/api/serverFile/files')
|
||||
if (error.value) throw error.value
|
||||
const sortedFiles = data.value?.sort((a, b) => a.name.localeCompare(b.name)) || []
|
||||
fileServer.value = sortedFiles
|
||||
|
||||
return fileServer.value
|
||||
} catch (err: any) {
|
||||
errorMsg.value = err.message || 'Gagal mengambil data file'
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
//cek indexedDB
|
||||
const getLocalMeta = async (name: string) => {
|
||||
return await localStore.getItem<{ modified: string, size: number }>(`${name}-meta`)
|
||||
}
|
||||
|
||||
|
||||
//Simpan ke IndexedDB
|
||||
|
||||
const saveToIndexedDB = async (file: FileInfo, blob: Blob) => {
|
||||
console.log('Downloaded file to save:', blob);
|
||||
|
||||
await localStore.setItem(file.name, blob)
|
||||
await localStore.setItem(`${file.name}-meta`, {
|
||||
modified: file.modified,
|
||||
size: file.size,
|
||||
typeFile: file.ext
|
||||
})
|
||||
}
|
||||
const downloadFile = async (file: FileInfo) => {
|
||||
const response = await fetch(`/api/serverFile/${file.name}`)
|
||||
if (!response.ok) throw new Error(`Gagal download ${file.name}`)
|
||||
const blob = await response.blob()
|
||||
|
||||
// console.log('blob server', blob ,file.name,file.ext)
|
||||
await saveToIndexedDB(file, blob)
|
||||
}
|
||||
const removeFiles = async (prefix: string) => {
|
||||
|
||||
const IndexedDBKeys: string[] = []
|
||||
|
||||
// Ambil semua key dulu
|
||||
await localStore.iterate((_value, key) => {
|
||||
IndexedDBKeys.push(key)
|
||||
})
|
||||
|
||||
// console.log('Removing files with prefix:', IndexedDBKeys)
|
||||
for (const key of IndexedDBKeys) {
|
||||
const baseName = key.split('-')[0].split('.')[0]
|
||||
// console.log('Checking key:', key, 'Base name:', baseName)
|
||||
|
||||
if (baseName.startsWith(prefix)) {
|
||||
await localStore.removeItem(key)
|
||||
console.log('Removed:', key)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper MIME
|
||||
const mimeFromExt = (ext: string) => {
|
||||
const e = ext.replace(/^\./, '').toLowerCase()
|
||||
switch (e) {
|
||||
case 'png': return 'image/png'
|
||||
case 'jpg':
|
||||
case 'jpeg': return 'image/jpeg'
|
||||
case 'gif': return 'image/gif'
|
||||
case 'svg': return 'image/svg+xml'
|
||||
case 'mp4': return 'video/mp4'
|
||||
case 'mkv': return 'video/x-matroska'
|
||||
default: return 'application/octet-stream'
|
||||
}
|
||||
}
|
||||
|
||||
const syncFiles = async () => {
|
||||
isSyncing.value = true
|
||||
try {
|
||||
const serverFiles = await fetchServerFiles()
|
||||
// console.log('file server :', serverFiles)
|
||||
|
||||
for (const dataFileServer of serverFiles) {
|
||||
const localMeta = await getLocalMeta(dataFileServer.name)
|
||||
// console.log('fileServer', dataFileServer.name ,'local', localMeta)
|
||||
// console.log('localMeta', localMeta)
|
||||
const mime = mimeFromExt(dataFileServer.ext)
|
||||
// Jika ekstensi tidak dalam mimeFromExt
|
||||
if (mime !== 'application/octet-stream') {
|
||||
const firstNamePart = dataFileServer.name.split('.')[0]
|
||||
const isNew = !localMeta
|
||||
const isUpdated = localMeta && new Date(dataFileServer.modified) > new Date(localMeta.modified)
|
||||
//jika data baru atau di update
|
||||
if (isNew || isUpdated) {
|
||||
// console.log('Download file: ', firstNamePart)
|
||||
await removeFiles(firstNamePart)
|
||||
await downloadFile(dataFileServer)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} catch (err: any) {
|
||||
errorMsg.value = err.message || 'Gagal sinkronisasi file'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const tampilFileBrowser = async () => {
|
||||
|
||||
await syncFiles();
|
||||
if (isSyncing.value) {
|
||||
try {
|
||||
const localStoreKeys = await localStore.keys()
|
||||
// console.log('localStore Keys:', localStoreKeys)
|
||||
const files: { name: string; blob: Blob; type: string; url: string }[] = []
|
||||
|
||||
for (const key of localStoreKeys) {
|
||||
if (!key.endsWith('-meta')) {
|
||||
const fileBlob = await localStore.getItem<Blob>(key)
|
||||
|
||||
if (fileBlob instanceof Blob) {
|
||||
const url = URL.createObjectURL(fileBlob)
|
||||
files.push({ name: key, blob: fileBlob, type: fileBlob.type, url: url })
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
// console.log('Files in IndexedDB:',fileLocal.value)
|
||||
return fileLocal.value = files
|
||||
|
||||
} catch (err) {
|
||||
console.error('Gagal memuat file dari IndexedDB:', err)
|
||||
} finally {
|
||||
isSyncing.value = false
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Bersihkan object URL biar gak bocor memori
|
||||
onBeforeUnmount(() => {
|
||||
fileLocal.value.forEach(f => URL.revokeObjectURL(f.url))
|
||||
})
|
||||
|
||||
|
||||
|
||||
return {
|
||||
fileServer,
|
||||
errorMsg,
|
||||
tampilFileBrowser,
|
||||
fileLocal,
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,6 @@
|
||||
import { ref, onUnmounted } from 'vue';
|
||||
|
||||
/**
|
||||
* Komposable untuk mengelola koneksi WebSocket.
|
||||
* @param {string} url - URL WebSocket lengkap.
|
||||
*/
|
||||
|
||||
export function useWebSocket(url) {
|
||||
const ws = ref(null);
|
||||
const data = ref(null);
|
||||
@@ -29,7 +26,6 @@ export function useWebSocket(url) {
|
||||
};
|
||||
|
||||
ws.value.onmessage = (event) => {
|
||||
// LOGIC PENTING: Menerima data dan memicu watcher di index.vue
|
||||
console.log('🔔 [WS] Message received. Parsing data...');
|
||||
try {
|
||||
const parsedData = JSON.parse(event.data);
|
||||
|
||||
Generated
+25
@@ -17,6 +17,7 @@
|
||||
"@pinia/nuxt": "^0.11.2",
|
||||
"@unhead/vue": "^2.0.14",
|
||||
"eslint": "^9.34.0",
|
||||
"localforage": "^1.10.0",
|
||||
"nuxt": "^3.19.0",
|
||||
"pinia": "^3.0.3",
|
||||
"qrcode": "^1.5.4",
|
||||
@@ -10160,6 +10161,12 @@
|
||||
"integrity": "sha512-K6acvFaelNxx8wc2VjbIzXKDVB0Khs0QT35U6NkGfTdCmjLNcO2945m7RFNR9/RPVFm48hq7QPzK8uGH18HCGw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/immediate": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
|
||||
"integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
|
||||
@@ -10960,6 +10967,15 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lie": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
|
||||
"integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"immediate": "~3.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
|
||||
@@ -11283,6 +11299,15 @@
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/localforage": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
|
||||
"integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"lie": "3.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/locate-path": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
"@pinia/nuxt": "^0.11.2",
|
||||
"@unhead/vue": "^2.0.14",
|
||||
"eslint": "^9.34.0",
|
||||
"localforage": "^1.10.0",
|
||||
"nuxt": "^3.19.0",
|
||||
"pinia": "^3.0.3",
|
||||
"qrcode": "^1.5.4",
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="medical-payment-app">
|
||||
<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"
|
||||
:class="{
|
||||
'contact-fullscreen': paymentStore.currentStep === 1,
|
||||
'payment-centered': paymentStore.currentStep === 2,
|
||||
'status-centered':
|
||||
paymentStore.currentStep === 3 ||
|
||||
paymentStore.currentStep === 4,
|
||||
}"
|
||||
>
|
||||
<component :is="activeComponent" v-if="hasIpAddress" />
|
||||
<div v-else class="text-center pa-10">
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
></v-progress-circular>
|
||||
<p class="mt-4">Memeriksa konfigurasi dan koneksi data...</p>
|
||||
<p v-if="hasIpAddress && wsIsConnected" class="mt-2 text-success">
|
||||
Koneksi WS: **Terhubung** (Siap menerima data 30s)
|
||||
</p>
|
||||
<p v-else-if="hasIpAddress" class="mt-2 text-warning">
|
||||
Koneksi WS: Menunggu/Terputus...
|
||||
</p>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { usePaymentStore } from "~/stores/payment";
|
||||
import Home from "~/components/Home.vue";
|
||||
import QRISPayment from "~/components/QRISPayment.vue";
|
||||
import Success from "~/components/PembayaranSukses.vue";
|
||||
import Gagal from "~/components/PembayaranGagal.vue";
|
||||
import { onMounted, onUnmounted, ref, computed, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useWebSocket } from "~/composables/useWebSocket";
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
const router = useRouter();
|
||||
const localIpAddress = ref(null);
|
||||
|
||||
// **WEB SOCKET CONFIGURATION**
|
||||
const WS_URL_BASE = "ws://10.10.150.45:8084/api/v1/ws";
|
||||
const WS_QUERY = "user_id=QRIS&room=BANKJATIM";
|
||||
const fullWsUrl = `${WS_URL_BASE}?${WS_QUERY}`;
|
||||
|
||||
const {
|
||||
wsData,
|
||||
isConnected: wsIsConnected,
|
||||
connect: wsConnect,
|
||||
disconnect: wsDisconnect,
|
||||
} = useWebSocket(fullWsUrl);
|
||||
|
||||
const hasIpAddress = computed(() => !!localIpAddress.value);
|
||||
|
||||
const paymentSteps = {
|
||||
1: Home,
|
||||
2: QRISPayment,
|
||||
3: Success,
|
||||
4: Gagal,
|
||||
};
|
||||
|
||||
const activeComponent = computed(() => {
|
||||
return paymentSteps[paymentStore.currentStep] || Home;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => paymentStore.currentStep,
|
||||
(newStep, oldStep) => {
|
||||
console.log(`Step berubah dari ${oldStep} ke ${newStep}`);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
wsData,
|
||||
(newStatus) => {
|
||||
const payloadData = newStatus?.data?.data; // Ambil array data transaksi
|
||||
|
||||
if (!newStatus || !payloadData || payloadData.length === 0) {
|
||||
console.log(
|
||||
"📭 WS: No valid payload data (newStatus.data.data) in message. Skipping state change."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(
|
||||
`[WS] Menerima update data di Step ${paymentStore.currentStep}. Total records: ${payloadData.length}`
|
||||
);
|
||||
const allRecords = payloadData;
|
||||
|
||||
if (paymentStore.currentStep === 1) {
|
||||
console.log("🔍 Step 1 (WS): Looking for IP:", localIpAddress.value);
|
||||
|
||||
const relevantData = allRecords.find(
|
||||
(item) => item.ip === localIpAddress.value && item.status === "1"
|
||||
);
|
||||
|
||||
if (relevantData) {
|
||||
console.log(
|
||||
"✅ WS Data found for IP (New Transaction). Moving to Step 2."
|
||||
);
|
||||
paymentStore.updatePayment({ data: [relevantData] });
|
||||
paymentStore.setStep(2);
|
||||
} else {
|
||||
console.log(
|
||||
`⏳ No relevant data found for IP ${localIpAddress.value} in this broadcast.`
|
||||
);
|
||||
}
|
||||
} else if (paymentStore.currentStep === 2) {
|
||||
const relevantData = allRecords.find(
|
||||
(item) =>
|
||||
item.ip === localIpAddress.value &&
|
||||
item.display_nobill === paymentStore.qrData.display_nobill
|
||||
);
|
||||
|
||||
if (relevantData) {
|
||||
console.log(
|
||||
"🔄 WS Update received for current patient in Step 2. Updating store..."
|
||||
);
|
||||
paymentStore.updatePayment({ data: [relevantData] });
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const checkAndRedirect = () => {
|
||||
const savedIp = localStorage.getItem("loketIp");
|
||||
if (!savedIp) {
|
||||
router.push("/setupip");
|
||||
} else {
|
||||
localIpAddress.value = savedIp;
|
||||
wsConnect();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
checkAndRedirect();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
wsDisconnect();
|
||||
});
|
||||
</script>
|
||||
>
|
||||
|
||||
<style scoped>
|
||||
.medical-payment-app {
|
||||
background: #ff9248;
|
||||
min-height: 100vh;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: #ff9248 !important;
|
||||
max-width: 1200px !important;
|
||||
width: fit-content !important;
|
||||
margin: 1rem auto !important;
|
||||
border-radius: 16px !important;
|
||||
height: fit-content !important;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
.payment-card {
|
||||
background: #ff9248;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||||
height: fit-content !important;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.status-centered {
|
||||
max-width: 1200px !important;
|
||||
width: 100% !important;
|
||||
margin: 1rem auto !important;
|
||||
border-radius: 16px !important;
|
||||
height: fit-content !important;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: #ff9248;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||||
height: fit-content !important;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 900px) {
|
||||
.payment-centered {
|
||||
max-width: 500px !important;
|
||||
margin: 1rem !important;
|
||||
}
|
||||
|
||||
.status-centered {
|
||||
max-width: 800px !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);
|
||||
}
|
||||
|
||||
.status-centered {
|
||||
max-width: 700px !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,
|
||||
.status-centered {
|
||||
min-height: 600px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+99
-58
@@ -48,8 +48,7 @@ const paymentStore = usePaymentStore();
|
||||
const router = useRouter();
|
||||
const localIpAddress = ref(null);
|
||||
|
||||
// **WEB SOCKET CONFIGURATION**
|
||||
const WS_URL_BASE = "ws://10.10.150.45:8084/api/v1/ws";
|
||||
const WS_URL_BASE = "ws://10.10.150.45:8080/api/v1/ws";
|
||||
const WS_QUERY = "user_id=QRIS&room=BANKJATIM";
|
||||
const fullWsUrl = `${WS_URL_BASE}?${WS_QUERY}`;
|
||||
|
||||
@@ -81,53 +80,58 @@ watch(
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// script page index:
|
||||
watch(
|
||||
wsData,
|
||||
(newStatus) => {
|
||||
const payloadData = newStatus?.data?.data; // Ambil array data transaksi
|
||||
const payloadData = newStatus?.data?.data;
|
||||
const posDevices = newStatus?.data?.posdevice || [];
|
||||
|
||||
if (!newStatus || !payloadData || payloadData.length === 0) {
|
||||
console.log(
|
||||
"📭 WS: No valid payload data (newStatus.data.data) in message. Skipping state change."
|
||||
);
|
||||
if (!newStatus || !payloadData) {
|
||||
console.log("📭 WS: No valid payload data in message. Skipping state change.");
|
||||
return;
|
||||
}
|
||||
|
||||
// ... (console.log yang ada) ...
|
||||
|
||||
console.log(
|
||||
`[WS] Menerima update data di Step ${paymentStore.currentStep}. Total records: ${payloadData.length}`
|
||||
);
|
||||
const allRecords = payloadData;
|
||||
const isTargetDevice = payloadData.ip === localIpAddress.value;
|
||||
const isPosDevice = posDevices.includes(localIpAddress.value);
|
||||
const isRelevantDevice = isTargetDevice || isPosDevice; // Kita gunakan ini
|
||||
|
||||
if (paymentStore.currentStep === 1) {
|
||||
// --- LOGIKA BARU DITAMBAHKAN DI SINI ---
|
||||
// Jika kita di Step 3 (Sukses) atau 4 (Gagal) DAN ada transaksi BARU (status "1")
|
||||
if (
|
||||
(paymentStore.currentStep === 3 || paymentStore.currentStep === 4) &&
|
||||
isRelevantDevice &&
|
||||
payloadData.status === "1"
|
||||
) {
|
||||
console.log("🔄 [WS] New transaction received on end screen. Resetting state...");
|
||||
|
||||
// 1. Reset store secara paksa (ini akan membersihkan timer dan kembali ke step 1)
|
||||
paymentStore.reset();
|
||||
|
||||
// 2. Sekarang proses data baru seolah-olah kita berada di Step 1
|
||||
paymentStore.updatePayment({ data: [payloadData] });
|
||||
paymentStore.setStep(2);
|
||||
}
|
||||
// --- AKHIR LOGIKA BARU ---
|
||||
|
||||
// Logika Anda yang sudah ada
|
||||
else if (paymentStore.currentStep === 1) {
|
||||
console.log("🔍 Step 1 (WS): Looking for IP:", localIpAddress.value);
|
||||
|
||||
const relevantData = allRecords.find(
|
||||
(item) => item.ip === localIpAddress.value && item.status === "1"
|
||||
);
|
||||
|
||||
if (relevantData) {
|
||||
console.log(
|
||||
"✅ WS Data found for IP (New Transaction). Moving to Step 2."
|
||||
);
|
||||
paymentStore.updatePayment({ data: [relevantData] });
|
||||
if (isRelevantDevice && payloadData.status === "1") {
|
||||
console.log("✅ WS Data found for IP (New Transaction). Moving to Step 2.");
|
||||
paymentStore.updatePayment({ data: [payloadData] });
|
||||
paymentStore.setStep(2);
|
||||
} else {
|
||||
console.log(
|
||||
`⏳ No relevant data found for IP ${localIpAddress.value} in this broadcast.`
|
||||
);
|
||||
console.log(`⏳ No relevant data found for IP ${localIpAddress.value} in this broadcast.`);
|
||||
}
|
||||
} else if (paymentStore.currentStep === 2) {
|
||||
const relevantData = allRecords.find(
|
||||
(item) =>
|
||||
item.ip === localIpAddress.value &&
|
||||
item.display_nobill === paymentStore.qrData.display_nobill
|
||||
);
|
||||
|
||||
if (relevantData) {
|
||||
console.log(
|
||||
"🔄 WS Update received for current patient in Step 2. Updating store..."
|
||||
);
|
||||
paymentStore.updatePayment({ data: [relevantData] });
|
||||
if (isRelevantDevice &&
|
||||
payloadData.display_nobill === paymentStore.qrData.display_nobill) {
|
||||
console.log("🔄 WS Update received for current patient in Step 2. Updating store...");
|
||||
paymentStore.updatePayment({ data: [payloadData] });
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -152,7 +156,6 @@ onUnmounted(() => {
|
||||
wsDisconnect();
|
||||
});
|
||||
</script>
|
||||
>
|
||||
|
||||
<style scoped>
|
||||
.medical-payment-app {
|
||||
@@ -173,30 +176,12 @@ onUnmounted(() => {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.payment-centered {
|
||||
background: #ff9248 !important;
|
||||
max-width: 1200px !important;
|
||||
width: fit-content !important;
|
||||
margin: 1rem auto !important;
|
||||
border-radius: 16px !important;
|
||||
height: fit-content !important;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
.payment-card {
|
||||
background: #ff9248;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
||||
height: fit-content !important;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.status-centered {
|
||||
max-width: 1200px !important;
|
||||
width: 100% !important;
|
||||
margin: 1rem auto !important;
|
||||
border-radius: 16px !important;
|
||||
height: fit-content !important;
|
||||
min-height: calc(100vh - 2rem);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
@@ -206,8 +191,64 @@ onUnmounted(() => {
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 900px) {
|
||||
/* PORTRAIT MODE*/
|
||||
@media (orientation: portrait) {
|
||||
.payment-centered {
|
||||
background: #ff9248 !important;
|
||||
max-width: 600px !important;
|
||||
width: 100% !important;
|
||||
margin: 1rem auto !important;
|
||||
border-radius: 16px !important;
|
||||
height: fit-content !important;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
.status-centered {
|
||||
max-width: 600px !important;
|
||||
width: 100% !important;
|
||||
margin: 1rem auto !important;
|
||||
border-radius: 16px !important;
|
||||
height: fit-content !important;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* LANDSCAPE MODE*/
|
||||
@media (orientation: landscape) {
|
||||
.payment-centered {
|
||||
background: #ff9248 !important;
|
||||
max-width: 1200px !important;
|
||||
width: fit-content !important;
|
||||
margin: 1rem auto !important;
|
||||
border-radius: 16px !important;
|
||||
height: fit-content !important;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
.status-centered {
|
||||
max-width: 1200px !important;
|
||||
width: 100% !important;
|
||||
margin: 1rem auto !important;
|
||||
border-radius: 16px !important;
|
||||
height: fit-content !important;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Large tablet portrait */
|
||||
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
|
||||
.payment-centered {
|
||||
max-width: 950px !important;
|
||||
}
|
||||
|
||||
.status-centered {
|
||||
max-width: 900px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape responsive */
|
||||
@media (max-width: 900px) and (orientation: landscape) {
|
||||
.payment-centered {
|
||||
max-width: 500px !important;
|
||||
margin: 1rem !important;
|
||||
@@ -244,4 +285,4 @@ onUnmounted(() => {
|
||||
min-height: 600px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
@@ -0,0 +1,58 @@
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import { lookup } from 'mime-types'
|
||||
import { createError, setHeader, sendStream } from 'h3'
|
||||
|
||||
const FOLDER_PATH = '\\\\10.10.150.129\\Shared'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const rawName = event.context.params?.name as string | undefined
|
||||
if (!rawName) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Nama file tidak diberikan' })
|
||||
}
|
||||
|
||||
const name = decodeURIComponent(rawName)
|
||||
const safeName = path.basename(name)
|
||||
if (safeName !== name) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Nama file tidak valid' })
|
||||
}
|
||||
|
||||
const filePath = path.join(FOLDER_PATH, safeName)
|
||||
if (!fs.existsSync(filePath)) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'File tidak ditemukan' })
|
||||
}
|
||||
|
||||
// Ambil ekstensi file (lowercase)
|
||||
const ext = path.extname(safeName).toLowerCase()
|
||||
let mimeType = (lookup(safeName) as string) || 'application/octet-stream'
|
||||
|
||||
// Koreksi MIME type umum
|
||||
switch (ext) {
|
||||
case '.mp4':
|
||||
mimeType = 'video/mp4'
|
||||
break
|
||||
case '.mkv':
|
||||
mimeType = 'video/x-matroska'
|
||||
break
|
||||
case '.avi':
|
||||
mimeType = 'video/x-msvideo'
|
||||
break
|
||||
case '.mov':
|
||||
mimeType = 'video/quicktime'
|
||||
break
|
||||
case '.exe':
|
||||
case '.msi':
|
||||
mimeType = 'application/octet-stream'
|
||||
break
|
||||
case '.gif':
|
||||
mimeType = 'image/gif'
|
||||
break
|
||||
}
|
||||
|
||||
setHeader(event, 'Content-Type', mimeType)
|
||||
setHeader(event, 'Cache-Control', 'no-cache')
|
||||
setHeader(event, 'Content-Disposition', `inline; filename="${safeName}"`)
|
||||
|
||||
const stream = fs.createReadStream(filePath)
|
||||
return sendStream(event, stream)
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
// server/api/serverFile/files.get.ts
|
||||
import fs from "fs"
|
||||
import path from "path"
|
||||
import { promisify } from "util"
|
||||
|
||||
const readdir = promisify(fs.readdir)
|
||||
const stat = promisify(fs.stat)
|
||||
|
||||
// Lokasi folder network share (pastikan sudah di-mount / accessible dari server)
|
||||
const FOLDER_PATH = "\\\\10.10.150.129\\Shared"
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
try {
|
||||
|
||||
// Baca semua isi folder
|
||||
const files = await readdir(FOLDER_PATH, { withFileTypes: true })
|
||||
|
||||
// Filter file saja dan ambil metadata
|
||||
const list = await Promise.all(
|
||||
files
|
||||
.filter((f) => f.isFile())
|
||||
.map(async (f) => {
|
||||
const filePath = path.join(FOLDER_PATH, f.name)
|
||||
const info = await stat(filePath)
|
||||
return {
|
||||
name: f.name,
|
||||
size: info.size,
|
||||
modified: info.ctime,
|
||||
ext: path.extname(f.name),
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
return list.sort(
|
||||
(a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime()
|
||||
) // urut terbaru
|
||||
} catch (err: any) {
|
||||
console.error("Gagal sinkronisasi file:", err.message)
|
||||
return { error: err.message }
|
||||
}
|
||||
})
|
||||
|
||||
+52
-42
@@ -1,39 +1,60 @@
|
||||
// src/stores/payment.js
|
||||
// src/stores/payment.ts
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
// 1. Definisikan Tipe Data untuk qrData (penting untuk properti expired_at yang di-spread)
|
||||
interface QrData {
|
||||
qrvalue: string | null;
|
||||
display_nobill: string | null;
|
||||
display_name: string | null;
|
||||
display_amount: string | null;
|
||||
status: '1' | '2' | '0' | null; // "1": Pending, "2": Sukses, "0": Gagal/Expired
|
||||
ip: string | null;
|
||||
// Tambahkan properti yang di-spread dari API, termasuk expired_at
|
||||
expired_at?: string; // Tambahkan expired_at sebagai properti opsional
|
||||
[key: string]: any; // Indeks signature untuk properti dinamis (misal: transaction_id, reason)
|
||||
}
|
||||
|
||||
// 2. Definisikan Tipe Data untuk State
|
||||
interface PaymentState {
|
||||
currentStep: 1 | 2 | 3 | 4;
|
||||
patientInfo: {
|
||||
name: string;
|
||||
amount: string;
|
||||
expiry: string;
|
||||
};
|
||||
qrData: QrData;
|
||||
}
|
||||
|
||||
// Variabel di luar store untuk menyimpan timer, agar persistensi di luar state Pinia
|
||||
let autoResetTimer = null;
|
||||
let autoResetTimer: number | null = null;
|
||||
|
||||
export const usePaymentStore = defineStore('payment', {
|
||||
state: () => ({
|
||||
state: (): PaymentState => ({ // Gunakan tipedata PaymentState
|
||||
currentStep: 1, // 1: Menunggu Data, 2: Tampilkan QRIS, 3: Sukses, 4: Gagal
|
||||
patientInfo: {
|
||||
name: '',
|
||||
amount: '',
|
||||
expiry: '', // Dibiarkan kosong, waktu kedaluwarsa dihitung dari qrData.created_at
|
||||
expiry: '', // Waktu kedaluwarsa diambil dari qrData (via spread)
|
||||
},
|
||||
qrData: {
|
||||
qrvalue: null,
|
||||
display_nobill: null,
|
||||
display_name: null,
|
||||
display_amount: null,
|
||||
status: null, // Status pembayaran: "1" (Pending), "2" (Sukses), "0" (Gagal/Expired)
|
||||
status: null,
|
||||
ip: null,
|
||||
created_at: null, // Tambahkan ini agar properti ada secara eksplisit
|
||||
// ... properti lain dari API akan ditambahkan melalui spread operator
|
||||
},
|
||||
// created_at DIHAPUS
|
||||
} as QrData, // Type casting untuk QrData
|
||||
}),
|
||||
|
||||
getters: {
|
||||
hasQrData: (state) => state.qrData && state.qrData.qrvalue,
|
||||
safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com',
|
||||
hasQrData: (state): boolean => !!state.qrData.qrvalue,
|
||||
safeQrValue: (state): string => state.qrData.qrvalue || 'https://www.google.com',
|
||||
|
||||
// Getter untuk cek apakah data siap
|
||||
isReadyForStatusCheck: (state) => {
|
||||
return state.qrData.display_nobill && state.qrData.display_name;
|
||||
isReadyForStatusCheck: (state): boolean => {
|
||||
return !!(state.qrData.display_nobill && state.qrData.display_name);
|
||||
},
|
||||
|
||||
// Getter untuk debug
|
||||
debugInfo: (state) => ({
|
||||
step: state.currentStep,
|
||||
hasIdentifiers: !!(state.qrData.display_nobill && state.qrData.display_name),
|
||||
@@ -50,26 +71,22 @@ export const usePaymentStore = defineStore('payment', {
|
||||
this.currentStep--;
|
||||
},
|
||||
|
||||
setStep(step) {
|
||||
setStep(step: 1 | 2 | 3 | 4) {
|
||||
console.log(`[STORE] Setting step from ${this.currentStep} to ${step}`);
|
||||
this.currentStep = step;
|
||||
},
|
||||
|
||||
/**
|
||||
* @description Memulai timer untuk reset state kembali ke Step 1 (Home) setelah 20 detik
|
||||
*/
|
||||
startAutoReset() {
|
||||
|
||||
if (autoResetTimer) {
|
||||
clearTimeout(autoResetTimer);
|
||||
}
|
||||
console.log('🏠 [STORE] Starting auto return timer (20s) for reset.');
|
||||
|
||||
console.log('🏠 [STORE] Starting auto return timer (50s) for reset.');
|
||||
|
||||
// Di TypeScript, setTimeout mengembalikan number
|
||||
autoResetTimer = setTimeout(() => {
|
||||
console.log('🏠 [STORE] Auto return to home triggered');
|
||||
this.reset();
|
||||
}, 20000);
|
||||
}, 10000);
|
||||
},
|
||||
|
||||
reset() {
|
||||
@@ -87,25 +104,24 @@ export const usePaymentStore = defineStore('payment', {
|
||||
display_amount: null,
|
||||
status: null,
|
||||
ip: null,
|
||||
created_at: null,
|
||||
};
|
||||
} as QrData; // Pastikan tipe kembali ke QrData
|
||||
if (autoResetTimer) {
|
||||
clearTimeout(autoResetTimer);
|
||||
autoResetTimer = null;
|
||||
}
|
||||
},
|
||||
|
||||
updatePayment(apiResponse) {
|
||||
// Definisikan tipe untuk apiResponse
|
||||
updatePayment(apiResponse: { data: QrData[] }) {
|
||||
console.log("=== [STORE] UPDATE PAYMENT ===");
|
||||
|
||||
// Validasi response
|
||||
if (!apiResponse?.data || !Array.isArray(apiResponse.data) || apiResponse.data.length === 0) {
|
||||
if (!apiResponse?.data || apiResponse.data.length === 0) {
|
||||
console.error("Invalid API response structure or empty data array");
|
||||
return;
|
||||
}
|
||||
|
||||
const apiData = apiResponse.data[0];
|
||||
const oldStatus = this.qrData.status; // Simpan status lama
|
||||
const oldStatus = this.qrData.status;
|
||||
|
||||
// Update qrData dengan semua properti dari API
|
||||
this.qrData = {
|
||||
@@ -113,11 +129,10 @@ export const usePaymentStore = defineStore('payment', {
|
||||
display_nobill: apiData.display_nobill || this.qrData.display_nobill,
|
||||
display_name: apiData.display_name || this.qrData.display_name,
|
||||
display_amount: apiData.display_amount || apiData.nominal || this.qrData.display_amount,
|
||||
status: apiData.status || this.qrData.status,
|
||||
status: apiData.status as QrData['status'] || this.qrData.status, // Type casting untuk status
|
||||
ip: apiData.ip || this.qrData.ip,
|
||||
created_at: apiData.created_at || this.qrData.created_at, // Ambil 'created_at'
|
||||
// Spread untuk properti lain yang mungkin ada (misal: transaction_id, reason)
|
||||
...apiData
|
||||
// created_at DIHAPUS
|
||||
...apiData // expired_at akan masuk di sini
|
||||
};
|
||||
|
||||
// Update patientInfo
|
||||
@@ -130,28 +145,22 @@ export const usePaymentStore = defineStore('payment', {
|
||||
// --- LOGIKA TRANSISI STATUS OTOMATIS (SUCCESS/FAIL) ---
|
||||
const newStatus = this.qrData.status;
|
||||
|
||||
// Log perubahan status (jika ada)
|
||||
if (oldStatus !== newStatus) {
|
||||
console.log(`[STORE] Status changed: ${oldStatus} -> ${newStatus}`);
|
||||
}
|
||||
|
||||
// Proses transisi hanya jika kita berada di Step 2 (Menunggu Pembayaran)
|
||||
// DAN status yang diterima berbeda dari status sebelumnya
|
||||
if (this.currentStep === 2 && oldStatus !== newStatus) {
|
||||
if (newStatus === "2") {
|
||||
// Status Sukses
|
||||
console.log('🎉 [STORE] Status 2 (SUKSES) diterima. Pindah ke Step 3.');
|
||||
this.currentStep = 3;
|
||||
this.startAutoReset();
|
||||
} else if (newStatus === "0") {
|
||||
// Status Gagal
|
||||
console.log('❌ [STORE] Status 0 (GAGAL) diterima. Pindah ke Step 4.');
|
||||
this.currentStep = 4;
|
||||
this.startAutoReset();
|
||||
}
|
||||
}
|
||||
// ------------------------------------------------------
|
||||
|
||||
|
||||
console.log("Updated qrData:", this.qrData);
|
||||
console.log("Updated patientInfo:", this.patientInfo);
|
||||
console.log("===================");
|
||||
@@ -170,8 +179,8 @@ export const usePaymentStore = defineStore('payment', {
|
||||
},
|
||||
|
||||
// Method untuk validasi data
|
||||
validateData() {
|
||||
const issues = [];
|
||||
validateData(): boolean {
|
||||
const issues: string[] = [];
|
||||
|
||||
if (!this.qrData.display_nobill) {
|
||||
issues.push('display_nobill missing');
|
||||
@@ -181,7 +190,8 @@ export const usePaymentStore = defineStore('payment', {
|
||||
issues.push('display_name missing');
|
||||
}
|
||||
|
||||
if (!this.qrData.qrvalue && !this.qrData.qr_code) {
|
||||
// Perlu pengecekan properti qr_code pada apiData, bukan state
|
||||
if (!this.qrData.qrvalue) {
|
||||
issues.push('QR code missing');
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
// types/serverFiles.ts
|
||||
|
||||
export interface FileInfo {
|
||||
name: string
|
||||
size: number
|
||||
modified: string | Date
|
||||
ext: string
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user