dingdanquanliucheng/frontend/mini-app/pages/manager/approve-detail/approve-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:elif="{{orderInfo}}" class="detail-body">
    <view class="card overview-card">
      <view class="overview-head">
        <view class="overview-left">
          <view class="order-no">{{orderInfo.order_no}}</view>
          <view class="order-customer">{{orderInfo.customer_name}} · {{orderInfo.customer_mobile}}</view>
        </view>
        <view class="badge {{orderInfo.badgeClass}}">{{orderInfo.statusText}}</view>
      </view>
      <view class="profit-highlight {{orderInfo.profitClass}}">
        <view class="profit-label">利润</view>
        <view class="profit-value">{{orderInfo.profitArrow}} {{orderInfo.profitTotalText}}</view>
        <view class="profit-rate" wx:if="{{orderInfo.profitRate}}">利润率 {{orderInfo.profitRate}}</view>
      </view>
      <view class="summary-grid">
        <view class="summary-item">
          <view class="summary-label">销售额</view>
          <view class="summary-value">{{orderInfo.salePriceTotalText}}</view>
        </view>
        <view class="summary-item">
          <view class="summary-label">成本</view>
          <view class="summary-value">{{orderInfo.costPriceTotalText}}</view>
        </view>
        <view class="summary-item">
          <view class="summary-label">回扣</view>
          <view class="summary-value">{{orderInfo.rebateTotalText}}</view>
        </view>
        <view class="summary-item">
          <view class="summary-label">运费</view>
          <view class="summary-value">{{orderInfo.freightTotalText}}</view>
        </view>
      </view>
      <view class="total-row">
        <text class="total-label">总支出</text>
        <text class="total-value">¥{{orderInfo.totalCostText}}</text>
      </view>
      <view wx:if="{{orderInfo.remark}}" class="remark-row">
        <text class="remark-label">备注：</text>
        <text class="remark-text">{{orderInfo.remark}}</text>
      </view>
    </view>

    <view wx:if="{{pricingItems.length}}" class="card pricing-card">
      <view class="section-title">报价明细</view>
      <view wx:for="{{pricingItems}}" wx:key="index" class="pricing-item">
        <view class="pricing-item-header">
          <text class="pricing-product">{{item.product_name}}</text>
          <text wx:if="{{item.pricing_type}}" class="pricing-type-badge">{{item.pricing_type === 'area' ? '按面积' : item.pricing_type}}</text>
        </view>
        <view wx:if="{{item.length_m || item.width_m}}" class="pricing-dims">
          <text wx:if="{{item.length_m}}">长度: {{item.length_m}}m</text>
          <text wx:if="{{item.width_m}}"> × 宽度: {{item.width_m}}m</text>
          <text wx:if="{{item.area_sqm}}"> = {{item.area_sqm}}㎡</text>
        </view>
        <view wx:if="{{item.calcDetail}}" class="pricing-calc">
          <view class="calc-row">
            <text class="calc-label">销售价</text>
            <text class="calc-value">¥{{item.salePrice}}</text>
          </view>
          <view class="calc-row calc-sub">
            <text class="calc-label">- 基础成本</text>
            <text class="calc-value">¥{{item.baseCost}}</text>
          </view>
          <view wx:for="{{item.surchargeItems}}" wx:for-item="sc" wx:key="key" class="calc-row calc-sub">
            <text class="calc-label">- {{sc.name}}</text>
            <text class="calc-value">¥{{sc.amount}}</text>
          </view>
          <view class="calc-row calc-total {{item.profitClass}}">
            <text class="calc-label">= 利润</text>
            <text class="calc-value">¥{{item.profit}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 利润计算过程 -->
    <view class="card calc-card">
      <view class="section-title">利润计算</view>
      <view wx:if="{{calcFormula}}" class="calc-formula">{{calcFormula}}</view>
      <view wx:if="{{calcRateFormula}}" class="calc-formula calc-rate-formula">{{calcRateFormula}}</view>
      <view class="calc-steps">
        <view class="calc-step-row">
          <view class="calc-step-label">销售价合计</view>
          <view class="calc-step-value">¥{{calcSaleTotal}}</view>
        </view>
        <view class="calc-step-row calc-step-minus">
          <view class="calc-step-label">- 成本价合计</view>
          <view class="calc-step-value">¥{{calcCostTotal}}</view>
        </view>
        <view class="calc-step-row calc-step-minus">
          <view class="calc-step-label">- 回扣合计</view>
          <view class="calc-step-value">¥{{calcRebateTotal}}</view>
        </view>
        <view class="calc-step-row calc-step-minus">
          <view class="calc-step-label">- 运费合计</view>
          <view class="calc-step-value">¥{{calcFreightTotal}}</view>
        </view>
        <view class="calc-step-row calc-step-minus">
          <view class="calc-step-label">- 税费合计</view>
          <view class="calc-step-value">¥{{calcTaxTotal}}</view>
        </view>
        <view wx:if="{{calcTaxDesc}}" class="calc-tax-note">{{calcTaxDesc}}</view>
        <view class="calc-step-row calc-step-minus">
          <view class="calc-step-label">- 其他费用合计</view>
          <view class="calc-step-value">¥{{calcOtherFeeTotal}}</view>
        </view>
        <view class="calc-step-row calc-step-result">
          <view class="calc-step-label">= 利润</view>
          <view class="calc-step-value">¥{{calcProfitTotal}}</view>
        </view>
        <view class="calc-step-row calc-step-rate">
          <view class="calc-step-label">利润率</view>
          <view class="calc-step-value">{{calcProfitRate}}%</view>
        </view>
      </view>
    </view>

    <!-- 订单明细 -->
    <view wx:if="{{orderItems.length}}" class="card order-items-card">
      <view class="section-title">订单明细</view>
      <view class="order-items-scroll">
        <view class="order-items-table">
          <view class="order-items-header">
            <view class="oi-col oi-product">产品</view>
            <view class="oi-col oi-num">数量</view>
            <view class="oi-col oi-num">售价</view>
            <view class="oi-col oi-num">成本</view>
            <view class="oi-col oi-num">销售金额</view>
            <view class="oi-col oi-num">成本金额</view>
          </view>
          <view wx:for="{{orderItems}}" wx:key="index" class="order-items-row">
            <view class="oi-col oi-product">{{item.product_name}}</view>
            <view class="oi-col oi-num">{{item.quantity}}</view>
            <view class="oi-col oi-num">¥{{item.sale_price}}</view>
            <view class="oi-col oi-num">¥{{item.cost_price}}</view>
            <view class="oi-col oi-num">¥{{item.sale_amount}}</view>
            <view class="oi-col oi-num">¥{{item.cost_amount}}</view>
          </view>
        </view>
      </view>
    </view>

    <view wx:if="{{orderAttachments.length}}" class="card attachment-card">
      <view class="section-title">订单附件</view>
      <view class="attachment-grid">
        <view wx:for="{{orderAttachments}}" wx:key="attachment_id" class="attachment-item" data-url="{{item.file_url}}" bindtap="handlePreviewAttachment">
          <image class="attachment-thumb" src="{{item.file_url}}" mode="aspectFill" />
          <text class="attachment-name">{{item.file_name}}</text>
        </view>
      </view>
    </view>

    <view class="card opinion-card">
      <view class="section-title">审批意见</view>
      <textarea class="textarea" placeholder="请输入审批意见（可选）" bindinput="handleOpinionInput" value="{{approveOpinion}}"></textarea>
    </view>
  </view>

  <view wx:if="{{orderInfo}}" class="action-bar">
    <button class="action-btn reject-btn" loading="{{actionLoading}}" data-result="reject" bindtap="handleApprove">
      {{ orderInfo.order_status === 'cancel_pending' ? '驳回取消' : '退回' }}
    </button>
    <button class="action-btn pass-btn" type="primary" loading="{{actionLoading}}" data-result="pass" bindtap="handleApprove">
      {{ orderInfo.order_status === 'cancel_pending' ? '同意取消' : '通过' }}
    </button>
  </view>
</view>