feat(redeem): 核销记录标记扫码/手机号并支持方式统计

落库 RedeemChannel，门店记录页增加统计按钮，HQ 可按方式筛选。

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/h5-shop/src/pages/HomePage.tsx

@@ -190,6 +190,9 @@ export default function HomePage() {
             <div className="shop-home-stat">
               <p className="shop-home-stat-label">今日核销笔数</p>
               <p className="shop-home-stat-value">{Number(dash?.todayCount || 0)}</p>
+              <p className="shop-home-stat-sub">
+                扫码 {Number(dash?.todayScanCount || 0)} · 手机号 {Number(dash?.todayPhoneCount || 0)}
+              </p>
             </div>
             <div className="shop-home-stat">
               <p className="shop-home-stat-label">今日到账金额</p>

apps/h5-shop/src/pages/RecordsPage.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import PullToRefresh from '@dukang/shared-ui/PullToRefresh';
+import { REDEEM_CHANNEL_LABELS, type RedeemChannel, type RedeemStatsDto } from '@dukang/shared-types';
 import { request } from '../lib/api';
 
 type RangeKey = 'today' | '7d' | '30d';
@@ -23,27 +24,53 @@ function inRange(dateStr: string, range: RangeKey) {
   return d >= start;
 }
 
+function channelLabel(channel: unknown): string {
+  const key = channel === 'PHONE' ? 'PHONE' : 'SCAN';
+  return REDEEM_CHANNEL_LABELS[key];
+}
+
 export default function RecordsPage() {
   const [records, setRecords] = useState<Array<Record<string, unknown>>>([]);
   const [range, setRange] = useState<RangeKey>('today');
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
   const [storeName, setStoreName] = useState('');
+  const [statsOpen, setStatsOpen] = useState(false);
+  const [statsLoading, setStatsLoading] = useState(false);
+  const [stats, setStats] = useState<RedeemStatsDto | null>(null);
 
   const loadRecords = useCallback(() => {
     return Promise.all([
-      request<{ list: Array<Record<string, unknown>> }>('SHOP_H5', '/shop/redeem/records').then((d) => {
-        setRecords(d.list || []);
-      }),
+      request<{ list: Array<Record<string, unknown>> }>('SHOP_H5', '/shop/redeem/records?pageSize=200').then(
+        (d) => {
+          setRecords(d.list || []);
+        },
+      ),
       request<Record<string, unknown>>('SHOP_H5', '/shop/store')
         .then((s) => setStoreName(String(s.name || '')))
         .catch(() => {}),
     ]);
   }, []);
 
+  const loadStats = useCallback(async (r: RangeKey) => {
+    setStatsLoading(true);
+    try {
+      const data = await request<RedeemStatsDto>('SHOP_H5', `/shop/redeem/stats?range=${r}`);
+      setStats(data);
+    } catch {
+      setStats(null);
+    } finally {
+      setStatsLoading(false);
+    }
+  }, []);
+
   useEffect(() => {
     void loadRecords();
   }, [loadRecords]);
 
+  useEffect(() => {
+    if (statsOpen) void loadStats(range);
+  }, [statsOpen, range, loadStats]);
+
   const filtered = useMemo(() => {
     return records.filter((r) => {
       if (!inRange(String(r.createdAt), range)) return false;
@@ -71,11 +98,13 @@ export default function RecordsPage() {
       <div className="shop-records-main">
         <nav className="shop-records-filters">
           <div className="shop-records-range-tabs">
-            {([
-              ['today', '今日'],
-              ['7d', '近7日'],
-              ['30d', '近30日'],
-            ] as const).map(([key, label]) => (
+            {(
+              [
+                ['today', '今日'],
+                ['7d', '近7日'],
+                ['30d', '近30日'],
+              ] as const
+            ).map(([key, label]) => (
               <button
                 key={key}
                 type="button"
@@ -86,21 +115,35 @@ export default function RecordsPage() {
               </button>
             ))}
           </div>
-          <div className="shop-records-status-chips">
-            {([
-              ['all', '全部'],
-              ['pending', '待打款'],
-              ['paid', '已打款'],
-            ] as const).map(([key, label]) => (
-              <button
-                key={key}
-                type="button"
-                className={`shop-records-chip${statusFilter === key ? ' active' : ''}`}
-                onClick={() => setStatusFilter(key)}
-              >
-                {label}
-              </button>
-            ))}
+          <div className="shop-records-status-row">
+            <div className="shop-records-status-chips">
+              {(
+                [
+                  ['all', '全部'],
+                  ['pending', '待打款'],
+                  ['paid', '已打款'],
+                ] as const
+              ).map(([key, label]) => (
+                <button
+                  key={key}
+                  type="button"
+                  className={`shop-records-chip${statusFilter === key ? ' active' : ''}`}
+                  onClick={() => setStatusFilter(key)}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+            <button
+              type="button"
+              className="shop-records-stats-btn"
+              onClick={() => setStatsOpen(true)}
+            >
+              <span className="material-symbols-outlined" style={{ fontSize: 18 }}>
+                bar_chart
+              </span>
+              统计
+            </button>
           </div>
         </nav>
 
@@ -116,7 +159,10 @@ export default function RecordsPage() {
             </div>
           </div>
           <p className="shop-records-summary-note">
-            <span className="material-symbols-outlined shop-fill-icon" style={{ fontSize: 16, color: 'var(--color-success-green)' }}>
+            <span
+              className="material-symbols-outlined shop-fill-icon"
+              style={{ fontSize: 16, color: 'var(--color-success-green)' }}
+            >
               check_circle
             </span>
             结算比例: {summary.rate}% (按{summary.rate / 10}折结算)
@@ -138,16 +184,29 @@ export default function RecordsPage() {
               const payout = r.payout as { paidAt?: string | null; status?: string } | undefined;
               const paid = Boolean(payout?.paidAt) || payout?.status === 'PAID' || Boolean(r.paidAt);
               const paidAt = payout?.paidAt || (typeof r.paidAt === 'string' ? r.paidAt : null);
+              const channel = (r.channel === 'PHONE' ? 'PHONE' : 'SCAN') as RedeemChannel;
               return (
                 <article key={String(r.id)} className="shop-record-card">
                   <div className="shop-record-card-top">
                     <div>
                       <div className="shop-record-order">
-                        <span className="shop-record-time" style={{ margin: 0 }}>订单号</span>
+                        <span className="shop-record-time" style={{ margin: 0 }}>
+                          订单号
+                        </span>
                         <span>{r.redeemNo ? String(r.redeemNo) : '—'}</span>
                       </div>
                       <p className="shop-record-time">
-                        核销时间: {new Date(String(r.createdAt)).toLocaleString('zh-CN', { hour12: false }).slice(0, 16)}
+                        核销时间:{' '}
+                        {new Date(String(r.createdAt))
+                          .toLocaleString('zh-CN', { hour12: false })
+                          .slice(0, 16)}
+                      </p>
+                      <p className="shop-record-channel">
+                        <span
+                          className={`shop-record-channel-tag${channel === 'PHONE' ? ' phone' : ''}`}
+                        >
+                          {channelLabel(channel)}
+                        </span>
                       </p>
                     </div>
                     <span className={`shop-record-badge ${paid ? 'paid' : 'pending'}`}>
@@ -172,7 +231,9 @@ export default function RecordsPage() {
                     </p>
                     {storeName && (
                       <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                        <span className="material-symbols-outlined" style={{ fontSize: 12 }}>restaurant</span>
+                        <span className="material-symbols-outlined" style={{ fontSize: 12 }}>
+                          restaurant
+                        </span>
                         {storeName}
                       </span>
                     )}
@@ -190,6 +251,80 @@ export default function RecordsPage() {
           </div>
         )}
       </div>
+
+      {statsOpen && (
+        <div className="shop-stats-overlay" role="dialog" aria-modal="true" aria-label="核销方式统计">
+          <button
+            type="button"
+            className="shop-stats-backdrop"
+            aria-label="关闭"
+            onClick={() => setStatsOpen(false)}
+          />
+          <div className="shop-stats-sheet">
+            <div className="shop-stats-sheet-head">
+              <h2>核销方式统计</h2>
+              <button type="button" className="shop-stats-close" onClick={() => setStatsOpen(false)}>
+                <span className="material-symbols-outlined">close</span>
+              </button>
+            </div>
+            <p className="shop-stats-range-hint">
+              统计区间：{range === 'today' ? '今日' : range === '7d' ? '近7日' : '近30日'}（与上方筛选同步）
+            </p>
+            {statsLoading ? (
+              <p className="shop-records-empty">加载中…</p>
+            ) : !stats ? (
+              <p className="shop-records-empty">统计加载失败</p>
+            ) : (
+              <>
+                <div className="shop-stats-total">
+                  <div>
+                    <p className="shop-records-summary-label">合计笔数</p>
+                    <p className="shop-stats-total-value">{stats.totalCount}</p>
+                  </div>
+                  <div>
+                    <p className="shop-records-summary-label">核销总额</p>
+                    <p className="shop-stats-total-value">¥{formatMoney(stats.totalAmount)}</p>
+                  </div>
+                  <div>
+                    <p className="shop-records-summary-label">到账总额</p>
+                    <p className="shop-stats-total-value">¥{formatMoney(stats.totalSettleAmount)}</p>
+                  </div>
+                </div>
+                <div className="shop-stats-channel-list">
+                  {stats.byChannel.map((b) => (
+                    <div key={b.channel} className="shop-stats-channel-card">
+                      <div className="shop-stats-channel-title">
+                        <span
+                          className={`shop-record-channel-tag${b.channel === 'PHONE' ? ' phone' : ''}`}
+                        >
+                          {REDEEM_CHANNEL_LABELS[b.channel]}
+                        </span>
+                        <strong>{b.count} 笔</strong>
+                      </div>
+                      <div className="shop-stats-channel-row">
+                        <span>核销额</span>
+                        <span>¥{formatMoney(b.amount)}</span>
+                      </div>
+                      <div className="shop-stats-channel-row">
+                        <span>到账额</span>
+                        <span>¥{formatMoney(b.settleAmount)}</span>
+                      </div>
+                      <div className="shop-stats-bar">
+                        <div
+                          className={`shop-stats-bar-fill${b.channel === 'PHONE' ? ' phone' : ''}`}
+                          style={{
+                            width: `${stats.totalCount > 0 ? Math.round((b.count / stats.totalCount) * 100) : 0}%`,
+                          }}
+                        />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
     </PullToRefresh>
   );
 }