minnan-tv/src/views/Content/TabVillageList.vue

<template>
  <SimplePageListContentLoader class="d-flex flex-col flex-fill" :loader="loader">
    <Tab :tabs="tagsData" v-model="tab" autoSize itemWidth="100px" />
    <GridList :list="loader.content.value?.list" class="flex-fill" @item-click="handleItemClick"  />
  </SimplePageListContentLoader>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { useRouter } from 'vue-router';
import SimplePageListContentLoader from '@/components/SimplePageListContentLoader.vue';
import GridList from '@/components/small/GridList.vue';
import { ScrollRect } from '@imengyu/vue-scroll-rect';
import VillageApi from '@/api/village/VillageApi';
import CommonContent from '@/api/CommonContent';
import Tab from '@/components/small/Tab.vue';
import { useTvFocusImprovement } from '@/composeable/TvFocusImprovement';

const emit = defineEmits(['itemClick']);
const router = useRouter();
const tab = ref(0);
const tabId = computed(() => {
  return tagsData.value[tab.value]?.id || 0;
})
const { initSpatialNavigation } = useTvFocusImprovement();
const loader = useSimpleDataLoader(async () => {
  const res = await VillageApi.getVillageList(tabId.value);
  setTimeout(initSpatialNavigation, 200);
  return { 
    page: 1,
    total: res.length,
    list: res
      .map((item, index) => {
        return {
          title: item.villageName,
          desc: item.desc,
          ...item,
          addItems: [],
          bottomTags: [
            item.levelText, 
            item.batchText,
            item.historyLevelText,
          ],
        };
      })
    ,
  }
});

watch(tab, () => loader.loadData(undefined, true))

//子分类
const tagsData = ref<{
  id: number,
  label: 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, label: p.title }));
})

function handleItemClick(item: any) {
  localStorage.setItem('VillageTemp', JSON.stringify(item));
  setTimeout(() => {
    router.push({ name: 'VillageDetail', query: { id: item.id } });
  }, 200);
}
</script>

<style scoped lang="scss">
</style>