# 首页任务操作按钮统一说明

## 修改背景

首页（`index.vue`）中的任务操作按钮逻辑需要与任务列表页（`task/index.vue`）保持一致，确保用户体验的统一性和操作逻辑的准确性。

## 修改内容

### 一、操作按钮显示逻辑

#### 修改前（旧逻辑）
- 所有按钮都显示（出发、已到达、返程、结算、已完成）
- 通过 `isActionDisabled()` 方法判断按钮是否禁用
- 禁用的按钮显示为灰色但仍然可见
- 有"结算"按钮（跳转到结算页面）

#### 修改后（新逻辑）
根据任务状态**动态显示对应的操作按钮**，不显示不可用的按钮：

| 任务状态 | 显示按钮 | 说明 |
|---------|---------|------|
| PENDING（待处理） | 出发、取消 | 初始状态，可以出发执行任务或取消任务 |
| DEPARTING（出发中） | 已到达、强制结束 | 前往目的地途中，可以标记到达或强制结束 |
| ARRIVED（已到达） | 已返程 | 已到达目的地，可以开始返程 |
| RETURNING（返程中） | 已完成 | 返程途中，可以标记任务完成 |
| COMPLETED（已完成） | 无按钮 | 任务已完成，不显示操作按钮 |
| CANCELLED（已取消） | 无按钮 | 任务已取消，不显示操作按钮 |

### 二、代码实现

#### 1. 模板部分

**修改前：**
```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
<!-- 操作按钮 -->
<view class="task-actions">
  <!-- 待处理状态: 显示出发、取消 -->
  <template v-if="task.taskStatus === 'PENDING'">
    <button class="action-btn primary" @click="handleTaskAction(task, 'depart')">
      出发
    </button>
    <button class="action-btn cancel" @click="handleTaskAction(task, 'cancel')">
      取消
    </button>
  </template>
  
  <!-- 出发中状态: 显示已到达、强制结束 -->
  <template v-else-if="task.taskStatus === 'DEPARTING'">
    <button class="action-btn primary" @click="handleTaskAction(task, 'arrive')">
      已到达
    </button>
    <button class="action-btn cancel" @click="handleTaskAction(task, 'forceCancel')">
      强制结束
    </button>
  </template>
  
  <!-- 已到达状态: 显示已返程 -->
  <template v-else-if="task.taskStatus === 'ARRIVED'">
    <button class="action-btn primary" @click="handleTaskAction(task, 'return')">
      已返程
    </button>
  </template>
  
  <!-- 返程中状态: 显示已完成 -->
  <template v-else-if="task.taskStatus === 'RETURNING'">
    <button class="action-btn primary" @click="handleTaskAction(task, 'complete')">
      已完成
    </button>
  </template>
  
  <!-- 已完成/已取消: 不显示按钮 -->
</view>
```

#### 2. JavaScript 部分

**删除了：**
```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;
  }
}
```

#### 3. 样式部分

新增了 `cancel` 按钮样式（红色背景）：

```scss
.action-btn {
  // ... 其他样式
  
  &.primary {
    background-color: #007AFF;
    color: white;
  }
  
  &.cancel {
    background-color: #ff3b30;
    color: white;
  }
}
```

### 三、主要改进

#### 1. 用户体验优化
- ✅ **按钮更精简**：只显示当前状态可执行的操作，避免用户混淆
- ✅ **视觉清晰**：不显示禁用的灰色按钮，界面更整洁
- ✅ **操作明确**：每个状态下的操作路径清晰

#### 2. 逻辑一致性
- ✅ **与任务列表页一致**：首页和任务列表页的操作逻辑完全相同
- ✅ **状态流转明确**：遵循标准的任务状态流转：待处理→出发中→已到达→返程中→已完成
- ✅ **取消逻辑统一**：待处理状态可以"取消"，出发中状态可以"强制结束"

#### 3. 功能完善
- ✅ **新增取消功能**：待处理状态可以取消任务
- ✅ **新增强制结束**：出发中状态可以强制结束任务
- ✅ **移除结算按钮**：简化流程，结算功能可以在详情页处理

### 四、操作流程图

```
[待处理 PENDING]
    ├─ 出发 → [出发中 DEPARTING]
    └─ 取消 → [已取消 CANCELLED]

[出发中 DEPARTING]
    ├─ 已到达 → [已到达 ARRIVED]
    └─ 强制结束 → [已取消 CANCELLED]

[已到达 ARRIVED]
    └─ 已返程 → [返程中 RETURNING]

[返程中 RETURNING]
    └─ 已完成 → [已完成 COMPLETED]

[已完成 COMPLETED]
    （无操作）

[已取消 CANCELLED]
    （无操作）
```

### 五、GPS定位功能保留

所有状态变更操作都会：
1. 尝试获取GPS位置信息
2. 如果定位成功，将位置信息一并提交
3. 如果定位失败，询问用户是否继续更新状态

GPS信息包括：
- 经纬度（latitude, longitude）
- 地址信息（province, city, district, street）
- GPS精度（gpsAccuracy）
- 海拔（altitude）
- 速度（speed）
- 方向（heading）

### 六、测试建议

#### 功能测试
1. **待处理状态测试**
   - 点击"出发"按钮，确认状态变为"出发中"
   - 点击"取消"按钮，确认状态变为"已取消"

2. **出发中状态测试**
   - 点击"已到达"按钮，确认状态变为"已到达"
   - 点击"强制结束"按钮，确认状态变为"已取消"

3. **已到达状态测试**
   - 点击"已返程"按钮，确认状态变为"返程中"

4. **返程中状态测试**
   - 点击"已完成"按钮，确认状态变为"已完成"

5. **已完成/已取消状态测试**
   - 确认不显示任何操作按钮

#### GPS定位测试
1. 在有GPS信号的环境测试，确认位置信息正确提交
2. 在无GPS信号的环境测试，确认提示用户是否继续
3. 查看数据库中GPS信息是否正确保存

#### 一致性测试
1. 对比首页和任务列表页的按钮显示是否一致
2. 对比首页和任务列表页的操作流程是否一致
3. 对比首页和任务列表页的提示文字是否一致

### 七、相关文件

- `app/pages/index.vue` - 首页（已修改）
- `app/pages/task/index.vue` - 任务列表页（参考标准）
- `app/api/task.js` - 任务API接口

### 八、版本历史

- **v1.0** (2025-10-19): 统一首页和任务列表页的操作按钮逻辑
  - 根据状态动态显示按钮
  - 新增取消和强制结束功能
  - 移除结算按钮
  - 优化提示文字
  - 新增cancel按钮样式