mingnan-website/src/views/IntrodView.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"
          @rightItemDefaultClick="(item) => navTo('/news/detail', { id: item.id })"
          @moreClick="navTo('/introduction/history')"
        />
      </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"
          @rightItemDefaultClick="(item) => navTo('/news/detail', { id: item.id })"
          @moreClick="navTo('/introduction/language')"
        />
      </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 { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { GetColumListParams, GetContentListParams } from '@/api/CommonContent';
import { NO_CONTENT_STRING } from '@/common/ConstStrings';
import { usePageAction } from '@/composeable/PageAction';
import HistoryContent from '@/api/introduction/HistoryContent';
import LanguageContent from '@/api/introduction/LanguageContent';

const { navTo } = usePageAction();

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

const historyData = useSimpleDataLoader(async () => 
 (await HistoryContent.getContentList(new GetContentListParams().setMainBodyColumnId([ 233, 250, 251 ]), 1, 6)).list
)
const languageData = useSimpleDataLoader(async () => 
 (await LanguageContent.getContentList(new GetContentListParams(), 1, 6)).list
)

const overviewsLoader = useSimpleDataLoader(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>