任务列表分页器的实现

api/task.js

@@ -10,14 +10,16 @@
  * @param {number[]} params.statusList 任务状态列表，4对应已完成
  * @param {string} params.expireTimeStart 过期时间开始范围（格式：yyyy-MM-dd HH:mm:ss）
  * @param {string} params.expireTimeEnd 过期时间结束范围（格式：yyyy-MM-dd HH:mm:ss）
+ * @param {number} params.pageNum 页码
+ * @param {number} params.pageSize 每页数量
  * @returns {Promise} 返回任务列表
  */
-export const getTaskList = ({ownerId, overdue, statusList, expireTimeStart, expireTimeEnd }) => {
+export const getTaskList = ({ownerId, overdue, statusList, expireTimeStart, expireTimeEnd, pageNum, pageSize }) => {
   const queryParams = [];
   if (overdue !== undefined) {
     queryParams.push(`overdue=${overdue}`);
   }
-  if (ownerId !== undefined) {
+  if (ownerId !== undefined && ownerId !== '') {
     queryParams.push(`ownerId=${ownerId}`);
   }
   if (statusList !== undefined && Array.isArray(statusList) && statusList.length > 0) {
@@ -30,6 +32,13 @@ export const getTaskList = ({ownerId, overdue, statusList, expireTimeStart, expi
   if (expireTimeEnd !== undefined && expireTimeEnd !== null && expireTimeEnd !== '') {
     queryParams.push(`expireTimeEnd=${encodeURIComponent(expireTimeEnd)}`);
   }
+  // 添加分页参数
+  if (pageNum !== undefined) {
+    queryParams.push(`pageNum=${pageNum}`);
+  }
+  if (pageSize !== undefined) {
+    queryParams.push(`pageSize=${pageSize}`);
+  }
   const queryString = queryParams.length > 0 ? `?${queryParams.join('&')}` : '';
   
   return uni.$uv.http.get(`bst/task/list${queryString}`, {

components/customer/CustomerManagement.vue

@@ -430,7 +430,7 @@ onUnmounted(() => {
 });
 
 // 暴露方法供父组件调用（用于 onReachBottom）
-const winB_LoadMore = () => {
+const winB_LoadMore= () => {
   if (!loading.value && !noMore.value) {
     loadMore();
   }

pages/task/list/index.vue

@@ -1,16 +1,19 @@
 <template>
   <view class="task-list-page">
-    <scroll-view class="task-scroll" scroll-y>
+    <scroll-view 
+      class="task-scroll" 
+      scroll-y
+      @scrolltolower="handleScrollToLower"
+    >
       <view class="task-container">
         <!-- 任务卡片列表 -->
-        <template v-if="!loading">
+        <view 
-          <view 
+          class="task-card" 
-            class="task-card" 
+          v-for="task in tasks" 
-            v-for="task in tasks" 
+          :key="task.id"
-            :key="task.id"
+          :class="getTaskCardClass(task.status)"
-            :class="getTaskCardClass(task.status)"
+          @click="goToTaskDetail(task)"
-            @click="goToTaskDetail(task)"
+        >
-          >
           <!-- 状态标签和日期 -->
           <view class="task-header">
             <view style="display: flex;align-items: center;gap: 12px">
@@ -54,15 +57,11 @@
                   <text class="countdown-text" :class="getCountdownClass(task.status)">
                     {{ task.remainingDays < 0 ? `已逾期${Math.abs(task.remainingDays)}天` : `剩余${task.remainingDays}天` }}
                   </text>
-
                 </view>
               </view>
             </view>
           </view>
-
+        </view>
-
-          </view>
-        </template>
 
         <!-- 加载状态 -->
         <view class="empty-state" v-if="loading">
@@ -70,28 +69,54 @@
         </view>
 
         <!-- 空状态 -->
-        <view class="empty-state" v-else-if="tasks.length === 0">
+        <view class="empty-state" v-else-if="isEmpty">
           <text class="empty-text">暂无{{ getStatusText(statusFilter) || '' }}任务</text>
         </view>
+
+        <!-- 加载更多提示 -->
+        <view class="load-more-tip" v-if="!isEmpty && !loading && !noMore">
+          <text class="load-more-text">上拉加载更多</text>
+        </view>
+        <view class="load-more-tip" v-if="!isEmpty && noMore">
+          <text class="load-more-text">没有更多数据了</text>
+        </view>
       </view>
     </scroll-view>
   </view>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
 import { getStatusText, getTaskStatusType, getTaskStatusStyle } from '@/utils/taskConfig.js';
-import { getTaskList } from '@/api';
+import {getTaskList} from '@/api';
 import { useTaskStore } from '@/store/task';
 import {truncateText} from "@/utils/textSolve/truncateText";
 import {useUserStore} from "@/store/user";
+import {usePagination} from "@/composables";
 
+const userStore = useUserStore();
 
+const {
+  list,
+  noMore,
+  isEmpty,
+  loading,
+  getList,
+  loadMore,
+  updateParams,
+  refresh,
+  queryParams,
+  reset
+} = usePagination({
+  fetchData: getTaskList,
+  mode: 'loadMore',
+  pageSize: 10,
+  defaultParams: {}
+});
 
 // 获取页面参数
 const statusFilter = ref('');
-const loading = ref(false);
 
 // 任务状态映射
 const statusMap = {
@@ -109,8 +134,17 @@ const statusReverseMap = {
   '逾期任务': 'overdue'
 };
 
-// 任务列表数据
+// 将分页器的 list 转换为任务列表格式
-const tasks = ref([]);
+const tasks = computed(() => {
+  let transformedTasks = list.value.map(item => transformTaskData(item));
+  
+  // 如果是逾期任务列表，过滤掉已完成的任务（status === 4）
+  if (statusFilter.value === 'overdue') {
+    transformedTasks = transformedTasks.filter(task => task.status !== 'completed');
+  }
+  
+  return transformedTasks;
+});
 
 // 使用全局配置获取标签自定义样式
 const getTagCustomStyle = (status) => {
@@ -318,69 +352,62 @@ const transformTaskData = (item) => {
   };
 };
 
-// 加载任务列表数据
+// 获取查询参数
-const loadTaskList = async () => {
+const getQueryParams = () => {
-  try {
+  const userId = userStore.getUserInfo?.user?.userId || userStore.getUserInfo?.userId;
-    loading.value = true;
+  const privateView = userStore.privateView;
-    let res;
+  const ownerId = userId && privateView ? userId : '';
-
+  
-    let userId= useUserStore().getUserInfo.user.userId
+  // 根据状态类型构建不同的查询参数
-    let privateView= useUserStore().privateView
+  if (statusFilter.value === 'completed') {
-    let ownerId = userId && privateView ? userId:''
+    return { statusList: [4], ownerId: ownerId };
-    // 根据状态类型调用不同的接口
+  } else if (statusFilter.value === 'overdue') {
-    if (statusFilter.value === 'completed') {
+    return { statusList: [2], overdue: true, ownerId: ownerId };
-      res = await getTaskList({ statusList: [4], ownerId: ownerId });
+  } else if (statusFilter.value === 'pending') {
-    } else if (statusFilter.value === 'overdue') {
+    return { statusList: [2], ownerId: ownerId };
-      res = await getTaskList({ statusList: [2],overdue: true, ownerId: ownerId });
+  } else if (statusFilter.value === 'imminent') {
-    } else if (statusFilter.value === 'pending') {
+    const dateRange = getImminentDateRange();
-      res = await getTaskList({ statusList: [2], ownerId: ownerId });
+    return {
-    } else if (statusFilter.value === 'imminent') {
+      ownerId: ownerId,
-      const dateRange = getImminentDateRange();
+      statusList: [2],
-      res = await getTaskList({
+      expireTimeStart: dateRange.expireTimeStart,
-        ownerId: ownerId,
+      expireTimeEnd: dateRange.expireTimeEnd
-        statusList: [2],
+    };
-        expireTimeStart: dateRange.expireTimeStart,
+  } else {
-        expireTimeEnd: dateRange.expireTimeEnd
+    return { ownerId: ownerId };
-      });
-    } else {
-      res = await getTaskList({});
-    }
-    
-    console.log('任务列表加载成功:', res);
-    
-    // 处理返回的数据
-    let taskList = [];
-    if (res && res.rows && Array.isArray(res.rows)) {
-      taskList = res.rows;
-    } else if (res && res.data && Array.isArray(res.data)) {
-      taskList = res.data;
-    } else if (res && Array.isArray(res)) {
-      taskList = res;
-    }
-    
-    // 转换数据格式
-    let transformedTasks = taskList.map(item => transformTaskData(item));
-    
-    // 如果是逾期任务列表，过滤掉已完成的任务（status === 4）
-    // transformTaskData 已经将 status === 4 转换为 status === 'completed'
-    if (statusFilter.value === 'overdue') {
-      transformedTasks = transformedTasks.filter(task => task.status !== 'completed');
-    }
-    
-    tasks.value = transformedTasks;
-    
-  } catch (err) {
-    console.error('加载任务列表失败:', err);
-    uni.showToast({
-      title: '加载数据失败',
-      icon: 'none'
-    });
-    tasks.value = [];
-  } finally {
-    loading.value = false;
   }
 };
 
+// 加载任务列表数据
+const loadTaskList = async () => {
+  const params = getQueryParams();
+  updateParams(params);
+};
+
+// 处理滚动到底部
+const handleScrollToLower = () => {
+  if (!noMore.value && !loading.value) {
+    loadMore();
+  }
+};
+
+// 页面初始化标志，避免 watch 在 onLoad 之前触发
+const isInitialized = ref(false);
+
+// 监听 statusFilter 变化，自动刷新数据
+watch(statusFilter, () => {
+  if (isInitialized.value) {
+    loadTaskList();
+  }
+});
+
+// 监听用户私有视角变化，自动刷新数据
+watch(() => userStore.privateView, () => {
+  if (isInitialized.value) {
+    loadTaskList();
+  }
+});
+
 // 页面加载时获取参数
 onLoad((options) => {
   // 获取状态参数
@@ -398,7 +425,8 @@ onLoad((options) => {
     });
   }
   
-  // 加载任务列表数据
+  // 标记为已初始化，然后加载任务列表数据
+  isInitialized.value = true;
   loadTaskList();
 });
 </script>
@@ -571,5 +599,15 @@ onLoad((options) => {
   font-size: 14px;
   color: #999;
 }
+
+.load-more-tip {
+  padding: 20px;
+  text-align: center;
+}
+
+.load-more-text {
+  font-size: 12px;
+  color: #999;
+}
 </style>