minnan/src/pages/article/common/CommonCategoryHome.vue

<template>
  <!--通用内容首页小分块组件-->
  <FlexCol width="100%">
    <!-- 分类 -->
    <template v-for="category in categoryDatas" :key="category.title">
      <HomeTitle 
        :title="category.title"
        :showMore="category.showMore !== false"
        moreText="更多"
        @clickMore="category.morePage" 
      />
      <SimplePageContentLoader :loader="category.data" >
        <FlexCol>
          <template v-if="category.type === 'article'">
            <Box2LineRightShadow
              v-for="(item, i) in category.data.content.value" 
              :key="i" 
              :title="item.title"
              :desc="item.desc"
              :tags="(item.bottomTags as string[])"
              @click="category.detailPage(item)"
            />
          </template>
          <template v-else-if="category.type === 'large-image2'">
            <scroll-view scroll-x>
              <FlexRow>
                <Box2LineLargeImageUserShadow
                  v-for="(item, i) in category.data.content.value"
                  classNames="width-2-3 mr-2"
                  titleColor="title-text"
                  fixSize
                  title1
                  :key="i"
                  :title="item.title"
                  :desc="item.desc"
                  :image="item.image"
                  :tags="(item.bottomTags as string[])"
                  @click="category.detailPage(item)"
                />
              </FlexRow>
            </scroll-view>
          </template>
          <template v-else>
            <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 as string[])"
              @click="category.detailPage(item)"
            />
          </template>
        </FlexCol>
      </SimplePageContentLoader>  
    </template>
  </FlexCol>
</template>

<script setup lang="ts">;
import HomeTitle from '@/pages/parts/HomeTitle.vue';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import Box2LineImageRightShadow from '@/pages/parts/Box2LineImageRightShadow.vue';
import Box2LineRightShadow from '@/pages/parts/Box2LineRightShadow.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import type { PropType } from 'vue';
import { CommonContentApi, GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import { navCommonDetail, navCommonList, resolveCommonContentFormData, resolveCommonContentGetPageDetailUrlAuto, type IHomeCommonCategoryBlock } from './CommonContent';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { navTo } from '@/components/utils/PageAction';
import { DateUtils } from '@imengyu/imengyu-utils';
import FlexRow from '@/components/layout/FlexRow.vue';
import Box2LineLargeImageUserShadow from '@/pages/parts/Box2LineLargeImageUserShadow.vue';

export interface CategoryDefine {
  title: string;
  content: CommonContentApi|IHomeCommonCategoryBlock;
  type?: 'article'|'large-image2'|''|undefined;
  detailPage?: string;
  morePage?: string;
  noFrom?: boolean;
  showMore?: boolean;
}

const props = defineProps({
  categoryDefine: {
    type: Array as PropType<CategoryDefine[]>,
    default: () => [],
  }
});

const categoryDatas = props.categoryDefine.map(item => ({
  ...item,
  detailPage: (dataItem: GetContentListItem) => {
    const id = dataItem.id;
    if (item.content instanceof CommonContentApi) {
      if (item.detailPage) {
        if (item.detailPage === 'byContent')
          navTo(resolveCommonContentGetPageDetailUrlAuto(dataItem), { id });
        else
          navTo(item.detailPage, { id });
      } else {
        navCommonDetail({
          id,
          mainBodyColumnId: item.content.mainBodyColumnId,
          modelId: item.content.modelId,
        })
      }
    } else {
      item.content.goDetail(dataItem);
    }
  },
  morePage: () => {
    if (item.content instanceof CommonContentApi) {
      if (item.morePage) {
        navTo(item.morePage, {});
      } else {
        navCommonList({
          title: item.title,
          mainBodyColumnId: item.content.mainBodyColumnId,
          modelId: item.content.modelId,
          detailsPage: item.detailPage,
        })
      }
    } else {
      item.content.goList();
    }
  },
  data: item.content instanceof CommonContentApi ? useSimpleDataLoader(async () => {
    let res = (await (item.content as CommonContentApi)
      .getContentList(new GetContentListParams(), 1, 3))
      .list;
    if (!item.noFrom)
      res = resolveCommonContentFormData(res);
    else
      res.forEach(p => {
        if (!p.desc)
          p.desc = DateUtils.formatDate(p.publishAt, 'YYYY-MM-dd');
      })
    return res;
  }) : item.content.loader,
}));
</script>