health.applet/miniprogram/module/order/pages/order-detail/order-detail.wxml

<!--module/order/pages/select-goods/select-goods.wxml-->
<t-navbar title="{{title}}" left-arrow />
<scroll-view class="page-scroll__container {{orderStatus==='pending'?'':'bottom'}}" type="list" scroll-y style="{{containerStyle}}">
  <view class="info-box {{ showDetail ? 'show-bttom' : '' }}">
    <!-- 收货人信息卡片 -->
    <view class="address-card {{orderStatus==='pending' ? 'address-card--clickable' : 'address-card--disabled'}}" bindtap="{{orderStatus==='pending' ? 'changeAddress' : ''}}" wx:if="{{orderDetail.isDelivery==='Y'}}" data-status="{{orderDetail.orderStatus}}">
      <view class="delivery-address" wx:if="{{showDetail}}">
        请选择配送地址
      </view>
      <view class="address-content" wx:else>
        <!-- 左侧位置图标 -->
        <view class="address-icon-wrapper">
          <image class="address-icon" src="/assets/icon/icon_location@3x.png" mode="aspectFit" />
        </view>
        <!-- 中间地址信息 -->
        <view class="address-info">
          <view class="address-header">
            <text class="address-name">{{name}}</text>
            <text class="address-phone">{{phone}}</text>
          </view>
          <view class="address-detail">
            {{address}}
          </view>
        </view>
        <!-- 右侧操作图标 -->
        <view class="address-actions" wx:if="{{orderStatus==='pending'}}">
          <t-icon name="edit" class="edit-icon" />
          <text class="arrow-icon">›</text>
        </view>
      </view>
    </view>
  </view>
  <!-- 商品列表 -->
  <view class="goods-list" wx:for="{{goodsList}}" wx:key="category">
    <!-- 分类标题 -->
    <view class="category-title">{{item.category}}</view>

    <!-- 商品项 -->
    <view class="goods-item" wx:for="{{item.goods}}" wx:for-item="goods" wx:for-index="goodsIndex" wx:key="id">
      <!-- 商品图片 -->
      <image class="goods-image" src="{{goods.image}}" mode="aspectFill" wx:if="{{goods.image}}" />
      <view class="service-package-placeholder" wx:else>
        <text class="placeholder-icon">📦</text>
      </view>
      <!-- 商品信息 -->
      <view class="goods-info">
        <text class="goods-name">{{goods.name}}</text>
        <text class="goods-desc" wx:if="{{goods.description}}">{{goods.description}}</text>
      </view>

      <!-- 价格和数量（右侧） -->
      <view class="goods-price-info">
        <text class="goods-price">¥{{goods.price}}</text>
        <view class="quantity-text">x{{goods.quantity}}</view>
      </view>
    </view>
  </view>
  <!-- 商品总价 -->
  <view class="price-total-wrapper">
    <view class="price-total">
      <text class="price-label">商品总价:</text>
      <text class="price-value">¥{{orderDetail.cost}}</text>
    </view>
  </view>
  <!-- 实际付款 -->
  <view class="price-summary-section">
    <view class="price-summary-card price-row">
      <text class="price-label">应付款:</text>
      <text class="price-value payable-value">¥{{orderDetail.cost}}</text>
    </view>
  </view>

  <view class="order-info-section">
    <!-- 备注 -->
    <view class="info-card">
      <view class="remark-item">
        <text class="info-label">备注</text>
        <view class="remark-input-wrapper">
          <textarea class="remark-textarea" placeholder="请输入备注信息" value="{{orderDetail.remark}}" maxlength="200" bindinput="onRemarkInput" auto-height show-confirm-bar="{{false}}" disabled="{{orderStatus!=='pending'}}" />
          <view class="remark-count">
            <text class="remark-count-text">{{remarkLength}}/200</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单详情 -->
    <view class="info-card">
      <view class="info-item" wx:if="{{orderDetail.orderNo}}">
        <text class="info-label" style="font-weight:600">订单编号</text>
        <view class="info-value-row">
          <text class="info-value" style="color:#9b9797">{{orderDetail.orderNo || ''}}</text>
          <text class="copy-btn" bindtap="copyOrderNo" data-orderno="{{orderDetail.orderNo}}">复制</text>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item">
        <text class="info-label">创建时间</text>
        <text class="info-value" style="color:#9b9797">{{orderDetail.operateTime || ''}}</text>
      </view>
    </view>

    <!-- 服务包详情 -->
    <view class="info-card">
      <view class="info-item" wx:if="{{orderDetail.conditioningWrapName}}">
        <text class="info-label" style="font-weight:600">服务包</text>
        <text class="info-value">{{orderDetail.conditioningWrapName || ''}}</text>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" wx:if="{{orderDetail.operateBy}}">
        <text class="info-label">开具医生</text>
        <text class="info-value">{{orderDetail.operateBy || ''}}</text>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" wx:if="{{orderDetail.operateTime}}">
        <text class="info-label">开具时间</text>
        <text class="info-value">{{orderDetail.operateTime || ''}}</text>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" wx:if="{{orderDetail.estimatedStartDate}}">
        <text class="info-label">开始调养日期</text>
        <text class="info-value">{{orderDetail.estimatedStartDate || ''}}</text>
      </view>
    </view>
  </view>

</scroll-view>

<!-- 立即支付 -->
<view class="footer-bar" style="padding-bottom: {{orderStatus==='pending' ? container.safeBottomOffset : 0}}px;" wx:if="{{orderStatus==='pending'}}">
  <view class="footer-center">
    <text class="footer-text" style="margin-right:10px">共{{totalGoodsCount}}件 </text>
    <text class="footer-text">合计： </text>
    <text class="footer-price">¥{{orderDetail.cost}}</text>
  </view>
  <view class="footer-right">
    <view class="checkout-btn {{isPaymentLoading ? 'checkout-btn--loading' : ''}}" bind:tap="onPayment">
      <text wx:if="{{isPaymentLoading}}">支付中...</text>
      <text wx:else>立即支付</text>
    </view>
  </view>
</view>