账单样式

src/pages/bill/index.less

@@ -9,16 +9,24 @@
     padding-bottom: 160rpx;
   }
 
-  // ===== 待支付汇总 =====
-  .bill-summary {
+  // 底部待支付汇总栏留出空间
+  &--pay {
+    padding-bottom: 180rpx;
+  }
+
+  // ===== 底部待支付汇总栏 =====
+  .bill-paybar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 99;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: linear-gradient(135deg, #ee0a24, #ff4d4f);
-    border-radius: 16rpx;
-    padding: 28rpx;
-    margin-bottom: 20rpx;
-    color: #fff;
+    padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+    background: #fff;
+    box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
 
     &__info {
       display: flex;
@@ -26,35 +34,24 @@
     }
 
     &__label {
-      font-size: 24rpx;
-      opacity: 0.85;
-    }
-
-    &__count {
-      margin-top: 8rpx;
-      font-size: 28rpx;
-      font-weight: 600;
+      font-size: 22rpx;
+      color: #969799;
     }
 
     &__amount {
-      font-size: 40rpx;
+      margin-top: 4rpx;
+      font-size: 36rpx;
+      color: #ee0a24;
       font-weight: 600;
     }
 
-    &__right {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-end;
-    }
-
-    &__pay {
-      margin-top: 12rpx;
-      padding: 8rpx 32rpx;
-      background: #fff;
-      color: #ee0a24;
-      font-size: 24rpx;
-      font-weight: 500;
+    &__btn {
+      padding: 16rpx 56rpx;
       border-radius: 999rpx;
+      background: linear-gradient(135deg, #ee0a24, #ff6034);
+      color: #fff;
+      font-size: 28rpx;
+      font-weight: 500;
     }
   }
 

src/pages/bill/index.tsx

@@ -29,7 +29,7 @@ interface CategoryOption {
 
 /**
  * 账单列表页
- * 采购单完成后由后台按门店生成（只读）；头部 summary 为门店口径待支付汇总（含审核中，不受筛选影响）
+ * 采购单完成后由后台按门店生成（只读）；底部汇总栏为门店口径待支付汇总（含审核中，不受筛选影响）
  * 支持多选账单合并导出 Excel（可按一级分类过滤商品明细）
  */
 export default function BillListPage() {
@@ -185,22 +185,11 @@ export default function BillListPage() {
     [selectedIds, toggleSelectMode],
   )
 
-  return (
-    <View className={`bill-page ${selectMode ? 'bill-page--select' : ''}`}>
-      {/* ========== 待支付汇总（门店口径，含审核中） ========== */}
-      {loggedIn && summary && summary.unpaid_count > 0 && (
-        <View className='bill-summary'>
-          <View className='bill-summary__info'>
-            <Text className='bill-summary__label'>待支付账单（含审核中）</Text>
-            <Text className='bill-summary__count'>{summary.unpaid_count} 笔</Text>
-          </View>
-          <View className='bill-summary__right'>
-            <Text className='bill-summary__amount'>￥{summary.unpaid_amount}</Text>
-            <View className='bill-summary__pay' onClick={goPay}>去付款</View>
-          </View>
-        </View>
-      )}
+  /** 底部待支付汇总栏是否可见（多选导出时让位给导出栏） */
+  const showPayBar = loggedIn && !selectMode && !!summary && summary.unpaid_count > 0
 
+  return (
+    <View className={`bill-page ${selectMode ? 'bill-page--select' : ''} ${showPayBar ? 'bill-page--pay' : ''}`}>
       {/* ========== 状态筛选 + 导出入口 ========== */}
       <View className='bill-toolbar'>
         <ScrollView scrollX className='status-scroll'>
@@ -278,6 +267,17 @@ export default function BillListPage() {
         <View className='bill-loading'><Text>没有更多了</Text></View>
       )}
 
+      {/* ========== 底部待支付汇总栏（门店口径，含审核中） ========== */}
+      {showPayBar && summary && (
+        <View className='bill-paybar'>
+          <View className='bill-paybar__info'>
+            <Text className='bill-paybar__label'>待支付账单（含审核中）{summary.unpaid_count} 笔</Text>
+            <Text className='bill-paybar__amount'>￥{summary.unpaid_amount}</Text>
+          </View>
+          <View className='bill-paybar__btn' onClick={goPay}>去付款</View>
+        </View>
+      )}
+
       {/* ========== 导出操作栏 ========== */}
       {selectMode && (
         <View className='export-bar'>