wlzboy
2025-10-25 a5b842f1f6ab32f1af39f4bcb7e45217e94db761
app/pages/index.vue
@@ -4,16 +4,27 @@
    <view class="user-info-section">
      <view class="user-info-content">
        <view class="user-details">
          <view class="user-name">{{ userName || '未登录' }}</view>
          <view class="vehicle-info" @click="goToBindVehicle">
            <text v-if="boundVehicle">关联车牌号:{{ boundVehicle }}</text>
            <text v-else>未绑定车牌号</text>
          <view class="user-info-row">
            <text class="user-name">{{ userName || '未登录' }}</text>
            <text class="separator" v-if="currentUser.branchCompanyName">|</text>
            <view class="branch-company" v-if="currentUser.branchCompanyName">
              <uni-icons type="location" size="16" color="#666" style="margin-right: 4rpx;"></uni-icons>
              <text>{{ currentUser.branchCompanyName }}</text>
            </view>
            <text class="separator" v-if="boundVehicle">|</text>
            <view class="vehicle-info" @click.stop="goToBindVehicle" v-if="boundVehicle">
              <text>{{ boundVehicle }}</text>
            <uni-icons 
              :type="boundVehicle ? 'loop' : 'plus-filled'"
              size="18"
              :color="boundVehicle ? '#007AFF' : '#999'"
              style="margin-left: 8rpx;"
                type="loop"
                size="16"
                color="#007AFF"
                style="margin-left: 4rpx;"
            ></uni-icons>
            </view>
          </view>
          <view class="bind-vehicle-btn" v-if="!boundVehicle" @click="goToBindVehicle">
            <uni-icons type="plus-filled" size="16" color="#007AFF" style="margin-right: 4rpx;"></uni-icons>
            <text>绑定车牌</text>
          </view>
        </view>
      </view>
@@ -41,18 +52,21 @@
      <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-status" :class="getStatusClass(task.taskStatus)">
                {{ getStatusText(task.status) }}
              </view>
            </view>
            <!-- 任务编号单独一行 -->
            <view class="task-code-row">
              <text class="task-code">{{ task.taskNo }}</text>
            </view>
            <!-- 任务详细信息 -->
            <view class="task-info">
              <view class="info-row">
                <view class="info-item">
                  <view class="label">任务编号:</view>
                  <view class="value">{{ task.taskNo }}</view>
                </view>
                <view class="info-item">
                  <view class="label">任务状态:</view>
                  <view class="value">{{ getStatusText(task.status) }}</view>
                </view>
              </view>
              <view class="info-row">
                <view class="info-item">
                  <view class="label">出发地:</view>
@@ -157,48 +171,7 @@
        boundVehicleId: null,
        
        // 消息数据
        messages: [
          {
            id: 1,
            type: 'create', // 创建成功
            content: 'TD 1011 广州天河->广州东站,时间:13:20 任务创建成功',
            time: '2023-05-15 13:20',
            read: false,
            taskId: 1
          },
          {
            id: 2,
            type: 'push', // 任务推送
            content: 'TD1021 广州天河->广州东站,时间:13:20 出发,请及时处理',
            time: '2023-05-15 13:25',
            read: false,
            taskId: 2
          },
          {
            id: 3,
            type: 'status', // 任务状态变更
            content: 'TD1021 广州天河->广州东站,时间:13:20,任务正在转运中',
            time: '2023-05-15 14:30',
            read: true,
            taskId: 2
          },
          {
            id: 4,
            type: 'create', // 创建成功
            content: 'TD 1022 深圳南山->深圳福田,时间:15:10 任务创建成功',
            time: '2023-05-15 15:10',
            read: false,
            taskId: 3
          },
          {
            id: 5,
            type: 'push', // 任务推送
            content: 'TD1023 深圳南山->深圳福田,时间:16:00 出发,请及时处理',
            time: '2023-05-15 16:00',
            read: true,
            taskId: 4
          }
        ],
        messages: [],
        
        // 正在运行的任务列表
        taskList: [],
@@ -207,7 +180,7 @@
    },
    computed: {
      ...mapState({
        userName: state => state.user.name,
        userName: state => state.user.nickName,
        currentUser: state => state.user
      }),
      
@@ -505,6 +478,20 @@
        })
      },
      
      // 获取状态样式类
      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) {
        // 支持新旧两种状态格式
        const statusMap = {
@@ -588,19 +575,44 @@
      .user-details {
        flex: 1;
        
        .user-info-row {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 12rpx;
        .user-name {
          font-size: 36rpx;
            font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
          color: #333;
        }
        
        .vehicle-info {
          .separator {
            margin: 0 12rpx;
            color: #ddd;
          font-size: 28rpx;
          }
          .branch-company {
            font-size: 26rpx;
          color: #666;
          display: flex;
          align-items: center;
          cursor: pointer;
          }
          .vehicle-info {
            font-size: 26rpx;
            color: #007AFF;
            display: flex;
            align-items: center;
          }
        }
        .bind-vehicle-btn {
          font-size: 26rpx;
          color: #007AFF;
          display: flex;
          align-items: center;
          
          &:active {
            opacity: 0.7;
@@ -699,10 +711,90 @@
          padding: 30rpx;
          border-bottom: 1rpx solid #f0f0f0;
          
          // 任务头部:标题和状态
          .task-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15rpx;
          .task-title {
              flex: 1;
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
              padding-right: 20rpx;
              line-height: 1.4;
            }
            .task-status {
              padding: 8rpx 20rpx;
              border-radius: 30rpx;
              font-size: 24rpx;
              white-space: nowrap;
              flex-shrink: 0;
              // 待处理 - 橙色
              &.status-pending {
                background-color: #fff3e0;
                color: #ff9500;
              }
              // 出发中 - 蓝色
              &.status-departing {
                background-color: #e3f2fd;
                color: #007AFF;
              }
              // 已到达 - 紫色
              &.status-arrived {
                background-color: #f3e5f5;
                color: #9c27b0;
              }
              // 返程中 - 青色
              &.status-returning {
                background-color: #e0f2f1;
                color: #009688;
              }
              // 已完成 - 绿色
              &.status-completed {
                background-color: #e8f5e9;
                color: #34C759;
              }
              // 已取消 - 灰色
              &.status-cancelled {
                background-color: #f5f5f5;
                color: #999;
              }
              // 处理中 (兼容旧数据) - 蓝色
              &.status-in-progress {
                background-color: #e3f2fd;
                color: #007AFF;
              }
              // 默认样式
              &.status-default {
                background-color: #f5f5f5;
                color: #666;
              }
            }
          }
          // 任务编号单独一行
          .task-code-row {
            margin-bottom: 15rpx;
            padding: 10rpx 0;
            border-bottom: 1rpx dashed #e0e0e0;
            .task-code {
              font-size: 28rpx;
              color: #333;
              font-weight: 500;
              font-family: monospace;
            }
          }
          
          .task-info {