fix;提交、

apps/h5-user/src/pages/CustomerServicePage.tsx

@@ -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>
   );
 }