优化额外消耗

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;

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

@@ -751,10 +751,23 @@ function linesToList(value: string) {
             <el-input-number v-model="checkoutForm.coin_consumed_m" class="full-control" :min="0" :max="snapshotHafCoinM" :precision="2" controls-position="right" />
             <span class="field-hint">订单快照 {{ quantity(snapshotHafCoinM) }}M，预计剩余 {{ quantity(remainingHafCoinM) }}M</span>
           </el-form-item>
-          <el-form-item label="其他押金扣款（元）">
+          <el-form-item label="其他押金赔付（元）">
             <el-input-number v-model="checkoutForm.other_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
+            <span class="field-hint">不含上方额外消耗品；仅填写封禁、违规、资产损坏等需要从押金赔付的费用。</span>
           </el-form-item>
         </el-form>
+        <div class="checkout-deduct-preview">
+          <div>
+            <span>额外消耗品已用</span>
+            <strong>¥{{ money(resourceChargeAmount) }}</strong>
+            <em>按上方物资数量自动计算，计入实际结算租金</em>
+          </div>
+          <div>
+            <span>其他押金赔付</span>
+            <strong>¥{{ money(checkoutForm.other_amount) }}</strong>
+            <em>作为押金赔付扣除，和额外消耗品分开展示</em>
+          </div>
+        </div>
         <el-input
           v-model="checkoutForm.evidenceText"
           type="textarea"
@@ -1271,6 +1284,40 @@ function linesToList(value: string) {
   font-size: 12px;
 }
 
+.checkout-deduct-preview {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.checkout-deduct-preview div {
+  display: grid;
+  gap: 6px;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f9fafb;
+}
+
+.checkout-deduct-preview span {
+  color: #4b5563;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.checkout-deduct-preview strong {
+  color: #ff6a00;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.checkout-deduct-preview em {
+  color: #6b7280;
+  font-size: 12px;
+  font-style: normal;
+  line-height: 1.45;
+}
+
 .checkout-summary-card {
   display: grid;
   gap: 12px;
@@ -1492,6 +1539,10 @@ function linesToList(value: string) {
     text-align: left;
   }
 
+  .checkout-deduct-preview {
+    grid-template-columns: 1fr;
+  }
+
   .action-buttons {
     flex-direction: column;
   }