wlzboy
7 小时以前 5f2ee03958a1a16dc27195c76ea7cffb422c95d1
app/pages/index.vue
@@ -89,7 +89,11 @@
    </view>
    <!-- 正在运行的任务列表 -->
    <scroll-view class="running-tasks-section" scroll-y="true">
    <scroll-view
      class="running-tasks-section"
      scroll-y="true"
      @scrolltolower="onScrollToLower"
    >
      <view class="task-list">
        <view class="task-item" v-for="task in runningTasks" :key="task.id">
          <view class="task-main" @click="viewTaskDetail(task)">
@@ -215,6 +219,15 @@
          <uni-icons type="info" size="40" color="#ccc"></uni-icons>
          <text>暂无正在运行的任务</text>
        </view>
        <!-- 加载更多提示 -->
        <view class="load-more" v-if="runningTasks.length > 0 && hasMore && loading">
          <uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
          <text>正在加载更多数据...</text>
        </view>
        <view class="load-more no-more" v-else-if="runningTasks.length > 0 && !hasMore">
          <text>没有更多数据了</text>
        </view>
      </view>
    </scroll-view>
  </view>
@@ -241,11 +254,17 @@
      unreadMessageCount: 0,
      // 正在运行的任务列表
      taskList: [],
      allTaskList: [], // 存储所有任务数据
      displayedTaskList: [], // 存储当前显示的任务数据
      loading: false,
      // 订阅状态
      hasSubscribed: false,
      // 前端分页相关
      currentPage: 1,
      pageSize: 10,
      hasMore: true,
    };
  },
  computed: {
@@ -256,7 +275,7 @@
    // 正在运行的任务(待处理和各种处理中的任务)
    runningTasks() {
      return this.taskList.filter((task) => {
      return this.displayedTaskList.filter((task) => {
        // 包含待处理、出发中、已到达、返程中等所有未完成的状态
        return [
          "PENDING",
@@ -299,10 +318,16 @@
    // 每次显示页面时刷新任务列表、绑定车辆和消息数量
    this.loadUserVehicle();
    // 重新加载任务列表时重置分页
    this.currentPage = 1;
    this.hasMore = true;
    this.loadRunningTasks();
    this.loadUnreadMessageCount();
  },
  onPullDownRefresh() {
    // 下拉刷新时重置分页参数
    this.currentPage = 1;
    this.hasMore = true;
    // 下拉刷新
    this.loadRunningTasks();
    setTimeout(() => {
@@ -310,6 +335,13 @@
    }, 1000);
  },
  methods: {
    // 滚动到底部时加载更多
    onScrollToLower() {
      if (this.hasMore && !this.loading) {
        this.loadMoreTasks();
      }
    },
    // 自动订阅(小程序启动时调用)
    autoSubscribeOnLaunch() {
      subscribeManager.autoSubscribe()
@@ -438,9 +470,16 @@
          this.loading = false;
          // 根据后端返回的数据结构进行解析
          const data = response.data || response.rows || response || [];
          // 过滤出未完成的任务
          const allTasks = Array.isArray(data) ? data : [];
          this.taskList = allTasks
          // 如果是第一页,直接替换数据;否则追加数据
          if (this.currentPage === 1) {
            this.allTaskList = data;
          } else {
            this.allTaskList = [...this.allTaskList, ...data];
          }
          // 格式化任务数据
          this.allTaskList = this.allTaskList
            .filter((task) => {
              // 只显示未完成和未取消的任务
              return (
@@ -480,11 +519,30 @@
                status: this.convertStatus(task.taskStatus), // 转换状态格式以兼容旧UI
              };
            });
          // 更新显示的任务列表
          this.updateDisplayedTaskList();
        })
        .catch((error) => {
          this.loading = false;
          console.error("加载任务列表失败:", error);
        });
    },
    // 更新显示的任务列表(前端分页)
    updateDisplayedTaskList() {
      const start = 0;
      const end = this.currentPage * this.pageSize;
      this.displayedTaskList = this.allTaskList.slice(start, end);
      this.hasMore = end < this.allTaskList.length;
    },
    // 加载更多任务(前端分页)
    loadMoreTasks() {
      if (!this.hasMore || this.loading) return;
      this.currentPage++;
      this.updateDisplayedTaskList();
    },
    // 格式化地址 - 只显示-前面的部分
@@ -1149,6 +1207,19 @@
        margin-top: 20rpx;
      }
    }
    .load-more {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0;
      color: #999;
      font-size: 28rpx;
      &.no-more {
        color: #666;
      }
    }
  }
}
</style>