final update 2
This commit is contained in:
bagus-arie05
@@ -1,570 +0,0 @@
|
||||
<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>
|
||||
@@ -3,28 +3,28 @@
|
||||
<div class="logo-section-contact">
|
||||
<div class="logo-group-contact">
|
||||
<v-img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of-arms_of_East_Java.svg.png"
|
||||
src="/JatimLogo.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"
|
||||
src="/rssalogo.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"
|
||||
src="/BerakhlakLogo.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
|
||||
src="karslogo.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div class="payment-step">
|
||||
<div class="logo-section-contact">
|
||||
<div class="logo-group-contact">
|
||||
<div class="logo-group-contact">
|
||||
<v-img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of-arms_of_East_Java.svg.png"
|
||||
src="/JatimLogo.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"
|
||||
src="/rssalogo.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"
|
||||
src="/BerakhlakLogo.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
|
||||
src="karslogo.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
|
||||
@@ -4,28 +4,28 @@
|
||||
<div class="logo-section-contact">
|
||||
<div class="logo-group-contact">
|
||||
<v-img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of-arms_of_East_Java.svg.png"
|
||||
src="/JatimLogo.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"
|
||||
src="/rssalogo.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"
|
||||
src="/BerakhlakLogo.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
contain
|
||||
/>
|
||||
<v-img
|
||||
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
|
||||
src="karslogo.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
|
||||
@@ -1,901 +0,0 @@
|
||||
<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>
|
||||
@@ -1,185 +0,0 @@
|
||||
// ~/config/websocket.js
|
||||
|
||||
// Helper function untuk mendeteksi environment
|
||||
const detectEnvironment = () => {
|
||||
// Jika ada environment variable NODE_ENV
|
||||
if (process.env.NODE_ENV) {
|
||||
return process.env.NODE_ENV;
|
||||
}
|
||||
|
||||
// Deteksi berdasarkan hostname/URL jika di browser
|
||||
if (typeof window !== 'undefined') {
|
||||
const hostname = window.location.hostname;
|
||||
|
||||
// Local development
|
||||
if (hostname === 'localhost' || hostname === '127.0.0.1') {
|
||||
return 'development';
|
||||
}
|
||||
|
||||
// Server di jaringan lokal (IP private)
|
||||
if (hostname.match(/^192\.168\./) ||
|
||||
hostname.match(/^10\./) ||
|
||||
hostname.match(/^172\.(1[6-9]|2[0-9]|3[0-1])\./)) {
|
||||
return 'staging';
|
||||
}
|
||||
|
||||
// Production (domain atau IP public)
|
||||
return 'production';
|
||||
}
|
||||
|
||||
// Default fallback
|
||||
return 'development';
|
||||
};
|
||||
|
||||
export const websocketConfig = {
|
||||
// Local Development (localhost)
|
||||
development: {
|
||||
url: 'ws://localhost:8084/api/v1/ws',
|
||||
// Alternative untuk development
|
||||
// url: 'ws://localhost:8084/api/v1/ws',
|
||||
queryParams: {
|
||||
user_id: 'QRIS',
|
||||
room: 'BANKJATIM'
|
||||
},
|
||||
options: {
|
||||
transports: ['websocket', 'polling'],
|
||||
timeout: 15000,
|
||||
reconnection: true,
|
||||
reconnectionAttempts: 3,
|
||||
reconnectionDelay: 1000,
|
||||
reconnectionDelayMax: 3000,
|
||||
}
|
||||
},
|
||||
|
||||
// Staging/Network Server (IP jaringan)
|
||||
staging: {
|
||||
url: 'ws://10.10.150.68:8084/api/v1/ws',
|
||||
queryParams: {
|
||||
user_id: 'QRIS',
|
||||
room: 'BANKJATIM'
|
||||
},
|
||||
options: {
|
||||
transports: ['websocket', 'polling'],
|
||||
timeout: 20000,
|
||||
reconnection: true,
|
||||
reconnectionAttempts: 5,
|
||||
reconnectionDelay: 1000,
|
||||
reconnectionDelayMax: 5000,
|
||||
}
|
||||
},
|
||||
|
||||
// Production (domain atau IP public)
|
||||
production: {
|
||||
url: 'wss://your-production-server.com/api/v1/ws',
|
||||
queryParams: {
|
||||
user_id: 'QRIS',
|
||||
room: 'BANKJATIM'
|
||||
},
|
||||
options: {
|
||||
transports: ['websocket', 'polling'],
|
||||
timeout: 30000,
|
||||
reconnection: true,
|
||||
reconnectionAttempts: 10,
|
||||
reconnectionDelay: 2000,
|
||||
reconnectionDelayMax: 10000,
|
||||
// Additional production settings
|
||||
secure: true,
|
||||
rejectUnauthorized: true,
|
||||
}
|
||||
},
|
||||
|
||||
// Testing Environment
|
||||
test: {
|
||||
url: 'ws://test-server:8084/api/v1/ws',
|
||||
queryParams: {
|
||||
user_id: 'QRIS_TEST',
|
||||
room: 'BANKJATIM_TEST'
|
||||
},
|
||||
options: {
|
||||
transports: ['websocket'],
|
||||
timeout: 10000,
|
||||
reconnection: false,
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function untuk build URL dengan query parameters
|
||||
export const buildWebSocketUrl = (baseUrl, queryParams = {}) => {
|
||||
const url = new URL(baseUrl);
|
||||
Object.entries(queryParams).forEach(([key, value]) => {
|
||||
url.searchParams.append(key, value);
|
||||
});
|
||||
return url.toString();
|
||||
};
|
||||
|
||||
// Helper function untuk mendapatkan config berdasarkan environment
|
||||
export const getWebSocketConfig = () => {
|
||||
const env = detectEnvironment();
|
||||
const config = websocketConfig[env] || websocketConfig.development;
|
||||
|
||||
// Build URL dengan query parameters
|
||||
const fullUrl = buildWebSocketUrl(config.url, config.queryParams);
|
||||
|
||||
console.log(`🌍 Detected environment: ${env}`);
|
||||
console.log(`🔗 WebSocket URL: ${fullUrl}`);
|
||||
|
||||
return {
|
||||
...config,
|
||||
fullUrl,
|
||||
environment: env
|
||||
};
|
||||
};
|
||||
|
||||
// Helper untuk override manual dengan custom query params
|
||||
export const getCustomWebSocketConfig = (customUrl, customQueryParams = {}, customOptions = {}) => {
|
||||
const baseConfig = getWebSocketConfig();
|
||||
|
||||
const mergedQueryParams = {
|
||||
...baseConfig.queryParams,
|
||||
...customQueryParams
|
||||
};
|
||||
|
||||
const fullUrl = buildWebSocketUrl(customUrl, mergedQueryParams);
|
||||
|
||||
return {
|
||||
...baseConfig,
|
||||
url: customUrl,
|
||||
queryParams: mergedQueryParams,
|
||||
fullUrl,
|
||||
options: {
|
||||
...baseConfig.options,
|
||||
...customOptions
|
||||
},
|
||||
environment: 'custom'
|
||||
};
|
||||
};
|
||||
|
||||
// Environment detection helpers
|
||||
export const isProduction = () => detectEnvironment() === 'production';
|
||||
export const isDevelopment = () => detectEnvironment() === 'development';
|
||||
export const isStaging = () => detectEnvironment() === 'staging';
|
||||
|
||||
// Advanced configuration berdasarkan kondisi khusus
|
||||
export const getAdvancedConfig = () => {
|
||||
const baseConfig = getWebSocketConfig();
|
||||
|
||||
// Tambah konfigurasi khusus berdasarkan browser atau device
|
||||
if (typeof window !== 'undefined') {
|
||||
// Mobile device adjustments
|
||||
if (navigator.userAgent.match(/Mobile|Android|iPhone|iPad/)) {
|
||||
baseConfig.options.timeout = Math.min(baseConfig.options.timeout, 15000);
|
||||
baseConfig.options.reconnectionDelay = 2000;
|
||||
}
|
||||
|
||||
// Connection type adjustments
|
||||
if ('connection' in navigator) {
|
||||
const connection = navigator.connection;
|
||||
if (connection.effectiveType === 'slow-2g' || connection.effectiveType === '2g') {
|
||||
baseConfig.options.timeout = 30000;
|
||||
baseConfig.options.reconnectionDelay = 3000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return baseConfig;
|
||||
};
|
||||
BIN
public/BerakhlakLogo.png
Normal file
BIN
public/BerakhlakLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
public/JatimLogo.png
Normal file
BIN
public/JatimLogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 589 KiB |
BIN
public/karslogo.png
Normal file
BIN
public/karslogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Reference in New Issue
Block a user