mingnan-website/src/views/AboutView.vue

<template>
  <!-- 关于页 -->
  <div class="about main-background main-background-type0">
    <!-- 轮播 -->
    <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
      <Slide class="main-header-box small">
        <img src="@/assets/images/about/Banner.jpg" />
      </Slide>
      <template #addons>
        <Navigation />
        <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">
          </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 v-if="mainTabActive <= 2" 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.publishAt, DateUtils.FormatStrings.YearCommon)"
            />
          </div>
        </SimplePageContentLoader>
        <!-- 分页 -->
        <Pagination2
          v-model:currentPage="newsLoader.page.value"
          :totalPages="newsLoader.totalPages.value"
        />
      </div>
    </section>

    <!-- 法律法规 -->
    <section v-if="mainTabActive == 3" class="main-section">
      <div class="content">
        <div class="title left-right">
          <h2>法律法规</h2>
          <div class="small-more" @click="navTo('/introduction/policy')">
            <span>更多信息</span>
            <img src="@/assets/images/index/ButtonMore.png" alt="更多" />
          </div>
        </div>
        <SimplePageContentLoader :loader="lawsData">
          <ImageTextSmallBlock
            v-for="(item, index) in lawsData.content.value"
            :key="index"
            :title="item.title"
            :image="item.image"
            :date="item.date"
            @click="navTo('/news/detail', { id: item.id })"
          />
        </SimplePageContentLoader>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { onMounted, ref, watch } from 'vue';
import { useSimplePagerDataLoader } from '@/composeable/SimplePagerDataLoader';
import Pagination2 from '@/components/controls/Pagination.vue';
import TitleDescBlock from '@/components/parts/TitleDescBlock.vue';
import ImageTextSmallBlock from '@/components/parts/ImageTextSmallBlock.vue';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import DateUtils from '@/common/utils/DateUtils';
import PolicyContent from '@/api/introduction/PolicyContent';
import LawsTest from '@/assets/images/inheritor/LawsTest.jpg'
import { useRouter } from 'vue-router';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { usePageAction } from '@/composeable/PageAction';

const { navTo } = usePageAction();

const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoPlay: 5000,
}

const mainTabs = [
  { title: '闽南文化概况', value: 0 },
  { title: '闽南文化生态保护区概况', value: 1 },
  { title: '世界闽南文化交流中心', value: 2 },
  { title: '法律法规', value: 3 },
]
const mainTabActive = ref(0);

const router = useRouter();

const newsLoader = useSimplePagerDataLoader(10, async (page, pageSize) => {
  let res;
  switch (mainTabActive.value) {
    default:
    case 0:
      res = await CommonContent.getContentList(new GetContentListParams()
        .setModelId(17)
        .setMainBodyColumnId([ ])
      , page, pageSize);
      break;
    case 1:
      res = await CommonContent.getContentList(new GetContentListParams()
        .setModelId(17)
        .setMainBodyColumnId([ 255, 256, 283, 284, ])
      , page, pageSize);
      break;
    case 2:
      res = await CommonContent.getContentList(new GetContentListParams()
        .setModelId(17)
        .setMainBodyColumnId([ 232 ])
      , page, pageSize);
      break;
  }
  return {
    data: res.list,
    total: res.total,
  };
});

const lawsData = useSimpleDataLoader(async () => 
  (await PolicyContent.getContentList(new GetContentListParams(), 1, 8))
    .list?.map(item => ({
      id: item.id,
      title: item.title,
      image: item.image || LawsTest,
      date: DateUtils.formatDate(item.publishAt, DateUtils.FormatStrings.YearCommon),
    }))
)

watch(mainTabActive, () => newsLoader.loadData(undefined, true))

onMounted(async () => {
  newsLoader.loadData(undefined, true);
})
</script>

<style lang="scss">


@media (max-width: 425px) {
  
}
</style>