dingdanquanliucheng/frontend/mini-app/pages/manager/approve-detail/approve-detail.wxml
taiyi b6de4b1350 feat: 审批详情页极简重写,决策漏斗式布局
- 三段式结构:利润结论 + 小票式费用明细 + 产品列表
- 利润卡片动态红/绿色,亏损/盈利一目了然
- 费用明细每项带真实数字,0 值项不显示
- 审批交互改为弹窗式,通过直接确认,退回弹输入框
- 删除冗长公式文字、附加费明细、分层价格、textarea

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-06-07 00:04:26 +08:00

66 lines
2.9 KiB
Plaintext

<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 wx:if="{{orderInfo.remark}}" class="remark-row">
<text class="remark-label">备注:</text>
<text class="remark-text">{{orderInfo.remark}}</text>
</view>
</view>
<!-- 第二屏:费用明细(小票式) -->
<view wx:if="{{orderInfo.feeItems.length}}" class="card fee-card">
<view class="section-title">费用明细</view>
<view class="fee-body">
<view wx:for="{{orderInfo.feeItems}}" wx:key="label" class="fee-row {{item.isIncome ? 'income' : ''}} {{item.isProfit ? 'profit ' + orderInfo.profitClass : ''}}">
<text class="fee-label">{{item.label}}</text>
<text class="fee-value">¥{{item.value}}</text>
</view>
<view class="fee-divider"></view>
</view>
</view>
<!-- 第三屏:产品明细 -->
<view wx:if="{{products.length}}" class="card product-card">
<view class="section-title">产品({{products.length}} 项)</view>
<view wx:for="{{products}}" wx:key="index" class="product-row">
<text class="product-name">{{item.name}}</text>
<text class="product-price">¥{{item.salePrice}}</text>
</view>
</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>