minnan/src/pages/introduction/map.vue

<template>
  <CommonRoot>
    <FlexCol :padding="30" :gap="15" innerClass="bg-base">
      <!-- 分类 -->
      <template v-for="category in categoryDatas" :key="category.title">
        <HomeTitle 
          :title="category.title"
          showMore 
          moreText="更多"
          @clickMore="category.morePage" 
        />
        <SimplePageContentLoader :loader="category.data" >
          <FlexCol>
            <Box2LineImageRightShadow
              v-for="(item, i) in category.data.content.value"
              titleColor="title-text"
              fixSize
              :key="i"
              :title="item.title"
              :desc="item.desc"
              :image="item.image"
              :tags="item.bottomTags"
              @click="category.detailPage(item.id)"
            />
          </FlexCol>
        </SimplePageContentLoader>  
      </template>
      <!-- 闽南文化概况 -->
      <HomeTitle title="闽南文化概况(厦门市)" />
      <SimplePageContentLoader :loader="introdData" >
        <FlexCol>
          <FlexRow
            v-for="(item, i) in introdData .content.value"
            :key="i"
            position="relative"
            align-items="stretch"
          >
            <Divider 
              centerDot
              type="vertical" 
              color="primary" 
            />
            <Width :width="15" />
            <Box2LineImageRightShadow
              titleColor="title-text"
              fixSize
              :title="item.title"
              :desc="item.desc"
              :showImage="false"
            >
            <template #desc>
              <TextEllipsis customContent maskColor="background.page">
                <Parse :content="item.desc" />
              </TextEllipsis>
            </template>
            </Box2LineImageRightShadow>
          </FlexRow>
        </FlexCol>
      </SimplePageContentLoader>  
    </FlexCol>
  </CommonRoot>
</template>

<script setup lang="ts">
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import HomeTitle from '../parts/HomeTitle.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import { navTo } from '@/components/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { GetColumListParams, GetContentListParams } from '@/api/CommonContent';
import { navHomePageMiniCommonDetailGo, navHomePageMiniCommonListGo } from '../article/common/CommonContent';
import CharacterContent from '@/api/introduction/CharacterContent';
import Box2LineImageRightShadow from '../parts/Box2LineImageRightShadow.vue';
import LanguageContent from '@/api/introduction/LanguageContent';
import CustomContent from '@/api/introduction/CustomContent';
import FeatureContent from '@/api/introduction/FeatureContent';
import BulidingContent from '@/api/introduction/BulidingContent';
import VictualsContent from '@/api/introduction/VictualsContent';
import SeaContent from '@/api/introduction/SeaContent';
import PolicyContent from '@/api/introduction/PolicyContent';
import HistoryContent from '@/api/introduction/HistoryContent';
import IndexContent from '@/api/introduction/IndexContent';
import Divider from '@/components/display/Divider.vue';
import Width from '@/components/layout/space/Width.vue';
import Parse from '@/components/display/parse/Parse.vue';
import TextEllipsis from '@/components/display/TextEllipsis.vue';

const categoryDefine = [
  {
    title: '文化常识和闽南历史地理背景',
    content: HistoryContent,
  },
  {
    title: '历史人物',
    content: CharacterContent,
    detailPage: '/pages/introduction/character/details',
    morePage: '/pages/introduction/character/list',
  },
  {
    title: '语言文化',
    content: LanguageContent,
  },
  {
    title: '民间习俗',
    content: CustomContent,
    morePage: '/pages/introduction/custom/list',
  },
  {
    title: '艺术特色',
    content: FeatureContent,
  },
  {
    title: '建筑文化',
    content: BulidingContent,
  },
  {
    title: '饮食文化',
    content: VictualsContent,
  },
  {
    title: '海洋文化',
    content: SeaContent,
  },
  {
    title: '政策法规',
    content: PolicyContent,
  },
]
const categoryDatas = categoryDefine.map(item => ({
  ...item,
  detailPage: (id: number) => {
    if (item.detailPage) {
      navTo(item.detailPage, { id });
    } else {
      navHomePageMiniCommonDetailGo({
        id,
        mainBodyColumnId: item.content.mainBodyColumnId,
        modelId: item.content.modelId,
      })
    }
  },
  morePage: () => {
    if (item.morePage) {
      navTo(item.morePage, {});
    } else {
      navHomePageMiniCommonListGo({
        title: item.title,
        mainBodyColumnId: item.content.mainBodyColumnId,
        modelId: item.content.modelId,
        detailsPage: item.detailPage,
      })
    }
  },
  data: useSimpleDataLoader(async () => 
    (await item.content.getContentList(new GetContentListParams(), 1, 3)).list.map(p => ({
      id: p.id,
      title: p.title, 
      desc: p.desc, 
      image: p.thumbnail || p.image,
      bottomTags: p.keywords as string[],
    }))
  ),
}));
const introdData = useSimpleDataLoader(async () => {
  let i = 0;
  const promises = [];
  for (const item of categoryDefine) {
    promises.push(IndexContent.getColumList(new GetColumListParams().setSelfValues({
      modelId: item.content.modelId,
      mainBodyColumnId: item.content.mainBodyColumnId,
    })))
  }
  const result = await Promise.all(promises);
  return result.map((data, i) => {
    const res = data.list[0];
    const item = categoryDefine[i];
    return {
      title: item.title,
      subtitle: '',
      date: '',
      desc: res.overview as string,
      index: i,
    }
  });
});
</script>