mingnan-website/src/pages/introduction/index.vue

<template>
  <!-- 文化常识页 -->
  <div class="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/introduction/Banner.jpg" />
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>

    <!-- 历史和地理背景 -->
    <section class="main-section main-background pb-0">
      <div class="content">
        <div class="title">
          <h2>历史和地理背景</h2>
        </div>

        <LeftRightBox 
          title="闽南历史和地理背景"
          :desc="overviewsLoader.content.value?.[0]"
          :image="Image1"
          :rightItems="historyData.content.value"
          :moreLink="router.resolve({ path: '/introduction/history' }).href"
        />
      </div>
    </section>

    <!-- 闽南方言 -->
    <section class="main-section main-background pb-0">
      <div class="content">
        <div class="title">
          <h2>闽南方言</h2>
        </div>

        <LeftRightBox 
          title="闽南方言"
          :desc="overviewsLoader.content.value?.[1]"
          :image="Image2"
          left
          :rightItems="languageData.content.value"
          :moreLink="router.resolve({ path: '/introduction/language' }).href"
        />
      </div>
    </section>

    <!-- 文化专题 -->
    <section class="main-section main-background">
      <div class="content">
        <div class="title">
          <h2>文化专题</h2>
        </div>

        <ThreeImageList :list="list" />
      </div>
    </section>

  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import IndexContent from '@/api/introduction/IndexContent';
import Image1 from '@/assets/images/introduction/Image1.jpg';
import Image2 from '@/assets/images/introduction/Image2.jpg';
import CategoryImage1 from '@/assets/images/introduction/CategoryImage1.jpg';
import CategoryImage2 from '@/assets/images/introduction/CategoryImage2.jpg';
import CategoryImage3 from '@/assets/images/introduction/CategoryImage3.jpg';
import CategoryImage4 from '@/assets/images/introduction/CategoryImage4.jpg';
import CategoryImage5 from '@/assets/images/introduction/CategoryImage5.jpg';
import CategoryImage6 from '@/assets/images/introduction/CategoryImage6.jpg';
import CategoryImage7 from '@/assets/images/introduction/CategoryImage7.jpg';
import LeftRightBox from '@/components/parts/LeftRightBox.vue';
import ThreeImageList from '@/components/parts/ThreeImageList.vue';
import { useSSrSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { GetColumListParams, GetContentListParams } from '@/api/CommonContent';
import { NO_CONTENT_STRING } from '@/common/ConstStrings';
import HistoryContent from '@/api/introduction/HistoryContent';
import LanguageContent from '@/api/introduction/LanguageContent';

const router = useRouter();

const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoPlay: 5000,
}
const list = [
  {
    title: '历史人物',
    desc: '让文化因传承而永存',
    image: CategoryImage1,
    link: '/introduction/character',
  },
  {
    title: '民间习俗',
    desc: '让文化因传承而永存',
    image: CategoryImage2,
    link: '/introduction/custom',
  },
  {
    title: '艺术特色',
    desc: '让文化因传承而永存',
    image: CategoryImage3,
    link: '/introduction/feature',
  },
  {
    title: '建筑文化',
    desc: '让文化因传承而永存',
    image: CategoryImage4,
    link: '/introduction/building',
  },
  {
    title: '饮食文化',
    desc: '让文化因传承而永存',
    image: CategoryImage5,
    link: '/introduction/victuals',
  },
  {
    title: '海洋文化',
    desc: '让文化因传承而永存',
    image: CategoryImage6,
    link: '/introduction/sea',
  },
  {
    title: '闽南文化百科',
    desc: '让文化因传承而永存',
    image: CategoryImage7,
    link: '/introduction/book',
  }
]

const historyData = await useSSrSimpleDataLoader('history', async () => 
 (await HistoryContent.getContentList(new GetContentListParams().setMainBodyColumnId([ 233, 250, 251 ]), 1, 6)).list.map(p => ({
    id: p.id,
    title: p.title,
    desc: p.desc,
    image: p.image,
    link: router.resolve({ path: '/news/detail', query: { id: p.id } }).href,
 }))
)
const languageData = await useSSrSimpleDataLoader('language', async () => 
 (await LanguageContent.getContentList(new GetContentListParams(), 1, 6)).list.map(p => ({
    id: p.id,
    title: p.title,
    desc: p.desc,
    image: p.image,
    link: router.resolve({ path: '/news/detail', query: { id: p.id } }).href,
 }))
)
const overviewsLoader = await useSSrSimpleDataLoader('overviews', async () => {
  return [
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(14)
        .setMainBodyColumnId(233)
    )).list[0]?.overview || NO_CONTENT_STRING,
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(5)
        .setMainBodyColumnId(235)
    )).list[0]?.overview || NO_CONTENT_STRING,
  ]
});

</script>