mini-starter/mini-demo/pages/orders/orders.wxml

<view class="orders-page">
  <!-- 状态选项卡 -->
  <view class="status-tabs">
    <view class="tabs-scroll">
      <view wx:for="{{statusTabs}}" wx:key="item" 
            class="tab-item {{currentTab === index ? 'active' : ''}}" 
            bindtap="onTabChange" 
            data-index="{{index}}">
        {{item}}
      </view>
    </view>
  </view>
  
  <!-- 订单列表 -->
  <view class="orders-list">
    <block wx:for="{{orders}}" wx:key="id">
      <view class="order-card {{item.schedule.type === 'business-charter' ? 'charter-order' : ''}}" 
            bindtap="viewDetail" 
            data-id="{{item.id}}">
        
        <!-- 订单头部 -->
        <view class="order-header">
          <view class="order-info">
            <view class="order-no">订单号：{{item.orderNo}}</view>
            <view class="activity-name">{{item.activity}}</view>
          </view>
          <view class="order-status {{item.statusCode === 1 ? 'pending' : (item.statusCode === 2 ? 'ongoing' : (item.statusCode === 3 ? 'completed' : 'cancelled'))}}">
            {{item.status}}
          </view>
        </view>
        
        <!-- 行程信息 -->
        <view class="trip-info">
          <view class="trip-route">
            <view class="route-item">
              <view class="route-label">出发</view>
              <view class="route-location">{{item.schedule.fromLoc}}</view>
            </view>
            <view class="route-arrow">→</view>
            <view class="route-item">
              <view class="route-label">到达</view>
              <view class="route-location">{{item.schedule.toLoc}}</view>
            </view>
          </view>
          
          <view class="trip-details">
            <view class="detail-item">
              <text class="detail-label">出发时间：</text>
              <text class="detail-value">{{item.schedule.date}} {{item.schedule.time}}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">车辆型号：</text>
              <text class="detail-value">{{item.schedule.model}}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">{{item.schedule.type === 'business-charter' ? '包车人数' : '购票数量'}}：</text>
              <text class="detail-value">{{item.passengers.length}}{{item.schedule.type === 'business-charter' ? '人' : '张'}}</text>
            </view>
          </view>
        </view>
        
        <!-- 司机信息 -->
        <view wx:if="{{driverInfoMap[item.id]}}" class="driver-info">
          <view class="driver-header">
            <view class="driver-title">司机信息</view>
            <view class="driver-status">
              <text wx:if="{{driverInfoMap[item.id].status === 'assigned'}}" class="status-assigned">已分配</text>
              <text wx:elif="{{driverInfoMap[item.id].status === 'picked_up'}}" class="status-picked">已上车</text>
              <text wx:elif="{{driverInfoMap[item.id].status === 'in_transit'}}" class="status-transit">行程中</text>
              <text wx:else class="status-completed">已完成</text>
            </view>
          </view>
          
          <view class="driver-details">
            <view class="driver-avatar">
              <image src="{{driverInfoMap[item.id].driver.avatar || '/images/default-avatar.png'}}" class="avatar-img"/>
            </view>
            <view class="driver-basic">
              <view class="driver-name">{{driverInfoMap[item.id].driver.name}}</view>
              <view class="driver-phone">{{driverInfoMap[item.id].driver.phone}}</view>
              <view class="driver-rating">⭐ {{driverInfoMap[item.id].driver.rating}}</view>
            </view>
            <view class="vehicle-info">
              <view class="vehicle-model">{{driverInfoMap[item.id].vehicle.vehicleModel}}</view>
              <view class="vehicle-plate">{{driverInfoMap[item.id].vehicle.licensePlate}}</view>
              <view class="vehicle-capacity">容量：{{driverInfoMap[item.id].vehicle.capacity}}人</view>
            </view>
            <view class="driver-actions">
              <button class="action-btn call-btn" 
                      bindtap="callDriver" 
                      data-id="{{item.id}}">
                📞 联系
              </button>
              <button wx:if="{{driverInfoMap[item.id].status === 'picked_up' || driverInfoMap[item.id].status === 'in_transit'}}"
                      class="action-btn location-btn" 
                      bindtap="viewDriverLocation" 
                      data-id="{{item.id}}">
                📍 位置
              </button>
            </view>
          </view>
          
          <!-- 行程中提示 -->
          <view wx:if="{{driverInfoMap[item.id].status === 'in_transit'}}" class="driver-tip">
            司机正在驾驶中，如电话未接通请谅解。位置信息每10秒更新一次。
          </view>
        </view>
        
        <!-- 司机未分配状态 -->
        <view wx:elif="{{item.statusCode >= 1}}" class="driver-pending">
          <view class="pending-icon">⏳</view>
          <view class="pending-text">正在为您分配司机...</view>
          <view class="pending-desc">预计1-2分钟内完成分配</view>
        </view>
        
        <!-- 价格信息 -->
        <view class="price-info">
          <view class="price-label">订单金额</view>
          <view class="price-value">¥{{item.totalPrice}}</view>
        </view>
        
        <!-- 订单操作 -->
        <view class="order-actions">
          <view class="create-time">下单时间：{{item.createTime}}</view>
          <view class="action-buttons">
            <button class="detail-btn" 
                    bindtap="viewDetail" 
                    data-id="{{item.id}}">
              查看详情
            </button>
          </view>
        </view>
      </view>
    </block>
    
    <!-- 空状态 -->
    <view wx:if="{{orders.length === 0}}" class="empty-orders">
      <view class="empty-icon">📋</view>
      <view class="empty-text">暂无订单</view>
      <view class="empty-desc">您还没有相关状态的订单</view>
    </view>
  </view>
</view>