首页(index.vue)中的任务操作按钮逻辑需要与任务列表页(task/index.vue)保持一致,确保用户体验的统一性和操作逻辑的准确性。
isActionDisabled() 方法判断按钮是否禁用根据任务状态**动态显示对应的操作按钮**,不显示不可用的按钮:
| 任务状态 | 显示按钮 | 说明 |
|---|---|---|
| PENDING(待处理) | 出发、取消 | 初始状态,可以出发执行任务或取消任务 |
| DEPARTING(出发中) | 已到达、强制结束 | 前往目的地途中,可以标记到达或强制结束 |
| ARRIVED(已到达) | 已返程 | 已到达目的地,可以开始返程 |
| RETURNING(返程中) | 已完成 | 返程途中,可以标记任务完成 |
| COMPLETED(已完成) | 无按钮 | 任务已完成,不显示操作按钮 |
| CANCELLED(已取消) | 无按钮 | 任务已取消,不显示操作按钮 |
修改前:html <!-- 操作按钮 --> <view class="task-actions"> <button class="action-btn" :class="{ disabled: isActionDisabled(task, 'depart') }" @click="handleTaskAction(task, 'depart')" v-if="task.status !== 'completed'"> 出发 </button> <button class="action-btn" :class="{ disabled: isActionDisabled(task, 'arrive') }" @click="handleTaskAction(task, 'arrive')" v-if="task.status !== 'completed'"> 已到达 </button> <button class="action-btn" :class="{ disabled: isActionDisabled(task, 'return') }" @click="handleTaskAction(task, 'return')" v-if="task.status !== 'completed'"> 返程 </button> <button class="action-btn" :class="{ disabled: isActionDisabled(task, 'settle') }" @click="handleTaskAction(task, 'settle')" v-if="task.status !== 'completed'"> 结算 </button> <button class="action-btn primary" :class="{ disabled: isActionDisabled(task, 'complete') }" @click="handleTaskAction(task, 'complete')" v-if="task.status !== 'completed'"> 已完成 </button> </view>
修改后:
```html
<button class="action-btn primary" @click="handleTaskAction(task, 'depart')">
出发
<button class="action-btn cancel" @click="handleTaskAction(task, 'cancel')">
取消
<button class="action-btn primary" @click="handleTaskAction(task, 'arrive')">
已到达
<button class="action-btn cancel" @click="handleTaskAction(task, 'forceCancel')">
强制结束
<button class="action-btn primary" @click="handleTaskAction(task, 'return')">
已返程
<button class="action-btn primary" @click="handleTaskAction(task, 'complete')">
已完成
```
删除了:javascript // 判断操作按钮是否禁用 isActionDisabled(task, action) { const taskStatus = task.taskStatus switch (action) { case 'depart': return taskStatus !== 'PENDING' case 'arrive': return taskStatus !== 'DEPARTING' case 'return': return taskStatus !== 'ARRIVED' case 'settle': return !['ARRIVED', 'RETURNING'].includes(taskStatus) case 'complete': return taskStatus !== 'RETURNING' default: return false } }
修改了:
```javascript
// 处理任务操作
handleTaskAction(task, action) {
switch (action) {
case 'depart':
// 出发 -> 状态变为出发中
this.$modal.confirm('确定要出发吗?').then(() => {
this.updateTaskStatus(task.taskId, 'DEPARTING', '任务已出发')
}).catch(() => {});
break;
case 'cancel':
// 取消 -> 二次确认后状态变为已取消
this.$modal.confirm('确定要取消此任务吗?').then(() => {
this.updateTaskStatus(task.taskId, 'CANCELLED', '任务已取消')
}).catch(() => {});
break;
case 'arrive':
// 已到达 -> 状态变为已到达
this.$modal.confirm('确认已到达目的地?').then(() => {
this.updateTaskStatus(task.taskId, 'ARRIVED', '已到达目的地')
}).catch(() => {});
break;
case 'forceCancel':
// 强制结束 -> 状态变为已取消
this.$modal.confirm('确定要强制结束此任务吗?').then(() => {
this.updateTaskStatus(task.taskId, 'CANCELLED', '任务已强制结束')
}).catch(() => {});
break;
case 'return':
// 已返程 -> 状态变为返程中
this.$modal.confirm('确认开始返程?').then(() => {
this.updateTaskStatus(task.taskId, 'RETURNING', '已开始返程')
}).catch(() => {});
break;
case 'complete':
// 已完成 -> 状态变为已完成
this.$modal.confirm('确认任务已完成?').then(() => {
this.updateTaskStatus(task.taskId, 'COMPLETED', '任务已完成')
}).catch(() => {});
break;
}
}
```
新增了 cancel 按钮样式(红色背景):
.action-btn {
// ... 其他样式
&.primary {
background-color: #007AFF;
color: white;
}
&.cancel {
background-color: #ff3b30;
color: white;
}
}
[待处理 PENDING]
├─ 出发 → [出发中 DEPARTING]
└─ 取消 → [已取消 CANCELLED]
[出发中 DEPARTING]
├─ 已到达 → [已到达 ARRIVED]
└─ 强制结束 → [已取消 CANCELLED]
[已到达 ARRIVED]
└─ 已返程 → [返程中 RETURNING]
[返程中 RETURNING]
└─ 已完成 → [已完成 COMPLETED]
[已完成 COMPLETED]
(无操作)
[已取消 CANCELLED]
(无操作)
所有状态变更操作都会:
1. 尝试获取GPS位置信息
2. 如果定位成功,将位置信息一并提交
3. 如果定位失败,询问用户是否继续更新状态
GPS信息包括:
- 经纬度(latitude, longitude)
- 地址信息(province, city, district, street)
- GPS精度(gpsAccuracy)
- 海拔(altitude)
- 速度(speed)
- 方向(heading)
app/pages/index.vue - 首页(已修改)app/pages/task/index.vue - 任务列表页(参考标准)app/api/task.js - 任务API接口