mingnan-website/src/views/NewsView.vue

<template>
  <!-- 资讯动态页 -->
  <div class="main-background">
    <!-- 轮播 -->
    <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
      <Slide class="main-header-box small">
        <img src="@/assets/images/news/Banner.jpg" />
      </Slide>
      <template #addons>
        <Pagination />
      </template>
    </Carousel>

    <!-- 头部搜索 -->
    <section class="main-section absolute light fit-small-header">
      <div class="content row">
        <div class="col-md-12 col-lg-8 col-xl-6">
          <div class="main-header-title d-flex flex-column">
            <h1 class="mt-3">闽南文化保护区资讯动态</h1>
            <p>查看最新相关资讯</p>
            <div class="d-flex flex-column flex-sm-row flex-md-row flex-lg-row">
              <Dropdown 
                v-model:selectedValue="searchRegion"
                class="dark me-3 mb-3 mb-md-0 mb-lg-0" 
                :options="regionData" 
              />
              <SimpleInput 
                v-model="searchValue" 
                class="dark" 
                placeholder="在此输入资讯动态关键词进行搜索"
                @search="newsLoader.loadData(undefined, true)"
              >
                <template #prefix>
                  <img src="@/assets/images/news/IconSearch.png" alt="搜索" @click="newsLoader.loadData(undefined, true)" />
                </template>
              </SimpleInput>
            </div>
          </div>
        </div>
        <div class="col-md-12 col-lg-4 col-xl-6">
        </div>
      </div>
      <!-- 头部TAB -->
      <div class="main-header-tab">
        <div class="list">
          <div 
            v-for="(tab, k) in mainTabs"
            :key="k"
            :class="[ mainTabActive === tab.value ? 'active' : '' ]"
            @click="mainTabActive = tab.value"
          >
            {{ tab.title }}
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻 -->
    <section class="main-section main-background main-background-type0">
      <div class="content news-list">
        <!-- 新闻列表 -->
        <SimplePageContentLoader :loader="newsLoader">
          <div 
            v-for="(item, k) in newsLoader.list.value"
            :key="item.id"
            class="item"
            @click="router.push({ name: 'news-detail', query: { id: item.id }})"
          >
            <img :src="item.image" alt="新闻图片" />
            <TitleDescBlock
              :title="item.title"
              :desc="item.desc || item.title"
              :date="DateUtils.formatDate(item.publish_at, DateUtils.FormatStrings.YearCommon)"
            />
          </div>
        </SimplePageContentLoader>
        <!-- 分页 -->
        <Pagination2
          v-model:currentPage="newsLoader.page.value"
          :totalPages="newsLoader.totalPages.value"
        />
      </div>
    </section>


  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination } from 'vue3-carousel'
import { onMounted, ref, watch } from 'vue';
import { useSimplePagerDataLoader } from '@/composeable/SimplePagerDataLoader';
import { useRouter } from 'vue-router';
import Dropdown from '@/components/controls/Dropdown.vue';
import SimpleInput from '@/components/controls/SimpleInput.vue';
import Pagination2 from '@/components/controls/Pagination.vue';
import TitleDescBlock from '@/components/parts/TitleDescBlock.vue';
import NewsIndexContent from '@/api/news/NewsIndexContent';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import DateUtils from '@/common/utils/DateUtils';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';

const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoPlay: 5000,
}
const mainTabs = [
  { title: '活动公告', value: 0  },
  { title: '文化热搜榜', value: 1  },
  { title: '活动报名', value: 2  },
]
const mainTabActive = ref(0);

const router = useRouter();

const searchValue = ref('');
const searchRegion = ref(0); 
const regionData = ref([
  { title: '不限', value: 0  },
]);

const newsLoader = useSimplePagerDataLoader(10, async (page, pageSize) => {
  const res = await NewsIndexContent.getContentList(new GetContentListParams().setSelfValues({
    keywords: searchValue.value,
    region: searchRegion.value === 0 ? undefined : searchRegion.value,
  }), page, pageSize);
  return {
    data: res.list,
    total: res.total,
  };
});

watch(searchRegion, () => {
  newsLoader.loadData(undefined, true);
});

onMounted(async () => {
  newsLoader.loadData(undefined, true);
  regionData.value = [
    { title: '不限', value: 0  },
    ...((await CommonContent.getCategoryList(1)).map(p => ({
      title: p.title,
      value: p.id,
    }))),
  ]
})
</script>