minnan-website/src/views/InheritorView.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 pb-0">
      <div class="content">
        <div class="title">
          <h2>数据统计</h2>
        </div>

        <SimplePageContentLoader :loader="statsData">
          <Carousel ref="carousel3Ref" v-bind="carousel3Config">
            <Slide v-for="(stat,key) in statsData.content.value" :key="key">
              <div :class="`main-card-box type${stat.type}`">
                <h4>{{ stat.title }}</h4>
                <div class="descs">
                  <div v-for="(data, key2) in stat.datas" :key="key2">
                    <h5>{{ data.title }}</h5>
                    <p>{{ data.value }}</p>
                  </div>
                </div>
              </div>
            </Slide>
            <template #addons>
              <Navigation />
            </template>
          </Carousel>
        </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>
        <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?.[0]"
          :image="Image9"
          :showExpand="false"
          @moreClick="navTo('/inheritor/heritage')"
        />
      </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
          @moreClick="navTo('/inheritor/area')"
        />
      </div>
    </section>

    <!-- 重要相关文物和古迹 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title">
          <h2>重要相关文物和古迹</h2>
        </div>
        <LeftRightBox 
          title="传统村落"
          :desc="overviewsLoader.content.value?.[2]"
          :image="Image10"
          :showExpand="false"
          @moreClick="navTo('/village/index')"
        />
      </div>
    </section>

    <!-- 法律法规 -->
    <section class="main-section pb-0">
      <div class="content">
        <div class="title left-right">
          <h2>法律法规</h2>
          <div class="small-more" @click="navTo('/introduction/policy')">
            <span>更多信息</span>
            <img src="@/assets/images/index/ButtonMore.png" alt="更多" />
          </div>
        </div>
        <SimplePageContentLoader :loader="lawsData">
          <ImageTextSmallBlock
            v-for="(item, index) in lawsData.content.value"
            :key="index"
            :title="item.title"
            :image="item.image"
            :date="item.date"
            @click="navTo('/news/detail', { id: item.id })"
          />
        </SimplePageContentLoader>
      </div>
    </section>

    <!-- 申报入口 -->
    <section class="main-section">
      <div class="content">
        <div class="title">
          <h2>申报入口</h2>
        </div>
        <img
          class="main-clickable mt-4 w-100"
          src="@/assets/images/inheritor/SubmitButton.png"
          alt="申报入口按钮"
          @click="navTo('/inheritor/submit')"
        />
      </div>
    </section>

  </div>
</template>

<script setup lang="ts">
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { onMounted, ref } from 'vue';
import LawsTest from '@/assets/images/inheritor/LawsTest.jpg'
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 Image6 from '@/assets/images/inheritor/Image6.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 ImageTextSmallBlock from '@/components/parts/ImageTextSmallBlock.vue';
import { usePageAction } from '@/composeable/PageAction';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import PolicyContent from '@/api/introduction/PolicyContent';
import { GetColumListParams, GetContentListParams } from '@/api/CommonContent';
import DateUtils from '@/common/utils/DateUtils';
import SimplePageContentLoader from '@/components/content/SimplePageContentLoader.vue';
import { NO_CONTENT_STRING } from '@/common/ConstStrings';
import IndexContent from '@/api/introduction/IndexContent';

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'),
  },
  {
    title: '',//'非遗管理',
    desc: '',//'让文化因传承而永存',
    image: '',//Image6,
  }
]
const list2 = [
  {
    title: '不可移动文物',
    desc: '让文化因传承而永存',
    image: Image7,
    onClick: () => navTo('/inheritor/unmoveable'),
  },
  {
    title: '可移动文物',
    desc: '让文化因传承而永存',
    image: Image8,
    onClick: () => navTo('/inheritor/moveable'),
  },
  {
    title: '',
    desc: '',
    image: ''
  },
]

const lawsData = useSimpleDataLoader(async () => 
  (await PolicyContent.getContentList(new GetContentListParams(), 1, 8))
    .list?.map(item => ({
      id: item.id,
      title: item.title,
      image: item.image || LawsTest,
      date: DateUtils.formatDate(item.publish_at, DateUtils.FormatStrings.YearCommon),
    }))
)
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,
  ]
});


const carousel3Config = ref({
  itemsToShow: 4,
  mouseWheel: true,
  wrapAround: true,
  autoplay: 3000,
});
const carousel3Ref = ref<any>(null);

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


const statsData = useSimpleDataLoader(async () => {
  const data = (await IndexContent.getStats());
  console.log(data);
  
  return [
    {
      title: '非遗项目',
      type: '1',
      datas: data.ichData.map((item: any) => {
        return {
          title: item.level_text,
          value: item.total
        }
      })
    },
    {
      title: '传承人',
      type: '2',
      datas: data.inheritorData.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
    {
      title: '不可移动文物',
      type: '3',
      datas: data.crData.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
        }
      })
    },
    {
      title: '传习中心',
      type: '3',
      datas: data.ichCenter.map((item: any) => {
        return {
          title: item.title,
          value: item.total
        }
      })
    },
  ]

});

</script>

<style lang="scss">


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