minnan/src/pages/article/data/CommonCategoryBlocks.vue

<template>
  <!--通用内容首页小分块组件-->
  <FlexCol width="100%">
    <!-- 分类 -->
    <template v-for="(category,i) in categoryDatas" :key="i">
      <HomeTitle 
        v-if="category.showTitle"
        :title="category.title"
        :titleLevel="category.textLevel"
        :showMore="category.showMore !== false"
        :moreText="category.moreText || '更多'"
        @clickMore="category.morePage" 
      />
      <!--预制块-->
      <template v-if="category.type === 'CalendarBlock'">
        <CalendarBlock v-bind="category.blockProps" />
      </template>
      <template v-else-if="category.type === 'StatsBlock'">
        <StatsBlock v-bind="category.blockProps" />
      </template>
      <template v-else-if="category.type === 'MapBlock'">
        <MapCategoryBlock v-bind="category.blockProps" />
      </template>
      <template v-else-if="category.type === 'AudioBlock'">
        <AudioBlock v-bind="category.blockProps" />
      </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.detailsPage(item)"
            />
          </template>
          <template v-else-if="category.type === 'large-image'">
            <FlexCol>
              <Box2LineLargeImageUserShadow
                v-for="(item, i) in category.data.content.value"
                titleColor="title-text"
                fixSize
                title1
                :key="i"
                :title="item.title"
                :desc="item.desc"
                :image="item.image"
                :tags="(item.bottomTags as string[])"
                @click="category.detailsPage(item)"
              />
            </FlexCol>
          </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.detailsPage(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"
                  :tags="(item.bottomTags as string[])"
                  @click="category.detailsPage(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"
                :tags="(item.bottomTags as string[])"
                @click="category.detailsPage(item)"
              />
            </FlexRow>
          </template>
          <template v-else-if="category.type === 'small-grid2'">
            <view class="d-flex flex-row justify-between flex-wrap">
              <view 
                v-for="(tab, k) in category.data.content.value"
                :key="k"
                class="grid4-item position-relative mb-3"
                @click="category.detailsPage(tab)"
              >
                <text 
                  class="tag bg-mask-white color-primary radius-l p-1 position-absolute size-s text-lines-1"
                >
                  {{ tab.title }}
                </text> 
                <Image
                  width="100%"
                  :height="250"
                  :radius="15"
                  :defaultImage="AppCofig.defaultImage"
                  :src="tab.thumbnail || tab.image"
                  mode="aspectFit"
                />
              </view>  
            </view>
          </template>
          <template v-else-if="category.type === 'simple-text'">
            <FlexCol>
              <Box2LineImageRightShadow
                v-for="(item, i) in category.data.content.value"
                titleColor="title-text"
                :border="false"
                fixSize
                :key="i"
                :title="item.title"
                :desc="item.desc"
                :showImage="false"
                :tags="(item.bottomTags as string[])"
              />
            </FlexCol>
          </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.detailsPage(item)"
            />
          </template>
        </FlexCol>
      </SimplePageContentLoader>  
    </template>
  </FlexCol>
</template>

<script setup lang="ts">;
import { computed, onMounted, watch, type PropType } from 'vue';
import CommonContent, { CommonContentApi, GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import { navCommonDetail, navCommonList, resolveCommonContentGetPageDetailUrlAuto, resolveCommonContentSolveProps, useHomeCommonCategoryBlock, type HomeCommonCategoryBlockProps, type IHomeCommonCategoryBlock } from '../common/CommonContent';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { navTo } from '@/components/utils/PageAction';
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';
import StatsBlock from '@/pages/blocks/StatsBlock.vue';
import MapCategoryBlock from '@/pages/blocks/MapBlock.vue';
import Image from '@/components/basic/Image.vue';
import AppCofig from '@/common/config/AppCofig';
import type { CategoryDefine } from './CommonCategoryBlocks';
import type { IHomeCommonCategoryDynamicDataDetailContent } from './CommonCategoryDynamicData';
import AudioBlock from '@/pages/blocks/AudioBlock.vue';

const props = defineProps({
  /**
   * 分类定义
   */
  categoryDefine: {
    type: Array as PropType<CategoryDefine[]>,
    default: () => [],
  }
});

const categoryDatas = computed(() => props.categoryDefine.map(item => { 
  if (!item.content)
    return {
      ...item,
      detailsPage: () => {},
      morePage: () => {
        if (item.morePage)
          navTo(item.morePage, {});
      },
      data: null,
    };

  const defaultDetailsPageHandler = (dataItem: GetContentListItem) => {
    const id = dataItem.id;
    const content = item.content as CommonContentApi;
    if (item.detailsPage) {
      if (item.detailsPage === 'byContent')
        navTo(resolveCommonContentGetPageDetailUrlAuto(dataItem), { id });
      else
        navTo(item.detailsPage, { id });
    } else {
      navCommonDetail({
        id,
        mainBodyColumnId: content.mainBodyColumnId,
        modelId: content.modelId,
      })
    }
  };
  if (item.content instanceof CommonContentApi) {
    return {
      ...item,
      detailsPage: defaultDetailsPageHandler,
      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.detailsPage,
            dataSolve: item.dataSolve || [],
          })
        }
      },
      data: useSimpleDataLoader(async () => {
        let res = (await (item.content as CommonContentApi)
          .getContentList(new GetContentListParams(), 1, item.count || 4))
          .list;
        return resolveCommonContentSolveProps(res, item.dataSolve || []);;
      }, false)
    }
  } else {
    switch (item.content.type) {
      case 'CommonCategoryBlock':
        return {
          ...item,
          detailsPage: item.content.goDetail,
          morePage: item.content.goList,
          data: item.content.loader,
        }
      case 'detailContent':
        return {
          ...item,
          detailsPage: defaultDetailsPageHandler,
          morePage: () => {},
          data: useSimpleDataLoader(async () => {
            console.log(item);
            const data = item.data as IHomeCommonCategoryDynamicDataDetailContent;
            const res = await CommonContent.getContentDetail(data.params!.id, undefined, data.params!.modelId || undefined);
            return resolveCommonContentSolveProps([res as any], item.dataSolve || []);;
          }, false),
        }
      default: {
        const block = useHomeCommonCategoryBlock({
          ...item.content,
          dataSolve: item.dataSolve ?? [],
        }, false);
        return {
          ...item,
          detailsPage: block.goDetail,
          morePage: block.goList,
          data: block.loader,
        }
      }
    }
  }
}));

function loadCategoryDatas() {
  categoryDatas.value.forEach(item => {
    if (item.data)
      item.data.loadData(undefined, true);
  })
}

watch(categoryDatas, loadCategoryDatas);
onMounted( loadCategoryDatas);
</script>