minnan-website/src/pages/inheritor.vue

<template>
  <!-- 保护传承页 -->
  <div class="main-background main-background-type0">
    <!-- 轮播 -->
    <Carousel v-bind="carouselConfig" class="main-header-box small carousel-light">
      <Slide class="main-header-box small">
        <img src="@/assets/images/inheritor/Banner.jpg" />
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>

    <!-- 数据统计 -->
    <section class="main-section main-background main-background-type2">
      <div class="content">
        <div class="title">
          <h2>数据统计</h2>
        </div>

        <SimplePageContentLoader :loader="statsData">
          <div class="d-flex row">
            <div 
              class="col-12 col-md-6 col-lg-4 col-xl-4" 
              v-for="(stat,key) in statsData.content.value" 
              :key="key"
            >
              <div :class="`main-card-box type${stat.type}`">
                <div class="content">
                  <h4>{{ stat.title || '\u200b' }}</h4>
                  <div class="descs">
                    <div 
                      v-for="(data, key2) in stat.datas"
                      :key="key2"
                      @click="data.onClick"
                    >
                      <h5>{{ data.title }}</h5>
                      <p>{{ data.value }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </SimplePageContentLoader>
      </div>
    </section>

    <!-- 非遗传承 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title">
          <h2>非遗传承</h2>
        </div>
        <ThreeImageList :list="list1" />
      </div>
    </section>

    <!-- 世界文化遗产 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title">
          <h2>世界文化遗产</h2>
        </div>
        <LeftRightBox 
          title="世界文化遗产"
          :desc="overviewsLoader.content.value?.[0]"
          :image="Image9"
          :showExpand="false"
          :rightItems="heritageData.content.value"
          @rightItemDefaultClick="(item) => navTo('/news/detail', { id: item.id })"
          @moreClick="navTo('/inheritor/heritage')"
        />
      </div>
    </section>

    <!-- 重要相关文物古迹 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title">
          <h2>重要相关文物古迹</h2>
        </div>
        <ThreeImageList :list="list2" />
      </div>
    </section>

    <!-- 历史文化街区 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title">
          <h2>历史文化街区</h2>
        </div>
        <LeftRightBox 
          title="历史文化街区"
          :desc="overviewsLoader.content.value?.[1]"
          :image="Image11"
          :showExpand="false"
          left
          :rightItems="areaData.content.value"
          @rightItemDefaultClick="(item) => navTo('/news/detail', { id: item.id })"
          @moreClick="navTo('/inheritor/block')"
        />
      </div>
    </section>

    <!-- 重要闽南记忆遗产 -->
    <section class="main-section">
      <div class="content">
        <div class="title">
          <h2>重要闽南记忆遗产</h2>
        </div>
        <LeftRightBox 
          title="重要闽南记忆遗产"
          :desc="overviewsLoader.content.value?.[3]"
          :image="Image10"
          :showExpand="false"
          :rightItems="minnanyuLoader.content.value"
          @rightItemDefaultClick="(item) => navTo('/news/detail', { id: item.id })"
          @moreClick="navTo('/inheritor/language')"
        />
      </div>
    </section>

  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { onMounted, ref } from 'vue';
import Image1 from '@/assets/images/inheritor/Image1.jpg'
import Image2 from '@/assets/images/inheritor/Image2.jpg'
import Image3 from '@/assets/images/inheritor/Image3.jpg'
import Image4 from '@/assets/images/inheritor/Image4.jpg'
import Image5 from '@/assets/images/inheritor/Image5.jpg'
import Image7 from '@/assets/images/inheritor/Image7.jpg'
import Image8 from '@/assets/images/inheritor/Image8.jpg'
import Image9 from '@/assets/images/inheritor/Image9.jpg'
import Image10 from '@/assets/images/inheritor/Image10.jpg'
import Image11 from '@/assets/images/inheritor/Image11.jpg'
import LeftRightBox from '@/components/parts/LeftRightBox.vue';
import ThreeImageList from '@/components/parts/ThreeImageList.vue';
import { usePageAction } from '@/composeable/PageAction';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import CommonContent, { GetColumListParams, GetContentListParams } from '@/api/CommonContent';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import IndexContent from '@/api/introduction/IndexContent';
import SeminarContent from '@/api/inheritor/SeminarContent';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';

const NO_CONTENT_STRING = '';
const { navTo } = usePageAction();

const carouselConfig = {
  itemsToShow: 1,
  wrapAround: true,
  autoPlay: 5000,
}
const list1 = [
  {
    title: '非遗项目',
    desc: '让文化因传承而永存',
    image: Image1,
    onClick: () => navTo('/inheritor/projects'),
  },
  {
    title: '非遗传承人',
    desc: '让文化因传承而永存',
    image: Image2,
    onClick: () => navTo('/inheritor/inheritor'),
  },
  /* {
    title: '非遗作品',
    desc: '让文化因传承而永存',
    image: Image3,
    onClick: () => navTo('/inheritor/products'),
  },
  {
    title: '非遗活动',
    desc: '让文化因传承而永存',
    image: Image4,
    onClick: () => navTo('/inheritor/activity'),
  }, */
  {
    title: '非遗传习所',
    desc: '让文化因传承而永存',
    image: Image5,
    onClick: () => navTo('/inheritor/seminar'),
  },
]
const list2 = [
  {
    title: '不可移动文物',
    desc: '让文化因传承而永存',
    image: Image7,
    onClick: () => navTo('/inheritor/unmoveable'),
  },
  {
    title: '可移动文物',
    desc: '让文化因传承而永存',
    image: Image8,
    onClick: () => navTo('/inheritor/moveable'),
  },
  {
    title: '',
    desc: '',
    image: ''
  },
]

const areaData = useSimpleDataLoader(async () => 
 (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(17)
    .setMainBodyColumnId(286)
  , 1, 6)).list
)
const heritageData = useSimpleDataLoader(async () => 
 (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(17)
    .setMainBodyColumnId(310)
  , 1, 6)).list
)
const blockData = useSimpleDataLoader(async () => 
 (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(17)
    .setMainBodyColumnId(286)
  , 1, 6)).list
)
const minnanyuLoader = useSimpleDataLoader(async () => 
 (await CommonContent.getContentList(new GetContentListParams()
    .setModelId(18)
    .setMainBodyColumnId(318)
  , 1, 6)).list
)
const overviewsLoader = useSimpleDataLoader(async () => {
  return [
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(17)
        .setMainBodyColumnId(310)
    )).list[0]?.overview || NO_CONTENT_STRING,
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(17)
        .setMainBodyColumnId(286)
    )).list[0]?.overview || NO_CONTENT_STRING,
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(17)
        .setMainBodyColumnId(235)
    )).list[0]?.overview || NO_CONTENT_STRING,
    (await IndexContent.getColumList(
      new GetColumListParams()
        .setModelId(18)
        .setMainBodyColumnId(318)
    )).list[0]?.overview || NO_CONTENT_STRING,
  ]
});

const statsData = useSimpleDataLoader(async () => {
  const data = (await IndexContent.getStats());
  const semiCount = (await SeminarContent.getContentList(new GetContentListParams(), 1, 1)).total;
  const unmoveableCount = (await UnmoveableContent.getContentList(new GetContentListParams(), 1, 1)).total;

  return [
    {
      title: '非遗代表性项目',
      type: '1',
      datas: data.ichData.filter((p: any) => [ '人类非遗', '国家级', '省级', '市级' ].includes(p.level_text)).map((item: any) => {
        return {
          title: item.level_text,
          value: item.total,
          onClick: () => {
            navTo('/inheritor/projects', { level: item.level });
          },
        }
      })
    },
    {
      title: '非遗代表性传承人',
      type: '2',
      datas: data.inheritorData.filter((p: any) => [ '国家级', '省级', '市级'/* , '区县级' */ ].includes(p.title)).map((item: any) => {
        return {
          title: item.title,
          value: item.total,
          onClick: () => {
            navTo('/inheritor/inheritor', { level: item.level });
          },
        }
      })
    },
    {
      title: '其他传承项目',
      type: '1',
      datas: [
        {
          title: '传习所',
          value: semiCount,
          onClick: () => navTo('/inheritor/seminar'),
        },
        {
          title: '传统村落',
          value: data.villageData[0]?.total ?? 0,
          onClick: () => navTo('/village/index'),
        },
        {
          title: '文物古迹',
          value: unmoveableCount,
          onClick: () => navTo('/inheritor/unmoveable'),
        },
      ],
    },
    /* {
      title: '不可移动文物',
      type: '3',
      datas: data.crData.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '传习中心',
      type: '3',
      datas: data.ichCenter.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '闽南文化重要相关文物古迹',
      type: '2',
      datas: data.minnanCr.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '重要相关历史风貌区',
      type: '1',
      datas: data.historyData.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    }, */
  ]

});

const carousel3Config = ref({
  itemsToShow: 4,
  mouseWheel: true,
  wrapAround: true,
  autoplay: 3000,
});

onMounted(() => {
  if (window.innerWidth <= 435) {
    carousel3Config.value.itemsToShow = 1;
  } else if (window.innerWidth <= 768) {
    carousel3Config.value.itemsToShow = 2;
  } 
})



</script>

<style lang="scss">


@media (max-width: 425px) {
  
}
</style>