diff --git a/src/pages/bill/index.less b/src/pages/bill/index.less index b04cfba..cd64979 100644 --- a/src/pages/bill/index.less +++ b/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; } } diff --git a/src/pages/bill/index.tsx b/src/pages/bill/index.tsx index 19ccc55..4d1dcb2 100644 --- a/src/pages/bill/index.tsx +++ b/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 ( - - {/* ========== 待支付汇总(门店口径,含审核中) ========== */} - {loggedIn && summary && summary.unpaid_count > 0 && ( - - - 待支付账单(含审核中) - {summary.unpaid_count} 笔 - - - ¥{summary.unpaid_amount} - 去付款 - - - )} + /** 底部待支付汇总栏是否可见(多选导出时让位给导出栏) */ + const showPayBar = loggedIn && !selectMode && !!summary && summary.unpaid_count > 0 + return ( + {/* ========== 状态筛选 + 导出入口 ========== */} @@ -278,6 +267,17 @@ export default function BillListPage() { 没有更多了 )} + {/* ========== 底部待支付汇总栏(门店口径,含审核中) ========== */} + {showPayBar && summary && ( + + + 待支付账单(含审核中){summary.unpaid_count} 笔 + ¥{summary.unpaid_amount} + + 去付款 + + )} + {/* ========== 导出操作栏 ========== */} {selectMode && (