update layout
This commit is contained in:
bagus-arie05
@@ -3,7 +3,7 @@
|
||||
<div class="logo-section-contact">
|
||||
<div class="logo-group-contact">
|
||||
<v-img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png"
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of-arms_of_East_Java.svg.png"
|
||||
width="50"
|
||||
height="50"
|
||||
class="logo-img-contact"
|
||||
@@ -44,12 +44,13 @@
|
||||
<div class="banner-carousel-container">
|
||||
<v-carousel
|
||||
v-model="currentSlide"
|
||||
ref="carousel"
|
||||
:show-arrows="true"
|
||||
:hide-delimiters="false"
|
||||
:cycle="false"
|
||||
:interval="0"
|
||||
:interval="5000"
|
||||
class="banner-carousel"
|
||||
height="300"
|
||||
height="400"
|
||||
:continuous="false"
|
||||
>
|
||||
<v-carousel-item
|
||||
@@ -85,7 +86,7 @@
|
||||
<div
|
||||
v-else
|
||||
class="video-thumbnail"
|
||||
@click="currentSlide = index"
|
||||
@click="playVideo(index)"
|
||||
>
|
||||
<img
|
||||
:src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
|
||||
@@ -110,6 +111,17 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cta-section-contact">
|
||||
<v-btn
|
||||
@click="startDebugPayment"
|
||||
color="#808080"
|
||||
class="cta-button debug-button"
|
||||
x-large
|
||||
>
|
||||
<span class="button-text">SIMULASI PEMBAYARAN</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="orange-background-contact">
|
||||
@@ -144,13 +156,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, nextTick } from "vue";
|
||||
import { ref, watch, onMounted, onUnmounted } from "vue";
|
||||
import { usePaymentStore } from "~/stores/payment";
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
const currentSlide = ref(0);
|
||||
const videoLoaded = ref({});
|
||||
|
||||
const carouselInterval = ref(null);
|
||||
const carouselItems = ref([
|
||||
{
|
||||
src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
|
||||
@@ -162,10 +173,9 @@ const carouselItems = ref([
|
||||
{
|
||||
videoId: "KQZFfRtMHe0",
|
||||
isImage: false,
|
||||
loaded: false,
|
||||
},
|
||||
{
|
||||
src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
|
||||
src: "https://scontent.fcgk22-2.fna.fbcdn.net/v/t39.30808-6/481267190_3904366386504845_1409667601717073976_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=w6wAp5Df1lAQ7kNvwHL8Snq&_nc_oc=Adnq0LOV2vro6n7DGZu9GfUYGx3iBXzZ7LlUk7oWYi_lZ_OYDD7LVYe5zogYKxEEJdU&_nc_zt=23&_nc_ht=scontent.fcgk22-2.fna&_nc_gid=Dir3R7zaEbm2b0HPtrmGiQ&oh=00_AfaERSA1GyvNKkfajBF5yIv_JrijpizdmUqgy9528oAszQ&oe=68D12398",
|
||||
alt: "Medical Services",
|
||||
title: "Pelayanan Terbaik",
|
||||
description: "Tim medis profesional siap melayani 24 jam",
|
||||
@@ -198,24 +208,80 @@ const onVideoError = (error) => {
|
||||
console.error('Video iframe error:', error);
|
||||
};
|
||||
|
||||
const navigateToQrisPayment = () => {
|
||||
console.log("Navigating to QRIS Payment...");
|
||||
|
||||
// Fungsi untuk memulai carousel otomatis
|
||||
const startCarousel = () => {
|
||||
if (carouselInterval.value) {
|
||||
clearInterval(carouselInterval.value);
|
||||
}
|
||||
carouselInterval.value = setInterval(() => {
|
||||
const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
|
||||
currentSlide.value = nextSlide;
|
||||
}, 10000); // Ganti gambar setiap 10 detik
|
||||
};
|
||||
|
||||
const navigateToDebugPage = () => {
|
||||
console.log("Navigating to Debug Page...");
|
||||
|
||||
// Fungsi untuk menghentikan carousel otomatis
|
||||
const stopCarousel = () => {
|
||||
if (carouselInterval.value) {
|
||||
clearInterval(carouselInterval.value);
|
||||
carouselInterval.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
watch(currentSlide, (newSlide, oldSlide) => {
|
||||
// Fungsi untuk memutar video (menghentikan carousel)
|
||||
const playVideo = (index) => {
|
||||
currentSlide.value = index;
|
||||
stopCarousel(); // Hentikan carousel saat video diputar
|
||||
};
|
||||
|
||||
// Tonton perubahan slide
|
||||
watch(currentSlide, (newSlide) => {
|
||||
const currentItem = carouselItems.value[newSlide];
|
||||
if (currentItem && !currentItem.isImage) {
|
||||
// Jika slide adalah video, hentikan carousel
|
||||
console.log('Video detected, stopping carousel');
|
||||
stopCarousel();
|
||||
} else {
|
||||
// Jika slide adalah gambar, mulai kembali carousel
|
||||
console.log('Image detected, starting carousel');
|
||||
startCarousel();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// Mulai carousel saat komponen dimuat
|
||||
startCarousel();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
// Hentikan carousel saat komponen dihancurkan
|
||||
stopCarousel();
|
||||
});
|
||||
|
||||
// Fungsi untuk simulasi pembayaran debug
|
||||
const startDebugPayment = () => {
|
||||
console.log("Simulasi Pembayaran (Debug) dimulai.");
|
||||
// Mengisi data dummy untuk simulasi
|
||||
const dummyData = {
|
||||
posdevice: "GRANDPAV",
|
||||
invoice_number: "000000000000012000615",
|
||||
updated_at: "2024-11-21T11:52:25.805965+07:00",
|
||||
created_at: "2024-11-21T11:52:25.805965+07:00",
|
||||
display_name: "KASIH",
|
||||
id: "1",
|
||||
status: "1", // Status awal untuk simulasi
|
||||
display_amount: "90",
|
||||
qrvalue: "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
|
||||
ip: "10.10.150.106",
|
||||
display_nobill: "24072579/10000675",
|
||||
};
|
||||
paymentStore.updatePayment({ data: [dummyData] });
|
||||
paymentStore.currentStep = 2; // Pindah ke QRISPayment
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contact-page-container {
|
||||
min-height:auto;
|
||||
min-height: auto;
|
||||
width: 100%;
|
||||
background: white;
|
||||
display: flex;
|
||||
@@ -309,13 +375,13 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
.banner-carousel {
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
height: clamp(300px, 45vh, 400px);
|
||||
height: clamp(400px, 45vh, 400px);
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
@@ -443,9 +509,9 @@ watch(currentSlide, (newSlide, oldSlide) => {
|
||||
}
|
||||
|
||||
.contact-icon-contact {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 80%;
|
||||
width: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
|
||||
height: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
|
||||
border-radius: 50%; /* Changed to 50% for perfect circle */
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user