effendy/qris_bank_jatim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update flow & screen adjust

Browse Source
This commit is contained in:
bagus-arie05
2025-09-16 14:40:21 +07:00
parent edec5bb339
commit 4e30edeaf8
9 changed files with 1521 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Home.vue
+227 -267
View File
@@ -1,50 +1,106 @@
<!-- eslint-disable vue/multi-word-component-names -->
<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="60" height="60" 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="60" height="60" 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="60" height="60" class="logo-img-contact" contain />
<v-img src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png" width="60" height="60" class="logo-img-contact" contain />
<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="60"
height="60"
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="60"
height="60"
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="60"
height="60"
class="logo-img-contact"
contain
/>
<v-img
src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
width="60"
height="60"
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>
<p class="subtitle-contact">
Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
</p>
</div>
<!-- Enhanced Banner Carousel -->
<div class="banner-carousel-container">
<v-carousel
v-model="currentSlide"
:show-arrows="true"
:hide-delimiters="false"
height="500"
cycle
interval="5000"
:cycle="false"
:interval="0"
class="banner-carousel"
height="450"
:continuous="false"
>
<v-carousel-item
v-for="(item, index) in carouselItems"
:key="index"
:src="item.src"
:alt="item.alt"
cover
class="carousel-item"
>
<div class="carousel-overlay">
<div class="overlay-content">
<h3 class="overlay-title">{{ item.title }}</h3>
<p class="overlay-description">{{ item.description }}</p>
<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="currentSlide = 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="64">mdi-play-circle</v-icon>
</div>
</div>
</div>
</div>
</template>
</v-carousel-item>
</v-carousel>
<!-- Custom Navigation Dots -->
<div class="custom-indicators">
<span
v-for="(item, index) in carouselItems"
@@ -55,31 +111,26 @@
</div>
</div>
<div class="cta-section-contact">
<!-- <v-btn
color="primary"
size="large"
variant="flat"
rounded="xl"
class="cta-button-contact"
@click="paymentStore.nextStep"
<!-- <div class="cta-section-contact">
<v-btn
@click="navigateToQrisPayment"
color="#FF9248"
class="cta-button"
x-large
>
Lanjut ke Pembayaran
</v-btn> -->
<!-- <v-btn
color="secondary"
size="large"
variant="outlined"
rounded="xl"
class="cta-button-contact mt-4"
@click="triggerDummyData"
<span class="button-text">LANJUT KE PEMBAYARAN</span>
</v-btn>
<v-btn
@click="navigateToDebugPage"
color="#FF9248"
class="cta-button debug-button"
x-large
>
Debug ke Step 2
</v-btn> -->
</div>
<span class="button-text">DEBUG KE STEP 2</span>
</v-btn>
</div> -->
</div>
<div class="orange-background-contact">
<div class="contact-info-section-contact">
<div class="contact-item-contact">
@@ -112,60 +163,88 @@
</template>
<script setup>
import { ref } from 'vue';
import { usePaymentStore } from '~/stores/payment';
import { ref, watch, nextTick } from "vue";
import { usePaymentStore } from "~/stores/payment";
const paymentStore = usePaymentStore();
const currentSlide = ref(0);
const videoLoaded = ref({});
// Carousel items - you can add more images/videos here
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"
description: "Rumah sakit dengan teknologi medis terdepan",
isImage: true,
},
{
videoId: "KQZFfRtMHe0",
isImage: false,
loaded: false,
},
{
src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
alt: "Medical Services",
title: "Pelayanan Terbaik",
description: "Tim medis profesional siap melayani 24 jam"
description: "Tim medis profesional siap melayani 24 jam",
isImage: true,
},
{
src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide2.jpg",
alt: "Emergency Services",
title: "Unit Gawat Darurat",
description: "Layanan emergency yang cepat dan tepat"
},
{
src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide3.jpg",
alt: "Medical Equipment",
title: "Peralatan Canggih",
description: "Teknologi medis terkini untuk diagnosis akurat"
}
]);
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 navigateToQrisPayment = () => {
console.log("Navigating to QRIS Payment...");
};
const navigateToDebugPage = () => {
console.log("Navigating to Debug Page...");
};
watch(currentSlide, (newSlide, oldSlide) => {
});
</script>
<style scoped>
.contact-page-container {
position: relative;
min-height: 100vh;
width: 100%;
height: 100vh;
background: white;
overflow: hidden;
display: flex;
flex-direction: column;
}
.orange-background-contact {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 15%;
min-height: 120px;
width: 100%;
height: clamp(120px, 15vh, 200px);
background: #ff9248;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
@@ -174,6 +253,7 @@ const carouselItems = ref([
align-items: center;
justify-content: center;
padding-bottom: 20px;
margin-top: 2rem;
}
.logo-section-contact {
@@ -186,12 +266,16 @@ const carouselItems = ref([
.logo-group-contact {
display: flex;
gap: 40px;
gap: 2rem;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.logo-img-contact {
transition: transform 0.3s ease;
width: clamp(40px, 6vw, 60px) !important;
height: clamp(40px, 6vw, 60px) !important;
}
.logo-img-contact:hover {
@@ -201,13 +285,12 @@ const carouselItems = ref([
.content-section-contact {
position: relative;
z-index: 2;
flex: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 10px 20px;
padding-bottom: 140px;
}
.title-section-contact {
@@ -218,7 +301,7 @@ const carouselItems = ref([
.main-title-contact {
color: #ff9248;
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-family: 'Roboto', sans-serif;
font-family: "Roboto", sans-serif;
font-weight: 800;
margin-bottom: 12px;
line-height: 1.2;
@@ -227,15 +310,14 @@ const carouselItems = ref([
.subtitle-contact {
color: black;
font-size: clamp(0.9rem, 2vw, 1.1rem);
font-family: 'Roboto', sans-serif;
font-family: "Roboto", sans-serif;
font-weight: 500;
margin: 0;
max-width: 600px;
}
/* Enhanced Banner Carousel Styles */
.banner-carousel-container {
width: 100%;
width: 90%;
max-width: 900px;
margin-bottom: 30px;
position: relative;
@@ -247,11 +329,63 @@ const carouselItems = ref([
.banner-carousel {
border-radius: 20px;
overflow: hidden;
height: 450px;
}
.carousel-item {
position: relative;
height: 500px !important;
width: 100%;
height: 450px;
}
.video-container {
width: 100%;
height: 100%;
position: relative;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.youtube-iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 20px;
}
.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: 20px;
}
.play-button-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
padding: 20px;
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 {
@@ -270,21 +404,20 @@ const carouselItems = ref([
}
.overlay-title {
font-size: 1.8rem;
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 700;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.overlay-description {
font-size: 1.1rem;
font-size: clamp(0.9rem, 1.5vw, 1.1rem);
font-weight: 400;
margin: 0;
opacity: 0.9;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Custom Indicators */
.custom-indicators {
position: absolute;
bottom: 15px;
@@ -313,10 +446,9 @@ const carouselItems = ref([
background: rgba(255, 255, 255, 0.8);
}
/* Contact Info Styles */
.contact-info-section-contact {
display: flex;
gap: 60px;
gap: 2rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
@@ -331,8 +463,8 @@ const carouselItems = ref([
}
.contact-icon-contact {
width: 50px;
height: 50px;
width: clamp(40px, 8vw, 50px);
height: clamp(40px, 8vw, 50px);
border-radius: 50%;
background: white;
display: flex;
@@ -348,8 +480,8 @@ const carouselItems = ref([
.contact-text-contact {
color: white;
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-size: clamp(12px, 2vw, 14px);
font-family: "Roboto", sans-serif;
font-weight: 500;
white-space: nowrap;
}
@@ -362,194 +494,22 @@ const carouselItems = ref([
margin-top: 20px;
}
.cta-button-contact {
padding: 12px 40px !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
letter-spacing: 0.5px;
transition: all 0.3s ease;
background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%) !important;
.cta-button {
width: 100%;
max-width: 300px;
font-weight: 700;
letter-spacing: 1px;
}
.cta-button-contact:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
.debug-button {
background: #808080 !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.banner-carousel-container {
max-width: 100%;
margin: 0 -20px 20px -20px;
border-radius: 0;
}
.banner-carousel {
border-radius: 0;
}
.carousel-item {
height: 300px !important;
}
.overlay-title {
font-size: 1.4rem;
}
.overlay-description {
font-size: 0.95rem;
}
.carousel-overlay {
padding: 20px 20px 20px;
}
.contact-info-section-contact {
gap: 30px;
}
.logo-group-contact {
gap: 20px;
}
.logo-img-contact {
width: 45px !important;
height: 45px !important;
}
}
/* Tablet Landscape Optimizations */
@media (orientation: landscape) and (min-width: 768px) {
.carousel-item {
height: 400px !important;
}
.main-title-contact {
font-size: 2.8rem;
}
.subtitle-contact {
font-size: 1.05rem;
}
.contact-info-section-contact {
gap: 40px;
}
.logo-group-contact {
gap: 30px;
}
.logo-img-contact {
width: 50px !important;
height: 50px !important;
}
.contact-text-contact {
font-size: 12px;
}
.contact-icon-contact {
width: 40px;
height: 40px;
}
@media (min-width: 900px) and (max-width: 1200px) {
.content-section-contact {
padding-bottom: 140px;
}
.orange-background-contact {
height: 150px;
padding-bottom: 10px;
}
.carousel-item {
height: 450px !important;
}
}
}
/* Small tablet adjustments */
@media (max-width: 900px) and (orientation: landscape) {
.main-title-contact {
font-size: 2.2rem;
}
.contact-info-section-contact {
gap: 25px;
}
.logo-group-contact {
gap: 20px;
}
.content-section-contact {
padding-bottom: 120px;
}
.orange-background-contact {
height: 140px;
}
.carousel-item {
height: 350px !important;
}
}
/* Very small tablet landscape */
@media (max-width: 768px) and (orientation: landscape) {
.logo-group-contact {
gap: 15px;
}
.logo-img-contact {
width: 35px !important;
height: 35px !important;
}
.main-title-contact {
font-size: 1.8rem;
}
.contact-info-section-contact {
gap: 20px;
}
.contact-text-contact {
font-size: 10px;
}
.contact-icon-contact {
width: 35px;
height: 35px;
}
.content-section-contact {
padding-bottom: 100px;
}
.orange-background-contact {
height: 120px;
}
.carousel-item {
height: 250px !important;
}
}
/* Hide Vuetify default carousel navigation */
:deep(.v-carousel__controls) {
display: none;
}
/* Style Vuetify carousel arrows */
:deep(.v-btn--icon.v-carousel__controls__item) {
background: rgba(255, 146, 72, 0.8) !important;
color: white !important;
}
:deep(.v-btn--icon.v-carousel__controls__item:hover) {
background: rgba(255, 146, 72, 1) !important;
:deep(.v-carousel__controls--bottom) {
bottom: 50px !important;
}
</style>
components/PembayaranGagal.vue
+51
View File
@@ -0,0 +1,51 @@
<template>
<div class="payment-step">
<v-card-text class="pa-8 text-center">
<div class="failure-container">
<v-icon icon="mdi-close-circle" size="80" class="text-red mb-4" />
<h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Gagal</h2>
<p class="text-h6 text-grey-darken-1 mb-6">
Terjadi kesalahan saat memproses<br />pembayaran Anda.
</p>
<div class="button-group">
<v-btn color="primary" size="large" variant="flat" rounded="xl" @click="retryPayment" class="mb-3">
Coba Lagi
</v-btn>
<v-btn color="grey-darken-1" size="large" variant="outlined" rounded="xl" @click="paymentStore.reset">
Kembali ke Awal
</v-btn>
</div>
</div>
</v-card-text>
</div>
</template>
<script setup>
import { usePaymentStore } from '~/stores/payment';
const paymentStore = usePaymentStore();
const retryPayment = () => {
// Logika untuk mencoba lagi pembayaran
// Misalnya, memanggil API backend untuk mendapatkan tagihan baru
// Untuk saat ini, kita bisa mensimulasikannya
console.log("Mencoba pembayaran lagi...");
paymentStore.setPaymentStatus('aktif');
};
</script>
<style scoped>
.failure-container {
padding: 40px 20px;
}
.text-red {
color: #f44336 !important;
}
.text-dark {
color: #424242 !important;
}
.button-group {
display: flex;
flex-direction: column;
gap: 10px;
}
</style>
components/Success.vue → components/PembayaranSukses.vue
View File
components/QRISPayment.vue
+32 -13
View File
@@ -1,10 +1,10 @@
<template>
<div class="payment-step">
<v-card-text class="pa-8 text-center">
<div class="mb-4">
<div class="mb-2">
<v-img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/QRIS_logo.svg/1200px-QRIS_logo.svg.png"
height="35"
src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
height="100"
class="mx-auto"
contain
/>
@@ -19,11 +19,7 @@
height="280"
elevation="0"
>
<NuxtQrcode
:value="paymentStore.qrData.qrvalue"
tag="svg"
:options="{ width: 280 }"
/>
<img ref="qrCodeImage" alt="QR Code" width="280" height="280" />
</v-card>
</div>
@@ -54,14 +50,12 @@
{{ paymentStore.qrData.display_nobill }}
</v-col>
</v-row>
<v-row dense class="mb-4">
<v-col cols="5" class="text-left">
<strong>BERLAKU SAMPAI:</strong>
</v-col>
<v-col cols="7" class="text-left text-red">
N/A
</v-col>
<v-col cols="7" class="text-left text-red"> N/A </v-col>
</v-row>
</div>
@@ -79,11 +73,36 @@
<script setup>
import { usePaymentStore } from "~/stores/payment";
import QRCode from 'qrcode';
import { ref, onMounted, watch } from 'vue';
const paymentStore = usePaymentStore();
const qrCodeImage = ref(null);
const generateQRCode = async () => {
const qrValue = paymentStore.qrData.qrvalue;
if (qrValue) {
try {
const dataUrl = await QRCode.toDataURL(qrValue);
if (qrCodeImage.value) {
qrCodeImage.value.src = dataUrl;
}
} catch (error) {
console.error('Failed to generate QR Code:', error);
}
}
};
onMounted(() => {
generateQRCode();
});
watch(() => paymentStore.qrData, () => {
generateQRCode();
});
</script>
<style scoped>
/* Style tetap sama */
.payment-step {
background: rgb(233, 233, 233);
}
nuxt.config.ts
+5
View File
@@ -12,6 +12,7 @@ export default defineNuxtConfig({
'@nuxt/test-utils',
'@nuxt/ui',
'nuxt-qrcode',
'@pinia/nuxt',
(_options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) => {
@@ -28,6 +29,10 @@ export default defineNuxtConfig({
build: {
transpile: ['vuetify'],
},
devServer: {
host: "10.10.150.114",
port: 3000,
},
app: {
head: {
viewport: 'width=device-width,initial-scale=1',
package-lock.json
Generated
+1147 -1
View File
File diff suppressed because it is too large Load Diff
package.json
+4 -1
View File
@@ -22,12 +22,15 @@
"eslint": "^9.34.0",
"nuxt": "^3.19.0",
"pinia": "^3.0.3",
"qrcode": "^1.5.4",
"typescript": "^5.9.2",
"vue": "^3.5.20",
"vue-router": "^4.5.1",
"vuetify": "^3.4.0"
"vuetify": "^3.4.0",
"youtube-vue3": "^0.1.15"
},
"devDependencies": {
"@types/qrcode": "^1.5.5",
"nuxt-qrcode": "^0.4.8",
"sass-embedded": "^1.92.1",
"vite-plugin-vuetify": "^2.1.2",
pages/index.vue
+7 -13
View File
@@ -23,10 +23,10 @@
import { usePaymentStore } from '~/stores/payment';
import Home from '~/components/Home.vue';
import QRISPayment from '~/components/QRISPayment.vue';
import Success from '~/components/Success.vue';
import Success from '~/components/PembayaranSukses.vue';
const paymentStore = usePaymentStore();
const apiURL = 'http://10.10.150.188:8084/api/v1/qris';
const apiURL = 'http://10.10.150.37:8084/api/v1/qris';
const paymentSteps = {
1: Home,
@@ -38,34 +38,29 @@ const activeComponent = computed(() => {
return paymentSteps[paymentStore.currentStep] || Home;
});
// useFetch untuk pengambilan data dari API
const { data: apiData, refresh } = await useFetch(apiURL, {
server: false,
immediate: false,
});
watch(apiData, (newData) => {
if (newData && newData.data && newData.data.length > 0) {
const loketIP = '10.10.150.106';
const relevantData = newData.data.find(item => item.ip === loketIP);
const relevantData = newData.data[0];
if (relevantData) {
paymentStore.updatePayment(newData);
// Data ditemukan, hentikan polling
paymentStore.updatePayment({ data: [relevantData] });
clearInterval(pollingInterval);
console.log('Polling stopped. Data received via useFetch.');
console.log('Polling stopped. Data received from API.');
}
}
});
let pollingInterval = null;
// refresh setiap 5 detik untuk mengecek data
onMounted(() => {
if (paymentStore.currentStep === 1) {
refresh();
pollingInterval = setInterval(() => {
refresh();
}, 5000);
}, 500000);
}
});
@@ -78,7 +73,6 @@ onUnmounted(() => {
watch(() => paymentStore.currentStep, (newStep, oldStep) => {
if (newStep === 1 && oldStep !== 1) {
refresh();
pollingInterval = setInterval(() => {
refresh();
}, 5000);
stores/payment.ts
+48 -10
View File
@@ -7,10 +7,23 @@ export const usePaymentStore = defineStore('payment', {
patientInfo: {
name: '',
amount: '',
expiry: '', // Tidak ada di API, bisa dihapus atau diisi null
expiry: '',
},
// Berikan default object instead of null
qrData: {
qrvalue: null,
display_nobill: null,
display_name: null,
display_amount: null
},
qrData: null, // Properti baru untuk menyimpan data QRIS dari API
}),
getters: {
// Tambahkan getter untuk safe access
hasQrData: (state) => state.qrData && state.qrData.qrvalue,
safeQrValue: (state) => state.qrData?.qrvalue || 'https://www.google.com'
},
actions: {
nextStep() {
this.currentStep++;
@@ -25,21 +38,46 @@ export const usePaymentStore = defineStore('payment', {
amount: '',
expiry: '',
};
this.qrData = null; // Reset data QR
// Reset ke default object, bukan null
this.qrData = {
qrvalue: null,
display_nobill: null,
display_name: null,
display_amount: null
};
},
// Action baru untuk menerima dan memproses data dari backend
updatePayment(apiResponse) {
// Ambil objek data pertama dari array 'data'
console.log("API Response:", apiResponse);
// Validasi response
if (!apiResponse?.data || !Array.isArray(apiResponse.data) || apiResponse.data.length === 0) {
console.error("Invalid API response structure");
return;
}
const apiData = apiResponse.data[0];
console.log("API Data:", apiData);
// Perbarui state dengan data yang sesuai
this.qrData = apiData;
// Update qrData dengan validasi
this.qrData = {
qrvalue: apiData.qrvalue || null,
display_nobill: apiData.display_nobill || null,
display_name: apiData.display_name || null,
display_amount: apiData.display_amount || null,
...apiData // spread untuk properti lain yang mungkin ada
};
// Update patientInfo
this.patientInfo = {
name: apiData.display_name,
amount: apiData.display_amount,
name: apiData.display_name || 'Unknown',
amount: apiData.display_amount || '0',
expiry: this.patientInfo.expiry, // keep existing value
};
// Ganti step secara otomatis
console.log("Updated qrData:", this.qrData);
console.log("Updated patientInfo:", this.patientInfo);
// Ganti step
this.currentStep = 2;
},
},