103 lines
3.7 KiB
Vue
103 lines
3.7 KiB
Vue
// src/components/News.vue
|
|
<template>
|
|
<div class="mt-6">
|
|
<div
|
|
class="p-4 bg-cover bg-center"
|
|
:style="`background-image: url('${appStore.imageBaseUrl}${appStore.headers.header_background.url}')`"
|
|
>
|
|
<h4
|
|
class="inline-block text-white text-2xl md:text-3xl font-semibold px-6 py-2 bg-[#1b3872] rounded shadow-md"
|
|
>
|
|
{{ appStore.checkLang.isTh ? 'เรื่องราวดี ๆ ที่เราอยากบอกต่อ' : 'Our Inspiring Stories' }}
|
|
</h4>
|
|
|
|
|
|
</div>
|
|
<div class="p-6" :style="`background-color:${appStore.headers.bgColor || '#ffffff'}`">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 ">
|
|
|
|
<div v-if="filteredFeatureNews.length > 0" class="flex flex-col">
|
|
<NewsItem :item="filteredFeatureNews[0]" :isFeature="true" />
|
|
</div>
|
|
<div v-else class="h-full">
|
|
<div class="bg-gray-200 flex items-center justify-center rounded-lg text-gray-500 h-full">
|
|
{{ appStore.checkLang.isTh ? 'ไม่พบข่าวเด่น' : 'No feature news found' }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div
|
|
v-for="(item, key) in filteredNews"
|
|
:key="key"
|
|
class="flex flex-col"
|
|
>
|
|
<NewsItem :item="item" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:col-span-2 flex justify-end mt-8">
|
|
<router-link
|
|
to="/news/HumanTechNews" class="btn bg-[#1b3872] text-white hover:bg-[#1b3872]/90 rounded-none border-none shadow-md"
|
|
>
|
|
{{ appStore.checkLang.isTh ? more : more_en }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue';
|
|
// ไม่ต้อง import Carousel, Slide แล้ว
|
|
import NewsItem from './NewsItem.vue'; // Component ย่อย
|
|
import { useAppStore } from '@/stores/app';
|
|
import { RouterLink } from 'vue-router'; // Import RouterLink
|
|
|
|
const appStore = useAppStore();
|
|
|
|
const news = ref([]);
|
|
const featureNews = ref([]); // ยังคงแยกเพื่อการ filter ที่ชัดเจน
|
|
const more = "อ่านข่าวต่อ";
|
|
const more_en = "Read More";
|
|
|
|
const filterNewsByDate = (items) => {
|
|
const today = new Date();
|
|
const currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate()); // Normalize to start of day
|
|
|
|
return items.filter(item => {
|
|
if (!item.release_date) return false;
|
|
const [month, day, year] = item.release_date.split('/');
|
|
const releaseDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
|
|
|
|
return releaseDate <= currentDate;
|
|
});
|
|
};
|
|
|
|
const filteredFeatureNews = computed(() => {
|
|
const langFiltered = appStore.checkLang.isTh
|
|
? featureNews.value.filter(item => item.active && item.feature)
|
|
: featureNews.value.filter(item => item.active_en && item.feature);
|
|
// **สำคัญ:** จำกัดให้เหลือแค่ 1 ข่าวเด่นที่จะแสดง
|
|
return filterNewsByDate(langFiltered).slice(0, 1);
|
|
});
|
|
|
|
const filteredNews = computed(() => {
|
|
const langFiltered = appStore.checkLang.isTh
|
|
? news.value.filter(item => item.active && !item.feature)
|
|
: news.value.filter(item => item.active_en && !item.feature);
|
|
// Limit to 4 items as per original logic
|
|
return filterNewsByDate(langFiltered).slice(0, 4);
|
|
});
|
|
|
|
|
|
onMounted(async () => {
|
|
const allNews = await appStore.find('news', '');
|
|
news.value = allNews;
|
|
featureNews.value = allNews; // featureNews ก็ยังใช้ allNews เหมือนเดิม
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |