mingnan/src/pages/inhert/village/list.vue

<template>
  <view class="d-flex flex-column bg-base" style="min-height: 100vh;">
    <view class="d-flex flex-col p-2">
      <uni-search-bar 
        v-model="searchValue"
        radius="100" 
        bgColor="#fff" 
        placeholder="搜索特色村社" 
        clearButton="auto" 
        cancelButton="none"
        @confirm="doSearch"
      />
    </view>
    <view class="d-flex flex-row flex-wrap justify-between p-2">
      <view
        v-for="item in listLoader.list.value"
        :key="item.id"
        class="width-1-2"
      >
        <Box2LineLargeImageUserShadow 
          classNames="ml-2 mb-3"
          titleColor="title-text"
          :image="item.image"
          :title="item.name"
          @click="goDetails(item)"
        />
      </view>
    </view>
    <SimplePageListLoader :loader="listLoader" />
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { navTo } from '@/common/utils/PageAction';
import SimplePageListLoader from '@/common/components/SimplePageListLoader.vue';
import Box2LineLargeImageUserShadow from '@/pages/parts/Box2LineLargeImageUserShadow.vue';
import VillageApi from '@/api/inhert/VillageApi';

const searchValue = ref('');
const listLoader = useSimplePageListLoader<{
  id: number,
  image: string,
  name: string
}>(8, async (page, pageSize) => {
  const res = await VillageApi.getVallageList();
  return res.map((item) => {
    return {
      ...item,
      name: item.villageName,
    }
  })
});
function doSearch() {
  listLoader.loadData(undefined, true);
}
function goDetails(item: any) {
  uni.setStorageSync('VillageTemp', JSON.stringify(item));
  navTo('details', { id: item.id })
}

onMounted(() => {
  doSearch();
})
</script>