minnan-website/pages/village/index.vue

<template>
  <!-- 传统村落 -->
  <CommonListPage
    :title="'传统村落'"
    :prevPage="{ title: '保护传承' }"
    :dropDownNames="[]"
    :pageSize="8"
    :rowCount="2"
    :rowType="2"
    :load="loadData"
    :showDetail="showDetail"
    :tagsData="tagsData"
    :defaultSelectTag="tagsData[0]?.id"
  />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import VillageApi from '@/api/village/VillageApi';
import CommonContent from '@/api/CommonContent';

const route = useRoute();
const router = useRouter();

async function showDetail(item: any) {
  if (import.meta.server)
    return;
  localStorage.setItem('VillageTemp', JSON.stringify(item));
  setTimeout(() => {
    router.push({
      path: '/village/detail',
      query: { id: item.id }, 
    })
  }, 200);
}
async function loadData(
  page: number, 
  pageSize: number,
  selectedTag: number,
  searchText: string,
  dropDownValues: number[]
) {

  const res = await VillageApi.getVillageList(selectedTag);

  return { 
    page: page,
    total: res.length,
    data: res
      .filter(p => (!searchText || searchText.includes(p.villageName)))
      .map((item, index) => {
        return {
          title: item.villageName,
          desc: item.desc,
          ...item,
          addItems: [],
          bottomTags: [
            item.levelText, 
            item.batchText,
            item.historyLevelText,
          ],
        };
      })
    ,
  }
}

//子分类
const tagsData = ref<{
  id: number,
  name: string,
}[]>([]);

onMounted(async () => {
  const res = await CommonContent.getCategoryList(151);
  const it1 = res.find(p => p.title == '国家级');
  const it2 = res.find(p => p.title == '省级');
  if (it1) it1.title = '特色村舍';
  if (it2) it2.title = '传统村落';
  tagsData.value = res.slice(1).map((p) => ({ id: p.id, name: p.title }));
})
</script>


<style lang="scss">

.shadow1 {
  background: linear-gradient( 180deg, #F1F1F1 0%, #FFFFFF 100%);
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #FFFFFF;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}
.details {
  color: #333;

  .item {
    cursor: pointer;
    margin-bottom: 15px;
  }

  .nana-simple-input {
    background-color: #fff;
    border-color: #eee;
  }

  .page-button {
    background-color: #ddd;
    color: #333;

    &.enable {
      background-color: #fff;
      color: #000;
      border-color: #333;
    }
  }

}
</style>