账单与支付

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>
   )
 }