minnan-website/pages/introduction/feature.vue

<template>
   <CommonListPage
    :title="'艺术特色'"
    :prevPage="{ title: '文化常识' }"
    :dropDownNames="[]"
    :showSearch="true"
    :tagsData="tagsData"
    :pageSize="8"
    :defaultSelectTag="243"
    :loadDetail="loadDetail"
    :load="loadData"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { GetContentListParams } from '@/api/CommonContent';
import FeatureContentApi from '@/api/introduction/FeatureContent';

async function loadDetail(id: number, item: any) {
  return await FeatureContentApi.getContentDetail(id);
}
async function loadData(
  page: number, 
  pageSize: number,
  selectedTag: number,
  searchText: string,
  dropDownValues: number[]
) {

  const res = await FeatureContentApi.getContentList(new GetContentListParams().setSelfValues({
    mainBodyColumnId: selectedTag == tagsData.value[0].id ? tagsData.value.map(p => p.id) : selectedTag,
    keywords: searchText,
  }), page, pageSize);

  return { 
    page: page,
    total: res.total,
    data: res.list.map((item, index) => {
      return {
        id: item.id,
        title: item.title,
        desc: item.desc,
        image: item.thumbnail || item.image,
      };
    }),
  }
}

//子分类
const tagsData = ref([
  { id: 243, name: '全部' },
  { id: 238, name: '音乐' },
  { id: 239, name: '舞蹈' },
  { id: 240, name: '戏曲' },
  { id: 241, name: '曲艺' },
  { id: 242, name: '民间工艺' },
]);
</script>

<style>
</style>