# 首页任务列表样式统一说明

## 功能描述
首页（`/pages/index.vue`）的任务列表显示样式已与任务功能页面（`/pages/task/index.vue`）完全一致。

## 当前实现状态

### ✅ 已实现的样式一致性

#### 1. 任务卡片结构
```vue
<view class="task-item">
  <view class="task-main">
    <!-- 任务头部：标题和状态标签 -->
    <view class="task-header">
      <view class="task-title">任务类型 - 车牌号</view>
      <view class="task-status">状态标签</view>
    </view>
    
    <!-- 任务编号单独一行 -->
    <view class="task-code-row">
      <text class="task-code">任务编号</text>
    </view>
    
    <!-- 任务详细信息 -->
    <view class="task-info">
      <view class="info-row">
        <view class="info-item">出发地</view>
        <view class="info-item">目的地</view>
      </view>
      <view class="info-row">
        <view class="info-item">出发时间</view>
        <view class="info-item">执行人员</view>
      </view>
    </view>
  </view>
  
  <!-- 操作按钮 -->
  <view class="task-actions">...</view>
</view>
```

#### 2. 状态颜色系统（完全一致）

| 状态 | CSS类名 | 背景色 | 文字颜色 | 显示文本 |
|------|---------|--------|----------|----------|
| 待处理 | status-pending | #fff3e0 | #ff9500 | 待处理 |
| 出发中 | status-departing | #e3f2fd | #007AFF | 出发中 |
| 已到达 | status-arrived | #f3e5f5 | #9c27b0 | 已到达 |
| 返程中 | status-returning | #e0f2f1 | #009688 | 返程中 |
| 已完成 | status-completed | #e8f5e9 | #34C759 | 已完成 |
| 已取消 | status-cancelled | #f5f5f5 | #999 | 已取消 |
| 处理中 | status-in-progress | #e3f2fd | #007AFF | 处理中 |

#### 3. 关键样式元素

**任务头部（task-header）：**
- 标题和状态标签在同一行
- 使用 flex 布局，space-between 对齐
- 状态标签使用圆角设计（border-radius: 30rpx）
- 状态标签不换行（white-space: nowrap）

**任务编号行（task-code-row）：**
- 单独一行显示
- 使用虚线边框分隔（border-bottom: 1rpx dashed #e0e0e0）
- 使用等宽字体（font-family: monospace）
- 字体大小：28rpx，字重：500

**任务信息区（task-info）：**
- 两行布局，每行两个信息项
- label 和 value 水平排列
- label 灰色（#666），value 默认色（#333）
- 字体大小：26rpx

**操作按钮（task-actions）：**
- 根据任务状态动态显示不同按钮
- 主按钮蓝色（#007AFF），取消按钮红色（#ff3b30）
- 圆角设计（border-radius: 10rpx）

#### 4. 方法实现一致性

**getStatusClass(status) 方法：**
```javascript
getStatusClass(status) {
  const statusClassMap = {
    'PENDING': 'status-pending',
    'DEPARTING': 'status-departing',
    'ARRIVED': 'status-arrived',
    'RETURNING': 'status-returning',
    'COMPLETED': 'status-completed',
    'CANCELLED': 'status-cancelled',
    'IN_PROGRESS': 'status-in-progress'
  }
  return statusClassMap[status] || 'status-default'
}
```

**getStatusText(status) 方法：**
```javascript
getStatusText(status) {
  const statusMap = {
    'PENDING': '待处理',
    'DEPARTING': '出发中',
    'ARRIVED': '已到达',
    'RETURNING': '返程中',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消',
    'IN_PROGRESS': '处理中'
  }
  return statusMap[status] || '未知'
}
```

#### 5. 数据展示一致性

**车辆信息处理：**
- 从 assignedVehicles 数组获取车辆信息
- 显示第一辆车的车牌号
- 多车辆时显示"车牌号 等N辆"

**地址格式化：**
- 使用 formatAddress() 方法
- 只显示"-"符号前面的部分
- 简化地址显示，提高可读性

**时间格式化：**
- 使用 formatDateTime() 方法
- 格式：YYYY-MM-DD HH:mm
- 中文本地化显示

## 文件对比结果

### 首页（index.vue）
- ✅ 任务头部布局一致
- ✅ 任务编号单独显示一致
- ✅ 状态颜色系统一致
- ✅ 信息行布局一致
- ✅ 操作按钮逻辑一致
- ✅ 方法实现一致

### 任务功能页（task/index.vue）
- ✅ 作为样式参考标准
- ✅ 所有样式元素完整

## 页面差异说明

虽然样式完全一致，但两个页面的功能定位不同：

### 首页（index.vue）
- **数据源**：getMyTasks() - 获取当前用户相关的所有任务
- **显示范围**：正在运行的任务（待处理、出发中、已到达、返程中）
- **页面定位**：快速查看和处理当前正在进行的任务
- **额外功能**：用户信息展示、车辆绑定入口、消息中心入口

### 任务功能页（task/index.vue）
- **数据源**：listTask() - 综合查询所有任务
- **显示范围**：所有任务（包括已完成、已取消）
- **页面定位**：完整的任务管理功能
- **额外功能**：高级搜索、状态筛选、时间范围查询

## 注意事项

1. **数据字段映射**：
   - 首页使用 `task.taskId` 作为任务ID
   - 首页使用 `task.taskCode` 作为任务编号
   - 任务功能页使用相同的字段映射

2. **状态过滤**：
   - 首页只显示未完成的任务
   - 任务功能页显示所有任务并提供筛选功能

3. **样式维护**：
   - 如需修改任务卡片样式，需同时修改两个文件
   - 保持 getStatusClass() 和 getStatusText() 方法的一致性
   - 状态颜色系统应保持统一

## 总结

首页任务列表样式已与任务功能页面完全统一，实现了：
- 视觉一致性：颜色、布局、字体完全一致
- 交互一致性：按钮逻辑、状态流转一致
- 代码一致性：方法实现、数据处理一致

用户在两个页面看到的任务卡片样式将完全相同，提供统一的用户体验。