账单与支付

src/pages/bill-detail/index.less

@@ -4,6 +4,11 @@
   padding: 20rpx 24rpx 60rpx;
   box-sizing: border-box;
 
+  // 可付款时为底部操作栏留出空间
+  &--pay {
+    padding-bottom: 160rpx;
+  }
+
   .bill-card {
     background: #fff;
     border-radius: 16rpx;
@@ -67,6 +72,11 @@
       font-size: 26rpx;
       color: #323233;
       flex-shrink: 0;
+
+      // 回筐抵扣（负附加金额）
+      &--return {
+        color: #07c160;
+      }
     }
 
     &__total {
@@ -104,6 +114,15 @@
       border-bottom: none;
     }
 
+    &__img {
+      width: 72rpx;
+      height: 72rpx;
+      border-radius: 8rpx;
+      background: #f2f3f5;
+      flex-shrink: 0;
+      margin-right: 16rpx;
+    }
+
     &__main {
       flex: 1;
       min-width: 0;
@@ -261,4 +280,46 @@
       font-weight: 600;
     }
   }
+
+  // ===== 去付款操作栏 =====
+  .bill-pay-bar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+    background: #fff;
+    box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
+
+    &__info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: baseline;
+    }
+
+    &__label {
+      font-size: 26rpx;
+      color: #646566;
+    }
+
+    &__amount {
+      margin-left: 16rpx;
+      font-size: 36rpx;
+      color: #ee0a24;
+      font-weight: 600;
+    }
+
+    &__btn {
+      padding: 14rpx 48rpx;
+      border-radius: 999rpx;
+      background: #ee0a24;
+      color: #fff;
+      font-size: 28rpx;
+      font-weight: 500;
+    }
+  }
 }

src/pages/bill-detail/index.tsx

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useState } from 'react'
-import { useRouter } from '@tarojs/taro'
-import { View, Text, ScrollView } from '@tarojs/components'
+import Taro, { useRouter } from '@tarojs/taro'
+import { View, Text, Image, ScrollView } from '@tarojs/components'
 import { Empty, Popup } from '@antmjs/vantui'
 import { getBillDetailApi } from '@/services/bill'
 import { getOrderDetailApi } from '@/services/order'
 import { ORDER_STATUS_TEXT } from '@/types/order'
+import { resolveFileUrl } from '@/utils/format'
 import type { OrderDetail } from '@/types/order'
 import type { BillDetail } from '@/services/bill'
 import './index.less'
@@ -44,6 +45,11 @@ export default function BillDetailPage() {
     }
   }, [])
 
+  /** 去付款 → 发起付款页（预选本账单） */
+  const goPay = () => {
+    Taro.navigateTo({ url: `/pages/payment/index` })
+  }
+
   if (loading && !detail) {
     return <View className='bill-detail'><Empty description='加载中...' /></View>
   }
@@ -53,8 +59,21 @@ export default function BillDetailPage() {
 
   const { bill, items, orders } = detail
 
+  /** 附加金额：正=压筐附加，负=回筐抵扣（0 不带头符号） */
+  const addedNum = Number(bill.added_amount)
+  const addedLabel = addedNum < 0 ? '回筐抵扣' : '压筐附加'
+  const addedText =
+    addedNum < 0
+      ? `-￥${Math.abs(addedNum).toFixed(2)}`
+      : addedNum > 0
+        ? `+￥${addedNum.toFixed(2)}`
+        : '￥0.00'
+  /** 筐/托盘明细：正压负回，数量取绝对值（单价为出账时快照） */
+  const boxPart = `${bill.box_num < 0 ? '回筐' : '压筐'} ${Math.abs(bill.box_num)}×￥${bill.box_price}`
+  const trayPart = `${bill.tray_num < 0 ? '回托盘' : '压托盘'} ${Math.abs(bill.tray_num)}×￥${bill.tray_price}`
+
   return (
-    <View className='bill-detail'>
+    <View className={`bill-detail ${bill.can_pay ? 'bill-detail--pay' : ''}`}>
       {/* ===== 账单信息 ===== */}
       <View className='bill-card'>
         <View className='bill-card__header'>
@@ -114,10 +133,10 @@ export default function BillDetailPage() {
           <Text className='bill-card__value'>￥{bill.delivery_fee}</Text>
         </View>
         <View className='bill-card__row'>
-          <Text className='bill-card__label'>
-            附加金额（筐 {bill.box_num}×￥{bill.box_price}，托盘 {bill.tray_num}×￥{bill.tray_price}）
+          <Text className='bill-card__label'>{addedLabel}（{boxPart}，{trayPart}）</Text>
+          <Text className={`bill-card__value ${addedNum < 0 ? 'bill-card__value--return' : ''}`}>
+            {addedText}
           </Text>
-          <Text className='bill-card__value'>￥{bill.added_amount}</Text>
         </View>
         <View className='bill-card__row bill-card__row--total'>
           <Text className='bill-card__label'>账单总额</Text>
@@ -131,6 +150,14 @@ export default function BillDetailPage() {
         <Text className='bill-section__desc'>同一商品跨订单合并，单价为加权平均价</Text>
         {(items ?? []).map(item => (
           <View key={item.product_id} className='bill-goods'>
+            {!!item.image && (
+              <Image
+                className='bill-goods__img'
+                src={resolveFileUrl(item.image)}
+                mode='aspectFill'
+                lazyLoad
+              />
+            )}
             <View className='bill-goods__main'>
               <Text className='bill-goods__name'>{item.product_name}</Text>
               <Text className='bill-goods__spec'>
@@ -200,6 +227,17 @@ export default function BillDetailPage() {
           </View>
         )}
       </Popup>
+
+      {/* ===== 去付款操作栏（可付款账单） ===== */}
+      {bill.can_pay && (
+        <View className='bill-pay-bar'>
+          <View className='bill-pay-bar__info'>
+            <Text className='bill-pay-bar__label'>账单总额</Text>
+            <Text className='bill-pay-bar__amount'>￥{bill.total_amount}</Text>
+          </View>
+          <View className='bill-pay-bar__btn' onClick={goPay}>去付款</View>
+        </View>
+      )}
     </View>
   )
 }