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

94 lines
4.0 KiB
Plaintext
Raw Normal View History

<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:elif="{{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" wx:elif="{{taskInfo.status === 'accepted'}}">请前往取货并拍照上传</view>
<view class="status-hint" wx:elif="{{taskInfo.status === 'picked_up'}}">请送达后确认</view>
<view class="status-hint" wx:elif="{{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">
<text class="cargo-label">货物</text>
<text class="cargo-value">{{taskInfo.pickupContent}}</text>
</view>
<view class="cargo-row">
<text class="cargo-label">数量</text>
<text class="cargo-value highlight">{{taskInfo.quantity}}</text>
</view>
<view class="cargo-row" wx:if="{{taskInfo.factoryName !== '-'}}">
<text class="cargo-label">工厂</text>
<text class="cargo-value">{{taskInfo.factoryName}}</text>
</view>
</view>
<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="path" class="photo-item">
<image class="photo-img" src="{{item.path}}" mode="aspectFill" />
<view class="photo-remove" data-index="{{index}}" catchtap="handleRemovePhoto">X</view>
</view>
<view wx:if="{{uploadedPhotos.length < 3}}" class="photo-add" bindtap="handleChoosePhoto">
<view class="add-icon">+</view>
<view class="add-text">拍照</view>
</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>