minnan-website/src/pages/about/index.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="handleTabClick(tab.value)"
          >
            {{ tab.title }}
          </div>
        </div>
      </div>
    </section>

    <!-- 闽南文化生态保护区概况 -->
    <section v-if="mainTabActive == 0" class="main-section main-background main-background-type0">
      <div class="content">   
        <SimplePageContentLoader :loader="introdLoader">
          <div class="d-flex justify-content-center">
            <h2>{{ introdLoader.content.value?.introd1?.title }}</h2>
          </div>
          <LeftRightBox 
            class="mt-4"
            :title="introdLoader.content.value?.introd1?.title"
            :desc="introdLoader.content.value?.introd1?.content"
            :image="introdLoader.content.value?.introd1?.image"
            :rightItems="introdLoader.content.value?.list"
            :moreLink="router.resolve({ path: '/introduction/about' }).href"
          />
          <div class="d-flex justify-content-center mt-5">
            <h2>{{ introdLoader.content.value?.introd2?.title }}</h2>
          </div>
          <LeftRightBox 
            class="mt-4"
            :title="introdLoader.content.value?.introd2?.title"
            :desc="introdLoader.content.value?.introd2?.content"
            :image="introdLoader.content.value?.introd2?.image"
            :moreLink="router.resolve({ path: '/introduction/about' }).href"
          />
          <div class="d-flex justify-content-center mt-5">
            <h2>{{ introdLoader.content.value?.introd3?.title }}</h2>
          </div>
          <LeftRightBox 
            class="mt-4"
            :title="introdLoader.content.value?.introd3?.title"
            :desc="introdLoader.content.value?.introd3?.content"
            :image="introdLoader.content.value?.introd3?.image"
            :showMore="false"
            left
          />
        </SimplePageContentLoader>
      </div> 
    </section>

    <!-- 新闻 -->
    <section v-if="mainTabActive == 1" class="main-section main-background main-background-type0">
      <div class="content news-list">
        <!-- 新闻列表 -->
        <SimplePageContentLoader :loader="newsLoader">
          <NuxtLink 
            v-for="(item, k) in newsLoader.list.value"
            :key="item.id"
            class="item"
            :to="{ path: 'news/detail', query: { id: item.id }}"
          >
            <ImageTitleBlock 
              :image="item.thumbnail || item.image"
            />
            <TitleDescBlock
              :title="item.title"
              :desc="item.desc || item.title"
            />
          </NuxtLink>
        </SimplePageContentLoader>
        <!-- 分页 -->
        <Pagination2
          v-model:currentPage="newsLoader.page.value"
          :totalPages="newsLoader.totalPages.value"
          :ssrUrl="router.resolve(route).href"
        />
      </div>
    </section>

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

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { onMounted, ref, watch } from 'vue';
import { useSSrSimplePagerDataLoader } from '@/composeable/SimplePagerDataLoader';
import { useRouter } from 'vue-router';
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { DateUtils } from '@imengyu/imengyu-utils';
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 PolicyContent from '@/api/introduction/PolicyContent';
import LawsTest from '@/assets/images/inheritor/LawsTest.jpg'
import LeftRightBox from '@/components/parts/LeftRightBox.vue';
import NewsIndexContent from '@/api/news/NewsIndexContent';

const router = useRouter();
const route = useRoute();

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

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

function handleTabClick(value: number) {
  mainTabActive.value = value; 
}

const introdLoader = await useSSrSimpleDataLoader('introd', async () => {
  const res = await CommonContent.getContentList(new GetContentListParams()
        .setModelId(17)
        .setMainBodyColumnId([ 256, 283, 284 ])
      , 1, 10);
  const res2 = await CommonContent.getContentList(new GetContentListParams()
        .setModelId(17)
        .setMainBodyColumnId([ 234 ])
      , 1, 10);

  const id1 = res2.list.find(item => item.title.includes('厦门'))?.id; 
  const id2 = res2.list.find(item => item.title.includes('闽南') && !item.title.includes('厦门'))?.id; 
  const id3 = res2.list.find(item => item.title.includes('全国'))?.id; 
  
  const introd1 = id1 ? (await NewsIndexContent.getContentDetail(id1)).toJSON() : undefined;
  const introd2 = id2 ? (await NewsIndexContent.getContentDetail(id2)).toJSON() : undefined;
  const introd3 = id3 ? (await NewsIndexContent.getContentDetail(id3)).toJSON() : undefined;
  return {
    introd1,
    introd2,
    introd3,
    list: res.list.map(p => ({
      id: p.id,
      title: p.title,
      desc: p.desc,
      image: p.thumbnail || p.image,
      link: router.resolve({ path: '/news/detail', query: { id: p.id } }).href,
    })),
  };
})
const newsLoader = await useSSrSimplePagerDataLoader('news', Number(route.query.page as string || 1), 10, async (page, pageSize) => {
  let res;
  switch (mainTabActive.value) {
    default:
    case 1:
      res = await CommonContent.getContentList(new GetContentListParams()
        .setModelId(18)
        .setMainBodyColumnId([ 232 ])
      , page, pageSize);
      break;
  }
  return {
    data: res.list.map(p => p.toJSON()),
    total: res.total,
  };
});
const lawsData = await useSSrSimpleDataLoader('laws', async () => 
  (await PolicyContent.getContentList(new GetContentListParams(), 1, 8))
    .list?.map(item => ({
      id: item.id,
      title: item.title,
      image: item.thumbnail || item.image || LawsTest,
      date: DateUtils.formatDate(item.publishAt, DateUtils.FormatStrings.ShortDate),
      link: router.resolve({ path: '/news/detail', query: { id: item.id } }).href,
    }))
)

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

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

<style lang="scss">


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