drone_delivery_of_medicines_applet/pages/order-detail/order-detail.wxml

<!--order-detail.wxml-->
<wxs module="utils">
module.exports = {
  getStatusClass: function(status) {
    if (status === '配送中') return 'delivering';
    if (status === '已完成') return 'completed';
    if (status === '待支付') return 'pending';
    if (status === 'delivering') return 'delivering';
    if (status === 'completed') return 'completed';
    if (status === 'pending') return 'pending';
    return '';
  },
  getStatusText: function(status) {
    if (status === 'delivering') return '配送中';
    if (status === 'completed') return '已完成';
    if (status === 'pending') return '待支付';
    return status;
  }
}
</wxs>
<view class="container">
  <!-- 自定义导航栏 -->
  <view class="custom-navbar">
    <view class="navbar-content">
      <view class="back-btn" bindtap="goBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="navbar-title">
        <text>订单详情</text>
      </view>
      <view class="navbar-right"></view>
    </view>
  </view>

  <!-- 订单基本信息 -->
  <view class="order-info-section">
    <view class="section-title">
      <text>订单信息</text>
    </view>
    <view class="info-card">
      <view class="info-row">
        <text class="info-label">订单编号：</text>
        <text class="info-value">{{order.id}}</text>
      </view>
      <view class="info-row">
        <text class="info-label">医院：</text>
        <text class="info-value">{{order.hospital}}</text>
      </view>
      <view class="info-row">
        <text class="info-label">下单时间：</text>
        <text class="info-value">{{order.date}}</text>
      </view>
      <view class="info-row">
        <text class="info-label">订单状态：</text>
        <text class="info-value status {{utils.getStatusClass(order.status)}}">{{utils.getStatusText(order.status)}}</text>
      </view>
    </view>
  </view>

  <!-- 药品信息 -->
  <view class="medicines-section">
    <view class="section-title">
      <text>药品信息</text>
    </view>
    <view class="medicine-list">
      <view class="medicine-item" wx:for="{{order.medicines}}" wx:key="*this">
        <view class="medicine-icon">
          <text>💊</text>
        </view>
        <view class="medicine-info">
          <text class="medicine-name">{{item}}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 价格信息 -->
  <view class="price-section">
    <view class="section-title">
      <text>价格信息</text>
    </view>
    <view class="price-card">
      <view class="price-row">
        <text class="price-label">药品总价：</text>
        <text class="price-value">¥{{order.totalPrice}}</text>
      </view>
      <view class="price-row total">
        <text class="price-label">实付金额：</text>
        <text class="price-value final">¥{{order.totalPrice}}</text>
      </view>
    </view>
  </view>

  <!-- 无人机配送轨迹 -->
  <view class="tracking-section" wx:if="{{order.droneTracking}}">
    <view class="section-title">
      <text>无人机配送轨迹</text>
    </view>
    <view class="tracking-card">
      <view class="tracking-status">
        <text class="status-text">当前状态：{{order.droneTracking.status}}</text>
      </view>
      <view class="tracking-steps">
        <view class="step-item" wx:for="{{order.droneTracking.steps}}" wx:key="*this">
          <view class="step-icon {{item === '配送中' || item === '已送达' ? 'active' : ''}}">
            <text>{{item === '配送中' || item === '已送达' ? '✓' : '○'}}</text>
          </view>
          <text class="step-text">{{item}}</text>
        </view>
      </view>
    </view>

    <!-- 地图显示 -->
    <view class="map-section" wx:if="{{order.mapTracking}}">
    1
      <view class="map-container">
        <map
          id="deliveryMap"
          class="delivery-map"
          latitude="{{mapCenter.latitude}}"
          longitude="{{mapCenter.longitude}}"
          scale="{{mapScale}}"
          markers="{{order.mapTracking.markers}}"
          polyline="{{order.mapTracking.polyline}}"
          show-location="{{true}}"
          enable-3D="{{true}}"
          show-compass="{{true}}"
          enable-overlooking="{{true}}"
          enable-zoom="{{true}}"
          enable-scroll="{{true}}"
          enable-rotate="{{true}}"
        >
        </map>
      </view>
      <view class="map-legend">
        <view class="legend-item">
          <view class="legend-icon hospital"></view>
          <text class="legend-text">医院位置</text>
        </view>
        <view class="legend-item">
          <view class="legend-icon drone"></view>
          <text class="legend-text">无人机位置</text>
        </view>
        <view class="legend-item">
          <view class="legend-icon route"></view>
          <text class="legend-text">配送路线</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 操作按钮 -->
  <view class="action-section">
    <button class="action-btn primary" bindtap="contactSupport" wx:if="{{order.status === 'delivering'}}">
      <text>联系客服</text>
    </button>
    <button class="action-btn secondary" bindtap="reorder" wx:if="{{order.status === 'completed'}}">
      <text>再次购买</text>
    </button>
    <button class="action-btn danger" bindtap="deleteOrder">
      <text>删除订单</text>
    </button>
  </view>
</view>