📦 志愿者列表分页优化

src/api/inhert/VillageApi.ts

@@ -316,12 +316,24 @@ export class VillageApi extends AppServerRequestModule<DataModel> {
     }, undefined, VolunteerInfo);
     return res.data as VolunteerInfo;
   }
-  async getVillageVolunteerList(villageId?: number, status?: number) {
-    const res = await this.post('/village/volunteer/getList', '获取志愿者列表', {
+  async getVillageVolunteerList(
+    page: number, pageSize: number, 
+    villageId?: number, status?: number,
+    name?: string,
+  ) {
+    const res = (await this.post<{
+      data: KeyValue[],
+      total: number,
+    }>('/village/volunteer/getList', '获取志愿者列表', {
       village_id: villageId,
       status,
-    });
-    return transformArrayDataModel<VolunteerInfo>(VolunteerInfo, res.data || [], ``, true);
+      page,
+      pageSize,
+    })).requireData();
+    return {
+      list: transformArrayDataModel<VolunteerInfo>(VolunteerInfo, res.data || [], ``, true),
+      total: res.total,
+    };
   }
   async reviewVillageVolunteer(villageId: number, volunteerId: number, status: number) {
     return this.post('/village/village/claimReview', '审核志愿者', {

src/pages/dig/admin/index.vue

@@ -112,25 +112,19 @@ const { querys } = useLoadQuerys({
 });
 
 const searchText = ref('');
-const listLoader = useSimplePageListLoader(8, async (page, pageSize, params) => {
-  if (page === 1) {
-    let res = await VillageApi.getVillageVolunteerList(querys.value.id);
-    if (searchText.value)
-      res = res.filter((p) => p.name.includes(searchText.value));
-    return {
-      page,
-      total: res.length,
-      list: res.map((item) => ({
-        ...item,
-        title: `${item.name} ${item.sex === 0 ? '男' : '女'} 手机号：${item.mobile} 地址：${item.address || ''}`,
-        desc: `可采编：${item.collectModuleText || '暂无'}`,
-      })),
-    }
-  }
+const listLoader = useSimplePageListLoader(8, async (page, pageSize) => {
+  const res = await VillageApi.getVillageVolunteerList(
+    page, pageSize, 
+    querys.value.id, undefined, searchText.value
+  );
   return {
     page,
-    total: 0,
-    list: [],
+    total: res.total,
+    list: res.list.map((item) => ({
+      ...item,
+      title: `${item.name} ${item.sex === 0 ? '男' : '女'} 手机号：${item.mobile} 地址：${item.address || ''}`,
+      desc: `可采编：${item.collectModuleText || '暂无'}`,
+    })),
   }
 });
 

src/pages/dig/admin/review.vue

@@ -94,25 +94,21 @@ const { querys } = useLoadQuerys({
 });
 
 const searchText = ref('');
-const listLoader = useSimplePageListLoader(8, async (page, pageSize, params) => {
-  if (page === 1) {
-    let res = await VillageApi.getVillageVolunteerList(querys.value.villageId, VolunteerInfo.STATUS_PENDING);
-    if (searchText.value)
-      res = res.filter((p) => p.name.includes(searchText.value));
-    res.forEach((item) => {
-      item.title = `${item.name} ${item.sex === 0 ? '男' : '女'}`;
-      item.desc = ` 手机号：${item.mobile} 地址：${item.address || ''} 认领说明：${item.claimReason || ''}`;
-    })
-    return {
-      page,
-      total: res.length,
-      list: res,
-    }
-  }
+const listLoader = useSimplePageListLoader(8, async (page, pageSize,) => {
+  const res = await VillageApi.getVillageVolunteerList(
+    page, pageSize, 
+    querys.value.villageId, 
+    VolunteerInfo.STATUS_PENDING,
+    searchText.value,
+  );
+  res.list.forEach((item) => {
+    item.title = `${item.name} ${item.sex === 0 ? '男' : '女'}`;
+    item.desc = ` 手机号：${item.mobile} 地址：${item.address || ''} 认领说明：${item.claimReason || ''}`;
+  })
   return {
     page,
-    total: 0,
-    list: [],
+    total: res.total,
+    list: res.list,
   }
 });
 

src/pages/home/village/volunteer/list.vue

@@ -1,9 +1,9 @@
 <template>
   <CommonTopBanner title="乡源人数">
-    <SimplePageContentLoader :loader="villageUserRankListLoader">
+    <SimplePageListLoader :loader="villageUserRankListLoader">
       <FlexCol gap="gap.lg" padding="space.md">
         <Touchable
-          v-for="(item, index) in villageUserRankListLoader.content.value"
+          v-for="(item, index) in villageUserRankListLoader.list.value"
           :key="item.id"
           direction="column"
           @click="goDetails(item)"
@@ -27,7 +27,7 @@
                 mode="aspectFill" 
                 radius="radius.md" 
               />
-              <Text :text="item.title" fontConfig="contentText" />
+              <Text :text="item.name" fontConfig="contentText" />
             </FlexRow>
             <FlexRow center gap="gap.md">
               <Tag v-if="item.isAdmin" text="管理员" size="small" />
@@ -42,18 +42,18 @@
                 width="100"
               >
                 <Image src="https://xy.wenlvti.net/app_static/images/village/IconFruit.png" width="30rpx" height="30rpx" mode="aspectFill" />
-                <Text :text="item.score" fontConfig="contentText" />
+                <Text :text="item.points" fontConfig="contentText" />
               </BackgroundBox>
             </FlexRow>
           </BackgroundBox>
         </Touchable>
       </FlexCol>
-    </SimplePageContentLoader>
+    </SimplePageListLoader>
   </CommonTopBanner>
 </template>
 
 <script setup lang="ts">
-import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
+import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
 import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
 import { navTo } from '@/components/utils/PageAction';
 import FlexCol from '@/components/layout/FlexCol.vue';
@@ -66,7 +66,7 @@ import FlexRow from '@/components/layout/FlexRow.vue';
 import Touchable from '@/components/feedback/Touchable.vue';
 import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
 import VillageApi from '@/api/inhert/VillageApi';
-import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
+import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
 
 const { querys } = useLoadQuerys({
   villageId: 0,
@@ -74,16 +74,8 @@ const { querys } = useLoadQuerys({
   villageUserRankListLoader.reload();
 }); 
 
-const villageUserRankListLoader = useSimpleDataLoader(async () => {
-  const res = (await VillageApi.getVillageVolunteerList(querys.value.villageId))
-    .map((item, i) => ({
-      id: item.id,
-      image: item.image ?? '',
-      title: item.name,
-      score: item.points,
-      isAdmin: item.type === 'admin',
-    }));
-  return res
+const villageUserRankListLoader = useSimplePageListLoader(20, async (page, pageSize) => {
+  return (await VillageApi.getVillageVolunteerList(page, pageSize, querys.value.villageId))
 });
 
 function goDetails(item: {