V4.0.9版本更新合伙人H5端调整

apps/h5-partner/src/pages/SettlementPage.tsx

@@ -2,8 +2,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import PageHeader from '@dukang/shared-ui/PageHeader';
 import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
-import type { PartnerBillDto } from '@dukang/shared-types';
+import type { PartnerBillDto, PartnerSettlementPreviewDto } from '@dukang/shared-types';
 import { isLoggedIn, request } from '../lib/api';
+import { formatBillPeriod, formatIssueLabel } from '../lib/settlement';
 
 type StatusFilter = 'all' | 'pending' | 'settled' | 'reviewing' | 'rejected';
 
@@ -31,25 +32,23 @@ function billStatusClass(status: string) {
   }
 }
 
-function billPeriodLabel(periodStart: string) {
-  const d = new Date(periodStart);
-  if (Number.isNaN(d.getTime())) return '—';
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
-}
-
-function billMonthLabel(year: number, month: number) {
-  return `${year}年${month}月`;
+function billPeriodLabel(bill: PartnerBillDto) {
+  return formatBillPeriod(bill.periodStart, bill.periodEnd);
 }
 
 export default function SettlementPage() {
   const navigate = useNavigate();
   const [bills, setBills] = useState<PartnerBillDto[]>([]);
-  const now = new Date();
-  const [month, setMonth] = useState({ year: now.getFullYear(), month: now.getMonth() + 1 });
+  const [preview, setPreview] = useState<PartnerSettlementPreviewDto | null>(null);
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
 
   const loadBills = useCallback(() => {
-    return request<PartnerBillDto[]>('PARTNER_H5', '/partner/settlement/bills').then(setBills);
+    return Promise.all([
+      request<PartnerBillDto[]>('PARTNER_H5', '/partner/settlement/bills').then(setBills),
+      request<PartnerSettlementPreviewDto>('PARTNER_H5', '/partner/settlement/preview')
+        .then(setPreview)
+        .catch(() => setPreview(null)),
+    ]).then(() => undefined);
   }, []);
 
   useEffect(() => {
@@ -60,22 +59,14 @@ export default function SettlementPage() {
   const summary = useMemo(() => {
     const pending = bills.filter((b) => b.status === 'AWAITING_CONFIRM');
     const settled = bills.filter((b) => b.status === 'PAID');
-    const currentMonth = bills.filter((b) => {
-      const d = new Date(b.periodStart);
-      return d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth();
-    });
     return {
       pendingTotal: pending.reduce((s, b) => s + Number(b.totalAmount || 0), 0),
       settledTotal: settled.reduce((s, b) => s + Number(b.totalAmount || 0), 0),
-      monthEstimate: currentMonth.reduce((s, b) => s + Number(b.totalAmount || 0), 0),
     };
-  }, [bills, now]);
+  }, [bills]);
 
   const filteredBills = useMemo(() => {
     return bills.filter((b) => {
-      const d = new Date(b.periodStart);
-      const matchMonth = d.getFullYear() === month.year && d.getMonth() + 1 === month.month;
-      if (!matchMonth) return false;
       if (statusFilter === 'all') return true;
       if (statusFilter === 'pending') return b.status === 'AWAITING_CONFIRM';
       if (statusFilter === 'settled') return b.status === 'PAID';
@@ -83,16 +74,7 @@ export default function SettlementPage() {
       if (statusFilter === 'rejected') return b.status === 'REJECTED';
       return true;
     });
-  }, [bills, month, statusFilter]);
-
-  const monthOptions = useMemo(() => {
-    const opts: Array<{ year: number; month: number }> = [];
-    for (let i = 0; i < 6; i++) {
-      const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
-      opts.push({ year: d.getFullYear(), month: d.getMonth() + 1 });
-    }
-    return opts;
-  }, [now]);
+  }, [bills, statusFilter]);
 
   function openBill(bill: PartnerBillDto) {
     navigate(bill.id ? `/center/bills?id=${bill.id}` : '/center/bills');
@@ -127,33 +109,18 @@ export default function SettlementPage() {
             </div>
             <div className="partner-settlement-summary-divider" />
             <div>
-              <p className="partner-settlement-summary-sub">本月预估收益</p>
+              <p className="partner-settlement-summary-sub">本周预付款</p>
               <p className="partner-settlement-summary-value partner-settlement-summary-value--accent">
-                ¥{fmtMoney(summary.monthEstimate)}
+                ¥{fmtMoney(preview?.prepaymentAmount ?? 0)}
               </p>
             </div>
           </div>
         </section>
 
         <section className="partner-settlement-filters">
-          <select
-            className="partner-settlement-month"
-            value={`${month.year}-${month.month}`}
-            onChange={(e) => {
-              const [y, m] = e.target.value.split('-').map(Number);
-              setMonth({ year: y, month: m });
-            }}
-          >
-            {monthOptions.map((opt) => (
-              <option key={`${opt.year}-${opt.month}`} value={`${opt.year}-${opt.month}`}>
-                {billMonthLabel(opt.year, opt.month)}
-              </option>
-            ))}
-          </select>
-          <button type="button" className="partner-settlement-status-btn">
-            <span className="material-symbols-outlined">filter_list</span>
-            状态
-          </button>
+          <p className="label-md text-muted" style={{ margin: 0, lineHeight: 1.5 }}>
+            账期 {formatBillPeriod(preview?.periodStart, preview?.periodEnd)} · {formatIssueLabel(preview)}
+          </p>
         </section>
 
         <div className="partner-settlement-chips">
@@ -193,7 +160,7 @@ export default function SettlementPage() {
                   </div>
                   <p className="partner-settlement-item-meta">
                     <span className="material-symbols-outlined">event</span>
-                    {billPeriodLabel(bill.periodStart)}
+                    {billPeriodLabel(bill)}
                     <span className="partner-settlement-dot" />
                     订单分佣 ¥{fmtMoney(Number(bill.orderCommission || 0))}
                   </p>