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" 
      />
      <template v-if="category.type === 'CalendarBlock'">
        <CalendarBlock />
      </template>
      <SimplePageContentLoader v-else-if="category.data" :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-if="category.type === 'horizontal-large'">
            <scroll-view scroll-x>
              <view class="pb-3 pt-3 d-flex flex-row overflow-visible align-stretch">
                <Box2LineLargeImageUserShadow
                  v-for="(item, i) in category.data.content.value"
                  classNames="width-2-3 mr-2"
                  titleColor="title-text"
                  title1
                  fixSize
                  :key="i"
                  :title="item.title"
                  :desc="item.desc"
                  :image="item.thumbnail || item.image"
                  @click="category.detailPage(item)"
                />
              </view>
            </scroll-view>
          </template>
          <template v-else-if="category.type === 'large-grid2'">
            <FlexRow wrap align="stretch" justify="space-between" overflow="visible">
              <Box2LineLargeImageUserShadow
                v-for="(item, i) in category.data.content.value"
                titleColor="title-text"
                width="calc(50% - 10rpx)"
                fixSize
                :key="i"
                :title="item.title"
                :desc="item.desc"
                :image="item.image"
                @click="category.detailPage(item)"
              />
            </FlexRow>
          </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 { type PropType } from 'vue';
import { CommonContentApi, GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import { navCommonDetail, navCommonList, resolveCommonContentFormData, resolveCommonContentGetPageDetailUrlAuto, useHomeCommonCategoryBlock, type HomeCommonCategoryBlockProps, type IHomeCommonCategoryBlock } from './CommonContent';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { navTo } from '@/components/utils/PageAction';
import { DateUtils } from '@imengyu/imengyu-utils';
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 FlexRow from '@/components/layout/FlexRow.vue';
import CalendarBlock from '@/pages/travel/calendar/block.vue';
import Box2LineLargeImageUserShadow from '@/pages/parts/Box2LineLargeImageUserShadow.vue';

export interface CategoryDefine {
  title: string;
  content: CommonContentApi|IHomeCommonCategoryBlock|HomeCommonCategoryBlockProps|null;
  type?: 'article'|'large-image2'|'horizontal-large'|'large-grid2'|'CalendarBlock'|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 => { 
  if (!item.content)
    return {
      ...item,
      detailPage: () => {},
      morePage: () => {
        if (item.morePage) {
          navTo(item.morePage, {});
        }
      },
      data: null,
    };
  if (item.content instanceof CommonContentApi) {
    return {
      ...item,
      detailPage: (dataItem: GetContentListItem) => {
        const id = dataItem.id;
        const content = item.content as CommonContentApi;
        if (item.detailPage) {
          if (item.detailPage === 'byContent')
            navTo(resolveCommonContentGetPageDetailUrlAuto(dataItem), { id });
          else
            navTo(item.detailPage, { id });
        } else {
          navCommonDetail({
            id,
            mainBodyColumnId: content.mainBodyColumnId,
            modelId: content.modelId,
          })
        }
      },
      morePage: () => {
        const content = item.content as CommonContentApi;
        if (item.morePage) {
          navTo(item.morePage, {});
        } else {
          navCommonList({
            title: item.title,
            mainBodyColumnId: content.mainBodyColumnId,
            modelId: content.modelId,
            detailsPage: item.detailPage,
          })
        }
      },
      data: 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;
      })
    }
  } else {
    const block = item.content.type === 'CommonCategoryBlock' ? 
      item.content : 
      useHomeCommonCategoryBlock({
        ...item.content,
        resolveData: item.noFrom ? undefined : resolveCommonContentFormData,
      });
    return {
      ...item,
      detailPage: block.goDetail,
      morePage: block.goList,
      data: block.loader,
    }
  }
});
</script>