561 lines
14 KiB
Vue
561 lines
14 KiB
Vue
<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://scontent.fcgk22-2.fna.fbcdn.net/v/t39.30808-6/481267190_3904366386504845_1409667601717073976_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=w6wAp5Df1lAQ7kNvwHL8Snq&_nc_oc=Adnq0LOV2vro6n7DGZu9GfUYGx3iBXzZ7LlUk7oWYi_lZ_OYDD7LVYe5zogYKxEEJdU&_nc_zt=23&_nc_ht=scontent.fcgk22-2.fna&_nc_gid=Dir3R7zaEbm2b0HPtrmGiQ&oh=00_AfaERSA1GyvNKkfajBF5yIv_JrijpizdmUqgy9528oAszQ&oe=68D12398",
|
|
alt: "Medical Services",
|
|
title: "Pelayanan Terbaik",
|
|
description: "Tim medis profesional siap melayani 24 jam",
|
|
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);
|
|
};
|
|
|
|
// Fungsi untuk memulai carousel otomatis
|
|
const startCarousel = () => {
|
|
if (carouselInterval.value) {
|
|
clearInterval(carouselInterval.value);
|
|
}
|
|
carouselInterval.value = setInterval(() => {
|
|
const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
|
|
currentSlide.value = nextSlide;
|
|
}, 10000); // Ganti gambar setiap 10 detik
|
|
};
|
|
|
|
// Fungsi untuk menghentikan carousel otomatis
|
|
const stopCarousel = () => {
|
|
if (carouselInterval.value) {
|
|
clearInterval(carouselInterval.value);
|
|
carouselInterval.value = null;
|
|
}
|
|
};
|
|
|
|
// Fungsi untuk memutar video (menghentikan carousel)
|
|
const playVideo = (index) => {
|
|
currentSlide.value = index;
|
|
stopCarousel(); // Hentikan carousel saat video diputar
|
|
};
|
|
|
|
// Tonton perubahan slide
|
|
watch(currentSlide, (newSlide) => {
|
|
const currentItem = carouselItems.value[newSlide];
|
|
if (currentItem && !currentItem.isImage) {
|
|
// Jika slide adalah video, hentikan carousel
|
|
console.log('Video detected, stopping carousel');
|
|
stopCarousel();
|
|
} else {
|
|
// Jika slide adalah gambar, mulai kembali carousel
|
|
console.log('Image detected, starting carousel');
|
|
startCarousel();
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
// Mulai carousel saat komponen dimuat
|
|
startCarousel();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
// Hentikan carousel saat komponen dihancurkan
|
|
stopCarousel();
|
|
});
|
|
|
|
// Fungsi untuk simulasi pembayaran debug
|
|
const startDebugPayment = () => {
|
|
console.log("Simulasi Pembayaran (Debug) dimulai.");
|
|
// Mengisi data dummy untuk simulasi
|
|
const dummyData = {
|
|
posdevice: "GRANDPAV",
|
|
invoice_number: "000000000000012000615",
|
|
updated_at: "2024-11-21T11:52:25.805965+07:00",
|
|
created_at: "2024-11-21T11:52:25.805965+07:00",
|
|
display_name: "KASIH",
|
|
id: "1",
|
|
status: "1", // Status awal untuk simulasi
|
|
display_amount: "90",
|
|
qrvalue: "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
|
|
ip: "10.10.150.106",
|
|
display_nobill: "24072579/10000675",
|
|
};
|
|
paymentStore.updatePayment({ data: [dummyData] });
|
|
paymentStore.currentStep = 2; // Pindah ke QRISPayment
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.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: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.youtube-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
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> |