| | |
| | | </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)"> |
| | | <!-- 任务头部:标题和状态标签 --> |
| | | <view class="task-header"> |
| | | <view class="task-title" |
| | | >{{ getTaskTypeText(task.type) }} - {{ task.vehicle }}</view |
| | | > |
| | | <view class="task-title"> |
| | | {{ getTaskTypeText(task.type) }} - {{ task.vehicle }} |
| | | <text v-if="task.isHeadPush === '1'" class="head-push-tag">总</text> |
| | | </view> |
| | | <view |
| | | class="task-status" |
| | | :class=" |
| | |
| | | |
| | | <!-- 任务编号单独一行 --> |
| | | <view class="task-code-row"> |
| | | <text class="task-code">{{ task.taskNo }}</text> |
| | | <text class="task-code">{{ task.showTaskCode }}</text> |
| | | </view> |
| | | |
| | | <!-- 任务详细信息 --> |
| | |
| | | <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> |
| | |
| | | unreadMessageCount: 0, |
| | | |
| | | // 正在运行的任务列表 |
| | | taskList: [], |
| | | allTaskList: [], // 存储所有任务数据 |
| | | displayedTaskList: [], // 存储当前显示的任务数据 |
| | | loading: false, |
| | | |
| | | // 订阅状态 |
| | | hasSubscribed: true, |
| | | hasSubscribed: false, |
| | | |
| | | // 前端分页相关 |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | hasMore: true, |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | |
| | | // 正在运行的任务(待处理和各种处理中的任务) |
| | | runningTasks() { |
| | | return this.taskList.filter((task) => { |
| | | return this.displayedTaskList.filter((task) => { |
| | | // 包含待处理、出发中、已到达、返程中等所有未完成的状态 |
| | | return [ |
| | | "PENDING", |
| | |
| | | } |
| | | |
| | | // 检查订阅状态(先检查本地,后面会检查微信官方状态) |
| | | this.hasSubscribed = subscribeManager.checkLocalSubscribeStatus(); |
| | | this.hasSubscribed = true;//subscribeManager.checkLocalSubscribeStatus(); |
| | | |
| | | // 自动订阅(如果未订阅则显示确认弹窗) |
| | | // this.autoSubscribeOnLaunch(); |
| | |
| | | |
| | | // 每次显示页面时刷新任务列表、绑定车辆和消息数量 |
| | | this.loadUserVehicle(); |
| | | // 重新加载任务列表时重置分页 |
| | | this.currentPage = 1; |
| | | this.hasMore = true; |
| | | this.loadRunningTasks(); |
| | | this.loadUnreadMessageCount(); |
| | | }, |
| | | onPullDownRefresh() { |
| | | // 下拉刷新时重置分页参数 |
| | | this.currentPage = 1; |
| | | this.hasMore = true; |
| | | // 下拉刷新 |
| | | this.loadRunningTasks(); |
| | | setTimeout(() => { |
| | |
| | | }, 1000); |
| | | }, |
| | | methods: { |
| | | // 滚动到底部时加载更多 |
| | | onScrollToLower() { |
| | | if (this.hasMore && !this.loading) { |
| | | this.loadMoreTasks(); |
| | | } |
| | | }, |
| | | |
| | | // 自动订阅(小程序启动时调用) |
| | | autoSubscribeOnLaunch() { |
| | | subscribeManager.autoSubscribe() |
| | |
| | | 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 ( |
| | |
| | | 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(); |
| | | }, |
| | | |
| | | // 格式化地址 - 只显示-前面的部分 |
| | |
| | | height: 0 !important; |
| | | background: transparent; |
| | | } |
| | | |
| | | |
| | | // Firefox滚动条隐藏 |
| | | * { |
| | | scrollbar-width: none; /* Firefox */ |
| | | } |
| | | |
| | | |
| | | // IE/Edge滚动条隐藏 |
| | | * { |
| | | -ms-overflow-style: none; /* IE 10+ */ |
| | | } |
| | | } |
| | | |
| | | // 总部推送标记样式 |
| | | .head-push-tag { |
| | | color: #ff0000; |
| | | font-size: 24rpx; |
| | | font-weight: bold; |
| | | margin-left: 10rpx; |
| | | padding: 2rpx 8rpx; |
| | | border: 1rpx solid #ff0000; |
| | | border-radius: 4rpx; |
| | | } |
| | | |
| | | // 用户信息区域 |
| | |
| | | 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> |