WXProgram/miniprogram/pages/staff/order-management.wxml

<!-- 订单管理页面 -->
<view class="order-management-container">
  <!-- 顶部导航栏 -->
  <view class="management-header">
    <view class="header-left">
      <!-- 微信风格返回按钮 -->
      <view class="back-icon" bindtap="goBack">
        <text class="back-arrow">‹</text>
      </view>
      <view>
        <text class="header-title">订单管理</text>
        <text class="order-count" wx:if="{{filteredOrders.length > 0}}">共{{filteredOrders.length}}个订单</text>
      </view>
    </view>
    <button class="add-btn" bindtap="showAddOrderModal">新增订单</button>
  </view>

  <!-- 消息提示 -->
  <view class="message-container" wx:if="{{errorMessage || successMessage}}">
    <view class="error-message" wx:if="{{errorMessage}}">
      <text>{{errorMessage}}</text>
      <text class="close-btn" bindtap="clearMessage">×</text>
    </view>
    <view class="success-message" wx:if="{{successMessage}}">
      <text>{{successMessage}}</text>
      <text class="close-btn" bindtap="clearMessage">×</text>
    </view>
  </view>

  <!-- 加载状态 -->
  <view class="loading-container" wx:if="{{loading}}">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>

  <!-- 订单标签页 -->
  <view class="order-tabs">
    <text class="tab-item {{activeTab === 'all' ? 'active' : ''}}" 
           bindtap="switchTab" data-tab="all">全部</text>
    <text class="tab-item {{activeTab === 'pending' ? 'active' : ''}}" 
           bindtap="switchTab" data-tab="pending">未分配</text>
    <text class="tab-item {{activeTab === 'assigned' ? 'active' : ''}}" 
           bindtap="switchTab" data-tab="assigned">已分配</text>
    <text class="tab-item {{activeTab === 'in_transit' ? 'active' : ''}}" 
           bindtap="switchTab" data-tab="in_transit">配送中</text>
    <text class="tab-item {{activeTab === 'delivered' ? 'active' : ''}}" 
           bindtap="switchTab" data-tab="delivered">已完成</text>
  </view>

  <!-- 订单列表 -->
  <scroll-view class="order-list" scroll-y wx:if="{{!loading}}">
    <view wx:for="{{filteredOrders}}" wx:key="id" class="order-item" bindtap="handleOrderTap" data-id="{{item.id}}">
      <view class="order-header">
        <text class="order-id">订单#{{item.id}}</text>
        <text class="order-status {{item.status}}">{{getStatusText(item.status)}}</text>
      </view>
      
      <view class="order-info">
        <view class="route-info">
          <text class="route-icon">📍</text>
          <text class="route-text">{{item.startPoint.name}} → {{item.endPoint.name}}</text>
        </view>
        
        <view class="goods-info">
          <text class="goods-icon">📦</text>
          <text class="goods-text">{{item.goodsType}} {{item.goodsWeight}}kg</text>
        </view>
        
        <view class="time-info">
          <text class="time-icon">🕐</text>
          <text class="time-text">{{formatTime(item.createTime)}}</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="order-actions" wx:if="{{item.status === 'pending'}}">
        <button class="action-btn assign-btn" bindtap="handleOrderTap" data-id="{{item.id}}">分配</button>
        <button class="action-btn delete-btn" bindtap="deleteOrder" data-id="{{item.id}}">删除</button>
      </view>
      
      <view class="order-actions" wx:if="{{item.status === 'assigned'}}">
        <button class="action-btn transit-btn" bindtap="updateOrderStatus" data-id="{{item.id}}" data-status="in_transit">开始配送</button>
      </view>
      
      <view class="order-actions" wx:if="{{item.status === 'in_transit'}}">
        <button class="action-btn complete-btn" bindtap="updateOrderStatus" data-id="{{item.id}}" data-status="delivered">完成配送</button>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{filteredOrders.length === 0 && !loading}}">
      <text class="empty-icon">📋</text>
      <text class="empty-text">暂无订单</text>
      <text class="empty-hint">点击右上角按钮创建新订单</text>
    </view>
  </scroll-view>

  <!-- 分配订单弹窗 -->
  <view class="modal-mask" wx:if="{{showAssignModal}}" bindtap="hideAssignModal"></view>
  <view class="modal-content" wx:if="{{showAssignModal}}">
    <view class="modal-header">
      <text class="modal-title">分配订单</text>
      <text class="modal-close" bindtap="hideAssignModal">×</text>
    </view>
    <view class="modal-body">
      <text class="modal-text">请选择配送人员:</text>
      <scroll-view class="staff-select-list" scroll-y>
        <view wx:for="{{availableStaff}}" wx:key="id" class="staff-select-item" bindtap="assignOrder" data-id="{{item.id}}">
          <view class="staff-avatar">{{item.name.charAt(0)}}</view>
          <view class="staff-info">
            <text class="staff-name">{{item.name}}</text>
            <text class="staff-phone">{{item.phone}}</text>
            <text class="staff-status">{{getStatusText(item.status)}}</text>
          </view>
        </view>
        
        <view class="empty-staff" wx:if="{{availableStaff.length === 0}}">
          <text class="empty-text">暂无空闲配送人员</text>
        </view>
      </scroll-view>
    </view>
  </view>

  <!-- 新增订单弹窗 -->
  <view class="modal-mask" wx:if="{{showAddModal}}" bindtap="hideAddModal"></view>
  <view class="modal-content large" wx:if="{{showAddModal}}">
    <view class="modal-header">
      <text class="modal-title">新增订单</text>
      <text class="modal-close" bindtap="hideAddModal">×</text>
    </view>
    <view class="modal-body">
      <view class="form-hint">
        <text class="hint-text">请填写订单信息</text>
      </view>
      
      <view class="form-item">
        <text class="form-label">选择仓库:</text>
        <picker bindchange="onWarehouseChange" value="{{warehouseIndex}}" range="{{warehouses}}" range-key="name">
          <view class="picker-display">
            <text class="picker-text">{{warehouses[warehouseIndex] ? warehouses[warehouseIndex].name : '请选择仓库'}}</text>
            <text class="picker-arrow">▼</text>
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="form-label">终点名称:</text>
        <input class="form-input" bindinput="onEndNameInput" value="{{endName}}" placeholder="请输入终点名称"/>
      </view>
      
      <view class="form-item">
        <text class="form-label">货物类型:</text>
        <input class="form-input" bindinput="onGoodsTypeInput" value="{{goodsType}}" placeholder="请输入货物类型"/>
      </view>
      
      <view class="form-item">
        <text class="form-label">货物重量(kg):</text>
        <input class="form-input" bindinput="onGoodsWeightInput" value="{{goodsWeight}}" type="number" placeholder="请输入货物重量"/>
      </view>
      
      <button class="submit-btn" bindtap="createOrder">创建订单</button>
    </view>
  </view>
</view>