wlzboy
2025-10-26 1626d13ec8b1a63676e63cf95c5004c4118da3b3
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>
            <uni-icons
              :type="boundVehicle ? 'loop' : 'plus-filled'"
              size="18"
              :color="boundVehicle ? '#007AFF' : '#999'"
              style="margin-left: 8rpx;"
            ></uni-icons>
          <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="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-title">{{ getTaskTypeText(task.type) }} - {{ task.vehicle }}</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 class="task-header">
              <view class="task-title">{{ getTaskTypeText(task.type) }} - {{ task.vehicle }}</view>
              <view class="task-status" :class="task.taskStatus === 'PENDING' ? 'status-pending' : task.taskStatus === 'DEPARTING' ? 'status-departing' : task.taskStatus === 'ARRIVED' ? 'status-arrived' : task.taskStatus === 'RETURNING' ? 'status-returning' : task.taskStatus === 'COMPLETED' ? 'status-completed' : task.taskStatus === 'CANCELLED' ? 'status-cancelled' : task.taskStatus === 'IN_PROGRESS' ? 'status-in-progress' : 'status-default'">
                {{ 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>
@@ -148,6 +162,8 @@
  import { getMyTasks, changeTaskStatus } from '@/api/task'
  import { getUserProfile } from '@/api/system/user'
  import { getUserBoundVehicle } from '@/api/vehicle'
  import { getUnreadCount } from '@/api/message'
  import { formatDateTime } from '@/utils/common'
  
  export default {
    data() {
@@ -157,48 +173,8 @@
        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: [],
        unreadMessageCount: 0,
        
        // 正在运行的任务列表
        taskList: [],
@@ -207,7 +183,7 @@
    },
    computed: {
      ...mapState({
        userName: state => state.user.name,
        userName: state => state.user.nickName,
        currentUser: state => state.user
      }),
      
@@ -217,11 +193,6 @@
          // 包含待处理、出发中、已到达、返程中等所有未完成的状态
          return ['PENDING', 'DEPARTING', 'ARRIVED', 'RETURNING', 'IN_PROGRESS'].includes(task.taskStatus)
        });
      },
      // 未读消息数量
      unreadMessageCount() {
        return this.messages.filter(message => !message.read).length;
      }
    },
    onLoad() {
@@ -229,11 +200,14 @@
      this.loadUserVehicle()
      // 加载正在运行的任务
      this.loadRunningTasks()
      // 加载未读消息数量
      this.loadUnreadMessageCount()
    },
    onShow() {
      // 每次显示页面时刷新任务列表和绑定车辆
      // 每次显示页面时刷新任务列表、绑定车辆和消息数量
      this.loadUserVehicle()
      this.loadRunningTasks()
      this.loadUnreadMessageCount()
    },
    onPullDownRefresh() {
      // 下拉刷新
@@ -268,6 +242,33 @@
          this.boundVehicle = ''
          this.boundVehicleId = null
        })
      },
      // 加载未读消息数量
      loadUnreadMessageCount() {
        getUnreadCount().then(response => {
          if (response.code === 200) {
            this.unreadMessageCount = response.data || 0
            // 更新TabBar徽标
            this.updateTabBarBadge(this.unreadMessageCount)
          }
        }).catch(error => {
          console.error('获取未读消息数量失败:', error)
        })
      },
      // 更新TabBar徽标
      updateTabBarBadge(count) {
        if (count > 0) {
          uni.setTabBarBadge({
            index: 3, // 消息页面在tabBar中的索引
            text: count > 99 ? '99+' : count.toString()
          })
        } else {
          uni.removeTabBarBadge({
            index: 3
          })
        }
      },
      
      // 加载用户信息(保留以兼容之前的代码)
@@ -331,7 +332,7 @@
                vehicleList: task.assignedVehicles || [],
                startLocation: this.formatAddress(task.departureAddress || task.startLocation || '未设置'),
                endLocation: this.formatAddress(task.destinationAddress || task.endLocation || '未设置'),
                startTime: task.plannedStartTime ? this.formatDateTime(task.plannedStartTime) : '未设置',
                startTime: task.plannedStartTime ? formatDateTime(task.plannedStartTime, 'YYYY-MM-DD HH:mm') : '未设置',
                assignee: task.assigneeName || '未分配',
                taskNo: task.taskCode || '未知编号',
                status: this.convertStatus(task.taskStatus) // 转换状态格式以兼容旧UI
@@ -340,19 +341,6 @@
        }).catch(error => {
          this.loading = false
          console.error('加载任务列表失败:', error)
        })
      },
      // 格式化日期时间
      formatDateTime(dateTime) {
        if (!dateTime) return ''
        const date = new Date(dateTime)
        return date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit'
        })
      },
      
@@ -505,6 +493,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 = {
@@ -530,13 +532,13 @@
          'MAINTENANCE': '维修保养',
          'FUEL': '加油',
          'OTHER': '其他',
          'EMERGENCY_TRANSFER': '急救转运',
          'EMERGENCY_TRANSFER': '转运任务',
          'WELFARE': '福祉车',
          // 旧格式(UI类型)
          'maintenance': '维修保养',
          'refuel': '加油',
          'inspection': '巡检',
          'emergency': '急救转运',
          'emergency': '转运任务',
          'welfare': '福祉车'
        }
        return typeMap[type] || '未知类型'
@@ -588,19 +590,44 @@
      .user-details {
        flex: 1;
        
        .user-name {
          font-size: 36rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
          color: #333;
        }
        .vehicle-info {
          font-size: 28rpx;
          color: #666;
        .user-info-row {
          display: flex;
          align-items: center;
          cursor: pointer;
          flex-wrap: wrap;
          margin-bottom: 12rpx;
          .user-name {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
          .separator {
            margin: 0 12rpx;
            color: #ddd;
            font-size: 28rpx;
          }
          .branch-company {
            font-size: 26rpx;
            color: #666;
            display: flex;
            align-items: center;
          }
          .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 +726,90 @@
          padding: 30rpx;
          border-bottom: 1rpx solid #f0f0f0;
          
          .task-title {
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
          // 任务头部:标题和状态
          .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;
              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 {