minnan/src/pages/introduction/inhert.vue

<template>
  <FlexCol :padding="[0, 30]" backgroundColor="background.page">
    
    <Tabs
      v-model:currentIndex="activeIndex"
      :width="690"
      :tabs="[
        {
          text: '非物质文化遗产',
        },
        {
          text: '物质文化遗产',
        },
      ]"
    />

    <template v-if="activeIndex === 0">
      <HomeTitle title="非遗项目" showMore @clickMore="navTo('/pages/inhert/intangible/list')" />
      <!-- 非遗项目 -->
      <SimplePageContentLoader :loader="intangibleData" >
        <scroll-view scroll-x>
          <FlexRow>
            <Box2LineLargeImageUserShadow
              v-for="(item, i) in intangibleData.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"
              @click="navTo('/pages/inhert/intangible/details', { id: item.id })"
            />
          </FlexRow>
        </scroll-view>
      </SimplePageContentLoader>

      <!-- 非遗传承人 -->
      <HomeTitle title="非遗传承人" showMore @clickMore="navTo('/pages/inhert/inheritor/list')" />
      <SimplePageContentLoader :loader="inheritorData">
        <FlexCol>
          <Box2LineImageRightShadow
            v-for="(item, i) in inheritorData.content.value"
            titleColor="title-text"
            fixSize
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.image"
            :tags="item.bottomTags"
            @click="navTo('/pages/inhert/inheritor/details', { id: item.id })"
          />
        </FlexCol>
      </SimplePageContentLoader>

      <!-- 保护单位 -->
      <HomeTitle title="保护单位" showMore @clickMore="navTo('/pages/inhert/unit/list')" />
      <SimplePageContentLoader :loader="unitData">
        <FlexCol>
          <Box2LineImageRightShadow
            v-for="(item, i) in unitData.content.value"
            titleColor="title-text"
            :border="false"
            fixSize
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :showImage="false"
            :tags="item.bottomTags"
          />
        </FlexCol>
      </SimplePageContentLoader>

      <!-- 非遗传习所 -->
      <HomeTitle title="非遗传习所" showMore @clickMore="navCommonList({
        title: '非遗传习所',
        modelId: SeminarContent.modelId,
        mainBodyColumnId: SeminarContent.mainBodyColumnId,
        detailsPage: '/pages/inhert/seminar/details',
      })" />
      <SimplePageContentLoader :loader="seminarData">
        <FlexCol overflow="visible">
          <Box2LineImageRightShadow
            v-for="(item, i) in seminarData.content.value"
            titleColor="title-text"
            fixSize
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.image"
            :tags="item.bottomTags"
            @click="navTo('/pages/inhert/seminar/details', { id: item.id })"
          />
        </FlexCol>
      </SimplePageContentLoader>

      <!-- 非遗活动 -->
      <HomeTitle title="非遗活动" showMore @clickMore="goActivityList" />
      <SimplePageContentLoader :loader="activityData">
        <FlexRow wrap align="stretch" justify="space-between" overflow="visible">
          <Box2LineLargeImageUserShadow
            v-for="(item, i) in activityData.content.value"
            titleColor="title-text"
            width="calc(50% - 10rpx)"
            fixSize
            :key="i"
            :title="item.title"
            :desc="item.desc"
            :image="item.image"
            @click="goActivityDetail(item)"
          />
        </FlexRow>
      </SimplePageContentLoader>
    </template>
    <template v-else-if="activeIndex === 1">
      <!-- 文物 -->
      <HomeTitle title="文物古迹" showMore @clickMore="navTo('/pages/inhert/artifact/list')" />
      <SimplePageContentLoader :loader="artifactData">
        <FlexRow wrap align="stretch" justify="space-between" overflow="visible">
          <Box2LineLargeImageUserShadow
            v-for="(item, i) in artifactData.content.value"
            width="calc(50% - 10rpx)"
            titleColor="title-text"
            fixSize
            :key="i"
            :title="item.title"
            :image="item.image"
            :tags="item.tags"
            title1
            @click="navTo('/pages/inhert/artifact/details', { id: item.id })"
          />
        </FlexRow>
        <Touchable direction="row" center :padding="10" :gap="20" @click="navTo('/pages/inhert/artifact/list')">
          <text>查看全部</text>
          <Icon name="arrow-right" />
        </Touchable>
      </SimplePageContentLoader>
    </template>

    <Footer text="到底了~" />
  </FlexCol>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { navTo } from '@/components/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { GetContentListParams } from '@/api/CommonContent';
import { navCommonList, useHomeCommonCategoryBlock } from '../article/common/CommonContent';
import SimplePageContentLoader from '@/common/components/SimplePageContentLoader.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import HomeTitle from '../parts/HomeTitle.vue';
import Box2LineLargeImageUserShadow from '../parts/Box2LineLargeImageUserShadow.vue';
import Box2LineImageRightShadow from '../parts/Box2LineImageRightShadow.vue';
import InheritorContent from '@/api/inheritor/InheritorContent';
import ProjectsContent from '@/api/inheritor/ProjectsContent';
import UnitContent from '@/api/inheritor/UnitContent';
import SeminarContent from '@/api/inheritor/SeminarContent';
import FlexRow from '@/components/layout/FlexRow.vue';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
import Footer from '@/components/display/Footer.vue';
import Tabs from '@/components/nav/Tabs.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Icon from '@/components/basic/Icon.vue';

const activeIndex = ref(0);

const intangibleData = useSimpleDataLoader(async () => 
  (await ProjectsContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
    id: p.id,
    title: p.title, 
    desc: p.desc, 
    image: p.thumbnail || p.image,
    bottomTags: [
      p.levelText, 
      p.ichTypeText, 
      p.batchText,
      p.regionText,
    ] as string[],
  }))
);
const inheritorData = useSimpleDataLoader(async () => 
  (await InheritorContent.getContentList(new GetContentListParams(), 2, 4)).list.map(p => ({
    id: p.id,
    title: p.title, 
    desc: p.desc, 
    image: p.thumbnail || p.image,
    titleBox: Boolean(p.deathBirth),
    bottomTags: [
      p.levelText, 
      p.nation,
      p.ichName
    ] as string[],
  }))
);
const unitData = useSimpleDataLoader(async () => 
  (await UnitContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
    id: p.id,
    title: p.title, 
    desc: '', 
    image: p.thumbnail || p.image,
    bottomTags: [
      p.levelText, 
      p.ichTypeText, 
      p.batchText,
      p.regionText,
    ] as string[],
  }))
);
const seminarData = useSimpleDataLoader(async () => 
  (await SeminarContent.getContentList(new GetContentListParams(), 1, 4)).list.map(p => ({
    id: p.id,
    title: p.title, 
    desc: p.desc, 
    image: p.thumbnail || p.image,
    bottomTags: [
      p.levelText, 
      p.ichTypeText, 
      p.batchText,
      p.regionText,
    ] as string[],
  }))
);
const artifactData = useSimpleDataLoader(async () => 
  (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 16)).list.map(p => ({
    id: p.id,
    title: p.title, 
    desc: '', 
    image: p.thumbnail || p.image,
    likes: p.likes,
    tags: [p.levelText, p.district] as string[],
    comment: p.comments,
  }))
);

const {
  loader: activityData,
  goList: goActivityList,
  goDetail: goActivityDetail,
} = useHomeCommonCategoryBlock({
  title: '非遗活动',
  mainBodyColumnId: 290,
  modelId: 18,
  itemType: 'article-common',
  detailsPage: '/pages/article/details',
});
</script>