100 lines
4.4 KiB
Vue
100 lines
4.4 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="featureNewsDisplay.length > 0" class="flex flex-col">
|
|
<NewsItem :item="featureNewsDisplay[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 in generalNewsDisplay"
|
|
:key="item.id" class="flex flex-col"
|
|
>
|
|
<NewsItem :item="item" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:col-span-2 flex justify-end mt-8">
|
|
<router-link
|
|
to="/all-news" 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, watch } from 'vue'; // เพิ่ม watch
|
|
import NewsItem from './NewsItem.vue';
|
|
import { useAppStore } from '@/stores/app';
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
const appStore = useAppStore();
|
|
|
|
const featureNewsRaw = ref([]); // ข้อมูลดิบของข่าวเด่น (1 รายการ)
|
|
const generalNewsRaw = ref([]); // ข้อมูลดิบของข่าวทั่วไป (4 รายการ)
|
|
|
|
const more = "อ่านข่าวต่อ";
|
|
const more_en = "Read More";
|
|
|
|
// ฟังก์ชันสำหรับดึงข่าว
|
|
const fetchAndSetNews = async () => {
|
|
// ดึงข่าวเด่น: limit 1, feature=true. Store จะกรองให้ตาม isFeature, release_date, active/active_en
|
|
const featureResult = await appStore.find('news', '_limit=1&feature=true');
|
|
featureNewsRaw.value = Array.isArray(featureResult) ? featureResult : [];
|
|
|
|
// ดึงข่าวทั่วไป: limit 4, feature=false. Store จะกรองให้ตาม isFeature, release_date, active/active_en
|
|
const generalResult = await appStore.find('news', '_limit=4&feature=false');
|
|
generalNewsRaw.value = Array.isArray(generalResult) ? generalResult : [];
|
|
};
|
|
|
|
// Computed properties สำหรับแสดงผล (ไม่ได้กรอง feature หรือ date ซ้ำแล้ว)
|
|
// แต่ยังคงกรอง active/active_en เพื่อให้มั่นใจว่า UI แสดงตามภาษาที่ถูกต้อง
|
|
const featureNewsDisplay = ref([]);
|
|
const generalNewsDisplay = ref([]);
|
|
|
|
watch([featureNewsRaw, generalNewsRaw, () => appStore.checkLang.isTh], () => {
|
|
// ข่าวเด่นที่ถูกดึงมาแล้วจะถูกกรอง feature และ date มาแล้ว
|
|
featureNewsDisplay.value = appStore.checkLang.isTh
|
|
? featureNewsRaw.value.filter(item => item.active)
|
|
: featureNewsRaw.value.filter(item => item.active_en);
|
|
|
|
// ข่าวทั่วไปที่ถูกดึงมาแล้วจะถูกกรอง feature และ date มาแล้ว
|
|
generalNewsDisplay.value = appStore.checkLang.isTh
|
|
? generalNewsRaw.value.filter(item => item.active)
|
|
: generalNewsRaw.value.filter(item => item.active_en);
|
|
}, { immediate: true }); // เรียกใช้ทันทีเมื่อ component mounted หรือภาษาเปลี่ยน
|
|
|
|
onMounted(() => {
|
|
fetchAndSetNews();
|
|
});
|
|
|
|
// Watch language changes to refetch news list
|
|
watch(() => appStore.checkLang.isTh, () => {
|
|
fetchAndSetNews();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style> |