优化额外消耗

frontend/src/features/orders/views/MobileOrderDetailView.vue

@@ -769,20 +769,33 @@ function getStatusTagType(status: string) {
           <div class="coin-hint">
             订单快照 {{ quantity(snapshotHafCoinM) }}M，预计剩余 {{ quantity(remainingHafCoinM) }}M
           </div>
-          <van-field label="其他费用" label-width="100px">
+          <van-field label="其他押金赔付" label-width="100px">
             <template #input>
               <div class="coin-input-wrap">
                 <input
                   v-model.number="checkoutForm.other_amount"
                   type="number"
-                  placeholder="其他扣款金额"
+                  placeholder="不含上方额外物资"
                   class="custom-inline-input"
                 />
                 <span class="input-unit">元</span>
               </div>
             </template>
           </van-field>
+          <div class="deposit-deduct-hint">仅填写封禁、违规、资产损坏等需要从押金赔付的费用。</div>
         </van-cell-group>
+        <div class="checkout-fee-preview">
+          <div>
+            <span>额外消耗品已用</span>
+            <strong>¥{{ money(resourceChargeAmount) }}</strong>
+            <em>计入实际结算租金</em>
+          </div>
+          <div>
+            <span>其他押金赔付</span>
+            <strong>¥{{ money(checkoutForm.other_amount) }}</strong>
+            <em>从押金赔付扣除</em>
+          </div>
+        </div>
 
         <van-field
           v-model="checkoutForm.evidenceText"
@@ -1377,6 +1390,45 @@ function getStatusTagType(status: string) {
   color: #ff5f00;
 }
 
+.deposit-deduct-hint {
+  padding: 0 16px 10px;
+  color: #8a94a6;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.checkout-fee-preview {
+  display: grid;
+  gap: 8px;
+  margin: 0 16px 12px;
+}
+
+.checkout-fee-preview div {
+  display: grid;
+  gap: 4px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.checkout-fee-preview span {
+  color: #4a5568;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.checkout-fee-preview strong {
+  color: #ff5f00;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.checkout-fee-preview em {
+  color: #8a94a6;
+  font-size: 11px;
+  font-style: normal;
+}
+
 .coin-input-wrap {
   display: flex;
   align-items: center;