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

功能描述

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

当前实现状态

✅ 已实现的样式一致性

1. 任务卡片结构

<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. 状态颜色系统（完全一致）

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 作为任务编号
• 任务功能页使用相同的字段映射

1. 状态过滤：

• 首页只显示未完成的任务
• 任务功能页显示所有任务并提供筛选功能

1. 样式维护：

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

总结

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

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