dingdanquanliucheng/frontend/mini-app/pages/driver/task-detail/task-detail.wxml

<view class="page detail-page">
  <view class="custom-header" style="padding-top: {{statusBarHeight}}px;">
    <view class="back-btn" bindtap="handleBack"><view class="back-arrow"></view></view>
    <view class="header-title">任务详情</view>
  </view>

  <view wx:if="{{message}}" class="message card">{{message}}</view>

  <view wx:if="{{loading}}" class="card empty-card">
    <view class="page-subtitle">正在加载...</view>
  </view>

  <view wx:if="{{!loading && taskInfo}}" class="detail-body">
    <view class="status-banner {{taskInfo.status}}">
      <view class="status-text">{{taskInfo.statusText}}</view>
      <view class="status-hint" wx:if="{{taskInfo.status === 'pending'}}">等待您接单</view>
      <view class="status-hint" hidden="{{loading || taskInfo.status !== 'accepted'}}">请录入运单号后确认揽货</view>
      <view class="status-hint" hidden="{{loading || taskInfo.status !== 'picked_up'}}">请送达后确认</view>
      <view class="status-hint" hidden="{{loading || taskInfo.status !== 'delivered'}}">任务已完成</view>
    </view>

    <view class="card addr-card">
      <view class="addr-row">
        <view class="addr-dot pickup"></view>
        <view class="addr-content">
          <view class="addr-label">取货地址</view>
          <view class="addr-text">{{taskInfo.pickupAddress}}</view>
        </view>
      </view>
      <view class="addr-line"></view>
      <view class="addr-row">
        <view class="addr-dot delivery"></view>
        <view class="addr-content">
          <view class="addr-label">送达地址</view>
          <view class="addr-text">{{taskInfo.deliveryAddress}}</view>
        </view>
      </view>
    </view>

    <view class="card cargo-card">
      <view class="cargo-row" wx:if="{{taskInfo.salesmanName}}">
        <text class="cargo-label">业务员</text>
        <text class="cargo-value">{{taskInfo.salesmanName}}</text>
      </view>
      <view class="cargo-row" wx:if="{{taskInfo.factoryName !== '-'}}">
        <text class="cargo-label">工厂</text>
        <text class="cargo-value">{{taskInfo.factoryName}}</text>
      </view>
    </view>

    <!-- Product specifications -->
    <view wx:if="{{taskInfo.products && taskInfo.products.length > 0}}" class="card cargo-card">
      <view class="section-title">产品规格</view>
      <view wx:for="{{taskInfo.products}}" wx:key="index" class="cargo-row">
        <text class="cargo-label">{{item.product_name}}</text>
        <text class="cargo-value">{{item.specification}} {{item.quantity}}{{item.unit}}</text>
      </view>
    </view>

    <!-- Waybill card for accepted status -->
    <view wx:if="{{taskInfo.status === 'accepted'}}" class="card waybill-card">
      <view class="section-title">运单信息 <text class="required">*</text></view>

      <view wx:if="{{waybillList.length > 0}}" class="waybill-list">
        <view wx:for="{{waybillList}}" wx:key="index" class="waybill-item">
          <view class="waybill-info">
            <view class="waybill-number">{{item.tracking_number || '未识别'}}</view>
            <view class="waybill-company" wx:if="{{item.express_name}}">{{item.express_name}}</view>
            <view class="waybill-confidence" wx:if="{{item.confidence > 0 && item.confidence < 0.8}}">识别置信度较低，请核对</view>
          </view>
          <view class="waybill-actions">
            <view class="waybill-action-btn" data-index="{{index}}" bindtap="handleEditWaybill">编辑</view>
            <view class="waybill-action-btn waybill-action-delete" data-index="{{index}}" catchtap="handleRemoveWaybill">删除</view>
          </view>
        </view>
      </view>

      <view class="waybill-empty" wx:if="{{waybillList.length === 0 && !recognizing}}">
        <view class="waybill-empty-text">尚未录入运单号</view>
        <view class="waybill-empty-hint">请拍照识别或手动输入运单号</view>
      </view>

      <view class="waybill-add-area">
        <view class="waybill-camera-btn" bindtap="handleWaybillPhoto">
          <view class="waybill-camera-icon">+</view>
          <view class="waybill-camera-text" wx:if="{{!recognizing}}">拍照识别运单</view>
          <view class="waybill-camera-text" wx:if="{{recognizing}}">识别中...</view>
        </view>
        <view class="waybill-manual-link" bindtap="handleManualWaybill">手动输入</view>
      </view>
    </view>

    <!-- Photo attachment area (accepted state) -->
    <view wx:if="{{taskInfo.status === 'accepted'}}" class="card photo-card">
      <view class="section-title">现场照片 <text class="required">*</text></view>
      <view class="photo-grid">
        <view wx:for="{{uploadedPhotos}}" wx:key="index" class="photo-item">
          <image class="photo-img" src="{{item.path}}" mode="aspectFill" />
          <view class="photo-remove" data-index="{{index}}" catchtap="handleRemovePhoto">×</view>
        </view>
        <view class="photo-add" bindtap="handleChoosePhoto" wx:if="{{uploadedPhotos.length < 9}}">
          <view class="add-icon">+</view>
          <view class="add-text">拍照/选图</view>
        </view>
      </view>
      <view class="photo-hint" wx:if="{{uploadedPhotos.length === 0}}">请至少拍摄一张货物或面单照片</view>
    </view>

    <!-- Waybill list for read-only display (picked_up / delivered) -->
    <view wx:if="{{(taskInfo.status === 'picked_up' || taskInfo.status === 'delivered') && waybillList.length > 0}}" class="card waybill-card waybill-card-readonly">
      <view class="section-title">运单信息</view>
      <view class="waybill-list">
        <view wx:for="{{waybillList}}" wx:key="index" class="waybill-item waybill-item-readonly">
          <view class="waybill-info">
            <view class="waybill-number">{{item.tracking_number}}</view>
            <view class="waybill-company" wx:if="{{item.express_name}}">{{item.express_name}}</view>
          </view>
          <view class="waybill-status-badge" wx:if="{{item.status}}">{{item.status}}</view>
        </view>
      </view>
    </view>

    <!-- Saved attachments (picked_up / delivered) -->
    <view wx:if="{{(taskInfo.status === 'picked_up' || taskInfo.status === 'delivered') && taskAttachments.length > 0}}" class="card photo-card">
      <view class="section-title">现场照片</view>
      <view class="photo-grid">
        <view wx:for="{{taskAttachments}}" wx:key="id" class="photo-item">
          <image class="photo-img" src="{{item.file_url}}" mode="aspectFill" />
        </view>
      </view>
    </view>

    <view wx:if="{{traceList.length}}" class="card trace-card">
      <view class="trace-header">
        <view class="section-title">物流轨迹</view>
      </view>
      <view wx:for="{{traceList}}" wx:key="node_time" class="trace-row">
        <view class="trace-dot"></view>
        <view class="trace-content">
          <view class="trace-time">{{item.node_time}}</view>
          <view class="trace-desc">{{item.node_desc}}</view>
        </view>
      </view>
    </view>
  </view>

  <view wx:if="{{taskInfo && taskInfo.status !== 'delivered' && taskInfo.status !== 'canceled'}}" class="action-bar">
    <input wx:if="{{taskInfo.status !== 'pending'}}" class="remark-input" placeholder="备注（可选）" value="{{actionRemark}}" bindinput="handleRemarkInput" />
    <button class="action-btn primary-btn" type="primary" loading="{{actionLoading}}" bindtap="handleAction">
      {{ taskInfo.status === 'pending' ? '接受任务' : (taskInfo.status === 'accepted' ? '确认揽货' : '确认送达') }}
    </button>
  </view>

  <view wx:if="{{taskInfo && taskInfo.status === 'delivered'}}" class="action-bar done-bar">
    <view class="done-label">任务已完成</view>
  </view>
</view>