短信验证调试成功

2026-07-06 13:18:56 +08:00
parent 5ba69eb935
commit 1c978b8adc
62 changed files with 2491 additions and 354 deletions
@@ -0,0 +1,70 @@
+import { useNavigate } from 'react-router-dom';
+import { CUSTOMER_SERVICE_PHONE } from '@dukang/shared-types';
+import { track } from '../lib/analytics';
+
+type ContactCustomerSheetProps = {
+  orderId?: string;
+  orderNo?: string;
+  onClose: () => void;
+};
+
+export default function ContactCustomerSheet({ orderId, orderNo, onClose }: ContactCustomerSheetProps) {
+  const navigate = useNavigate();
+  const tel = CUSTOMER_SERVICE_PHONE.replace(/-/g, '');
+
+  function openPhone() {
+    track('cs_contact', { type: 'phone', orderId });
+    window.location.href = `tel:${tel}`;
+    onClose();
+  }
+
+  function openChat() {
+    track('cs_contact', { type: 'chat', orderId });
+    const qs = new URLSearchParams();
+    if (orderId) qs.set('orderId', orderId);
+    if (orderNo) qs.set('orderNo', orderNo);
+    onClose();
+    navigate(`/customer-service?${qs.toString()}`);
+  }
+
+  return (
+    <div className="contact-customer-overlay" onClick={onClose}>
+      <div className="contact-customer-sheet" onClick={(e) => e.stopPropagation()}>
+        <div className="contact-customer-head">
+          <h3>联系客服</h3>
+          <button type="button" className="contact-customer-close" aria-label="关闭" onClick={onClose}>
+            <span className="material-symbols-outlined">close</span>
+          </button>
+        </div>
+
+        <div className="contact-customer-options">
+          <button type="button" className="contact-customer-option" onClick={openPhone}>
+            <div className="contact-customer-option-icon">
+              <span className="material-symbols-outlined">call</span>
+            </div>
+            <div className="contact-customer-option-body">
+              <p className="contact-customer-option-title">拨打总部客服电话</p>
+              <p className="contact-customer-option-sub">{CUSTOMER_SERVICE_PHONE}</p>
+            </div>
+            <span className="material-symbols-outlined contact-customer-chevron">chevron_right</span>
+          </button>
+
+          <button type="button" className="contact-customer-option" onClick={openChat}>
+            <div className="contact-customer-option-icon">
+              <span className="material-symbols-outlined">chat</span>
+            </div>
+            <div className="contact-customer-option-body">
+              <p className="contact-customer-option-title">在线客服</p>
+              <p className="contact-customer-option-sub">专业客服实时解答</p>
+            </div>
+            <span className="material-symbols-outlined contact-customer-chevron">chevron_right</span>
+          </button>
+        </div>
+
+        <button type="button" className="contact-customer-cancel" onClick={onClose}>
+          取消
+        </button>
+      </div>
+    </div>
+  );
+}