feat:消息体推送

wlzboy

2025-10-25 fefb649f462ae6b19dd8f0f6bc6096619db9a82e

 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="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>
@@ -78,46 +92,59 @@
          
          <!-- 操作按钮 -->
          <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>
            <!-- 待处理状态: 显示出发、取消 -->
            <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>
        </view>
        
@@ -135,6 +162,7 @@
  import { getMyTasks, changeTaskStatus } from '@/api/task'
  import { getUserProfile } from '@/api/system/user'
  import { getUserBoundVehicle } from '@/api/vehicle'
  import { getUnreadCount } from '@/api/message'
  
  export default {
    data() {
@@ -144,48 +172,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: [],
@@ -194,7 +182,7 @@
    },
    computed: {
      ...mapState({
        userName: state => state.user.name,
        userName: state => state.user.nickName,
        currentUser: state => state.user
      }),
      
@@ -204,11 +192,6 @@
          // 包含待处理、出发中、已到达、返程中等所有未完成的状态
          return ['PENDING', 'DEPARTING', 'ARRIVED', 'RETURNING', 'IN_PROGRESS'].includes(task.taskStatus)
        });
      },
      
      // 未读消息数量
      unreadMessageCount() {
        return this.messages.filter(message => !message.read).length;
      }
    },
    onLoad() {
@@ -216,11 +199,14 @@
      this.loadUserVehicle()
      // 加载正在运行的任务
      this.loadRunningTasks()
      // 加载未读消息数量
      this.loadUnreadMessageCount()
    },
    onShow() {
      // 每次显示页面时刷新任务列表和绑定车辆
      // 每次显示页面时刷新任务列表、绑定车辆和消息数量
      this.loadUserVehicle()
      this.loadRunningTasks()
      this.loadUnreadMessageCount()
    },
    onPullDownRefresh() {
      // 下拉刷新
@@ -254,6 +240,17 @@
          console.error('获取绑定车辆信息失败:', error)
          this.boundVehicle = ''
          this.boundVehicleId = null
        })
      },
      
      // 加载未读消息数量
      loadUnreadMessageCount() {
        getUnreadCount().then(response => {
          if (response.code === 200) {
            this.unreadMessageCount = response.data || 0
          }
        }).catch(error => {
          console.error('获取未读消息数量失败:', error)
        })
      },
      
@@ -383,69 +380,50 @@
        this.$tab.navigateTo(`/pages/task/detail?id=${task.taskId || task.id}`);
      },
      
      // 判断操作按钮是否禁用
      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
        }
      },
      
      // 处理任务操作
      handleTaskAction(task, action) {
        if (this.isActionDisabled(task, action)) {
          return
        }
        
        switch (action) {
          case 'depart':
            // 出发操作 -> 状态变为出发中
            let departMessage = '确定要出发吗？'
            if (task.taskType !== 'MAINTENANCE' && task.taskType !== 'FUEL') {
              departMessage = '出发去目的地，确认？'
            }
            this.$modal.confirm(departMessage).then(() => {
            // 出发 -> 状态变为出发中
            this.$modal.confirm('确定要出发吗？').then(() => {
              this.updateTaskStatus(task.taskId, 'DEPARTING', '任务已出发')
            }).catch(() => {})
            break
            }).catch(() => {});
            break;
            
          case 'cancel':
            // 取消 -> 二次确认后状态变为已取消
            this.$modal.confirm('确定要取消此任务吗？').then(() => {
              this.updateTaskStatus(task.taskId, 'CANCELLED', '任务已取消')
            }).catch(() => {});
            break;
            
          case 'arrive':
            // 已到达操作 -> 状态变为已到达
            this.$modal.confirm('已经到达目的地，确认？').then(() => {
            // 已到达 -> 状态变为已到达
            this.$modal.confirm('确认已到达目的地？').then(() => {
              this.updateTaskStatus(task.taskId, 'ARRIVED', '已到达目的地')
            }).catch(() => {})
            break
            }).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 'settle':
            // 结算操作，跳转到结算页面
            this.$tab.navigateTo(`/pages/task/settlement?id=${task.taskId}`)
            break
            }).catch(() => {});
            break;
            
          case 'complete':
            // 已完成操作 -> 状态变为已完成
            this.$modal.confirm('任务是否已经全部完成，确认？').then(() => {
            // 已完成 -> 状态变为已完成
            this.$modal.confirm('确认任务已完成？').then(() => {
              this.updateTaskStatus(task.taskId, 'COMPLETED', '任务已完成')
            }).catch(() => {})
            break
            }).catch(() => {});
            break;
        }
      },
      
@@ -509,6 +487,20 @@
            }).catch(() => {})
          }
        })
      },
      
      // 获取状态样式类
      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) {
@@ -594,19 +586,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;
@@ -705,10 +722,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 {
@@ -759,6 +856,11 @@
              color: white;
            }
            
            &.cancel {
              background-color: #ff3b30;
              color: white;
            }
            
            &.disabled {
              opacity: 0.5;
            }