- 三段式结构:利润结论 + 小票式费用明细 + 产品列表 - 利润卡片动态红/绿色,亏损/盈利一目了然 - 费用明细每项带真实数字,0 值项不显示 - 审批交互改为弹窗式,通过直接确认,退回弹输入框 - 删除冗长公式文字、附加费明细、分层价格、textarea Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
66 lines
2.9 KiB
Plaintext
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>
|