短信验证调试成功

apps/h5-user/src/components/ContactCustomerSheet.tsx

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

apps/h5-user/src/components/PhoneVerifySheet.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useState } from 'react';
-import { bindPhone, request, saveSession } from '../lib/api';
+import { SmsScene } from '@dukang/shared-types';
+import { bindPhone, type SessionPayload } from '../lib/api';
 import { normalizePhoneInput, validateMobilePhone } from '../lib/phone';
+import { useSmsCode } from '../lib/use-sms-code';
+import { useUserSession } from '../contexts/UserSessionContext';
 
 type PhoneVerifySheetProps = {
   open: boolean;
@@ -16,18 +19,18 @@ export default function PhoneVerifySheet({
   onClose,
   onSuccess,
 }: PhoneVerifySheetProps) {
+  const { applySession } = useUserSession();
   const [phone, setPhone] = useState('');
   const [code, setCode] = useState('');
-  const [msg, setMsg] = useState('');
   const [loading, setLoading] = useState(false);
-  const [codeCooldown, setCodeCooldown] = useState(0);
+  const { sendCode, sending, codeCooldown, sentHint, error, setError, clearMessages } = useSmsCode();
 
   useEffect(() => {
     if (!open) {
       setPhone('');
       setCode('');
-      setMsg('');
-      setCodeCooldown(0);
+      setError('');
+      clearMessages();
       return;
     }
     if (defaultPhone) {
@@ -36,51 +39,32 @@ export default function PhoneVerifySheet({
         setPhone(normalized);
       }
     }
-  }, [open, defaultPhone]);
+  }, [open, defaultPhone, clearMessages, setError]);
 
-  async function sendCode() {
-    const phoneCheck = validateMobilePhone(phone);
-    if (!phoneCheck.ok) {
-      setMsg(phoneCheck.message ?? '请输入正确的手机号码');
-      return;
-    }
-    setMsg('');
-    await request('USER_H5', '/auth/sms/send', {
-      method: 'POST',
-      body: JSON.stringify({ phone, scene: 'BIND_PHONE' }),
-    });
-    setMsg('验证码已发送（Mock: 123456）');
-    setCodeCooldown(60);
-    const timer = setInterval(() => {
-      setCodeCooldown((c) => {
-        if (c <= 1) {
-          clearInterval(timer);
-          return 0;
-        }
-        return c - 1;
-      });
-    }, 1000);
+  async function onSendCode() {
+    clearMessages();
+    await sendCode(phone, SmsScene.BIND_PHONE);
   }
 
   async function submit() {
     const phoneCheck = validateMobilePhone(phone);
     if (!phoneCheck.ok) {
-      setMsg(phoneCheck.message ?? '请输入正确的手机号码');
+      setError(phoneCheck.message ?? '请输入正确的手机号码');
       return;
     }
     if (!code.trim()) {
-      setMsg('请输入验证码');
+      setError('请输入验证码');
       return;
     }
     setLoading(true);
-    setMsg('');
+    setError('');
     try {
       const session = await bindPhone(phone, code);
-      saveSession(session);
+      applySession(session as SessionPayload);
       onSuccess();
       onClose();
     } catch (e) {
-      setMsg(e instanceof Error ? e.message : '验证失败');
+      setError(e instanceof Error ? e.message : '验证失败');
     } finally {
       setLoading(false);
     }
@@ -105,7 +89,8 @@ export default function PhoneVerifySheet({
             value={phone}
             onChange={(e) => {
               setPhone(normalizePhoneInput(e.target.value));
-              setMsg('');
+              setError('');
+              clearMessages();
             }}
           />
         </div>
@@ -115,19 +100,26 @@ export default function PhoneVerifySheet({
             inputMode="numeric"
             className="login-field-input"
             placeholder="请输入验证码"
+            maxLength={6}
             value={code}
-            onChange={(e) => setCode(e.target.value)}
+            onChange={(e) => setCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
           />
           <button
             type="button"
-            className={`login-get-code${codeCooldown > 0 ? ' disabled' : ''}`}
-            disabled={codeCooldown > 0}
-            onClick={sendCode}
+            className={`login-get-code${codeCooldown > 0 || sending ? ' disabled' : ''}`}
+            disabled={codeCooldown > 0 || sending}
+            onClick={onSendCode}
           >
-            {codeCooldown > 0 ? `${codeCooldown}s 后重新获取` : '获取验证码'}
+            {sending
+              ? '发送中...'
+              : codeCooldown > 0
+                ? `${codeCooldown}s 后重新获取`
+                : '获取验证码'}
           </button>
         </div>
-        {msg && <p className="login-msg">{msg}</p>}
+        {(error || sentHint) && (
+          <p className={`login-msg${sentHint && !error ? ' login-msg--hint' : ''}`}>{error || sentHint}</p>
+        )}
         <button type="button" className="login-sms-btn" disabled={loading} onClick={submit}>
           {loading ? '验证中...' : '确认验证'}
         </button>