mingnan-website/src/views/inheritor/projects.vue

<template>
  <!-- 文化传承 - 非遗项目 -->
  <CommonListPage
    :title="'非遗项目'"
    :prevPage="{ title: '保护传承' }"
    :dropDownNames="dropdownNames"
    :pageSize="8"
    :load="loadData"
    :loadDetail="loadDetail"
    :tagsData="tagsData"
    showTableSwitch
    :tableSwitchOptions="{
      title: '项目名称',
    }"
    :defaultSelectTag="tagsData[0].id"
    detailsPage="/inheritor/intangible-detail"
  />
</template>

<script setup lang="ts">
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import ProjectsContent from '@/api/inheritor/ProjectsContent';
import type { DropDownNames } from '@/components/content/CommonListPage.vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

async function loadDetail(id: number, _item: any) {
  const item = await ProjectsContent.getContentDetail(id);
  item.addItems = [
    { name: '非遗级别', text: item.levelText, span: 12 },
    { name: '非遗类别', text: item.ichTypeText, span: 12 },
    { name: '地区', text: item.district, span: 12 },
    { name: '批次', text: item.batchText, span: 12 },
  ];
  return item;
}
async function loadData(
  page: number, 
  pageSize: number,
  selectedTag: number,
  searchText: string,
  dropDownValues: number[]
) {
  const res = await ProjectsContent.getContentList(new GetContentListParams().setSelfValues({
    ichType: selectedTag == 0 ? undefined: selectedTag,
    level: dropDownValues[0] == 0 ? undefined: dropDownValues[0],
    region: dropDownValues[1] == 0 ? undefined: dropDownValues[1],
    keywords: searchText,
  }), page, pageSize);

  return { 
    page: page,
    total: res.total,
    data: res.list.map((item, index) => {
      return {
        id: item.id,
        title: item.title ?? '!!title!!',
        desc: item.desc,
        image: item.image,
        addItems: [
          { name: '非遗级别', text: item.levelText, span: 12 },
          { name: '非遗类别', text: item.ichTypeText, span: 12 },
          { name: '地区', text: item.district, span: 12 },
          { name: '批次', text: item.batchText, span: 12 },
        ],
      };
    }),
  }
}

const dropdownNames = ref<DropDownNames[]>([]);
//子分类
const tagsData = ref([
  { id: 0, name: '全部' },
]);
const route = useRoute();

onMounted(async () => {
  tagsData.value = tagsData.value.concat((await CommonContent.getCategoryList(4)).map((item) => ({
    id: item.id,
    name: item.title,
  })));
  const levels = await CommonContent.getCategoryList(2);
  dropdownNames.value.push({ 
    options: [{
      id: 0, 
      name: '全部'
    }].concat(levels.map((item) => ({
      id: item.id,
      name: item.title,
    }))),
    defaultSelectedValue: route.query.level ? Number(route.query.level) : 0,
  });
  dropdownNames.value.push({ 
    options: [{
      id: 0, 
      name: '全部'
    }].concat((await CommonContent.getCategoryList(1)).map((item) => ({
      id: item.id,
      name: item.title,
    }))),
    defaultSelectedValue: 0,
  });
})
</script>

<style>
</style>