fix;提交、

2026-07-19 22:16:55 +08:00
parent 76270b20bf
commit 792b543ba8
34 changed files with 2310 additions and 398 deletions
@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { TICKET_TYPE_LABELS, type TicketTypeDto } from '@dukang/shared-types';
+import SubPageHeader from '../components/SubPageHeader';
+import { request } from '../lib/api';
+
+type TicketRow = {
+  id: string;
+  ticketNo: string;
+  ticketType: TicketTypeDto;
+  status: string;
+  orderNo?: string;
+  remark?: string;
+  createdAt: string;
+};
+
+const STATUS_LABEL: Record<string, string> = {
+  PENDING: '待处理',
+  OPEN: '处理中',
+  RESOLVED: '已完成',
+  REJECTED: '已驳回',
+  CLOSED: '已关闭',
+};
+
+export default function AfterSaleListPage() {
+  const navigate = useNavigate();
+  const [items, setItems] = useState<TicketRow[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    request<{ items: TicketRow[] }>('USER_H5', '/trade/after-sale-tickets?pageSize=50')
+      .then((res) => setItems(res.items ?? []))
+      .catch(() => setItems([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="after-sale-page">
+      <SubPageHeader title="我的售后" onBack={() => navigate(-1)} />
+      <main className="after-sale-body">
+        {loading ? (
+          <p className="after-sale-empty">加载中…</p>
+        ) : items.length === 0 ? (
+          <div className="after-sale-empty-box">
+            <p className="after-sale-empty">暂无售后工单</p>
+            <button type="button" className="after-sale-primary" onClick={() => navigate('/after-sale')}>
+              申请售后
+            </button>
+          </div>
+        ) : (
+          <div className="after-sale-order-list">
+            {items.map((t) => (
+              <div key={t.id} className="after-sale-order-item after-sale-ticket-card">
+                <div className="after-sale-ticket-head">
+                  <span>{TICKET_TYPE_LABELS[t.ticketType] ?? t.ticketType}</span>
+                  <span className="after-sale-ticket-status">{STATUS_LABEL[t.status] ?? t.status}</span>
+                </div>
+                <p className="after-sale-order-no">{t.ticketNo}</p>
+                <p className="after-sale-order-meta">订单 {t.orderNo ?? '—'} · {new Date(t.createdAt).toLocaleString()}</p>
+                {t.remark ? <p className="after-sale-order-meta">{t.remark}</p> : null}
+              </div>
+            ))}
+            <button type="button" className="after-sale-primary" onClick={() => navigate('/after-sale')}>
+              新建售后
+            </button>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,232 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import {
+  AFTER_SALE_TICKET_TYPES,
+  TICKET_TYPE_LABELS,
+  type AfterSaleTicketType,
+} from '@dukang/shared-types';
+import SubPageHeader from '../components/SubPageHeader';
+import { request } from '../lib/api';
+import { uploadFileToOss } from '../lib/upload';
+
+type OrderRow = {
+  id: string;
+  orderNo: string;
+  status: string;
+  payAmount: number | string;
+  productName?: string;
+  createdAt?: string;
+};
+
+const STEPS = ['类型', '订单', '凭证', '完成'] as const;
+
+export default function AfterSalePage() {
+  const navigate = useNavigate();
+  const [params] = useSearchParams();
+  const presetOrderId = params.get('orderId') || '';
+  const presetType = (params.get('type') as AfterSaleTicketType | null) || null;
+
+  const [step, setStep] = useState(0);
+  const [ticketType, setTicketType] = useState<AfterSaleTicketType | null>(
+    presetType && AFTER_SALE_TICKET_TYPES.includes(presetType) ? presetType : null,
+  );
+  const [orders, setOrders] = useState<OrderRow[]>([]);
+  const [orderId, setOrderId] = useState(presetOrderId);
+  const [remark, setRemark] = useState('');
+  const [evidenceUrls, setEvidenceUrls] = useState<string[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [ticketNo, setTicketNo] = useState('');
+
+  useEffect(() => {
+    Promise.all([
+      request<{ list?: OrderRow[] }>('USER_H5', '/trade/orders?tab=paid&pageSize=50'),
+      request<{ list?: OrderRow[] }>('USER_H5', '/trade/orders?tab=completed&pageSize=50'),
+    ])
+      .then(([paid, completed]) => {
+        const map = new Map<string, OrderRow>();
+        [...(paid.list ?? []), ...(completed.list ?? [])].forEach((o) => map.set(o.id, o));
+        setOrders([...map.values()]);
+      })
+      .catch(() => setOrders([]));
+  }, []);
+
+  const selectedOrder = useMemo(() => orders.find((o) => o.id === orderId), [orders, orderId]);
+
+  async function onPickFiles(files: FileList | null) {
+    if (!files?.length) return;
+    setUploading(true);
+    try {
+      const uploaded: string[] = [];
+      for (const file of Array.from(files).slice(0, 6 - evidenceUrls.length)) {
+        const res = await uploadFileToOss(file, { bizType: 'after-sale' });
+        uploaded.push(res.url);
+      }
+      setEvidenceUrls((prev) => [...prev, ...uploaded].slice(0, 6));
+    } catch (e) {
+      window.alert(e instanceof Error ? e.message : '上传失败');
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  async function submit() {
+    if (!ticketType || !orderId) return;
+    setSubmitting(true);
+    try {
+      const ticket = await request<{ ticketNo: string }>('USER_H5', `/trade/orders/${orderId}/after-sale-tickets`, {
+        method: 'POST',
+        body: JSON.stringify({
+          ticketType,
+          remark: remark.trim() || undefined,
+          evidenceUrls,
+        }),
+      });
+      setTicketNo(ticket.ticketNo);
+      setStep(3);
+    } catch (e) {
+      window.alert(e instanceof Error ? e.message : '提交失败');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  function nextFromType() {
+    if (!ticketType) {
+      window.alert('请选择售后类型');
+      return;
+    }
+    setStep(1);
+  }
+
+  function nextFromOrder() {
+    if (!orderId) {
+      window.alert('请选择订单');
+      return;
+    }
+    setStep(2);
+  }
+
+  return (
+    <div className="after-sale-page">
+      <SubPageHeader title="申请售后" onBack={() => navigate(-1)} />
+
+      <div className="after-sale-steps">
+        {STEPS.map((label, i) => (
+          <span key={label} className={`after-sale-step${i === step ? ' is-active' : i < step ? ' is-done' : ''}`}>
+            {label}
+          </span>
+        ))}
+      </div>
+
+      <main className="after-sale-body">
+        {step === 0 && (
+          <div className="after-sale-type-list">
+            {AFTER_SALE_TICKET_TYPES.map((t) => (
+              <button
+                key={t}
+                type="button"
+                className={`after-sale-type-item${ticketType === t ? ' is-selected' : ''}`}
+                onClick={() => setTicketType(t)}
+              >
+                <span>{TICKET_TYPE_LABELS[t]}</span>
+                <span className="material-symbols-outlined">chevron_right</span>
+              </button>
+            ))}
+            <button type="button" className="after-sale-primary" onClick={nextFromType}>
+              下一步
+            </button>
+          </div>
+        )}
+
+        {step === 1 && (
+          <div className="after-sale-order-list">
+            {orders.length === 0 ? (
+              <p className="after-sale-empty">暂无可售后订单</p>
+            ) : (
+              orders.map((o) => (
+                <button
+                  key={o.id}
+                  type="button"
+                  className={`after-sale-order-item${orderId === o.id ? ' is-selected' : ''}`}
+                  onClick={() => setOrderId(o.id)}
+                >
+                  <p className="after-sale-order-no">{o.orderNo}</p>
+                  <p className="after-sale-order-meta">
+                    {o.productName || '商品'} · ¥{Number(o.payAmount).toFixed(2)}
+                  </p>
+                </button>
+              ))
+            )}
+            <div className="after-sale-actions">
+              <button type="button" className="after-sale-secondary" onClick={() => setStep(0)}>
+                上一步
+              </button>
+              <button type="button" className="after-sale-primary" onClick={nextFromOrder}>
+                下一步
+              </button>
+            </div>
+          </div>
+        )}
+
+        {step === 2 && (
+          <div className="after-sale-form">
+            <p className="after-sale-summary">
+              {ticketType ? TICKET_TYPE_LABELS[ticketType] : ''} · {selectedOrder?.orderNo ?? orderId}
+            </p>
+            <label className="after-sale-label">问题描述</label>
+            <textarea
+              className="after-sale-textarea"
+              rows={4}
+              placeholder="请描述问题（选填）"
+              value={remark}
+              onChange={(e) => setRemark(e.target.value)}
+            />
+            <label className="after-sale-label">凭证图片（破损类建议上传）</label>
+            <div className="after-sale-evidence">
+              {evidenceUrls.map((url) => (
+                <img key={url} src={url} alt="" className="after-sale-evidence-img" />
+              ))}
+              {evidenceUrls.length < 6 && (
+                <label className="after-sale-evidence-add">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    hidden
+                    disabled={uploading}
+                    onChange={(e) => void onPickFiles(e.target.files)}
+                  />
+                  {uploading ? '上传中' : '+'}
+                </label>
+              )}
+            </div>
+            <div className="after-sale-actions">
+              <button type="button" className="after-sale-secondary" onClick={() => setStep(1)}>
+                上一步
+              </button>
+              <button type="button" className="after-sale-primary" disabled={submitting} onClick={() => void submit()}>
+                {submitting ? '提交中…' : '提交工单'}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {step === 3 && (
+          <div className="after-sale-success">
+            <span className="material-symbols-outlined after-sale-success-icon">check_circle</span>
+            <p className="after-sale-success-title">售后已提交</p>
+            <p className="after-sale-success-no">工单号 {ticketNo}</p>
+            <p className="after-sale-success-hint">总部将尽快审核，请留意处理进度</p>
+            <button type="button" className="after-sale-primary" onClick={() => navigate('/after-sale/list')}>
+              查看我的售后
+            </button>
+            <button type="button" className="after-sale-secondary" onClick={() => navigate('/orders')}>
+              返回订单
+            </button>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
@@ -1,186 +1,35 @@
-import { useEffect, useRef, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import SubPageHeader from '../components/SubPageHeader';
-import { request } from '../lib/api';
-
-type ChatMessage = {
-  id: string;
-  role: 'user' | 'agent' | 'system';
-  text: string;
-  time?: string;
-};
-
-const QUICK_QUESTIONS = [
-  { key: 'logistics', label: '物流查询' },
-  { key: 'damage', label: '破损补发' },
-  { key: 'refund', label: '申请退款' },
-  { key: 'address', label: '修改地址' },
-] as const;
-
-function nowLabel() {
-  const d = new Date();
-  const pad = (n: number) => String(n).padStart(2, '0');
-  return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
-}
-
-function agentReply(userText: string, orderNo?: string) {
-  if (/订单|DK\d+/i.test(userText) || orderNo) {
-    return '已收到您的订单信息，客服将在工作时间 9:00-18:00 内为您处理，请保持电话畅通。';
-  }
-  if (userText.includes('破损') || userText.includes('补发')) {
-    return '非常抱歉给您带来不便。请提供订单号并描述破损情况，我们将尽快安排补发。';
-  }
-  if (userText.includes('退款')) {
-    return '请提供订单号与退款原因，客服将为您核实订单状态并协助办理。';
-  }
-  if (userText.includes('地址')) {
-    return '待发货/出库中的订单可在订单详情修改收货地址；已发货订单请联系客服协助处理。';
-  }
-  if (userText.includes('物流')) {
-    return '您可在订单详情查看配送进度；如有异常请提供订单号，我们为您查询。';
-  }
-  return '您好，杜康客服已收到您的消息，请稍候，我们将尽快回复。';
-}
+import { CUSTOMER_SERVICE_PHONE, openWecomCustomerService } from '../lib/customer-service';
+import { track } from '../lib/analytics';

 export default function CustomerServicePage() {
  const navigate = useNavigate();
-  const [params] = useSearchParams();
-  const orderId = params.get('orderId') || '';
-  const orderNo = params.get('orderNo') || '';
-  const [input, setInput] = useState('');
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [sending, setSending] = useState(false);
-  const listRef = useRef<HTMLDivElement>(null);
+  const tel = CUSTOMER_SERVICE_PHONE.replace(/-/g, '');

-  useEffect(() => {
-    const welcome: ChatMessage[] = [
-      { id: 'sys-1', role: 'system', text: nowLabel(), time: nowLabel() },
-      {
-        id: 'agent-welcome',
-        role: 'agent',
-        text: orderNo
-          ? `您好，我是杜康好客客服。已为您关联订单 ${orderNo}，请问有什么可以帮您？`
-          : '您好，我是杜康好客客服。请问有什么可以帮您？',
-      },
-    ];
-    setMessages(welcome);
-  }, [orderNo]);
-
-  useEffect(() => {
-    listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: 'smooth' });
-  }, [messages]);
-
-  function pushMessage(role: ChatMessage['role'], text: string) {
-    setMessages((prev) => [...prev, { id: `${Date.now()}-${prev.length}`, role, text }]);
+  function openOnline() {
+    track('cs_contact', { type: 'wecom_kf' });
+    openWecomCustomerService();
  }

-  async function sendText(text: string) {
-    const trimmed = text.trim();
-    if (!trimmed || sending) return;
-    setSending(true);
-    pushMessage('user', trimmed);
-    setInput('');
-    window.setTimeout(() => {
-      pushMessage('agent', agentReply(trimmed, orderNo));
-      setSending(false);
-    }, 600);
-  }
-
-  async function loadOrderContext() {
-    if (!orderId) return null;
-    try {
-      return await request<Record<string, unknown>>('USER_H5', `/trade/orders/${orderId}`);
-    } catch {
-      return null;
-    }
-  }
-
-  useEffect(() => {
-    if (!orderId) return;
-    loadOrderContext().then((order) => {
-      if (!order) return;
-      const no = String(order.orderNo || orderNo);
-      if (no && !orderNo) {
-        pushMessage('system', `已关联订单 ${no}`);
-      }
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [orderId]);
-
  return (
-    <div className="customer-service-page">
+    <div className="customer-service-page customer-service-page--oa">
      <SubPageHeader title="在线客服" onBack={() => navigate(-1)} />

-      {orderNo && (
-        <div className="customer-service-order-card">
-          <span className="material-symbols-outlined">receipt_long</span>
-          <div>
-            <p className="customer-service-order-label">当前咨询订单</p>
-            <p className="customer-service-order-no">{orderNo}</p>
-          </div>
-        </div>
-      )}
+      <div className="customer-service-oa-body">
+        <p className="customer-service-wecom-title">杜康好客客服</p>
+        <p className="customer-service-wecom-hint">点击下方按钮，在微信内进入在线客服会话</p>

-      <div className="customer-service-chat" ref={listRef}>
-        {messages.map((m) => {
-          if (m.role === 'system') {
-            return (
-              <div key={m.id} className="customer-service-time">
-                <span>{m.text}</span>
-              </div>
-            );
-          }
-          const isUser = m.role === 'user';
-          return (
-            <div
-              key={m.id}
-              className={`customer-service-bubble-row${isUser ? ' is-user' : ' is-agent'}`}
-            >
-              {!isUser && (
-                <div className="customer-service-avatar" aria-hidden>
-                  <span className="material-symbols-outlined">support_agent</span>
-                </div>
-              )}
-              <div className={`customer-service-bubble${isUser ? ' is-user' : ''}`}>{m.text}</div>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="customer-service-quick">
-        {QUICK_QUESTIONS.map((q) => (
-          <button
-            key={q.key}
-            type="button"
-            className="customer-service-quick-btn"
-            disabled={sending}
-            onClick={() => sendText(q.label)}
-          >
-            {q.label}
-          </button>
-        ))}
-      </div>
-
-      <footer className="customer-service-inputbar">
-        <input
-          type="text"
-          className="customer-service-input"
-          placeholder="请输入您的问题..."
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') void sendText(input);
-          }}
-        />
-        <button
-          type="button"
-          className="customer-service-send"
-          disabled={sending || !input.trim()}
-          onClick={() => sendText(input)}
-        >
-          发送
+        <button type="button" className="customer-service-wecom-btn" onClick={openOnline}>
+          <span className="material-symbols-outlined">headset_mic</span>
+          联系在线客服
        </button>
-      </footer>
+
+        <a className="customer-service-phone-link" href={`tel:${tel}`}>
+          <span className="material-symbols-outlined">call</span>
+          或拨打客服电话 {CUSTOMER_SERVICE_PHONE}
+        </a>
+      </div>
    </div>
  );
 }
@@ -0,0 +1,158 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import {
+  INVOICE_KIND_LABELS,
+  INVOICE_TITLE_TYPE_LABELS,
+  type InvoiceKind,
+  type InvoiceTitleType,
+} from '@dukang/shared-types';
+import SubPageHeader from '../components/SubPageHeader';
+import { request } from '../lib/api';
+
+type OrderRow = { id: string; orderNo: string; payAmount: number | string; productName?: string };
+
+export default function InvoiceApplyPage() {
+  const navigate = useNavigate();
+  const [params] = useSearchParams();
+  const presetOrderId = params.get('orderId') || '';
+
+  const [orders, setOrders] = useState<OrderRow[]>([]);
+  const [orderId, setOrderId] = useState(presetOrderId);
+  const [titleType, setTitleType] = useState<InvoiceTitleType>('PERSONAL');
+  const [invoiceKind, setInvoiceKind] = useState<InvoiceKind>('NORMAL');
+  const [titleName, setTitleName] = useState('');
+  const [taxNo, setTaxNo] = useState('');
+  const [addressPhone, setAddressPhone] = useState('');
+  const [bankAccount, setBankAccount] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    request<{ list?: OrderRow[] }>('USER_H5', '/trade/orders?tab=completed&pageSize=50')
+      .then((res) => setOrders(res.list ?? []))
+      .catch(() => setOrders([]));
+  }, []);
+
+  useEffect(() => {
+    if (invoiceKind === 'SPECIAL') setTitleType('ENTERPRISE');
+  }, [invoiceKind]);
+
+  async function submit() {
+    if (!orderId) {
+      window.alert('请选择订单');
+      return;
+    }
+    if (!titleName.trim() || !email.trim() || !phone.trim()) {
+      window.alert('请填写抬头名称、邮箱与手机号');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await request('USER_H5', `/trade/orders/${orderId}/invoices`, {
+        method: 'POST',
+        body: JSON.stringify({
+          titleType,
+          invoiceKind,
+          titleName: titleName.trim(),
+          taxNo: taxNo.trim() || undefined,
+          addressPhone: addressPhone.trim() || undefined,
+          bankAccount: bankAccount.trim() || undefined,
+          email: email.trim(),
+          phone: phone.trim(),
+        }),
+      });
+      window.alert('发票申请已提交，总部将在 2 个工作日内开具');
+      navigate('/invoices');
+    } catch (e) {
+      window.alert(e instanceof Error ? e.message : '申请失败');
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="after-sale-page">
+      <SubPageHeader title="申请发票" onBack={() => navigate(-1)} />
+      <main className="after-sale-body after-sale-form">
+        <label className="after-sale-label">选择已完成订单</label>
+        <div className="after-sale-order-list" style={{ marginBottom: 16 }}>
+          {orders.length === 0 ? (
+            <p className="after-sale-empty">暂无已完成订单</p>
+          ) : (
+            orders.map((o) => (
+              <button
+                key={o.id}
+                type="button"
+                className={`after-sale-order-item${orderId === o.id ? ' is-selected' : ''}`}
+                onClick={() => setOrderId(o.id)}
+              >
+                <p className="after-sale-order-no">{o.orderNo}</p>
+                <p className="after-sale-order-meta">
+                  {o.productName || '商品'} · ¥{Number(o.payAmount).toFixed(2)}
+                </p>
+              </button>
+            ))
+          )}
+        </div>
+
+        <label className="after-sale-label">发票类型</label>
+        <div className="invoice-chip-row">
+          {(Object.keys(INVOICE_KIND_LABELS) as InvoiceKind[]).map((k) => (
+            <button
+              key={k}
+              type="button"
+              className={`invoice-chip${invoiceKind === k ? ' is-selected' : ''}`}
+              onClick={() => setInvoiceKind(k)}
+            >
+              {INVOICE_KIND_LABELS[k]}
+            </button>
+          ))}
+        </div>
+
+        <label className="after-sale-label">抬头类型</label>
+        <div className="invoice-chip-row">
+          {(Object.keys(INVOICE_TITLE_TYPE_LABELS) as InvoiceTitleType[]).map((t) => (
+            <button
+              key={t}
+              type="button"
+              className={`invoice-chip${titleType === t ? ' is-selected' : ''}`}
+              disabled={invoiceKind === 'SPECIAL' && t === 'PERSONAL'}
+              onClick={() => setTitleType(t)}
+            >
+              {INVOICE_TITLE_TYPE_LABELS[t]}
+            </button>
+          ))}
+        </div>
+
+        <label className="after-sale-label">抬头名称</label>
+        <input className="after-sale-input" value={titleName} onChange={(e) => setTitleName(e.target.value)} placeholder="个人姓名或公司全称" />
+
+        {(titleType === 'ENTERPRISE' || invoiceKind === 'SPECIAL') && (
+          <>
+            <label className="after-sale-label">税号</label>
+            <input className="after-sale-input" value={taxNo} onChange={(e) => setTaxNo(e.target.value)} placeholder="纳税人识别号" />
+          </>
+        )}
+
+        {invoiceKind === 'SPECIAL' && (
+          <>
+            <label className="after-sale-label">地址与电话</label>
+            <input className="after-sale-input" value={addressPhone} onChange={(e) => setAddressPhone(e.target.value)} />
+            <label className="after-sale-label">开户行与账号</label>
+            <input className="after-sale-input" value={bankAccount} onChange={(e) => setBankAccount(e.target.value)} />
+          </>
+        )}
+
+        <label className="after-sale-label">接收邮箱</label>
+        <input className="after-sale-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+        <label className="after-sale-label">手机号</label>
+        <input className="after-sale-input" value={phone} onChange={(e) => setPhone(e.target.value)} />
+
+        <button type="button" className="after-sale-primary" disabled={submitting} onClick={() => void submit()}>
+          {submitting ? '提交中…' : '提交申请'}
+        </button>
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  INVOICE_KIND_LABELS,
+  INVOICE_STATUS_LABELS,
+  INVOICE_TITLE_TYPE_LABELS,
+  type InvoiceDto,
+} from '@dukang/shared-types';
+import SubPageHeader from '../components/SubPageHeader';
+import { request } from '../lib/api';
+
+export default function InvoiceListPage() {
+  const navigate = useNavigate();
+  const [items, setItems] = useState<InvoiceDto[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    request<{ items: InvoiceDto[] }>('USER_H5', '/trade/invoices?pageSize=50')
+      .then((res) => setItems(res.items ?? []))
+      .catch(() => setItems([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="after-sale-page">
+      <SubPageHeader title="我的发票" onBack={() => navigate(-1)} />
+      <main className="after-sale-body">
+        {loading ? (
+          <p className="after-sale-empty">加载中…</p>
+        ) : items.length === 0 ? (
+          <div className="after-sale-empty-box">
+            <p className="after-sale-empty">暂无发票申请</p>
+            <button type="button" className="after-sale-primary" onClick={() => navigate('/invoices/apply')}>
+              申请发票
+            </button>
+          </div>
+        ) : (
+          <div className="after-sale-order-list">
+            {items.map((inv) => (
+              <div key={inv.id} className="after-sale-order-item after-sale-ticket-card">
+                <div className="after-sale-ticket-head">
+                  <span>
+                    {INVOICE_TITLE_TYPE_LABELS[inv.titleType]} · {INVOICE_KIND_LABELS[inv.invoiceKind]}
+                  </span>
+                  <span className="after-sale-ticket-status">
+                    {INVOICE_STATUS_LABELS[inv.status]}
+                  </span>
+                </div>
+                <p className="after-sale-order-no">{inv.titleName}</p>
+                <p className="after-sale-order-meta">
+                  {inv.invoiceNo} · 订单 {inv.orderNo ?? inv.orderId}
+                </p>
+                {inv.status === 'ISSUED' && inv.fileUrl ? (
+                  <a className="after-sale-file-link" href={inv.fileUrl} target="_blank" rel="noreferrer">
+                    查看/下载发票
+                  </a>
+                ) : null}
+              </div>
+            ))}
+            <button type="button" className="after-sale-primary" onClick={() => navigate('/invoices/apply')}>
+              申请发票
+            </button>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
@@ -17,6 +17,8 @@ const ORDER_SHORTCUTS = [

 const SERVICES = [
  { icon: 'location_on', label: '地址管理', to: '/addresses' },
+  { icon: 'assignment_return', label: '售后工单', to: '/after-sale/list' },
+  { icon: 'receipt_long', label: '我的发票', to: '/invoices' },
  { icon: 'storefront', label: '可用门店', to: '/stores' },
  { icon: 'headset_mic', label: '联系客服', badge: '在线中', action: 'cs' as const },
  { icon: 'info', label: '关于我们', action: 'about' as const },
@@ -178,6 +178,7 @@ export default function OrderDetailPage() {
    order &&
    !canPay &&
    ['PENDING_SHIP', 'PENDING_RECEIVE', 'COMPLETED', 'OUT_WAREHOUSE', 'SHIPPING'].includes(order.status);
+  const canInvoice = order?.status === 'COMPLETED';
  const productTotal = Number(order?.productAmount ?? order?.payAmount ?? 0);
  const freightTotal = Number(order?.freightAmount ?? 0);

@@ -207,22 +208,6 @@ export default function OrderDetailPage() {
    }
  }

-  async function requestRefund() {
-    if (!id || !canRefund) return;
-    setConfirming(true);
-    try {
-      await request('USER_H5', `/trade/orders/${id}/refund-requests`, {
-        method: 'POST',
-        body: JSON.stringify({ remark: '用户申请退款' }),
-      });
-      await loadOrder();
-    } catch (e) {
-      window.alert(e instanceof Error ? e.message : '申请退款失败');
-    } finally {
-      setConfirming(false);
-    }
-  }
-
  if (!order) return <div className="empty">加载中...</div>;

  return (
@@ -470,8 +455,21 @@ export default function OrderDetailPage() {
          联系客服
        </button>
        {canRefund && order?.status !== 'REFUNDING' && order?.status !== 'REFUNDED' && (
-          <button type="button" className="order-detail-action-outline" disabled={confirming} onClick={requestRefund}>
-            申请退款
+          <button
+            type="button"
+            className="order-detail-action-outline"
+            onClick={() => navigate(`/after-sale?orderId=${order.id}&type=REFUND`)}
+          >
+            申请售后
+          </button>
+        )}
+        {canInvoice && (
+          <button
+            type="button"
+            className="order-detail-action-outline"
+            onClick={() => navigate(`/invoices/apply?orderId=${order.id}`)}
+          >
+            申请发票
          </button>
        )}
        {canPay && (