100 lines
4.1 KiB
Vue
100 lines
4.1 KiB
Vue
// src/views/LandingPageView.vue
|
|
<template>
|
|
<div class="container mx-auto p-4 md:p-8">
|
|
<div class="flex flex-wrap -mx-4">
|
|
<div class="w-full px-4">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<template v-if="check === true">
|
|
<a
|
|
v-if="landingPageViewStore.mainBannerData && landingPageViewStore.mainBannerData.link"
|
|
:href="`//${landingPageViewStore.mainBannerData.link}`"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-block"
|
|
>
|
|
<img
|
|
:src="mainBannerSrc"
|
|
alt="Main Banner (Clickable)"
|
|
class="max-w-[980px] max-h-[600px] w-full h-auto transition-transform duration-500 transform ease-in-out hover:scale-105"
|
|
/>
|
|
</a>
|
|
<img
|
|
v-else-if="mainBannerSrc"
|
|
:src="mainBannerSrc"
|
|
alt="Main Banner"
|
|
class="max-w-[980px] max-h-[600px] w-full h-auto"
|
|
/>
|
|
</template>
|
|
|
|
<router-link to="/home" class="btn btn-lg mt-4 normal-case
|
|
bg-yellow-500 text-white /* สีพื้นหลังเหลือง */
|
|
hover:bg-yellow-600 /* สีพื้นหลังเมื่อโฮเวอร์ */
|
|
active:bg-yellow-700 /* สีพื้นหลังเมื่อคลิก */
|
|
focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 /* Focus ring */
|
|
shadow-md /* เพิ่มเงาเล็กน้อย */
|
|
rounded-lg /* ทำให้โค้งมนขึ้นเล็กน้อย */
|
|
">
|
|
เข้าสู่เว็บไซต์
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
// เปลี่ยนมา import useLandingPageViewStore
|
|
import { useLandingPageViewStore } from '@/stores/landingPageView';
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
// เปลี่ยนมาใช้ useLandingPageViewStore
|
|
const landingPageViewStore = useLandingPageViewStore();
|
|
|
|
const check = ref(false);
|
|
|
|
const mainBannerSrc = computed(() => {
|
|
// ดึงข้อมูลจาก landingPageViewStore
|
|
const data = landingPageViewStore.mainBannerData;
|
|
if (data && data.url) { // ตรวจสอบ .url โดยตรงจาก mainBannerData
|
|
return `${landingPageViewStore.imageBaseUrl}${data.url}`;
|
|
}
|
|
return '';
|
|
});
|
|
|
|
onMounted(async () => { // คง async ไว้ ถ้ามี fetchLandingPageData จริงๆ
|
|
// เรียก fetchLandingPageData ของ Store เฉพาะ
|
|
await landingPageViewStore.fetchLandingPageData();
|
|
|
|
const mainBannerConfig = landingPageViewStore.mainBannerData;
|
|
|
|
if (mainBannerConfig && mainBannerConfig.startDate && mainBannerConfig.endDate) {
|
|
const parseDateString = (dateString) => {
|
|
const parts = dateString.split('/');
|
|
return new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
|
|
};
|
|
|
|
let from = parseDateString(mainBannerConfig.startDate);
|
|
let to = parseDateString(mainBannerConfig.endDate);
|
|
let today = new Date();
|
|
let dd = String(today.getDate()).padStart(2, '0');
|
|
let mm = String(today.getMonth() + 1).padStart(2, '0');
|
|
let yyyy = today.getFullYear();
|
|
let currentDate = `${mm}/${dd}/${yyyy}`;
|
|
let checkDate = parseDateString(currentDate);
|
|
|
|
check.value = checkDate >= from && checkDate <= to;
|
|
} else {
|
|
check.value = true;
|
|
}
|
|
|
|
// Debugging logs:
|
|
console.log('Main Banner Data from LandingPageViewStore:', landingPageViewStore.mainBannerData);
|
|
console.log('Main Banner Image Source:', mainBannerSrc.value);
|
|
console.log('Check date result (check.value):', check.value);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* สไตล์ Tailwind CSS และ DaisyUI จะจัดการเรื่องความสวยงามเป็นหลัก */
|
|
</style> |